Testimonials Spotlight

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

export interface TestimonialsSpotlightProps {
  quote?: string;
  name?: string;
  role?: string;
  stats?: { value: string; label: string }[];
  logos?: string[];
  className?: string;
}

/** One big quote on a mint block with a round avatar made of shapes, three stat bubbles and a row of customer wordmarks under it. */
export function TestimonialsSpotlight({
  quote = "Planta is the calmest part of our day. We see the whole week, we ship on time, and nobody works late on Fridays anymore.",
  name = "Ana Souza",
  role = "Studio lead at Bright & Co",
  stats = [
    { value: "−45 min", label: "planning per week" },
    { value: "98%", label: "tasks on time" },
    { value: "12", label: "people, 1 board" },
  ],
  logos = ["Bright & Co", "Parcelly", "Hive", "Kindred", "Nook"],
  className,
}: TestimonialsSpotlightProps) {
  return (
    <section className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <figure className="mx-auto max-w-4xl rounded-[36px] bg-da-secondary p-8 text-da-secondary-fg sm:p-14">
          <span aria-hidden className="font-da-display text-7xl leading-none font-extrabold opacity-40">
            “
          </span>
          <blockquote className="-mt-6 font-da-display text-[clamp(1.5rem,3.2vw,2.25rem)] leading-snug font-extrabold tracking-da-display text-balance">
            {quote}
          </blockquote>
          <figcaption className="mt-8 flex items-center gap-4">
            <span aria-hidden className="relative size-14 overflow-hidden rounded-full bg-da-accent">
              <span className="absolute top-3 left-1/2 size-5 -translate-x-1/2 rounded-full bg-da-accent-fg/70" />
              <span className="absolute -bottom-3 left-1/2 h-8 w-10 -translate-x-1/2 rounded-full bg-da-accent-fg/70" />
            </span>
            <span>
              <span className="block font-semibold">{name}</span>
              <span className="block text-sm opacity-85">{role}</span>
            </span>
          </figcaption>
          <dl className="mt-10 grid gap-3 sm:grid-cols-3">
            {stats.map((s) => (
              <div key={s.label} className="flex flex-col rounded-da-lg bg-da-surface/70 p-5 text-da-fg">
                <dt className="order-2 text-sm text-da-muted-fg">{s.label}</dt>
                <dd className="font-da-display text-3xl font-extrabold">{s.value}</dd>
              </div>
            ))}
          </dl>
        </figure>
        <ul className="mt-10 flex flex-wrap items-center justify-center gap-x-10 gap-y-4" aria-label="Customers">
          {logos.map((l) => (
            <li key={l} className="font-da-display text-xl font-extrabold text-da-muted-fg">
              {l}
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default TestimonialsSpotlight;