"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Mail, Phone, MessageCircle } from 'lucide-react';

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="medium"
      background="aurora"
      cardStyle="gradient-bordered"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="TechAcademy"
          navItems={[
            { name: "Courses", id: "/courses" },
            { name: "About", id: "/about" },
            { name: "Pricing", id: "/pricing" },
            { name: "Contact", id: "/contact" }
          ]}
        />
      </div>

      <div id="contact-main" data-section="contact-main">
        <ContactCenter
          tag="Get in Touch"
          title="Ready to Start Your Tech Career?"
          description="Have questions about our courses, pricing, or career support? We're here to help you take the next step in your technology journey. Get personalized guidance from our education advisors."
          tagIcon={Mail}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email address"
          buttonText="Get Started"
          termsText="By submitting, you agree to receive course information and career guidance. Unsubscribe anytime."
        />
      </div>

      <div id="support-info" data-section="support-info">
        <ContactCenter
          tag="Support Options"
          title="Multiple Ways to Reach Us"
          description="Choose the support method that works best for you. Our team is available to answer questions about courses, technical issues, or career guidance."
          tagIcon={MessageCircle}
          useInvertedBackground="invertDefault"
          inputPlaceholder="Describe your question or concern"
          buttonText="Send Message"
          termsText="We typically respond within 24 hours during business days."
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find quick answers to the most common questions about TechAcademy courses and services"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "How do I get started with my first course?",
              content: "Simply create an account, choose your plan, and browse our course catalog. We recommend taking our skills assessment to get personalized course recommendations based on your current level and career goals."
            },
            {
              id: "2",
              title: "What if I need help during a course?",
              content: "All students have access to our community forums, and paid plan members get direct access to instructors and mentors. We also offer live Q&A sessions and one-on-one support calls."
            },
            {
              id: "3",
              title: "Can I get a refund if I'm not satisfied?",
              content: "Yes! We offer a 30-day money-back guarantee on all plans. If you're not completely satisfied with your learning experience, contact us for a full refund within 30 days of enrollment."
            },
            {
              id: "4",
              title: "Do you offer corporate training programs?",
              content: "Absolutely! We provide customized corporate training programs for teams of all sizes. Contact our enterprise sales team to discuss your organization's specific training needs and goals."
            },
            {
              id: "5",
              title: "How does job placement assistance work?",
              content: "Our career services team helps Professional and Enterprise plan members with resume reviews, interview preparation, and connecting with our network of hiring partners. We also offer salary negotiation guidance."
            },
            {
              id: "6",
              title: "What technical requirements do I need?",
              content: "You'll need a computer with internet access and a modern web browser. Some courses may require specific software, but we provide detailed setup instructions and support for all technical requirements."
            }
          ]}
        />
      </div>

      <FooterMedia
        imageSrc="https://img.b2bpic.net/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010118.jpg"
        imageAlt="Technology and digital transformation"
        logoText="TechAcademy"
        copyrightText="© 2025 TechAcademy. All rights reserved."
        columns={[
          {
            title: "Courses",
            items: [
              { label: "All Courses", href: "/courses" },
              { label: "Web Development", href: "/courses" },
              { label: "Data Science", href: "/courses" },
              { label: "Mobile Apps", href: "/courses" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Careers", href: "#" },
              { label: "Blog", href: "#" },
              { label: "Contact", href: "/contact" }
            ]
          },
          {
            title: "Support",
            items: [
              { label: "Help Center", href: "#" },
              { label: "Community", href: "#" },
              { label: "Terms of Service", href: "#" },
              { label: "Privacy Policy", href: "#" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}