import Reveal from "@/components/Reveal";
import { CLIENTS, FEATURED_IN, RECOGNITION } from "@/lib/site";

function MarqueeRow({
  items,
  reverse = false,
  duration = "46s",
}: {
  items: readonly string[];
  reverse?: boolean;
  duration?: string;
}) {
  const row = [...items, ...items];
  return (
    <div className="relative overflow-hidden py-5">
      <div
        className={`marquee items-center gap-14 ${reverse ? "marquee-reverse" : ""}`}
        style={{ "--marquee-duration": duration } as React.CSSProperties}
      >
        {row.map((name, i) => (
          <span
            key={`${name}-${i}`}
            className="flex flex-shrink-0 items-center gap-14"
            aria-hidden={i >= items.length}
          >
            <span className="font-display whitespace-nowrap text-xl font-bold tracking-tight text-ivory/45 transition-colors hover:text-gold md:text-2xl">
              {name}
            </span>
            <span className="block h-1.5 w-1.5 rotate-45 bg-gold/50" />
          </span>
        ))}
      </div>
    </div>
  );
}

/** 06 — In the Press & In the Field: marquee of clients, features and recognition. */
export default function Press() {
  return (
    <section id="press" className="relative border-y border-ivory/5 bg-obsidian py-20 md:py-24">
      <div className="mx-auto max-w-[1440px] px-6 md:px-10">
        <Reveal>
          <div className="flex flex-wrap items-baseline justify-between gap-4">
            <p className="kicker">05 — In the Press &amp; In the Field</p>
            <p className="font-mono text-[0.6rem] uppercase tracking-[0.28em] text-warmgrey">
              Selected clients · features · recognition
            </p>
          </div>
        </Reveal>
      </div>

      <div className="mt-10 space-y-2">
        <MarqueeRow items={CLIENTS} duration="48s" />
        <MarqueeRow items={[...FEATURED_IN, ...RECOGNITION.slice(0, 2)]} reverse duration="56s" />
      </div>
    </section>
  );
}