GRV-Summit-Site/components/home/LastYearWinnersScroll.tsx

"use client";

import { useCallback, useState } from "react";
import { lastYearWinners, lastYearWinnersCopy } from "@/content/last-year-winners";
import { LastYearWinnerMark } from "@/components/home/LastYearWinnerMark";
import { cn } from "@/lib/utils";

type Props = {
  variant?: "on-green" | "on-light";
  className?: string;
};

export function LastYearWinnersScroll({ variant = "on-green", className }: Props) {
  const items = [...lastYearWinners, ...lastYearWinners];
  const onLight = variant === "on-light";
  const [activeTipKey, setActiveTipKey] = useState<string | null>(null);

  const openTip = useCallback((key: string) => {
    setActiveTipKey(key);
  }, []);

  const closeTip = useCallback(() => {
    setActiveTipKey(null);
  }, []);

  return (
    <div
      className={cn(
        "pt-8",
        onLight ? "mt-8 border-t border-[#1a5c38]/12" : "mt-10 border-t border-white/15",
        className
      )}
    >
      <p
        className={cn(
          "text-center text-[10px] font-semibold uppercase tracking-[0.2em] text-[#ffb300]"
        )}
      >
        {lastYearWinnersCopy.eyebrow}
      </p>
      <p
        className={cn(
          "mt-2 text-center text-lg font-bold tracking-tight md:text-xl",
          onLight ? "text-[#0d3d26]" : "text-white"
        )}
      >
        {lastYearWinnersCopy.headline}
      </p>
      <p className="mt-2 text-center">
        <span className="inline-block rounded-full bg-white px-3 py-1 text-[11px] font-medium text-[#1a5c38] shadow-sm">
          {lastYearWinnersCopy.hoverHint}
        </span>
      </p>
      <div
        className="relative mt-5 overflow-hidden"
        aria-label="Companies supported at last year's summit"
      >
        <div
          className={cn(
            "pointer-events-none absolute inset-y-0 left-0 z-10 w-10 bg-gradient-to-r to-transparent",
            onLight ? "from-white" : "from-[#1a5c38]"
          )}
        />
        <div
          className={cn(
            "pointer-events-none absolute inset-y-0 right-0 z-10 w-10 bg-gradient-to-l to-transparent",
            onLight ? "from-white" : "from-[#1a5c38]"
          )}
        />
        <div className="marquee-winners pointer-events-auto flex w-max shrink-0 items-center gap-3 py-1">
          {items.map((company, i) => {
            const tipKey = `${company.id}-${i}`;
            return (
              <LastYearWinnerMark
                key={tipKey}
                tipKey={tipKey}
                company={company}
                variant={variant}
                isTipOpen={activeTipKey === tipKey}
                onTipOpen={openTip}
                onTipClose={closeTip}
              />
            );
          })}
        </div>
      </div>
    </div>
  );
}