"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import SplitAboutCards from '@/components/sections/about/SplitAboutCards';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import PricingCardSix from '@/components/sections/pricing/PricingCardSix';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactText from '@/components/sections/contact/ContactText';
import FooterSocial from '@/components/sections/footer/FooterSocial';
import { Code, GraduationCap, Zap, Users, Star, HelpCircle, Github, Linkedin, Twitter, Mail } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="largeSmallSizeMediumTitles"
      background="animatedGrid"
      cardStyle="glass-depth"
      primaryButtonStyle="outline"
      secondaryButtonStyle="outline"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Code with me"
          navItems={[
            { name: "About", id: "about" },
            { name: "Courses", id: "courses" },
            { name: "Instructors", id: "team" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{
            text: "Enroll Now",
            href: "#pricing"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Master Coding Skills with Expert Instructors"
          description="Learn programming from industry professionals. Start your coding journey today with hands-on projects and real-world guidance."
          tag="Learn to Code"
          tagIcon={Code}
          kpis={[
            { value: "5000+", label: "Students Trained" },
            { value: "95%", label: "Success Rate" },
            { value: "12+", label: "Courses Offered" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766400729817-xua7356z.png"
          imageAlt="Students learning to code"
          imagePosition="right"
          buttons={[
            { text: "Start Learning", href: "#courses" },
            { text: "View Courses", href: "#pricing" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAboutCards
          title="About Code with me"
          description="We are dedicated to making coding education accessible to everyone. Our expert instructors combine years of industry experience with a passion for teaching."
          tag="Our Mission"
          features={[
            {
              id: "expert-instructors",
              title: "Expert Instructors",
              description: "Learn from professionals with 10+ years of experience in software development and technology.",
              label: "20+ Experts"
            },
            {
              id: "hands-on-learning",
              title: "Hands-On Projects",
              description: "Build real-world projects that showcase your skills and help you stand out to employers.",
              label: "100+ Projects"
            }
          ]}
          buttons={[{ text: "Learn More", href: "#" }]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="courses" data-section="courses">
        <FeatureCardEight
          title="Our Learning Path"
          description="Progress through structured modules designed to take you from beginner to professional developer"
          tag="Curriculum"
          tagIcon={GraduationCap}
          features={[
            {
              id: 1,
              title: "Foundation Basics",
              description: "Learn HTML, CSS, and JavaScript fundamentals with interactive exercises and quizzes.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320177542-9om9tyxf.jpg"
            },
            {
              id: 2,
              title: "Advanced Development",
              description: "Master React, Node.js, and modern frameworks with real-world project applications.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766400732838-4uulpve1.jpg"
            },
            {
              id: 3,
              title: "Career Readiness",
              description: "Portfolio building, interview prep, and job placement support to launch your tech career.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766400730808-6l24nyjr.jpg"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[{ text: "Explore Curriculum", href: "#pricing" }]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardSix
          title="Choose Your Course"
          description="Select the perfect program for your goals and budget"
          tag="Pricing"
          tagIcon={Zap}
          plans={[
            {
              id: "beginner",
              price: "$199",
              subtitle: "Perfect for getting started with coding",
              features: [
                "6-week course duration",
                "40+ hours of content",
                "Project assignments",
                "Email support",
                "Certificate of completion"
              ],
              buttons: [{ text: "Enroll Now", href: "#" }],
              bottomNotes: ["Lifetime access", "Money-back guarantee"]
            },
            {
              id: "professional",
              price: "$499",
              subtitle: "For intermediate developers looking to advance",
              features: [
                "12-week course duration",
                "100+ hours of content",
                "Real-world projects",
                "1-on-1 mentoring",
                "Career coaching",
                "Certificate of completion"
              ],
              buttons: [{ text: "Enroll Now", href: "#" }],
              bottomNotes: ["Lifetime access", "Job guarantee"]
            },
            {
              id: "bootcamp",
              price: "$999",
              subtitle: "Intensive program for career changers",
              features: [
                "16-week intensive bootcamp",
                "200+ hours of content",
                "Daily mentoring sessions",
                "Portfolio development",
                "Interview preparation",
                "Job placement assistance"
              ],
              buttons: [{ text: "Apply Now", href: "#" }],
              bottomNotes: ["Lifetime access", "Career guarantee"]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardOne
          title="Meet Our Expert Instructors"
          description="Learn from industry professionals committed to your success"
          tag="Team"
          tagIcon={Users}
          members={[
            {
              id: "1",
              name: "Alex Johnson",
              role: "Lead Instructor",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140104217-wfflli6f.jpg",
              imageAlt: "Alex Johnson"
            },
            {
              id: "2",
              name: "Sarah Chen",
              role: "Full Stack Expert",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184200876-idjoemdc.jpg",
              imageAlt: "Sarah Chen"
            },
            {
              id: "3",
              name: "Michael Rodriguez",
              role: "React Specialist",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890620033-sckgfvwd.jpg",
              imageAlt: "Michael Rodriguez"
            },
            {
              id: "4",
              name: "Emma Wilson",
              role: "Career Coach",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766185880597-ieb2jad3.jpg",
              imageAlt: "Emma Wilson"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",
              name: "James Park",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg",
              imageAlt: "James Park"
            },
            {
              id: "2",
              name: "Lisa Zhang",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140151637-4n68pd8r.jpg",
              imageAlt: "Lisa Zhang"
            },
            {
              id: "3",
              name: "David Thompson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163678723-295psgl3.jpg",
              imageAlt: "David Thompson"
            },
            {
              id: "4",
              name: "Maria Garcia",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184724760-wxlm9bjg.jpg",
              imageAlt: "Maria Garcia"
            },
            {
              id: "5",
              name: "Robert Kim",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320181151-p24uxfcb.jpg",
              imageAlt: "Robert Kim"
            }
          ]}
          cardTitle="Join thousands of students who transformed their careers with Code with me"
          cardTag="Student Success Stories"
          cardTagIcon={Star}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Find answers to common questions about our courses and enrollment process"
          tag="Help"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "1",
              title: "Do I need prior coding experience?",
              content: "No, our beginner courses are designed for people with no coding experience. We start with the fundamentals and progress at a comfortable pace."
            },
            {
              id: "2",
              title: "What technologies do you teach?",
              content: "We teach modern web technologies including HTML, CSS, JavaScript, React, Node.js, and more. Our curriculum is regularly updated to match industry standards."
            },
            {
              id: "3",
              title: "How long are the courses?",
              content: "Our courses range from 6 weeks for beginner level to 16 weeks for intensive bootcamp programs. You can learn at your own pace with lifetime access."
            },
            {
              id: "4",
              title: "Do you offer job placement help?",
              content: "Yes, our Professional and Bootcamp plans include career coaching, resume review, interview preparation, and job placement assistance."
            },
            {
              id: "5",
              title: "Is there a money-back guarantee?",
              content: "Yes, we offer a 30-day money-back guarantee on all courses. If you're not satisfied, we'll refund your money completely."
            },
            {
              id: "6",
              title: "Can I get a certificate?",
              content: "Yes, all graduates receive a certificate of completion that demonstrates your skills to potential employers."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          showCard={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to start your coding journey? Get in touch with us today to enroll in our next cohort or request more information about our programs."
          animationType="background-highlight"
          buttons={[
            { text: "Get in Touch", href: "mailto:hello@codewithme.com" },
            { text: "Schedule Demo", href: "#" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSocial
          logoText="Code with me"
          copyrightText="© Code with me, Inc. 2025. All rights reserved."
          columns={[
            {
              title: "Product",
              items: [
                { label: "Courses", href: "#pricing" },
                { label: "Instructors", href: "#team" },
                { label: "Curriculum", href: "#courses" },
                { label: "FAQ", href: "#faq" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About", href: "#about" },
                { label: "Contact", href: "#contact" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms & Conditions", href: "#" },
                { label: "Code of Conduct", href: "#" }
              ]
            }
          ]}
          socialLinks={[
            { icon: Github, href: "https://github.com", ariaLabel: "GitHub" },
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
            { icon: Mail, href: "mailto:hello@codewithme.com", ariaLabel: "Email" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}