"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Mail, Zap } from 'lucide-react';

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="smallMedium"
      sizing="largeSmallSizeMediumTitles"
      background="floatingGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="IT Home"
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "about" },
            { name: "Courses", id: "courses" },
            { name: "Team", id: "team" },
            { name: "Testimonials", id: "testimonials" }
          ]}
          button={{
            text: "Enroll Now",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Get In Touch With IT Home"
          description="Have questions about our programs? Want to schedule a consultation? We're here to help you start your journey to a rewarding tech career."
          background={{ variant: "sparkles-gradient" }}
          tag="Contact Us"
          tagIcon={Zap}
          imageSrc="https://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg"
          imageAlt="IT Home contact page"
          buttons={[
            { text: "Back to Home", href: "/" }
          ]}
        />
      </div>

      <div id="contact-form" data-section="contact-form">
        <ContactSplit
          tag="Contact Information"
          tagIcon={Mail}
          title="Let's Connect"
          description="Fill out the form below and our team will get back to you within 24 hours. Whether you have questions about our programs, need financial aid information, or want to schedule a campus tour, we're ready to help."
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/team-collaboration-IT-professionals_146671-16510.jpg"
          imageAlt="IT Home team ready to help"
          mediaPosition="right"
          inputPlaceholder="your@email.com"
          buttonText="Send Message"
          termsText="We respect your privacy and will only use your email to respond to your inquiry."
          onSubmit={(email) => {
            console.log('Contact form submitted with email:', email);
            // Handle form submission here
          }}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="IT Home"
          copyrightText="© 2025 IT Home. All rights reserved."
          columns={[
            {
              title: "Programs",              items: [
                { label: "Web Development", href: "/" },
                { label: "Data Science", href: "/" },
                { label: "Python Programming", href: "/" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "/" },
                { label: "Our Team", href: "/" },
                { label: "Careers", href: "contact" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact Us", href: "contact" },
                { label: "FAQ", href: "/" },
                { label: "Student Portal", href: "https://portal.ithome.example.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
