Testimonials Marquee

import { Star } from "lucide-react";
import { cn } from "@/lib/utils";

export interface TestimonialsMarqueeItem {
  quote: string;
  name: string;
  role: string;
}

export interface TestimonialsMarqueeProps {
  eyebrow?: string;
  title?: string;
  rating?: { score: string; count: string };
  testimonials?: TestimonialsMarqueeItem[];
  /** Seconds for one full loop of a row. */
  duration?: number;
  className?: string;
}

const DEFAULT_TESTIMONIALS: TestimonialsMarqueeItem[] = [
  { quote: "We cancelled our Monday status meeting. Halo updates cover it and people actually watch them.", name: "Amara Diallo", role: "VP Product, Fieldnote" },
  { quote: "The action items land in Linear with the right owner. That alone saves our PMs hours every week.", name: "Leo Park", role: "Head of PM, Stackline" },
  { quote: "Summaries are shockingly accurate, even with four accents and a lot of crosstalk.", name: "Sofia Rossi", role: "Design Lead, Mosaic" },
  { quote: "Ask-your-meetings is the feature I didn't know I needed. Found a decision from March in five seconds.", name: "Noah Klein", role: "CTO, Parcelhub" },
  { quote: "Our team spans nine time zones. Async video made standups finally work for everyone.", name: "Hana Sato", role: "Eng Manager, Remotely" },
  { quote: "Security review took one call. EU residency and redaction were exactly what legal wanted.", name: "Marc Dubois", role: "CISO, Finlo" },
  { quote: "Onboarding new hires is easier: they watch the recaps of the last month and they're caught up.", name: "Priya Nair", role: "COO, Brightlane" },
  { quote: "I stopped taking notes during customer calls. I just listen now, and the CRM gets updated.", name: "Tom Becker", role: "Account Executive, Nordly" },
];

const GRADIENTS = ["from-da-primary to-da-accent", "from-da-accent to-da-success", "from-da-danger to-da-primary", "from-da-warning to-da-danger"];

function Card({ t, i }: { t: TestimonialsMarqueeItem; i: number }) {
  return (
    <figure className="da-stroke w-[340px] shrink-0 rounded-da-lg bg-da-surface p-6 shadow-da-md backdrop-blur-da backdrop-saturate-150">
      <blockquote className="text-[15px] leading-relaxed">“{t.quote}”</blockquote>
      <figcaption className="mt-5 flex items-center gap-3 text-sm">
        <span aria-hidden className={cn("grid size-9 place-items-center rounded-full bg-gradient-to-br text-xs font-semibold text-white", GRADIENTS[i % GRADIENTS.length])}>
          {t.name
            .split(" ")
            .map((w) => w[0])
            .join("")}
        </span>
        <span>
          <span className="block font-semibold">{t.name}</span>
          <span className="text-da-muted-fg">{t.role}</span>
        </span>
      </figcaption>
    </figure>
  );
}

export function TestimonialsMarquee({
  eyebrow = "Loved by 12,000+ teams",
  title = "Meetings people are glad they skipped",
  rating = { score: "4.9", count: "1,200+ reviews" },
  testimonials = DEFAULT_TESTIMONIALS,
  duration = 60,
  className,
}: TestimonialsMarqueeProps) {
  const half = Math.ceil(testimonials.length / 2);
  const rows = [testimonials.slice(0, half), testimonials.slice(half)];

  return (
    <section className={cn("da-section overflow-hidden text-da-fg", className)} aria-labelledby="testimonials-marquee-title">
      <div className="da-container text-center">
        <p className="text-sm font-semibold text-da-primary">{eyebrow}</p>
        <h2 id="testimonials-marquee-title" className="mx-auto mt-3 max-w-2xl font-da-display text-[clamp(2rem,4.5vw,3.25rem)] leading-[1.08] font-semibold tracking-da-display text-balance">
          {title}
        </h2>
        <p className="mt-4 inline-flex items-center gap-2 text-sm text-da-muted-fg">
          <span className="flex text-da-warning" aria-hidden>
            {Array.from({ length: 5 }, (_, i) => (
              <Star key={i} className="size-4 fill-current" />
            ))}
          </span>
          <span>
            <strong className="font-semibold text-da-fg">{rating.score}/5</strong> from {rating.count}
          </span>
        </p>
      </div>

      {/* Static, accessible list for assistive tech; the marquee below is its decorative duplicate. */}
      <ul className="sr-only">
        {testimonials.map((t) => (
          <li key={t.name}>
            “{t.quote}” — {t.name}, {t.role}
          </li>
        ))}
      </ul>

      <div aria-hidden className="glass-marquee mt-14 flex flex-col gap-5 [mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]">
        {rows.map((row, r) => (
          <div key={r} className="flex overflow-hidden">
            <div
              className="glass-marquee-track flex w-max gap-5 pr-5"
              style={{ animationDuration: `${duration}s`, animationDirection: r === 1 ? "reverse" : "normal" }}
            >
              {[...row, ...row].map((t, i) => (
                <Card key={`${t.name}-${i}`} t={t} i={i + r} />
              ))}
            </div>
          </div>
        ))}
      </div>

      <style href="glass-marquee" precedence="default">{`
        @keyframes glass-marquee { from { translate: 0 0 } to { translate: -50% 0 } }
        .glass-marquee-track { animation: glass-marquee 60s linear infinite }
        .glass-marquee:hover .glass-marquee-track { animation-play-state: paused }
        @media (prefers-reduced-motion: reduce) { .glass-marquee-track { animation: none } }
      `}</style>
    </section>
  );
}

export default TestimonialsMarquee;