Testimonials Logos

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

export interface TestimonialsLogosItem {
  company: string;
  stat: string;
  statLabel: string;
  quote: string;
  author: string;
}

export interface TestimonialsLogosProps {
  kicker?: string;
  title?: string;
  items?: TestimonialsLogosItem[];
  className?: string;
}

const TONES = ["bg-da-primary text-da-primary-fg", "bg-da-surface text-da-surface-fg", "bg-da-accent text-da-accent-fg", "bg-da-surface text-da-surface-fg"];

export function TestimonialsLogos({
  kicker = "[ 05 ] Case studies",
  title = "Numbers from teams that switched.",
  items = [
    { company: "LEDGERLINE", stat: "−6h", statLabel: "per week on release notes", quote: "Fridays are for shipping again.", author: "Maya O., Head of Product" },
    { company: "PARCELO", stat: "2×", statLabel: "feature adoption", quote: "The widget made launches visible.", author: "Tomás V., Growth PM" },
    { company: "FORMBASE", stat: "−33%", statLabel: "post-launch tickets", quote: "Localized notes, zero agency.", author: "Aiko T., CS Lead" },
    { company: "KITEWIRE", stat: "11%", statLabel: "of trial signups", quote: "Our changelog is a channel now.", author: "Priya R., VP Marketing" },
  ],
  className,
}: TestimonialsLogosProps) {
  return (
    <section className={cn("da-section da-stroke-b bg-da-bg text-da-fg", className)} aria-labelledby="testimonials-logos-title">
      <div className="da-container">
        <p className="font-da-mono text-xs font-bold tracking-da-label text-da-muted-fg uppercase">{kicker}</p>
        <h2 id="testimonials-logos-title" className="mt-3 font-da-display text-[clamp(2rem,5vw,3.5rem)] leading-[0.95] tracking-da-display uppercase">
          {title}
        </h2>
        <ul className="da-stroke mt-12 grid gap-(--da-border-width) bg-da-border shadow-da-lg sm:grid-cols-2 lg:grid-cols-4">
          {items.map((it, i) => (
            <li key={it.company} className={cn("flex flex-col p-6", TONES[i % TONES.length])}>
              <p className="font-da-display text-lg tracking-da-display">{it.company}</p>
              <p className="mt-8 font-da-display text-6xl leading-none tracking-da-display">{it.stat}</p>
              <p className="mt-2 font-da-mono text-xs font-bold uppercase opacity-80">{it.statLabel}</p>
              <figure className="mt-8 border-t-[length:var(--da-border-width)] border-current pt-4">
                <blockquote className="font-bold">“{it.quote}”</blockquote>
                <figcaption className="mt-2 text-sm opacity-80">{it.author}</figcaption>
              </figure>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default TestimonialsLogos;