"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { CheckCircle } from "lucide-react";
import Link from "next/link";

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="none"
      cardStyle="glass-depth"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="TechAcademy"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Courses", id: "/courses" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Enroll Now",            href: "/contact"
          }}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to Start Learning?"
          ctaDescription="Join thousands of students already transforming their tech careers with TechAcademy."
          ctaButton={{
            text: "Enroll Today",            href: "#contact"
          }}
          ctaIcon={CheckCircle}
          faqs={[
            {
              id: "1",              title: "How do I enroll in a course?",              content: "Simply click the 'Enroll Now' button, choose your course, and complete the registration. You'll get instant access to course materials."
            },
            {
              id: "2",              title: "What if I'm not satisfied with my course?",              content: "We offer a 30-day money-back guarantee if you're not completely satisfied with your learning experience."
            },
            {
              id: "3",              title: "Can I switch courses after enrollment?",              content: "Yes! You can request a course change within the first 14 days of enrollment at no additional cost."
            }
          ]}
          useInvertedBackground="noInvert"
          animationType="slide-up"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          faqs={[
            {
              id: "1",              title: "What are the prerequisites for enrolling?",              content: "Most of our courses are designed for beginners with no prior experience. We recommend basic computer literacy. Advanced courses require completion of foundational courses or equivalent experience."
            },
            {
              id: "2",              title: "How long do the courses take?",              content: "Course duration varies from 4 weeks to 12 weeks depending on the program. You can study at your own pace with lifetime access to course materials."
            },
            {
              id: "3",              title: "Do you offer job placement assistance?",              content: "Yes! We provide resume reviews, interview coaching, and active placement support. Our 95% job placement rate speaks to the effectiveness of our program."
            },
            {
              id: "4",              title: "What payment options are available?",              content: "We accept credit cards, debit cards, and installment plans. We also offer scholarships for qualified candidates."
            },
            {
              id: "5",              title: "Can I access courses on mobile devices?",              content: "Absolutely! All our courses are fully responsive and accessible on smartphones, tablets, and desktops. Download content for offline learning."
            },
            {
              id: "6",              title: "Is there a certificate upon completion?",              content: "Yes, you'll receive an industry-recognized certificate that you can add to your LinkedIn profile and resume."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/person-front-computer-working-html_23-2150040428.jpg"
          imageAlt="Customer support team"
          mediaPosition="left"
          title="Frequently Asked Questions"
          description="Find answers to common questions about our courses and enrollment"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="smooth"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/html-css-collage-concept-with-person_23-2150061986.jpg"
          imageAlt="Graduation and success celebration"
          logoText="TechAcademy"
          copyrightText="© 2025 TechAcademy. All rights reserved."
          columns={[
            {
              title: "Courses",              items: [
                { label: "Web Development", href: "/courses" },
                { label: "Python Programming", href: "/courses" },
                { label: "Data Science", href: "/courses" },
                { label: "Cybersecurity", href: "/courses" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Team", href: "/about" },
                { label: "Careers", href: "#" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact Us", href: "/contact" },
                { label: "FAQ", href: "#faq" },
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}