"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Users, TrendingUp, Award, Star } from "lucide-react";
import Link from "next/link";
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import ContactCenter from '@/components/sections/contact/ContactCenter';

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="none"
      cardStyle="glass-depth"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="TechAcademy"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Courses", id: "/courses" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Enroll Now",            href: "/contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="STEP Academy"
          description="Master in-demand technology skills with our comprehensive IT courses. Learn from industry experts and launch your tech career."
          buttons={[
            { text: "Explore Courses", href: "/courses" },
            { text: "Get Started", href: "/contact" }
          ]}
          slides={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010130.jpg",              imageAlt: "Programming and coding education"
            },
            {
              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: "Tech training and learning"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/person-working-html-computer_23-2150038840.jpg",              imageAlt: "IT academy classroom"
            }
          ]}
          autoplayDelay={5000}
          showDimOverlay={true}
        />
      </div>

      <div id="features" data-section="features">
      <FeatureCardSeven
      features={[
      {
      id: 1,
      title: "Expert Instructors",              description: "Learn from experienced professionals with 10+ years in the tech industry. Our instructors bring real-world insights and practical knowledge to every lesson.",              phoneOne: {
      imageSrc: "https://img.b2bpic.net/free-photo/caucasian-software-developer-signaling-screen-data-breach-deactivated-security-system-tech-engineer-observing-multiple-system-security-breaches-caused-by-overloaded-storage-servers_482257-40529.jpg"
      },
      phoneTwo: {
      imageSrc: "https://img.b2bpic.net/free-photo/caucasian-software-developer-signaling-screen-data-breach-deactivated-security-system-tech-engineer-observing-multiple-system-security-breaches-caused-by-overloaded-storage-servers_482257-40529.jpg"
      }
      },
      {
      id: 2,
      title: "Flexible Learning",              description: "Study at your own pace with self-paced courses, live sessions, and recorded content. Access materials anytime, anywhere on any device.",              phoneOne: {
      imageSrc: "https://img.b2bpic.net/free-photo/informational-agency-multiracial-tech-engineers-programming-application-while-using-computer-cyber-security-company-developers-encrypting-cloud-processing-data-system-using-blockchain-technology_482257-40527.jpg"
      },
      phoneTwo: {
      imageSrc: "https://img.b2bpic.net/free-photo/informational-agency-multiracial-tech-engineers-programming-application-while-using-computer-cyber-security-company-developers-encrypting-cloud-processing-data-system-using-blockchain-technology_482257-40527.jpg"
      }
      },
      {
      id: 3,
      title: "Career Support",              description: "Get job placement assistance, resume reviews, and interview coaching. Our alumni network opens doors to exciting career opportunities.",              phoneOne: {
      imageSrc: "https://img.b2bpic.net/free-photo/software-programer-pointing-pencil-source-code-computer-screen-explaining-algorithm-coworker-standing-desk-programmers-discussing-online-cloud-computing-with-team_482257-33535.jpg"
      },
      phoneTwo: {
      imageSrc: "https://img.b2bpic.net/free-photo/software-programer-pointing-pencil-source-code-computer-screen-explaining-algorithm-coworker-standing-desk-programmers-discussing-online-cloud-computing-with-team_482257-33535.jpg"
      }
      }
      ]}
      animationType="none"
      title="Why Choose TechAcademy"
      description="Industry-leading education platform designed for career growth"
      tag="Unique"
      buttons={[{ text: "View Courses", label: "courses", href: "/courses" }, { text: "Learn More", label: "about", href: "/about" }]}
      textboxLayout="default"
      useInvertedBackground="invertDefault"
      />
      </div>

      <div id="products" data-section="products">
      <FeatureCardSeven
      features={[{ title: "Feature 1", description: "Feature description" }, { title: "Feature 2", description: "Feature description" }, { title: "Feature 3", description: "Feature description" }]}
      animationType="slide-up"
      title="Featured Courses"
      description="Start your learning journey with our most popular programs"
      tag="Curriculum"
      buttons={[{ text: "Get Started", label: "Get Started", href: "#" }, { text: "Learn More", label: "Learn More", href: "#" }]}
      textboxLayout="default"
      useInvertedBackground="noInvert"
      />
      </div>

      <div id="metrics" data-section="metrics">
      <MetricCardOne
      metrics={[
      {
      id: "1",              value: "5000",              title: "Students",              description: "Successfully trained and certified professionals",              icon: Users
      },
      {
      id: "2",              value: "95",              title: "%",              description: "Job placement rate within 3 months",              icon: TrendingUp
      },
      {
      id: "3",              value: "20",              title: "+",              description: "Expert instructors on our team",              icon: Award
      },
      {
      id: "4",              value: "4.9",              title: "/5",              description: "Average student satisfaction rating",              icon: Star
      }
      ]}
      carouselMode="auto"
      gridVariant="uniform-all-items-equal"
      animationType="slide-up"
      title="TechAcademy Metrics"
      description="See the impact of our courses on student success and our growing network of expert instructors."
      tag="Metrics"
      buttons={[{ text: "Explore Courses", label: "Explore Courses", href: "#" }, { text: "Meet Our Team", label: "Meet Our Team", href: "#" }]}
      textboxLayout="default"
      useInvertedBackground="invertDefault"
      />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="TechAcademy transformed my career. The courses are comprehensive, instructors are phenomenal, and the job placement support really works. I landed my dream job within 2 months of completion!"
          rating={5}
          author="Sarah Johnson, Senior Developer"
          avatars={[
            {
              src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Student testimonial 1"
            },
            {
              src: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              alt: "Student testimonial 2"
            },
            {
              src: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",              alt: "Student testimonial 3"
            },
            {
              src: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",              alt: "Student testimonial 4"
            },
            {
              src: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg",              alt: "Student testimonial 5"
            },
            {
              src: "https://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg",              alt: "Student testimonial 6"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact_center" data-section="contact_center">
        <ContactCenter
          tag="Label"
          title="Reach Out to Us"
          description="Have questions? Our dedicated team is here to assist you."
          useInvertedBackground="noInvert"
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/html-css-collage-concept-with-person_23-2150061986.jpg"
          imageAlt="Graduation and success celebration"
          logoText="TechAcademy"
          copyrightText="© 2025 TechAcademy. All rights reserved."
          columns={[
            {
              title: "Courses",              items: [
                { label: "Web Development", href: "/courses" },
                { label: "Python Programming", href: "/courses" },
                { label: "Data Science", href: "/courses" },
                { label: "Cybersecurity", href: "/courses" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Team", href: "/about" },
                { label: "Careers", href: "#" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact Us", href: "/contact" },
                { label: "FAQ", href: "#faq" },
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}