"use client";

import Image from "next/image";
import { useEffect, useRef } from "react";
import Navbar from "@/components/Navbar";
import Hero from "@/components/sections/Hero";
import ProductsAndGallery from "@/components/sections/ProductsAndGallery";
import FAQ from "@/components/sections/FAQ";
import PinterestFeed from "@/components/sections/PinterestFeed";
import FindUs from "@/components/sections/FindUs";
import Footer from "@/components/Footer";
import CustomCursor from "@/components/CustomCursor";
import ScrollAnimations from "@/components/ScrollAnimations";
import gsap from "gsap";
import HomePreloader from "@/components/HomePreloader";

export default function Home() {
  const marqueeRef = useRef<HTMLDivElement>(null);
  const marqueeContentRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const marquee = marqueeRef.current;
    const content = marqueeContentRef.current;
    if (!marquee || !content) return;

    // Set initial position
    gsap.set(content, { x: 0 });

    // Infinite loop animation
    const tl = gsap.to(content, {
      x: "-50%",
      duration: 30, // Slightly faster for images
      ease: "none",
      repeat: -1,
    });

    const handleMouseEnter = () => {
      gsap.to(tl, { timeScale: 0.2, duration: 1, ease: "power2.out" });
    };

    const handleMouseLeave = () => {
      gsap.to(tl, { timeScale: 1, duration: 1, ease: "power2.inOut" });
    };

    marquee.addEventListener("mouseenter", handleMouseEnter);
    marquee.addEventListener("mouseleave", handleMouseLeave);

    return () => {
      marquee.removeEventListener("mouseenter", handleMouseEnter);
      marquee.removeEventListener("mouseleave", handleMouseLeave);
      tl.kill();
    };
  }, []);

  const clientLogos = [
    "sivilima123.webp",
    "ipanel123.webp",
    "idea123.webp",
    "siyana123.webp",
    "best500123.webp",
    "idea-metals123.webp"
  ];

  return (
    <main className="min-h-screen bg-white text-foreground overflow-hidden">
      <HomePreloader />
      <ScrollAnimations />
      <Navbar />
      <Hero />

      {/* <section className="py-4 bg-white border-b border-foreground/5 overflow-hidden">
        <div className="max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40 ">
          <p className="text-center text-[14px] font-bold uppercase tracking-[0.4em] text-foreground/40 py-4 md:pt-4 md:pb-0">
            Our Brands
          </p>
        </div>
        <div ref={marqueeRef} className="relative flex overflow-x-hidden group cursor-default">

          <div className="absolute inset-y-0 left-0 w-24 md:w-80 bg-gradient-to-r from-white via-white to-transparent z-10 pointer-events-none" />
          <div className="absolute inset-y-0 right-0 w-24 md:w-80 bg-gradient-to-l from-white via-white to-transparent z-10 pointer-events-none" />

          <div ref={marqueeContentRef} className=" whitespace-nowrap flex items-center">

            {clientLogos.map((src, i) => (
              <div key={`${src}-${i}`} className="mx-2 md:mx-4 relative h-16 md:h-32 w-[40vw] md:w-64 flex-shrink-0 transition-all duration-500 hover:scale-105">
                <Image
                  src={`/images/${src}`}
                  alt="Brand Logo"
                  fill
                  sizes="(max-width: 768px) 256px, 256px"
                  className="object-contain"
                />
              </div>
            ))}

            {clientLogos.map((src, i) => (
              <div key={`${src}-dup-${i}`} className="mx-2 md:mx-4 relative h-16 md:h-32 w-[40vw] md:w-64 flex-shrink-0 transition-all duration-500 hover:scale-105">
                <Image
                  src={`/images/${src}`}
                  alt="Brand Logo"
                  fill
                  sizes="(max-width: 768px) 256px, 256px"
                  className="object-contain"
                />
              </div>
            ))}
          </div>
        </div>
      </section> */}

      <ProductsAndGallery />
      <PinterestFeed />
      <FindUs />
      <Footer />
    </main>
  );
}