"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Cloud, Code, Database, Shield, Smartphone, Sparkles, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          brandName="STEP"
          navItems={[
            { name: "About", id: "about" },
            { name: "Courses", id: "features" },
            { name: "Why STEP", id: "metrics" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Enroll Now", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard 
          logoText="STEP IT Academy"
          description="We're committed to providing the best IT education experience"
          background={{ variant: "sparkles-gradient" }}
          imageSrc="https://img.b2bpic.net/free-photo/row-serious-focused-coworkers-sitting-table-typing-laptops_74855-10363.jpg"
          imageAlt="STEP Academy instructor teaching students"
          frameStyle="card"
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitTabsAbout 
          title="Why Choose STEP Academy"
          description="We're committed to providing the best IT education experience"
          tabs={[
            {
              id: "expertise",              label: "Expert Instructors",              description: "Learn from industry professionals with 10+ years of experience. Our instructors are actively working in top tech companies and bring real-world insights to every lesson."
            },
            {
              id: "curriculum",              label: "Practical Curriculum",              description: "Our courses focus on hands-on projects and practical skills. Build real applications, work with current technologies, and create a portfolio that impresses employers."
            },
            {
              id: "support",              label: "Dedicated Support",              description: "Get personalized mentoring, career guidance, and job placement assistance. We support you from day one through your first job placement."
            },
            {
              id: "community",              label: "Strong Community",              description: "Join a thriving network of learners and professionals. Collaborate on projects, attend workshops, and build lasting connections in the tech industry."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/close-up-kid-while-having-technology-education-class_23-2149123764.jpg"
          imageAlt="STEP Academy instructor teaching students"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureHoverPattern 
          title="Our Course Programs"
          description="Choose from our comprehensive IT training programs designed for career advancement"
          features={[
            {
              icon: Code,
              title: "Web Development Mastery",              description: "Master front-end and back-end technologies. Build full-stack applications using React, Node.js, and modern frameworks. Learn responsive design, APIs, and deployment."
            },
            {
              icon: Database,
              title: "Data Science & Analytics",              description: "Learn Python, SQL, and machine learning. Analyze real datasets, create predictive models, and develop data-driven solutions for business challenges."
            },
            {
              icon: Cloud,
              title: "Cloud Infrastructure",              description: "Master AWS, Azure, and cloud deployment. Understand DevOps, containerization, and scalable architecture for modern applications."
            },
            {
              icon: Shield,
              title: "Cybersecurity Essentials",              description: "Protect systems from threats with ethical hacking and security protocols. Learn penetration testing, network security, and compliance frameworks."
            },
            {
              icon: Smartphone,
              title: "Mobile App Development",              description: "Build iOS and Android applications. Create native and cross-platform apps with Flutter, React Native, and Swift technologies."
            },
            {
              icon: Zap,
              title: "AI & Machine Learning",              description: "Explore artificial intelligence and advanced ML models. Build chatbots, computer vision projects, and intelligent automation systems."
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree 
          title="Flexible Learning Plans"
          description="Choose the perfect program for your goals and budget"
          plans={[
            {
              id: "starter",              price: "$499",              name: "Starter Course",              buttons: [
                { text: "Get Started", href: "contact" },
                { text: "Learn More", href: "contact" }
              ],
              features: [
                "4-week intensive program",                "Access to course materials",                "Weekly live sessions",                "Community forum access",                "Certificate upon completion"
              ]
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$1,299",              name: "Professional Program",              buttons: [
                { text: "Enroll Now", href: "contact" },
                { text: "Schedule Call", href: "contact" }
              ],
              features: [
                "12-week comprehensive course",                "1-on-1 mentorship sessions",                "Real-world project work",                "Resume review & optimization",                "Job interview preparation",                "Career placement support",                "Lifetime access to materials"
              ]
            },
            {
              id: "enterprise",              price: "$2,499",              name: "Enterprise Bootcamp",              buttons: [
                { text: "Start Bootcamp", href: "contact" },
                { text: "Contact Sales", href: "contact" }
              ],
              features: [
                "24-week intensive bootcamp",                "Personalized learning path",                "Unlimited mentor access",                "Portfolio building assistance",                "Internship opportunities",                "Guaranteed job placement",                "Salary negotiation support",                "Lifetime community access"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne 
          title="Success Stories from Our Graduates"
          description="Real feedback from students who transformed their careers"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              role: "Senior Frontend Developer",              company: "TechCorp Solutions",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-female-graduate-smiling-looking-camera-sitting-white-surface_176420-17015.jpg",              imageAlt: "Sarah Johnson, Senior Frontend Developer"
            },
            {
              id: "2",              name: "Michael Chen",              role: "Data Scientist",              company: "InnovateLab",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/young-lady-looking-camera-academic-dress-looking-pretty_176474-82317.jpg",              imageAlt: "Michael Chen, Data Scientist"
            },
            {
              id: "3",              name: "Emily Rodriguez",              role: "Cloud Architect",              company: "GrowthCo",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/vertical-portrait-young-successful-woman-employee-entrepreneur-office-hall-tutor-carry-laptop-notebooks-looking-away-with-satisfied-pleased-smile-like-her-job_197531-30584.jpg",              imageAlt: "Emily Rodriguez, Cloud Architect"
            },
            {
              id: "4",              name: "David Kim",              role: "Security Engineer",              company: "StartupXYZ",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-indian-graduate-graduation-robe-university-campus_496169-1334.jpg",              imageAlt: "David Kim, Security Engineer"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo 
          title="STEP Academy Impact"
          description="By the numbers: our commitment to your success"
          metrics={[
            {
              id: "1",              value: "5,000+",              description: "Graduates Worldwide"
            },
            {
              id: "2",              value: "",              description: "Job Placement Rate"
            },
            {
              id: "3",              value: "4.9/5",              description: "Average Student Rating"
            },
            {
              id: "4",              value: "50K+",              description: "Average First-Year Salary"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter 
          tag="Get Started"
          title="Ready to Transform Your IT Career?"
          description="Join thousands of graduates who have successfully launched their careers in technology. Enroll today and take the first step toward your future."
          tagIcon={Sparkles}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email"
          buttonText="Enroll Today"
          termsText="By enrolling, you agree to our Terms of Service and Privacy Policy. We respect your privacy and will never spam."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple 
          columns={[
            {
              title: "Academy",              items: [
                { label: "About Us", href: "#about" },
                { label: "Courses", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Success Stories", href: "#testimonials" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Learning Blog", href: "#" },
                { label: "Career Guide", href: "#" },
                { label: "Community Forum", href: "#" },
                { label: "Tech News", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "Contact Us", href: "#contact" },
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Twitter", href: "#" },
                { label: "LinkedIn", href: "#" },
                { label: "GitHub", href: "#" },
                { label: "Discord", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 STEP IT Academy. All rights reserved."
          bottomRightText="Built with passion for tech education"
        />
      </div>
    </ThemeProvider>
  );
}