msgapp/src/app/components/HeroBanner.tsx

"use client";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import Image from "next/image";

type Banner = { id: string; title: string; imageUrl: string; linkUrl?: string | null };

export function HeroBanner() {
  const [banners, setBanners] = useState<Banner[]>([]);
  const [activeIndex, setActiveIndex] = useState(0);
  const [isHovered, setIsHovered] = useState(false);
  const [progress, setProgress] = useState(0); // 0..1
  const rotationMs = 5000;
  const rafIdRef = useRef<number | null>(null);
  const startedAtRef = useRef<number>(0);

  useEffect(() => {
    fetch("/api/banners").then((r) => r.json()).then((d) => setBanners(d.banners ?? []));
  }, []);

  const numSlides = banners.length;
  const canAutoPlay = numSlides > 1 && !isHovered;

  const startTicker = useCallback(() => {
    if (!canAutoPlay) return;
    startedAtRef.current = performance.now();
    const tick = () => {
      const now = performance.now();
      const elapsed = now - startedAtRef.current;
      const nextProgress = Math.min(1, elapsed / rotationMs);
      setProgress(nextProgress);
      if (nextProgress >= 1) {
        setActiveIndex((i) => (i + 1) % Math.max(1, numSlides));
        startedAtRef.current = performance.now();
        setProgress(0);
      }
      rafIdRef.current = window.requestAnimationFrame(tick);
    };
    rafIdRef.current = window.requestAnimationFrame(tick);
  }, [canAutoPlay, numSlides, rotationMs]);

  const stopTicker = useCallback(() => {
    if (rafIdRef.current) {
      window.cancelAnimationFrame(rafIdRef.current);
      rafIdRef.current = null;
    }
  }, []);

  useEffect(() => {
    stopTicker();
    setProgress(0);
    startTicker();
    return () => stopTicker();
  }, [startTicker, stopTicker, activeIndex, isHovered, numSlides]);

  const goTo = useCallback((index: number) => {
    if (numSlides === 0) return;
    const next = (index + numSlides) % numSlides;
    setActiveIndex(next);
    setProgress(0);
    startedAtRef.current = performance.now();
  }, [numSlides]);

  const goPrev = useCallback(() => goTo(activeIndex - 1), [activeIndex, goTo]);
  const goNext = useCallback(() => goTo(activeIndex + 1), [activeIndex, goTo]);

  const translatePercent = useMemo(() => (numSlides > 0 ? -(activeIndex * 100) : 0), [activeIndex, numSlides]);

  if (numSlides === 0) return null;

  return (
    <section
      className="relative w-full overflow-hidden rounded-xl bg-neutral-900 text-white"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      aria-roledescription="carousel"
    >
      <div className="relative h-56 sm:h-72 md:h-[264px]">
        <div
          className="flex h-full w-full transition-transform duration-500 ease-out"
          style={{ transform: `translate3d(${translatePercent}%, 0, 0)`, width: `${numSlides * 100}%` }}
        >
          {banners.map((banner) => (
            <div key={banner.id} className="relative h-full w-full shrink-0">
              {banner.linkUrl ? (
                <a href={banner.linkUrl} className="block h-full w-full focus:outline-none focus:ring-2 focus:ring-white/60" aria-label={banner.title}>
                  <Image src={banner.imageUrl} alt={banner.title} fill priority className="object-cover" />
                </a>
              ) : (
                <Image src={banner.imageUrl} alt={banner.title} fill priority className="object-cover" />
              )}
              <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent" />
              <div className="absolute bottom-3 left-4 right-4 md:bottom-5 md:left-6 md:right-6">
                <h2 className="line-clamp-2 text-lg font-semibold md:text-2xl">{banner.title}</h2>
              </div>
            </div>
          ))}
        </div>

        {/* Controls */}
        {numSlides > 1 && (
          <>
            <button
              type="button"
              aria-label="Previous slide"
              onClick={goPrev}
              className="absolute left-2 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black/40 p-2 text-white backdrop-blur transition hover:bg-black/60 focus:outline-none focus:ring-2 focus:ring-white/60"
            >
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5"><path d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>
            </button>
            <button
              type="button"
              aria-label="Next slide"
              onClick={goNext}
              className="absolute right-2 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black/40 p-2 text-white backdrop-blur transition hover:bg-black/60 focus:outline-none focus:ring-2 focus:ring-white/60"
            >
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5"><path d="M8.25 4.5 15.75 12l-7.5 7.5" /></svg>
            </button>
          </>
        )}
      </div>

      {/* Progress bar
      {numSlides > 1 && (
        <div className="absolute bottom-0 left-0 right-0 z-10 h-1 bg-white/20">
          <div className="h-full bg-white transition-[width] duration-100" style={{ width: `${progress * 100}%` }} />
        </div>
      )} */}

      {/* Pagination */}
      {numSlides > 1 && (
        <div className="absolute bottom-3 left-1/2 -translate-x-1/2 z-10 flex gap-2">
          {banners.map((_, i) => (
            <button
              key={i}
              aria-label={`Go to slide ${i + 1}`}
              aria-current={activeIndex === i ? "true" : undefined}
              onClick={() => goTo(i)}
              className={`h-2 w-2 rounded-full transition ${activeIndex === i ? "bg-white" : "bg-white/40 hover:bg-white/70"}`}
            />
          ))}
        </div>
      )}
    </section>
  );
}