"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Award, Code, Briefcase, Clock, Lightbulb, Mail } from 'lucide-react';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="medium"
      background="aurora"
      cardStyle="gradient-bordered"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="TechAcademy"
          navItems={[
            { name: "Courses", id: "/courses" },
            { name: "About", id: "/about" },
            { name: "Pricing", id: "/pricing" },
            { name: "Contact", id: "/contact" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          title="Empowering the Next Generation of Tech Professionals"
          description="TechAcademy is dedicated to providing world-class IT education that bridges the gap between academic learning and industry demands. With expert instructors and cutting-edge curriculum, we prepare students for successful careers in technology."
          tag="About Us"
          tagIcon={Lightbulb}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          bulletPoints={[
            {
              title: "Expert Instructors",
              description: "Learn from industry veterans with 10+ years of experience in their respective fields",
              icon: Award
            },
            {
              title: "Hands-On Projects",
              description: "Build real-world applications and portfolio pieces throughout your learning journey",
              icon: Code
            },
            {
              title: "Career Support",
              description: "Get guidance on job placement, resume building, and interview preparation",
              icon: Briefcase
            },
            {
              title: "Flexible Learning",
              description: "Self-paced courses with lifetime access to course materials and updates",
              icon: Clock
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/close-up-binary-script-running-pc-monitors_482257-123753.jpg"
          imageAlt="Professional instructors mentoring students"
          imagePosition="right"
          buttons={[
            { text: "Learn More", href: "/about" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardNine
          title="Why Choose TechAcademy"
          description="Industry-leading features that set us apart from other online learning platforms"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          showStepNumbers={true}
          features={[
            {
              id: 1,
              title: "Interactive Learning Platform",
              description: "Engage with live coding environments, instant feedback, and interactive exercises that make learning engaging and effective",
              phoneOne: {
                imageSrc: "https://img.b2bpic.net/free-photo/double-exposure-caucasian-man-virtual-reality-vr-headset-is-presumably-gamer-hacker-cracking-code-into-secure-network-server-with-lines-code_146671-18937.jpg"
              },
              phoneTwo: {
                imageSrc: "https://img.b2bpic.net/free-photo/double-exposure-caucasian-man-virtual-reality-vr-headset-is-presumably-gamer-hacker-cracking-code-into-secure-network-server-with-lines-code_146671-18937.jpg"
              }
            },
            {
              id: 2,
              title: "Expert Mentorship",
              description: "Get personalized guidance from industry professionals who mentor and support your learning journey every step of the way",
              phoneOne: {
                imageSrc: "https://img.b2bpic.net/free-photo/colleagues-working-together-medium-shot_52683-99761.jpg"
              },
              phoneTwo: {
                imageSrc: "https://img.b2bpic.net/free-photo/colleagues-working-together-medium-shot_52683-99761.jpg"
              }
            },
            {
              id: 3,
              title: "Thriving Community",
              description: "Connect with thousands of students, share projects, collaborate on challenges, and build lasting professional networks",
              phoneOne: {
                imageSrc: "https://img.b2bpic.net/free-photo/professional-woman-showing-software-specifics-colleague_74855-2180.jpg"
              },
              phoneTwo: {
                imageSrc: "https://img.b2bpic.net/free-photo/professional-woman-showing-software-specifics-colleague_74855-2180.jpg"
              }
            }
          ]}
          textBoxTitleClassName="text-lg"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Our Students Say"
          description="Real success stories from graduates who transformed their careers through TechAcademy"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          tag="Student Success"
          testimonials={[
            {
              id: "1",
              name: "Sarah Johnson",
              role: "Junior Developer",
              company: "TechCorp Solutions",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-men-discussing-work_52683-101636.jpg",
              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",
              name: "Michael Chen",
              role: "Full Stack Engineer",
              company: "Digital Innovations",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-people-learning-together_23-2149204794.jpg",
              imageAlt: "Michael Chen"
            },
            {
              id: "3",
              name: "Emily Rodriguez",
              role: "Data Analyst",
              company: "Analytics Pro",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/side-view-people-studying-classroom_23-2150312824.jpg",
              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",
              name: "David Kim",
              role: "Software Developer",
              company: "StartupXYZ",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/people-looking-picture-albums_23-2149444423.jpg",
              imageAlt: "David Kim"
            },
            {
              id: "5",
              name: "Jessica Martinez",
              role: "Mobile App Developer",
              company: "AppWorks Studios",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/colleagues-working-together-project_23-2149267955.jpg",
              imageAlt: "Jessica Martinez"
            },
            {
              id: "6",
              name: "Alex Thompson",
              role: "Cloud Engineer",
              company: "Cloud Systems Inc",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-young-attractive-light-haired-european-student-girl-with-short-hair-striped-shirt-sitting-university-library-preparing-exams-talking-with-friend_176420-8304.jpg",
              imageAlt: "Alex Thompson"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Our Impact by Numbers"
          description="Trusted by thousands of learners worldwide"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="scale-rotate"
          gridVariant="uniform-all-items-equal"
          metrics={[
            {
              id: "1",
              value: "7.5,000+",
              description: "Active Students"
            },
            {
              id: "2",
              value: "49%",
              description: "Course Completion Rate"
            },
            {
              id: "3",
              value: "46%",
              description: "Job Placement Rate"
            },
            {
              id: "4",
              value: "25+",
              description: "Expert Instructors"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          title="Stay Updated with New Courses & Tips"
          description="Subscribe to our newsletter for weekly learning tips, new course announcements, and industry insights delivered straight to your inbox"
          tagIcon={Mail}
          useInvertedBackground="invertDefault"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe at any time. No spam, ever."
        />
      </div>

      <div id="hero_billboard_scroll" data-section="hero_billboard_scroll">
        <HeroBillboardScroll
          title="Hero Billboard Scroll"
          description="Add your description here."
          tag="Label"
          tagIcon="Check"
          buttons={[{ label: "Primary", href: "#" }, { label: "Secondary", href: "#" }]}
          imageSrc="https://placehold.co/600x400"
          background={{ variant: "plain" }}
        />
      </div>      <FooterMedia
        imageSrc="https://img.b2bpic.net/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010118.jpg"
        imageAlt="Technology and digital transformation"
        logoText="TechAcademy"
        copyrightText="© 2025 TechAcademy. All rights reserved."
        columns={[
          {
            title: "Courses",
            items: [
              { label: "All Courses", href: "/courses" },
              { label: "Web Development", href: "/courses" },
              { label: "Data Science", href: "/courses" },
              { label: "Mobile Apps", href: "/courses" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Careers", href: "#" },
              { label: "Blog", href: "#" },
              { label: "Contact", href: "/contact" }
            ]
          },
          {
            title: "Support",
            items: [
              { label: "Help Center", href: "#" },
              { label: "Community", href: "#" },
              { label: "Terms of Service", href: "#" },
              { label: "Privacy Policy", href: "#" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}