"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroSplit from "@/components/sections/hero/HeroSplit";
import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import FaqBase from "@/components/sections/faq/FaqBase";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Sparkles, BookOpen, Target, Zap, Award, Heart, HelpCircle, Rocket, Twitter, Linkedin, Github, Mail, Users, TrendingUp, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="small"
      sizing="large"
      background="circleGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="CodeLearn"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Courses", id: "features" },
            { name: "About", id: "about" },
            { name: "Learn Path", id: "process" },
            { name: "Testimonials", id: "testimonials" },
          ]}
          button={{ text: "Start Learning", href: "#contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="Master Coding at Your Own Pace"
          description="Join thousands of learners transforming their careers with our interactive coding platform. From beginner to expert, we have the perfect course to accelerate your growth."
          tag="Start Your Journey"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "plain" }}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AfKRAUYaDLszeLQYjCJmj2Js2X/a-modern-vibrant-coding-learning-dashboa-1772978274282-c017a009.png"
          imageAlt="Interactive coding learning dashboard"
          mediaAnimation="blur-reveal"
          imagePosition="right"
          buttons={[
            { text: "Explore Courses", href: "features" },
            { text: "Watch Demo", href: "#" },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardEight
          title="Our Top Courses"
          description="Discover our most popular learning paths designed by industry experts"
          tag="Featured Courses"
          tagIcon={BookOpen}
          tagAnimation="slide-up"
          features={[
            {
              id: 1,
              title: "Web Development",              description: "Master HTML, CSS, and JavaScript to build modern, responsive websites and web applications",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AfKRAUYaDLszeLQYjCJmj2Js2X/vibrant-illustration-showcasing-web-deve-1772978273693-794ebc87.png",              imageAlt: "Web development course illustration"
            },
            {
              id: 2,
              title: "Python Programming",              description: "Learn Python fundamentals and advanced concepts for data science and automation",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AfKRAUYaDLszeLQYjCJmj2Js2X/creative-python-programming-course-illus-1772978274489-0b1bd8ba.png",              imageAlt: "Python programming course illustration"
            },
            {
              id: 3,
              title: "JavaScript Mastery",              description: "Dive deep into JavaScript to create interactive and dynamic web experiences",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AfKRAUYaDLszeLQYjCJmj2Js2X/dynamic-javascript-course-illustration-w-1772978276101-183c45b3.png",              imageAlt: "JavaScript course illustration"
            },
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[{ text: "View All Courses", href: "#" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="About CodeLearn"
          tagIcon={Target}
          tagAnimation="slide-up"
          title="Empowering the Next Generation of Developers"
          description="CodeLearn is dedicated to making quality coding education accessible to everyone. Our platform combines interactive lessons, real-world projects, and mentorship to help learners succeed in their coding journey. With a community of passionate educators and peers, you'll never learn alone."
          metrics={[
            { value: "50,000+", title: "Active Learners" },
            { value: "95%", title: "Success Rate" },
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AfKRAUYaDLszeLQYjCJmj2Js2X/beautiful-illustration-of-a-diverse-lear-1772978274379-c61d1d1a.png"
          imageAlt="Diverse coding learning community"
          mediaAnimation="blur-reveal"
          metricsAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="process" data-section="process">
        <FeatureCardEight
          title="Your Learning Path"
          description="Follow our proven methodology to go from beginner to professional developer"
          tag="How It Works"
          tagIcon={Zap}
          tagAnimation="slide-up"
          features={[
            {
              id: 1,
              title: "Choose Your Path",              description: "Select from 20+ carefully curated courses tailored to your goals and experience level",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AfKRAUYaDLszeLQYjCJmj2Js2X/modern-illustration-for-choose-your-path-1772978274505-7d1a832c.png",              imageAlt: "Learning path selection step"
            },
            {
              id: 2,
              title: "Learn & Practice",              description: "Engage with interactive lessons, coding challenges, and real-time feedback from our AI-powered system",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AfKRAUYaDLszeLQYjCJmj2Js2X/engaging-illustration-for-learn-practice-1772978274022-a0e0a89a.png",              imageAlt: "Learn and practice step"
            },
            {
              id: 3,
              title: "Build & Showcase",              description: "Create real-world projects, build your portfolio, and showcase your skills to potential employers",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AfKRAUYaDLszeLQYjCJmj2Js2X/inspiring-illustration-for-build-project-1772978274669-809f4a19.png",              imageAlt: "Build projects step"
            },
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Our Impact"
          description="The numbers speak for themselves about our commitment to education"
          tag="Results"
          tagIcon={Award}
          tagAnimation="slide-up"
          metrics={[
            { id: "1", icon: Users, title: "Learners", value: "50,000+" },
            { id: "2", icon: TrendingUp, title: "Success Rate", value: "95%" },
            { id: "3", icon: Zap, title: "Projects Built", value: "100,000+" },
            { id: "4", icon: Star, title: "Avg. Rating", value: "4.9/5" },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="What Our Learners Say"
          description="Real stories from real students who transformed their careers with CodeLearn"
          tag="Success Stories"
          tagIcon={Heart}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              role: "Junior Developer",              company: "Tech Innovations Inc",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AfKRAUYaDLszeLQYjCJmj2Js2X/professional-portrait-of-a-successful-co-1772978273620-ad6b4388.png",              imageAlt: "Sarah Chen testimonial"
            },
            {
              id: "2",              name: "Marcus Johnson",              role: "Full Stack Engineer",              company: "Digital Solutions Co",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AfKRAUYaDLszeLQYjCJmj2Js2X/professional-headshot-of-an-accomplished-1772978274467-e7b4e18a.png",              imageAlt: "Marcus Johnson testimonial"
            },
            {
              id: "3",              name: "Priya Patel",              role: "Frontend Specialist",              company: "Creative Studios",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AfKRAUYaDLszeLQYjCJmj2Js2X/vibrant-portrait-of-a-diverse-coding-lea-1772978274153-960fdb21.png",              imageAlt: "Priya Patel testimonial"
            },
            {
              id: "4",              name: "David Rodriguez",              role: "Senior Developer",              company: "Cloud Systems Ltd",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AfKRAUYaDLszeLQYjCJmj2Js2X/professional-portrait-of-a-tech-professi-1772978275040-e0e94614.png",              imageAlt: "David Rodriguez testimonial"
            },
          ]}
          kpiItems={[
            { value: "180+", label: "Hours of Content" },
            { value: "96%", label: "Employment Rate" },
            { value: "15+", label: "Industry Partners" },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Have questions? We've got answers to help you get started"
          tag="Help & Support"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          faqs={[
            {
              id: "1",              title: "Do I need programming experience to start?",              content: "No! Our courses are designed for beginners with no prior coding experience. We start from the fundamentals and progress at a comfortable pace. Each course includes detailed explanations and hands-on practice."
            },
            {
              id: "2",              title: "How long does it take to complete a course?",              content: "Course duration varies depending on the program and your pace. Most courses can be completed in 4-12 weeks with 5-10 hours of study per week. You can learn at your own pace without time pressure."
            },
            {
              id: "3",              title: "Will I get a certificate after completing a course?",              content: "Yes! Upon successful completion of any course, you'll receive a certificate that you can share on LinkedIn and include in your portfolio. These certificates are recognized by many employers in the tech industry."
            },
            {
              id: "4",              title: "Can I get help if I'm stuck on a problem?",              content: "Absolutely! You'll have access to our community forums, peer support, and experienced mentors. We also provide detailed code solutions and explanations for every challenge in our platform."
            },
            {
              id: "5",              title: "What if I don't like the course?",              content: "We offer a 30-day money-back guarantee. If you're not satisfied with your purchase, you can request a full refund. We're confident you'll love the experience, but we want you to feel completely secure in your choice."
            },
            {
              id: "6",              title: "Are there any job opportunities after completing courses?",              content: "Yes! We partner with hundreds of tech companies and provide job placement assistance. Our alumni have successfully landed positions at startups and Fortune 500 companies worldwide."
            },
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Begin?"
          tagIcon={Rocket}
          tagAnimation="slide-up"
          title="Start Your Coding Journey Today"
          description="Join thousands of learners who are already transforming their careers. Get instant access to all courses, community support, and mentorship."
          buttons={[
            { text: "Claim Free Trial", href: "#" },
            { text: "Browse All Courses", href: "features" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "canvas-reveal" }}
          useInvertedBackground={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="CodeLearn"
          copyrightText="© 2025 CodeLearn. All rights reserved."
          socialLinks={[
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
            { icon: Github, href: "https://github.com", ariaLabel: "GitHub" },
            { icon: Mail, href: "mailto:hello@codelearn.com", ariaLabel: "Email" },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
