Testimonials Marquee

import { cn } from "@/lib/utils";

export interface TestimonialsMarqueeProps {
  label?: string;
  quotes?: { text: string; name: string }[];
  /** Seconds per loop. */
  speed?: number;
  className?: string;
}

const DEFAULT_QUOTES = [
  { text: "Faster than our old custom site", name: "Kasa" },
  { text: "Typography controls from the future", name: "Ortho" },
  { text: "Zero maintenance, finally", name: "Werk" },
  { text: "Clients notice the site first", name: "Marsh & Co" },
  { text: "Built our portfolio in a weekend", name: "Nord Studio" },
];

/** Slow horizontal ticker of short quotes in large display type, separated by signal dots, between two ink rules; pauses on hover, static and wrapped with reduced motion. Pure CSS. */
export function TestimonialsMarquee({ label = "Heard from studios", quotes = DEFAULT_QUOTES, speed = 45, className }: TestimonialsMarqueeProps) {
  const row = (hidden: boolean) => (
    <ul aria-hidden={hidden || undefined} className="flex shrink-0 items-center gap-10 pr-10">
      {quotes.map((q) => (
        <li key={q.name} className="flex items-center gap-10 whitespace-nowrap">
          <span className="font-da-display text-[clamp(1.75rem,4vw,3rem)] font-medium tracking-da-display">
            “{q.text}” <span className="font-da-mono text-xs tracking-da-label text-da-muted-fg uppercase">— {q.name}</span>
          </span>
          <span aria-hidden className="size-2.5 rounded-full bg-da-accent" />
        </li>
      ))}
    </ul>
  );
  return (
    <section aria-label={label} className={cn("overflow-hidden border-y border-da-border-strong bg-da-bg py-8 text-da-fg", className)}>
      <div className="mc-marquee flex w-max hover:[animation-play-state:paused]" style={{ animationDuration: `${speed}s` }}>
        {row(false)}
        {row(true)}
      </div>
      <style href="mc-marquee" precedence="default">{`
        @keyframes mc-marquee { to { translate: -50% 0 } }
        .mc-marquee { animation: mc-marquee 45s linear infinite }
        @media (prefers-reduced-motion: reduce) { .mc-marquee { animation: none; width: auto; flex-wrap: wrap } .mc-marquee > ul:last-child { display: none } .mc-marquee > ul { flex-wrap: wrap; padding-inline: var(--da-gutter) } }
      `}</style>
    </section>
  );
}

export default TestimonialsMarquee;