"use client";

import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import Image from "next/image";

const logos = [
  { src: "/images/1.png", title: "Logo 1" },
  { src: "/images/2.png", title: "Logo 2" },
  { src: "/images/3.png", title: "Logo 3" },
  { src: "/images/4.png", title: "Logo 4" },
  { src: "/images/5.png", title: "Logo 5" },
  { src: "/images/6.png", title: "Logo 6" },
  { src: "/images/7.png", title: "Logo 7" },
  { src: "/images/8.png", title: "Logo 8" },
  { src: "/images/9.png", title: "Logo 9" },
  { src: "/images/10.png", title: "Logo 10" },
];

export default function LogoSlider() {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const imgContainers = gsap.utils.toArray(
      ".img-container",
      containerRef.current
    );

    const tl = gsap.timeline({ repeat: -1 });

    imgContainers.forEach((container, i) => {
      const images = gsap.utils.toArray("img", container);
      const nextContainer = imgContainers[i + 1];

      if (i) {
        gsap.set(images, { yPercent: 105 });
      }

      if (nextContainer) {
        const nextImages = gsap.utils.toArray("img", nextContainer);

        tl.to(
          images,
          {
            yPercent: -125,
            ease: "power1.inOut",
            stagger: 0.1,
            onComplete: () => gsap.set(images, { yPercent: 105 }),
          },
          "+=2"
        ).to(
          nextImages,
          {
            yPercent: 0,
            ease: "power1.inOut",
            stagger: 0.1,
          },
          "<"
        );
      } else {
        tl.to(
          images,
          {
            yPercent: -125,
            ease: "power1.inOut",
            stagger: 0.1,
            onComplete: () => gsap.set(images, { yPercent: 105 }),
          },
          "+=1"
        );
      }
    });

    tl.to(
      gsap.utils.toArray("img", imgContainers[0]),
      {
        yPercent: 0,
        ease: "power1.inOut",
        stagger: 0.1,
      },
      "<"
    );
  }, []);

  // Instead of fixed slices, dynamically chunk logos
  const chunkArray = (arr, size) => {
    const chunks = [];
    for (let i = 0; i < arr.length; i += size) {
      chunks.push(arr.slice(i, i + size));
    }
    return chunks;
  };

  // Show fewer per row on mobile, more on desktop
  const logoSets = chunkArray(logos, 5);

  return (
    <div className="w-full flex justify-center items-center py-8">
      <div
        ref={containerRef}
       
         className="relative w-11/12 max-w-6xl h-20 sm:h-28 md:h-28 overflow-hidden"

      >
        {logoSets.map((set, i) => (
          <div
            key={i}
            className="img-container absolute top-0 left-0 w-full flex justify-evenly sm:gap-4 "
          >
            {set.map((logo, idx) => (
              <div
                key={idx}
                className="relative w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 flex-shrink-0"
              >
               
                    <Image
                      src={logo.src}
                      alt={logo.title}
                      fill
                      sizes="(max-width: 640px) 64px, (max-width: 768px) 80px, 112px"
                      className="object-contain p-1 sm:p-2"
                    />
               
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}
