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

type Props = {
  /** Green stats section vs white hero */
  variant?: "on-green" | "on-light";
  className?: string;
};

export function LastYearWinnersScroll({ variant = "on-green", className }: Props) {
  const items = [...lastYearWinners, ...lastYearWinners];
  const onLight = variant === "on-light";

  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-1 text-center text-sm font-medium",
          onLight ? "text-[#1a5c38]/80" : "text-white/85"
        )}
      >
        {lastYearWinnersCopy.headline}
      </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 flex w-max shrink-0 items-center gap-3 py-1">
          {items.map((company, i) => (
            <LastYearWinnerMark key={`${company.id}-${i}`} company={company} />
          ))}
        </div>
      </div>
    </div>
  );
}