"use client"

import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Sparkles, Users, Award, Briefcase, Globe, Code, Database, Smartphone, Brain, Shield, Cloud, TrendingUp, Clock, DollarSign, Star } from "lucide-react";
import FeatureCardFour from '@/components/sections/feature/FeatureCardFour';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="largeSizeMediumTitles"
      background="none"
      cardStyle="gradient-mesh"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="STEP"
          navItems={[
            { name: "Programs", id: "programs" },
            { name: "About", id: "about" },
            { name: "Why STEP", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="Master Technology. Transform Your Future."
          description="Join STEP IT Academy and learn industry-leading skills from expert instructors. Comprehensive programs designed to launch your tech career."
          tag="Educational Excellence"
          tagIcon={Sparkles}
          background={{ variant: "plain" }}
          imageSrc="https://img.b2bpic.net/free-photo/row-serious-focused-coworkers-sitting-table-typing-laptops_74855-10363.jpg"
          imageAlt="Students learning at STEP IT Academy"
          imagePosition="right"
          buttons={[
            { text: "Explore Programs", href: "programs" },
            { text: "Schedule Demo", href: "#contact" }
          ]}
        />
      </div>

      <div id="feature_card_four" data-section="feature_card_four">
        <FeatureCardFour
          title="Innovative Curriculum"
        />
      </div>
      <div id="about" data-section="about">
        <AboutMetric
          title="STEP Academy: Empowering the next generation of technology professionals with world-class education and industry mentorship."
          useInvertedBackground="noInvert"
          metrics={[
            { icon: Users, label: "Active Students", value: "5,000+" },
            { icon: Award, label: "Success Rate", value: "94%" },
            { icon: Briefcase, label: "Job Placements", value: "2,300+" },
            { icon: Globe, label: "Graduates Worldwide", value: "12K+" }
          ]}
        />
      </div>

      <div id="programs" data-section="programs">
        <FeatureHoverPattern
          title="Comprehensive Learning Programs"
          description="Explore our carefully designed curriculum covering all aspects of modern technology."
          features={[
            {
              icon: Code,
              title: "Web Development",              description: "Master HTML, CSS, JavaScript, React, and Node.js. Build responsive, modern web applications from scratch."
            },
            {
              icon: Database,
              title: "Backend Engineering",              description: "Learn server-side development, databases, APIs, and cloud infrastructure with real-world projects."
            },
            {
              icon: Smartphone,
              title: "Mobile Development",              description: "Create iOS and Android applications using React Native and native frameworks for real devices."
            },
            {
              icon: Brain,
              title: "AI & Machine Learning",              description: "Explore artificial intelligence, neural networks, and machine learning with Python and TensorFlow."
            },
            {
              icon: Shield,
              title: "Cybersecurity",              description: "Master security protocols, ethical hacking, and defense strategies in modern IT environments."
            },
            {
              icon: Cloud,
              title: "Cloud Architecture",              description: "Deploy and manage applications on AWS, Azure, and Google Cloud with industry best practices."
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="By The Numbers"
          description="Proven results that demonstrate our commitment to student success"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          metrics={[
            { id: "1", icon: TrendingUp, title: "Career Growth", value: "89%" },
            { id: "2", icon: Clock, title: "Avg. Time to Job", value: "3 months" },
            { id: "3", icon: DollarSign, title: "Salary Increase", value: "+65%" },
            { id: "4", icon: Star, title: "Student Rating", value: "4.9/5" }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="Success Stories from Our Graduates"
          description="Hear from students who transformed their careers through STEP Academy."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              name: "Alex Johnson",              role: "Full Stack Developer at TechCorp",              testimonial: "STEP Academy transformed my career completely. The instructors were incredibly knowledgeable and the curriculum prepared me perfectly for real-world projects. I got a job offer within 2 months of graduation!",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Alex Johnson"
            },
            {
              id: "2",              name: "Sarah Chen",              role: "Senior Frontend Engineer at StartupXYZ",              testimonial: "The hands-on approach at STEP Academy is exceptional. I went from complete beginner to building production-level applications. The mentorship and community support made all the difference.",              imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "Sarah Chen"
            },
            {
              id: "3",              name: "Marcus Williams",              role: "DevOps Engineer at CloudServices Inc.",              testimonial: "Best investment I ever made in myself. The cloud architecture program was incredibly comprehensive and directly applicable to my new role. Worth every penny.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg",              imageAlt: "Marcus Williams"
            },
            {
              id: "4",              name: "Emily Rodriguez",              role: "AI Engineer at DataLabs",              testimonial: "The machine learning curriculum at STEP is unmatched. Complex concepts became clear through interactive projects. Now leading AI initiatives at my company.",              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "5",              name: "James Park",              role: "Mobile App Developer at InnovateMobile",              testimonial: "The React Native track was perfect for my goals. Real projects, real mentors, real results. I tripled my salary within a year of completing the program.",              imageSrc: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg",              imageAlt: "James Park"
            },
            {
              id: "6",              name: "Lisa Anderson",              role: "Cybersecurity Specialist at SecureNet",              testimonial: "STEP Academy's cybersecurity program equipped me with practical skills and industry certifications. The job placement support was fantastic too.",              imageSrc: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",              imageAlt: "Lisa Anderson"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Transparent Pricing for Every Path"
          description="Choose the learning path that fits your goals and budget. All programs include mentorship, projects, and job support."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          plans={[
            {
              id: "accelerated",              tag: "Accelerated Bootcamp",              price: "$4,999",              period: "12 weeks",              description: "Intensive full-time program for rapid career transition into tech roles.",              button: { text: "Enroll Now", href: "#contact" },
              featuresTitle: "What's Included:",              features: [
                "Full curriculum covering your chosen specialization",                "1-on-1 mentorship from industry professionals",                "Real-world capstone project",                "Job placement assistance and career coaching",                "Lifetime access to course materials",                "Interview preparation sessions"
              ]
            },
            {
              id: "professional",              tag: "Professional Program",              price: "$2,999",              period: "24 weeks",              description: "Flexible part-time program balancing career and learning at your own pace.",              button: { text: "Get Started", href: "#contact" },
              featuresTitle: "What's Included:",              features: [
                "Comprehensive curriculum with flexible scheduling",                "Weekly group sessions and community support",                "Portfolio-building projects",                "Industry certifications included",                "Career transition guidance",                "Alumni network access"
              ]
            },
            {
              id: "specialist",              tag: "Specialist Certification",              price: "$1,499",              period: "8 weeks",              description: "Focused short-term programs for skill-specific advancement and certifications.",              button: { text: "Choose Specialty", href: "#contact" },
              featuresTitle: "What's Included:",              features: [
                "Focused curriculum on specialized topics",                "Expert instructor guidance",                "Industry-recognized certification",                "Hands-on labs and practice environments",                "Completion certificate with verified skills",                "Community forum access"
              ]
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Find answers to common questions about STEP Academy programs and enrollment."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "Do I need prior programming experience?",              content: "No experience necessary! Our beginner programs start from fundamentals and progress to advanced concepts. We have dedicated support for absolute beginners. However, we also offer advanced tracks for experienced developers."
            },
            {
              id: "2",              title: "What is the job placement rate?",              content: "Our graduates have an impressive 94% job placement rate within 6 months of graduation. We provide comprehensive job search support, interview preparation, and connections with our employer network."
            },
            {
              id: "3",              title: "Can I study part-time while working?",              content: "Yes! Our Professional Program is specifically designed for working professionals. Classes are scheduled in the evenings and weekends, and all course materials are available 24/7 for your convenience."
            },
            {
              id: "4",              title: "Are the certifications recognized by employers?",              content: "Absolutely. Our certifications are industry-recognized and valued by top tech companies. Many employers actively recruit from our program, and we maintain strong partnerships with leading tech firms."
            },
            {
              id: "5",              title: "What if I struggle with the material?",              content: "We provide extensive support including 1-on-1 mentorship, group tutoring sessions, peer study groups, and additional resources. Our student success rate speaks to our commitment to your learning."
            },
            {
              id: "6",              title: "Is there a money-back guarantee?",              content: "Yes! If you're not satisfied with the first two weeks, we offer a full refund. We're confident in our program quality and want you to feel comfortable investing in your education."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/young-colleagues-sitting-while-work-with-laptops-desk_171337-16969.jpg"
          imageAlt="STEP Academy workspace"
          logoText="STEP Academy"
          copyrightText="© 2025 STEP Academy. All rights reserved."
          columns={[
            {
              title: "Programs",              items: [
                { label: "Web Development", href: "#" },
                { label: "Mobile Development", href: "#" },
                { label: "AI & Machine Learning", href: "#" },
                { label: "Cybersecurity", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Careers", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#" },
                { label: "Community Forum", href: "#" },
                { label: "Student Stories", href: "#testimonials" },
                { label: "Support", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}