"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Users, TrendingUp, Award, Globe, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="small"
      sizing="large"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          brandName="STEP"
          navItems={[
            { name: "About", id: "about" },
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Enroll Now",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCarouselLogo 
          logoText="STEP"
          description="Master cutting-edge IT skills with expert-led courses, hands-on projects, and direct path to tech careers"
          buttons={[
            { text: "Start Learning", href: "contact" },
            { text: "Explore Courses", href: "features" }
          ]}
          slides={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/little-classmates-discussing-lesson-doing-task_74855-10243.jpg",              imageAlt: "Students coding together in collaborative learning environment"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-kid-while-having-technology-education-class_23-2149123764.jpg",              imageAlt: "Developer working on programming projects with modern technology"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/system-engineers-celebrating-successful-code-compiling-doing-high-five-hand-gesture-with-colleague-coder-analyzing-algorithm-multiple-screens-takes-off-glasses-congratulates-coworker_482257-41855.jpg",              imageAlt: "Online IT academy classroom with interactive digital learning"
            }
          ]}
          autoplayDelay={5000}
          showDimOverlay={true}
          logoLineHeight={1.15}
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric 
          title="Why STEP Academy leads IT education with proven excellence and comprehensive support"
          metrics={[
            { icon: Users, label: "Active Students", value: "5,000+" },
            { icon: TrendingUp, label: "Job Placement Rate", value: "92%" },
            { icon: Award, label: "Expert Instructors", value: "150+" },
            { icon: Globe, label: "Courses Available", value: "30+" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyOne 
          title="Comprehensive learning designed for your success"
          description="Our structured curriculum combines theory with practical application, mentor guidance, and career support to transform you into a skilled IT professional."
          tag="Why Choose STEP"
          tagIcon={Sparkles}
          imageSrc="https://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg"
          imageAlt="Comprehensive curriculum structure"
          accordionItems={[
            {
              id: "1",              title: "Industry-Aligned Curriculum",              content: "Our courses are crafted by experienced professionals and updated quarterly to match current industry demands. We focus on practical skills that employers actively seek."
            },
            {
              id: "2",              title: "Expert Mentorship",              content: "Learn directly from seasoned IT professionals with 10+ years of industry experience. Get personalized guidance, code reviews, and career mentoring throughout your journey."
            },
            {
              id: "3",              title: "Hands-On Projects",              content: "Build a portfolio of real-world projects that demonstrate your skills to potential employers. Work on actual industry challenges and earn recognized certifications."
            },
            {
              id: "4",              title: "Career Support",              content: "From resume optimization to interview preparation and job placements, we support you every step toward your dream IT career."
            }
          ]}
          buttons={[
            { text: "View All Courses", href: "pricing" }
          ]}
          useInvertedBackground="noInvert"
          mediaPosition="left"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree 
          title="Simple, transparent pricing for every learner"
          description="Choose the plan that fits your learning goals and budget"
          tag="Courses & Plans"
          plans={[
            {
              id: "1",              price: "$299",              name: "Fundamentals",              buttons: [
                { text: "Enroll", href: "contact" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "12 weeks of instruction",                "30+ hours of video content",                "Weekly live Q&A sessions",                "Course completion certificate"
              ]
            },
            {
              id: "2",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$699",              name: "Professional",              buttons: [
                { text: "Enroll", href: "contact" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "16 weeks of instruction",                "60+ hours of video content",                "2x weekly mentoring sessions",                "5 industry projects",                "Portfolio building support",                "Job placement assistance"
              ]
            },
            {
              id: "3",              price: "$1,299",              name: "Advanced",              buttons: [
                { text: "Enroll", href: "contact" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "24 weeks of instruction",                "100+ hours of video content",                "Unlimited mentoring access",                "10 capstone projects",                "Professional networking events",                "Guaranteed interview preparation",                "Career placement guarantee"
              ]
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen 
          title="What our graduates say"
          description="Join thousands of successful professionals who transformed their careers with STEP Academy"
          tag="Success Stories"
          testimonials={[
            {
              id: "1",              name: "Alex Johnson",              handle: "@alextech",              testimonial: "STEP Academy completely transformed my career. The practical projects and mentor support helped me land a senior developer role within 3 months of graduation.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/lifestyle-people-office_23-2149173716.jpg",              imageAlt: "Alex Johnson"
            },
            {
              id: "2",              name: "Maria Rodriguez",              handle: "@mariadev",              testimonial: "The curriculum is incredibly well-designed and stays current with industry trends. The job placement support was exceptional - I had offers before even finishing the course.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-people-studying-math_23-2150444931.jpg",              imageAlt: "Maria Rodriguez"
            },
            {
              id: "3",              name: "David Chen",              handle: "@davidcodes",              testimonial: "The instructors are true experts who genuinely care about your success. The mentoring sessions provided invaluable insights that accelerated my learning significantly.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-people-studying-math_23-2150444962.jpg",              imageAlt: "David Chen"
            },
            {
              id: "4",              name: "Sophie Williams",              handle: "@sophietech",              testimonial: "Coming from a non-tech background, I was nervous. But the supportive community and structured learning path made everything click. Now I'm thriving as a full-stack developer.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/personal-shopper-office-with-client_23-2148929567.jpg",              imageAlt: "Sophie Williams"
            }
          ]}
          showRating={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText 
          sideTitle="Common questions answered"
          sideDescription="Everything you need to know about STEP Academy, our courses, and your learning journey"
          faqs={[
            {
              id: "1",              title: "Do I need prior programming experience?",              content: "No experience required! Our Fundamentals course is designed for absolute beginners. We teach you everything from the basics. However, if you have some experience, you can start with our Professional or Advanced tracks."
            },
            {
              id: "2",              title: "What's the time commitment?",              content: "Most students dedicate 15-20 hours per week. Fundamentals takes 12 weeks, Professional 16 weeks, and Advanced 24 weeks. You set your own pace with flexible scheduling."
            },
            {
              id: "3",              title: "Are the certificates recognized?",              content: "Yes! Our certificates are industry-recognized and respected by employers. We also provide LinkedIn-verified credentials that you can showcase to potential employers."
            },
            {
              id: "4",              title: "What's your job placement rate?",              content: "Our Professional and Advanced graduates have a 92% job placement rate within 6 months of completion. We provide career coaching, resume review, and direct employer connections."
            },
            {
              id: "5",              title: "Can I get a refund?",              content: "Yes, we offer a 14-day money-back guarantee if you're not satisfied. No questions asked. Your satisfaction is our priority."
            },
            {
              id: "6",              title: "Will I have access to instructors?",              content: "Absolutely! All students get access to weekly live Q&A sessions. Professional and Advanced students also get dedicated mentoring sessions to discuss projects and career goals."
            }
          ]}
          textPosition="left"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit 
          tag="Get Started"
          title="Ready to transform your IT career?"
          description="Join STEP Academy today and take the first step toward becoming a skilled IT professional. Get instant access to course materials, expert mentorship, and career support."
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/care-about-develop-your-career_329181-15232.jpg"
          imageAlt="Professional learning environment"
          mediaPosition="right"
          inputPlaceholder="Enter your email address"
          buttonText="Get Started Free"
          termsText="By enrolling, you agree to our Terms of Service and Privacy Policy. Start your free trial - no credit card required."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis 
          logoText="STEP"
          columns={[
            {
              items: [
                { label: "Home", href: "/" },
                { label: "About", href: "about" },
                { label: "Features", href: "features" }
              ]
            },
            {
              items: [
                { label: "Pricing", href: "pricing" },
                { label: "Testimonials", href: "testimonials" },
                { label: "FAQ", href: "faq" }
              ]
            },
            {
              items: [
                { label: "Contact", href: "contact" },
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}