"use client";
import React, { useState, useEffect, useRef } from "react";
import {
  BoltIcon,
  ShieldCheckIcon,
  SparklesIcon,
  CpuChipIcon,
  ArrowRightIcon,
  PlayIcon,
  StarIcon,
  CloudArrowUpIcon,
  MagnifyingGlassIcon,
  CameraIcon,
} from "@heroicons/react/24/outline";

import Navbar from "@/components/layout/Navbar";
import Footer from "@/components/layout/Footer";
import FeatruesSection from "@/components/ui/FeaturesSection";
import HeroSection from "@/components/ui/HeroSection";
import HowItWorksSection from "@/components/ui/HowItWorksSection";
import EventsSection from "@/components/ui/EventsSection";
import AboutSection from "@/components/ui/AboutSection";
import PricingSection from "@/components/ui/PricingSection";
import CTASection from "@/components/ui/CTASection";
import HeroAnimatedBackground from "@/components/ui/HeroAnimatedBackground";

const HomePage: React.FC = () => {
  const [navShadow, setNavShadow] = useState(false);
  const [isVisible, setIsVisible] = useState(false);
  const heroRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    setIsVisible(true);
    const handleScroll = () => {
      setNavShadow(window.scrollY > 50);
    };

    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white overflow-hidden">
      {/* Animated Background */}
      <HeroAnimatedBackground />

      {/* Navigation */}
      <Navbar navShadow={navShadow} ArrowRightIcon={ArrowRightIcon} />

      {/* Main Content with top padding to account for fixed navbar */}
      <div className="pt-20">

      {/* Hero Section */}
      <HeroSection
        isVisible={isVisible}
        heroRef={heroRef}
        ArrowRightIcon={ArrowRightIcon}
        SparklesIcon={SparklesIcon}
        PlayIcon={PlayIcon}
      />

      {/* Features Section */}
      <FeatruesSection
        StarIcon={StarIcon}
        CpuChipIcon={CpuChipIcon}
        BoltIcon={BoltIcon}
        ShieldCheckIcon={ShieldCheckIcon}
      />

      {/* How It Works Section (Timeline) */}
      <HowItWorksSection
        BoltIcon={BoltIcon}
        CameraIcon={CameraIcon}
        MagnifyingGlassIcon={MagnifyingGlassIcon}
        CloudArrowUpIcon={CloudArrowUpIcon}
      />

      {/* Current Events Section */}
      <EventsSection StarIcon={StarIcon} />

      {/* About SpotMe Section */}
      <AboutSection
        BoltIcon={BoltIcon}
        CpuChipIcon={CpuChipIcon}
        SparklesIcon={SparklesIcon}
        ShieldCheckIcon={ShieldCheckIcon}
      />

      {/* Pricing Section */}
      <PricingSection StarIcon={StarIcon} />

      {/* CTA Section */}
      <CTASection SparklesIcon={SparklesIcon} ArrowRightIcon={ArrowRightIcon} />

      {/* Footer */}
      <Footer ArrowRightIcon={ArrowRightIcon} />
      </div>
    </div>
  );
};

export default HomePage;