rt React, { useEffect, useState } from "react";

export default function HomePage() {
  const sections = [
    "hero", "video", "comparison", "features", "benefits", "how-it-works", "pricing", "contact"
  ];

  const sectionLabels = [
    "iGala LEDs",
    "How-it-looks",
    "Don't Waste Your Windows",
    "Features",
    "Benefits",
    "How-it-works",
    "Pricing",
    "Contact"
  ];

  const [activeSection, setActiveSection] = useState("hero");

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setActiveSection(entry.target.id);
          }
        });
      },
      { threshold: 0.6 }
    );

    sections.forEach((id) => {
      const el = document.getElementById(id);
      if (el) observer.observe(el);
    });

    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    const link = document.createElement("link");
    link.rel = "icon";
    link.type = "image/png";
    link.href = "/media/ChatGPT Image Apr 9, 2025, 12_45_59 PM.png";
    document.head.appendChild(link);
  }, []);

  return (
    <div className="h-screen overflow-y-scroll snap-y snap-mandatory scroll-smooth relative">
      {/* Top Nav */}
      <header className="fixed top-0 left-0 right-0 bg-white shadow z-50 flex items-center justify-between px-6 py-2">
        <img src="/media/iGala new logo.png" alt="iGala Logo" className="h-10" />
        <nav className="hidden md:flex space-x-6 text-sm font-medium items-center">
          <a href="#hero" className="text-gray-700 hover:text-black">Products</a>
          <a href="#features" className="text-gray-700 hover:text-black">Services</a>
          <a href="#benefits" className="text-gray-700 hover:text-black">About</a>
          <a href="#pricing" className="text-gray-700 hover:text-black">News</a>
          <a href="#contact" className="text-black border border-black px-4 py-2 rounded-full hover:bg-black hover:text-white transition">Contact Us</a>
        </nav>
      </header>

      {/* Scroll Progress Bar */}
      <div className="fixed top-0 left-0 w-full h-1 bg-gray-200 z-50">
        <div
          className="h-full bg-black transition-all duration-200"
          style={{ width: `${(sections.indexOf(activeSection) + 1) / sections.length * 100}%` }}
        ></div>
      </div>

      {/* Dot Navigation */}
      <div className="fixed right-4 top-1/2 transform -translate-y-1/2 z-40 flex flex-col space-y-2 items-center">
        {sections.map((id, index) => (
          <a
            key={id}
            href={`#${id}`}
            className="group flex flex-col items-center space-y-1"
          >
            <span
              className={`rounded-full transition-all duration-300 ${
                activeSection === id
                  ? 'bg-black w-4 h-4'
                  : 'bg-gray-400 w-2 h-2'
              }`}
            ></span>
            <span className="text-xs text-gray-700 whitespace-nowrap absolute right-6 opacity-0 group-hover:opacity-100 bg-white px-2 py-1 rounded shadow-lg transition-opacity">
              {sectionLabels[index]}
            </span>
          </a>
        ))}
      </div>

      {/* Hero Section */}
      <section
        id="hero"
        className="relative h-screen snap-start flex flex-col justify-center items-center text-center px-4 overflow-hidden bg-cover bg-center"
        style={{ backgroundImage: "url('/media/hero.png')" }}
      >
        <div className="bg-black bg-opacity-40 p-6 rounded-xl">
          <h1 className="text-4xl md:text-6xl font-bold mb-4 text-white">
            Transform Your Windows into<br />
            Revenue-Generating Displays
          </h1>
        </div>
      </section>

      {/* Video Section */}
      <section id="video" className="h-screen snap-start relative overflow-hidden">
        <video
          autoPlay
          muted
          loop
          playsInline
          className="w-full h-full object-cover absolute top-0 left-0 z-[-1]"
        >
          <source src="/media/364411629866971140.mp4" type="video/mp4" />
        </video>
      </section>
    </div>
  );
}