"use client";

import Link from "next/link";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Code, Layers, Zap, Palette, Smartphone, Eye, BarChart3, Brain, TrendingUp, Shield, Lock, Key, Lightbulb, Sparkles } from "lucide-react";

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="medium"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="TechAcademy"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Courses", id: "/courses" },
            { name: "Pricing", id: "/pricing" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Enroll Now",            href: "/pricing"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="TechAcademy"
          description="Master in-demand IT skills with expert instructors and flexible learning paths designed for modern professionals"
          buttons={[
            { text: "Explore Courses", href: "/courses" },
            { text: "Start Learning", href: "/pricing" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891341.jpg"
          imageAlt="Technology and learning environment"
          showDimOverlay={true}
          logoLineHeight={1.2}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          title="Empowering the next generation of IT professionals through comprehensive, industry-aligned education and hands-on training"
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Learn More", href: "/about" },
            { text: "View Team", href: "/about" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTen
          title="Comprehensive Learning Pathways"
          description="Our academy offers structured courses covering the full spectrum of IT technologies and specializations"
          tag="Features"
          features={[
            {
              id: "1",              title: "Programming & Development",              description: "Master the latest programming languages and development frameworks. From Python and JavaScript to full-stack web development, our courses provide hands-on experience with real-world projects and industry best practices.",              media: { imageSrc: "https://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg" },
              items: [
                { icon: Code, text: "JavaScript, Python, Java" },
                { icon: Layers, text: "Frontend & Backend Development" },
                { icon: Zap, text: "Real-time Project Work" }
              ],
              reverse: false
            },
            {
              id: "2",              title: "Web & UI Design",              description: "Learn modern web design principles and UI/UX best practices. Create stunning interfaces using HTML5, CSS3, and JavaScript, with a focus on responsive design and user-centered development.",              media: { imageSrc: "https://img.b2bpic.net/free-photo/guy-girl-are-sitting-table-african-girl-computer-science-class-kids-playing-computer-games_1157-42298.jpg" },
              items: [
                { icon: Palette, text: "UI/UX Design Principles" },
                { icon: Smartphone, text: "Responsive Design" },
                { icon: Eye, text: "Modern Design Tools" }
              ],
              reverse: true
            },
            {
              id: "3",              title: "Data Science & Analytics",              description: "Dive into data-driven decision making with our comprehensive data science curriculum. Learn data analysis, visualization, machine learning, and AI techniques used by leading tech companies.",              media: { imageSrc: "https://img.b2bpic.net/free-photo/woman-two-students-looking-tablet_259150-60236.jpg" },
              items: [
                { icon: BarChart3, text: "Data Analysis & Visualization" },
                { icon: Brain, text: "Machine Learning Models" },
                { icon: TrendingUp, text: "Predictive Analytics" }
              ],
              reverse: false
            },
            {
              id: "4",              title: "Cybersecurity Essentials",              description: "Protect digital assets and understand modern security threats. Our cybersecurity training covers network security, ethical hacking, cryptography, and compliance standards.",              media: { imageSrc: "https://img.b2bpic.net/free-photo/woman-looking-into-tablet-happy-girl_259150-60239.jpg" },
              items: [
                { icon: Shield, text: "Network Security" },
                { icon: Lock, text: "Ethical Hacking" },
                { icon: Key, text: "Cryptography & Compliance" }
              ],
              reverse: true
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Flexible Pricing Plans"
          description="Choose the learning plan that fits your goals and budget. All plans include lifetime access to course materials and community support."
          tag="Pricing"
          plans={[
            {
              id: "starter",              badge: "Popular",              price: "$199",              subtitle: "Per month - Ideal for beginners",              buttons: [{ text: "Get Started", href: "/contact" }],
              features: [
                "Access to 2-3 core courses",                "Video tutorials and documentation",                "Community forum access",                "Certificate of completion",                "Lifetime access to materials"
              ]
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$399",              subtitle: "Per month - For professionals",              buttons: [{ text: "Start Now", href: "/contact" }],
              features: [
                "Access to all 8+ courses",                "Live mentoring sessions",                "Code review and feedback",                "Industry-recognized certificates",                "Job placement assistance",                "Exclusive webinars and workshops"
              ]
            },
            {
              id: "enterprise",              badge: "For Teams",              price: "Custom",              subtitle: "Tailored for organizations",              buttons: [{ text: "Contact Sales", href: "/contact" }],
              features: [
                "Custom curriculum design",                "Team training programs",                "Priority technical support",                "Advanced analytics dashboard",                "Dedicated account manager",                "Corporate certifications",                "On-site or remote training"
              ]
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="Student Success Stories"
          description="Hear from graduates who transformed their careers through TechAcademy"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          showRating={true}
          testimonials={[
            {
              id: "1",              name: "James Wilson",              handle: "@jameswilson",              testimonial: "The course structure was perfect for my learning style. Within 3 months, I secured a junior developer position. Highly recommended!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-vector/blue-circle-with-white-user_78370-4707.jpg"
            },
            {
              id: "2",              name: "Sophia Martinez",              handle: "@sophiam",              testimonial: "Outstanding mentorship and practical projects. The instructors genuinely care about student success. Best investment ever!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/selfie-portrait-videocall_23-2149186122.jpg"
            },
            {
              id: "3",              name: "Alex Thompson",              handle: "@alextech",              testimonial: "From zero coding experience to building full-stack applications. The curriculum is comprehensive and well-paced.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg"
            },
            {
              id: "4",              name: "Lisa Chen",              handle: "@lisachen",              testimonial: "Career transition made easy. The job placement support helped me land a role at a top tech company.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-woman_23-2148827181.jpg"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to Start Learning?"
          ctaDescription="Join thousands of students transforming their careers. Get personalized guidance on selecting the right course for your goals."
          ctaIcon={Lightbulb}
          ctaButton={{
            text: "Schedule a Consultation",            href: "/contact"
          }}
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          faqs={[
            {
              id: "1",              title: "Which course is best for me?",              content: "Start with our career assessment tool or speak with an advisor. If you're interested in web development, our Full-Stack track is ideal. For data-focused roles, try Data Science. Need help with cybersecurity? Our Security Essentials course is perfect."
            },
            {
              id: "2",              title: "How do I access course materials?",              content: "After enrollment, you'll receive immediate access to the learning platform. All video lectures, code repositories, and project materials are available in your dashboard with lifetime access."
            },
            {
              id: "3",              title: "Can I pause my learning?",              content: "Absolutely. With lifetime access, you control your learning pace. Pause anytime without losing access to materials. Many students take breaks between courses."
            },
            {
              id: "4",              title: "How much time should I dedicate weekly?",              content: "We recommend 10-15 hours per week for optimal learning. However, you can adjust based on your schedule. Part-time learners can take 6-9 months for a full course."
            }
          ]}
        />
      </div>

      <FooterLogoReveal
        logoText="TechAcademy"
        logoLineHeight={1.2}
      />
    </ThemeProvider>
  );
}