"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBase from '@/components/sections/footer/FooterBase';

export default function LandingPage() {
  const handleFormSubmit = (data: Record<string, string>) => {
    console.log('Form submitted:', data);
  };

  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="large"
      background="aurora"
      cardStyle="layered-gradient"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Courses", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="WithCode"
          bottomLeftText="Learn. Code. Build."
          bottomRightText="hello@withcode.io"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="WithCode"
          description="Master modern programming languages and build real-world applications. Learn from industry experts with hands-on projects."
          buttons={[
            { text: "Explore Courses", href: "features" },
            { text: "Get Started", href: "contact" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/person-computing-software-code-laptop_482257-85707.jpg"
          imageAlt="Students coding and learning together"
          showDimOverlay={true}
          logoLineHeight={1.2}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          title="Empowering the next generation of developers through practical, industry-relevant coding education and mentorship."
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Learn Our Mission", href: "features" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardThree
          title="Our Course Programs"
          description="Choose from comprehensive coding bootcamps designed to launch your tech career"
          tag="Courses"
          features={[
            {
              id: "01",              title: "Full Stack Web Development",              description: "Master HTML, CSS, JavaScript, React, Node.js, and databases to build complete web applications.",              imageSrc: "https://img.b2bpic.net/free-photo/programming-background-with-html-text_23-2150040420.jpg",              imageAlt: "Web development course"
            },
            {
              id: "02",              title: "Mobile App Development",              description: "Build cross-platform mobile apps using React Native and Flutter for iOS and Android.",              imageSrc: "https://img.b2bpic.net/free-photo/html-programming-advanced-technology-web-concept_53876-120338.jpg",              imageAlt: "Mobile app development"
            },
            {
              id: "03",              title: "Data Science & AI",              description: "Learn Python, machine learning, data analysis, and artificial intelligence fundamentals.",              imageSrc: "https://img.b2bpic.net/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010129.jpg",              imageAlt: "Data science course"
            },
            {
              id: "04",              title: "Cloud & DevOps",              description: "Master AWS, Docker, Kubernetes, and CI/CD pipelines for modern infrastructure.",              imageSrc: "https://img.b2bpic.net/free-photo/programming-background-with-html_23-2150038838.jpg",              imageAlt: "Cloud computing course"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="four-items-2x2-equal-grid"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Flexible Pricing Plans"
          description="Choose the plan that best fits your learning goals and budget"
          tag="Pricing"
          plans={[
            {
              id: "starter",              tag: "Starter Plan",              price: "$99",              period: "/month",              description: "Perfect for beginners getting started with coding fundamentals.",              button: { text: "Enroll Now", href: "contact" },
              featuresTitle: "What's Included:",              features: [
                "Access to 2 foundational courses",                "Weekly live coding sessions",                "Community forum support",                "30-day money-back guarantee"
              ]
            },
            {
              id: "professional",              tag: "Professional Plan",              price: "$299",              period: "/month",              description: "Comprehensive curriculum with mentorship for serious learners.",              button: { text: "Enroll Now", href: "contact" },
              featuresTitle: "What's Included:",              features: [
                "Access to all 10+ courses",                "Daily live Q&A sessions",                "Personal mentor (1-on-1 support)",                "Project portfolio reviews",                "Career guidance sessions",                "Job placement assistance"
              ]
            },
            {
              id: "enterprise",              tag: "Enterprise Plan",              price: "Custom",              period: "pricing",              description: "Tailored solutions for teams and organizations.",              button: { text: "Contact Sales", href: "contact" },
              featuresTitle: "What's Included:",              features: [
                "Custom curriculum development",                "Team training programs",                "On-site or online delivery",                "Dedicated support team",                "Performance analytics",                "Bulk licensing discounts"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="Student Success Stories"
          description="Hear from our graduates who've transformed their careers"
          tag="Testimonials"
          testimonials={[
            {
              id: "1",              name: "Rahul Kumar",              role: "Full Stack Developer",              testimonial: "WithCode transformed my career. In just 6 months, I went from zero coding knowledge to landing a job as a full stack developer at a top tech company.",              imageSrc: "https://img.b2bpic.net/free-photo/blonde-young-woman-smiling-portrait-wearing-blue-gentle-shirt-building_158595-6609.jpg",              imageAlt: "Rahul Kumar"
            },
            {
              id: "2",              name: "Priya Singh",              role: "Data Scientist",              testimonial: "The mentorship and hands-on projects at WithCode were invaluable. The practical approach helped me build a strong portfolio that landed me interviews.",              imageSrc: "https://img.b2bpic.net/free-photo/blonde-young-woman-smiling-portrait-wearing-blue-gentle-shirt-building_158595-6612.jpg",              imageAlt: "Priya Singh"
            },
            {
              id: "3",              name: "Amit Patel",              role: "Mobile App Developer",              testimonial: "I loved the community aspect and daily Q&A sessions. The instructors really care about your success and provide genuine guidance.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg",              imageAlt: "Amit Patel"
            },
            {
              id: "4",              name: "Sarah Johnson",              role: "DevOps Engineer",              testimonial: "The curriculum covers everything you need in the modern tech industry. I'm now working on cloud infrastructure projects I never thought possible.",              imageSrc: "https://img.b2bpic.net/free-photo/cheerful-young-man-holding-folder-outdoor_74855-2121.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "5",              name: "Miguel Rodriguez",              role: "Junior Developer",              testimonial: "Best investment I made in myself. The job placement assistance was exceptional, and I secured a position within weeks of finishing.",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-smiling-business-man-standing-outside_1262-3492.jpg",              imageAlt: "Miguel Rodriguez"
            },
            {
              id: "6",              name: "Emma Wilson",              role: "Software Engineer",              testimonial: "The project-based learning approach is fantastic. I built real applications that I could add to my professional portfolio immediately.",              imageSrc: "https://img.b2bpic.net/free-photo/business-woman-with-tablet-street_23-2148213482.jpg",              imageAlt: "Emma Wilson"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Find answers to common questions about WithCode programs and enrollment"
          tag="Help"
          faqs={[
            {
              id: "1",              title: "Do I need prior coding experience?",              content: "No, we welcome complete beginners! Our Starter and Beginner tracks assume zero prior knowledge. If you have experience, start with our intermediate or advanced courses."
            },
            {
              id: "2",              title: "What is the course duration?",              content: "Most programs are designed to be completed in 3-6 months with consistent effort (15-20 hours per week). You can learn at your own pace, and access content for 1 year after enrollment."
            },
            {
              id: "3",              title: "Is there a job guarantee?",              content: "While we don't guarantee jobs, our Professional and Enterprise plans include job placement assistance, career coaching, and portfolio review. 87% of our graduates secure relevant positions within 3 months."
            },
            {
              id: "4",              title: "Can I pause my subscription?",              content: "Yes, you can pause for up to 3 months without losing access. Simply reach out to our support team to manage your subscription flexibility."
            },
            {
              id: "5",              title: "What support is available?",              content: "All plans include community forum access. Professional and Enterprise plans get weekly live Q&A, personal mentors, and dedicated support from our team."
            },
            {
              id: "6",              title: "Are certificates provided?",              content: "Yes! Upon course completion, you receive a digital certificate that's verified on LinkedIn and other platforms. Employers recognize WithCode certification."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/people-working-call-center_23-2149288189.jpg"
          imageAlt="Customer support team"
          mediaPosition="right"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Ready to Start Your Coding Journey?"
          description="Fill out the form below and our team will get in touch within 24 hours to discuss which course is right for you."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true },
            { name: "phone", type: "tel", placeholder: "Phone Number", required: false },
            { name: "experience", type: "text", placeholder: "Coding Experience Level (Beginner/Intermediate/Advanced)", required: true }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your coding goals and what you'd like to learn...",            rows: 5,
            required: true
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/young-colleagues-sitting-while-work-with-laptops-desk_171337-16969.jpg"
          imageAlt="WithCode team collaboration"
          mediaPosition="right"
          buttonText="Send Inquiry"
          onSubmit={handleFormSubmit}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="WithCode"
          copyrightText="© 2025 WithCode. All rights reserved."
          columns={[
            {
              title: "Courses",              items: [
                { label: "Web Development", href: "features" },
                { label: "Mobile Apps", href: "features" },
                { label: "Data Science", href: "features" },
                { label: "Cloud & DevOps", href: "features" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "about" },
                { label: "Our Mission", href: "about" },
                { label: "Testimonials", href: "testimonials" },
                { label: "Blog", href: "https://blog.withcode.io" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact Us", href: "contact" },
                { label: "FAQ", href: "faq" },
                { label: "Pricing", href: "pricing" },
                { label: "hello@withcode.io", href: "mailto:hello@withcode.io" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}