"use client";

import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogoBillboardSplitImage from '@/components/sections/hero/HeroLogoBillboardSplitImage';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardEighteen from '@/components/sections/feature/FeatureCardEighteen';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Sparkles, Star, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="large"
      sizing="medium"
      background="fluid"
      cardStyle="glass-flat"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Future Great Coder"
          navItems={[
            { name: "About", id: "about" },
            { name: "Courses", id: "pricing" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Enroll Now", href: "#contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplitImage
          logoText="FUTURE GREAT CODER"
          description="Learn coding from industry experts. Master Python, JavaScript, Web Development, and more. Transform your future with practical coding skills that matter in today's tech industry."
          buttons={[
            { text: "Start Learning", href: "#pricing" },
            { text: "Learn More", href: "#about" }
          ]}
          layoutOrder="default"
          splitImageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766400729817-xua7356z.png"
          splitImageAlt="Student learning to code"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766400730808-6l24nyjr.jpg"
          imageAlt="Modern coding classroom"
          frameStyle="card"
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="About Future Great Coder"
          description={[
            "Future Great Coder is an innovative IT school dedicated to teaching the next generation of coders and developers. We provide comprehensive, hands-on coding education that bridges the gap between theoretical knowledge and real-world application.",
            "Our experienced instructors bring industry expertise to every lesson. We focus on building not just coding skills, but professional competencies that prepare you for successful careers in technology.",
            "With flexible course structures and personalized learning paths, we ensure every student can learn at their own pace while receiving the support they need to succeed."
          ]}
          buttons={[{ text: "View Courses", href: "#pricing" }]}
          showBorder={true}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardEighteen
          title="Traditional vs Modern Learning"
          description="See how our innovative approach transforms coding education"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          negativeCard={{
            title: "Traditional Approach",
            items: [
              "Outdated curriculum",
              "Passive learning",
              "Limited real-world projects",
              "One-size-fits-all pace",
              "Theory without practice"
            ],
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766400731841-8k7ivtzl.jpg",
            imageAlt: "Traditional learning"
          }}
          positiveCard={{
            title: "Our Modern Method",
            items: [
              "Current industry standards",
              "Hands-on interactive learning",
              "Real portfolio projects",
              "Personalized learning pace",
              "Theory plus practical application"
            ],
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766400732838-4uulpve1.jpg",
            imageAlt: "Modern coding education"
          }}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Choose Your Learning Path"
          description="Select the perfect course package to start your coding journey"
          animationType="slide-up"
          containerStyle="card"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          plans={[
            {
              id: "beginner",
              badge: "Popular",
              badgeIcon: Sparkles,
              price: "$299",
              subtitle: "Perfect for beginners",
              buttons: [{ text: "Enroll Now", href: "#contact" }],
              features: [
                "8-week course duration",
                "Python fundamentals",
                "3 beginner projects",
                "Community access",
                "Certificate of completion"
              ]
            },
            {
              id: "intermediate",
              badge: "Best Value",
              badgeIcon: Star,
              price: "$599",
              subtitle: "For intermediate learners",
              buttons: [{ text: "Enroll Now", href: "#contact" }],
              features: [
                "12-week course duration",
                "JavaScript and Web Dev",
                "8 intermediate projects",
                "Mentor support",
                "Career guidance",
                "Certificate of completion"
              ]
            },
            {
              id: "advanced",
              badge: "Professional",
              badgeIcon: Zap,
              price: "$999",
              subtitle: "For aspiring professionals",
              buttons: [{ text: "Enroll Now", href: "#contact" }],
              features: [
                "16-week course duration",
                "Full-stack development",
                "15 advanced projects",
                "1-on-1 mentoring",
                "Job placement assistance",
                "Professional certificate"
              ]
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Our Success Stories"
          description="See the impact we have on our students' careers and learning journey"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",
              value: "2,500+",
              title: "Students Trained",
              description: "Graduates learning coding worldwide",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766401281537-bd695c8y.jpg",
              imageAlt: "Students celebrating success"
            },
            {
              id: "2",
              value: "95%",
              title: "Satisfaction Rate",
              description: "Students rating our courses excellent",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766400733690-y49703av.jpg",
              imageAlt: "Developer working on project"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEight
          title="What Our Students Say"
          description="Real feedback from students who transformed their careers with us"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              name: "Alex Johnson",
              role: "Software Developer",
              company: "TechStart Inc",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140151637-4n68pd8r.jpg",
              imageAlt: "Alex Johnson"
            },
            {
              id: "2",
              name: "Maria Garcia",
              role: "Full Stack Engineer",
              company: "WebSolutions",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766400734781-p8cxff1g.jpg",
              imageAlt: "Maria Garcia"
            },
            {
              id: "3",
              name: "David Chen",
              role: "Junior Developer",
              company: "CloudTech",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140063369-vzpeyskp.jpg",
              imageAlt: "David Chen"
            },
            {
              id: "4",
              name: "Sarah Williams",
              role: "Frontend Developer",
              company: "DesignStudio",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766400735637-ltloev4k.jpg",
              imageAlt: "Sarah Williams"
            },
            {
              id: "5",
              name: "James Martinez",
              role: "Backend Developer",
              company: "StartupHub",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766400736715-h6xrke76.jpg",
              imageAlt: "James Martinez"
            },
            {
              id: "6",
              name: "Emma Thompson",
              role: "Web Developer",
              company: "Digital Agency",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766400738137-qyq96j1r.jpg",
              imageAlt: "Emma Thompson"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to common questions about our courses and enrollment"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "Do I need prior coding experience?",
              content: "No, our beginner courses are designed for complete beginners. We start from the fundamentals and build your skills step by step. If you have some experience, our intermediate and advanced courses are perfect for you."
            },
            {
              id: "2",
              title: "How long are the courses?",
              content: "Our courses range from 8 to 16 weeks depending on the level. Beginner courses take 8 weeks, intermediate 12 weeks, and advanced 16 weeks. You can also work at your own pace with extensions available."
            },
            {
              id: "3",
              title: "Are there job placement guarantees?",
              content: "While we cannot guarantee jobs, our advanced course includes job placement assistance. We work with partner companies and provide career guidance, resume help, and interview preparation."
            },
            {
              id: "4",
              title: "What programming languages do you teach?",
              content: "We teach Python, JavaScript, and Web Development technologies including HTML, CSS, React, and Node.js. Our curriculum focuses on in-demand languages used in today's industry."
            },
            {
              id: "5",
              title: "Can I access courses after completion?",
              content: "Yes, all students get lifetime access to course materials and updates. You can review lessons anytime and keep up with the latest changes in the curriculum."
            },
            {
              id: "6",
              title: "What support is available during the course?",
              content: "Support varies by plan. Beginner students have community access, intermediate students get mentor support, and advanced students receive 1-on-1 mentoring from industry professionals."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to start your coding journey? Enroll today and join thousands of successful developers who launched their careers with Future Great Coder."
          animationType="entrance-slide"
          buttons={[
            { text: "Enroll Now", href: "mailto:hello@futuregreatcoder.com" },
            { text: "Contact Us", href: "mailto:hello@futuregreatcoder.com" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Courses",
              items: [
                { label: "Beginner", href: "#pricing" },
                { label: "Intermediate", href: "#pricing" },
                { label: "Advanced", href: "#pricing" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "#about" },
                { label: "FAQ", href: "#faq" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Connect",
              items: [
                { label: "Twitter", href: "https://twitter.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "GitHub", href: "https://github.com" }
              ]
            }
          ]}
          copyrightText="© 2025 Future Great Coder. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}