"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Users, TrendingUp, Award, CheckCircle, Sparkles } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="mediumSizeLargeTitles"
      background="radialGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="minimal"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          brandName="Gallera"
          navItems={[
            {name: "About", id: "about"},
            {name: "Courses", id: "features"},
            {name: "Success", id: "testimonial"},
            {name: "Contact", id: "contact"}
          ]}
          button={{text: "Enroll Now", href: "contact"}}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroBillboardScroll 
          title="Master IT Skills with Industry Experts"
          description="Learn cutting-edge technology and programming from experienced instructors. Transform your career with Gallera."
          tag="Leading IT Education"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484716991-2p5cqa53.jpg"
          imageAlt="Students learning programming and IT skills"
          buttons={[
            {text: "Explore Courses", href: "features"},
            {text: "Learn More", href: "about"}
          ]}
        />
      </div>
      
      <div id="about" data-section="about">
        <AboutMetric 
          title="Gallera IT School: Empowering the Next Generation of Tech Professionals"
          metrics={[
            {icon: Users, label: "Students Trained", value: "5,000+"},
            {icon: TrendingUp, label: "Job Placement Rate", value: "92%"},
            {icon: Award, label: "Courses Offered", value: "25+"},
            {icon: CheckCircle, label: "Years of Excellence", value: "10+"}
          ]}
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="features" data-section="features">
        <FeatureCardNineteen 
          title="Our Learning Path"
          description="Structured programs designed to take you from beginner to job-ready professional"
          tag="Comprehensive Curriculum"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              tag: "Foundation",
              title: "Web Development Bootcamp",
              subtitle: "Master HTML, CSS, and JavaScript",
              description: "Learn the fundamentals of front-end and back-end web development. Build responsive websites and dynamic web applications using modern frameworks and best practices.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492693670-lj7ueobz.png",
              imageAlt: "Web development coding environment"
            },
            {
              id: 2,
              tag: "Advanced",
              title: "Mobile App Development",
              subtitle: "Create iOS and Android applications",
              description: "Develop native and cross-platform mobile applications. Learn React Native and Flutter to build production-ready apps for both iOS and Android platforms.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492694761-e96hadsf.jpg",
              imageAlt: "Mobile app development on smartphone"
            },
            {
              id: 3,
              tag: "Specialization",
              title: "Data Science & Analytics",
              subtitle: "Extract insights from data",
              description: "Master Python, data visualization, and machine learning. Transform raw data into actionable insights and build predictive models for real-world business problems.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492695669-hy749o3o.jpg",
              imageAlt: "Data science and analytics dashboard"
            }
          ]}
        />
      </div>
      
      <div id="testimonial" data-section="testimonial">
        <TestimonialCardEight 
          title="Student Success Stories"
          description="Hear from our graduates who have transformed their careers through Gallera"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              name: "Priya Sharma",
              role: "Frontend Developer",
              company: "Tech Solutions Inc.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766917432686-rrgsntke.jpg",
              imageAlt: "Priya Sharma - Frontend Developer"
            },
            {
              id: "2",
              name: "Rajesh Kumar",
              role: "Full Stack Engineer",
              company: "StartupXYZ",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484692441-ky6zbpw9.jpg",
              imageAlt: "Rajesh Kumar - Full Stack Engineer"
            },
            {
              id: "3",
              name: "Aisha Patel",
              role: "Data Analyst",
              company: "Analytics Pro",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484714329-4i8nds16.jpg",
              imageAlt: "Aisha Patel - Data Analyst"
            },
            {
              id: "4",
              name: "Arjun Singh",
              role: "Mobile Developer",
              company: "App Innovations",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766917433780-hvr026vw.jpg",
              imageAlt: "Arjun Singh - Mobile Developer"
            },
            {
              id: "5",
              name: "Deepika Verma",
              role: "DevOps Engineer",
              company: "Cloud Systems",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766917434827-glti7jjk.jpg",
              imageAlt: "Deepika Verma - DevOps Engineer"
            },
            {
              id: "6",
              name: "Vikram Nair",
              role: "Software Architect",
              company: "Enterprise Tech",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766917435695-89q48fr6.jpg",
              imageAlt: "Vikram Nair - Software Architect"
            }
          ]}
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactCenter 
          tag="Enrollment"
          title="Start Your IT Journey Today"
          description="Join thousands of successful graduates. Subscribe to get course updates and exclusive enrollment offers."
          tagIcon={Sparkles}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email"
          buttonText="Notify Me"
          termsText="By subscribing, you agree to our Terms of Service and Privacy Policy."
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterBase 
          logoText="Gallera"
          copyrightText="© 2025 Gallera IT School. All rights reserved."
          columns={[
            {
              title: "Programs",
              items: [
                {label: "Web Development", href: "features"},
                {label: "Mobile Apps", href: "features"},
                {label: "Data Science", href: "features"}
              ]
            },
            {
              title: "Company",
              items: [
                {label: "About Us", href: "about"},
                {label: "Success Stories", href: "testimonial"},
                {label: "Contact", href: "contact"}
              ]
            },
            {
              title: "Resources",
              items: [
                {label: "Blog", href: "#"},
                {label: "FAQ", href: "#"},
                {label: "Support", href: "#"}
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}