Lab and press marquee

import { cn } from "@/components/storekit/lib/cn"

/* "As tested by" marquee. Wordmarks are set in the mono face as text, so
   there are no third-party logos to license. Edges fade with a mask, the
   track pauses on hover or focus, and reduced motion gets a static row. */

export function TrustLogos({
  label = "As tested by",
  names = ["Arclight Labs", "Meridian Analytical", "Northfield QA", "Praxis Assay", "Halden and Co", "Verity Testing"],
  className,
}: {
  label?: string
  names?: string[]
  className?: string
}) {
  const Row = ({ hidden }: { hidden?: boolean }) => (
    <ul
      aria-hidden={hidden || undefined}
      className={cn("flex shrink-0 items-center", hidden && "motion-reduce:hidden")}
    >
      {names.map((n) => (
        <li
          key={n}
          className="flex items-center gap-3 px-6 font-sk-mono text-sm uppercase tracking-[0.18em] text-sk-muted transition-colors duration-200 hover:text-sk-ink sm:px-10"
        >
          <span className="h-2 w-2 rotate-45 border border-current" aria-hidden />
          <span className="whitespace-nowrap">{n}</span>
        </li>
      ))}
    </ul>
  )

  return (
    <div data-sk-section="trust" data-sk-variant="trust-logos" className={cn("flex flex-col items-center gap-5", className)}>
      <p className="font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-muted">{label}</p>
      <div
        className="group w-full overflow-hidden [mask-image:linear-gradient(90deg,transparent,rgb(0_0_0)_12%,rgb(0_0_0)_88%,transparent)]"
        role="region"
        aria-label={label}
      >
        <div className="flex w-max animate-sk-marquee group-focus-within:[animation-play-state:paused] group-hover:[animation-play-state:paused] motion-reduce:w-full motion-reduce:animate-none motion-reduce:flex-wrap motion-reduce:justify-center">
          <Row />
          <Row hidden />
        </div>
      </div>
    </div>
  )
}