"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Phone } from 'lucide-react';

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="mediumSmall"
      sizing="large"
      background="floatingGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Home", id: "home" },
            { name: "Courses", id: "courses" },
            { name: "About", id: "about" },
            { name: "Instructors", id: "instructors" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Enroll Now", href: "contact" }}
          brandName="Engineer"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to transform your tech career?"
          ctaDescription="Schedule a personalized consultation with our admissions team to discuss your learning goals and find the perfect program for you."
          ctaButton={{ text: "Schedule a Call", href: "https://calendly.com/engineer-admissions" }}
          ctaIcon={Phone}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          accordionAnimationType="smooth"
          faqs={[
            {
              id: "1",              title: "How do I apply?",              content: "Applications are simple and quick. Visit our application portal, fill out basic information, take a brief assessment, and schedule an interview with our admissions team. Most decisions are made within 48 hours."
            },
            {
              id: "2",              title: "When are the next cohorts starting?",              content: "We offer rolling admissions with cohorts starting every month. New Full Stack programs begin on the 1st of each month, with Mobile Development starting mid-month and Data Science programs available on rotating schedules."
            },
            {
              id: "3",              title: "What happens after I enroll?",              content: "After enrollment, you'll receive pre-course materials, get access to our learning platform, join the student community, and have your first orientation meeting scheduled. You'll also be paired with a peer mentor."
            }
          ]}
        />
      </div>

      <FooterBase
        logoText="Engineer"
        copyrightText="© 2025 Engineer IT School. All rights reserved."
        columns={[
          {
            title: "Programs",            items: [
              { label: "Web Development", href: "courses" },
              { label: "Mobile Development", href: "courses" },
              { label: "Data Science", href: "courses" },
              { label: "Cloud & DevOps", href: "courses" }
            ]
          },
          {
            title: "Company",            items: [
              { label: "About", href: "about" },
              { label: "Team", href: "instructors" },
              { label: "Blog", href: "blog" },
              { label: "Careers", href: "careers" }
            ]
          },
          {
            title: "Resources",            items: [
              { label: "FAQ", href: "faq" },
              { label: "Contact Us", href: "contact" },
              { label: "Alumni", href: "alumni" },
              { label: "Support", href: "support" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}
