Testimonials Logos

"use client";

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

export interface TestimonialsLogosItem {
  company: string;
  quote: string;
  name: string;
  role: string;
  metric: string;
}

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

const DEFAULT_ITEMS: TestimonialsLogosItem[] = [
  {
    company: "Northwind",
    quote: "Close went from twelve days to four. That alone paid for Ledgerly in the first quarter.",
    name: "Priya Raman",
    role: "VP Finance",
    metric: "−67% close time",
  },
  {
    company: "Lumen Health",
    quote: "Our collections team shrank its overdue list by half without sending a single manual email.",
    name: "Marcus Bell",
    role: "Controller",
    metric: "−52% overdue",
  },
  {
    company: "Parcel",
    quote: "Multi-entity used to mean six spreadsheets. Now it’s one ledger and a consolidated report.",
    name: "Elena Sørensen",
    role: "CFO",
    metric: "6 entities, 1 ledger",
  },
  {
    company: "Brightline",
    quote: "The approval workflows gave our auditors exactly what they asked for, out of the box.",
    name: "Daniel Okafor",
    role: "Head of Accounting",
    metric: "0 audit findings",
  },
];

/** Row of customer wordmark buttons acting as tabs; selecting one swaps the quote, author and key metric below. */
export function TestimonialsLogos({ title = "Trusted by 4,000+ finance teams", items = DEFAULT_ITEMS, className }: TestimonialsLogosProps) {
  const [active, setActive] = useState(0);
  const it = items[active] ?? items[0]!;
  return (
    <section aria-labelledby="nc-logos-title" className={cn("da-section bg-da-surface-2 text-da-fg", className)}>
      <div className="da-container">
        <h2 id="nc-logos-title" className="text-center text-sm font-semibold tracking-da-label text-da-muted-fg uppercase">
          {title}
        </h2>
        <div role="group" aria-label="Choose a customer" className="mx-auto mt-8 grid max-w-4xl grid-cols-2 gap-2 sm:grid-cols-4">
          {items.map((c, i) => (
            <button
              key={c.company}
              type="button"
              aria-pressed={i === active}
              onClick={() => setActive(i)}
              className={cn(
                "da-focus da-transition rounded-da-md border px-4 py-4 font-da-display text-lg font-extrabold tracking-da-display",
                i === active
                  ? "border-da-primary bg-da-surface text-da-fg shadow-da-sm"
                  : "border-transparent text-da-muted-fg hover:bg-da-surface hover:text-da-fg",
              )}
            >
              {c.company}
            </button>
          ))}
        </div>
        <figure
          key={it.company}
          aria-live="polite"
          className="mx-auto mt-10 max-w-3xl text-center transition-opacity duration-(--da-duration) starting:opacity-0"
        >
          <blockquote className="font-da-display text-[clamp(1.4rem,3vw,2rem)] leading-snug font-semibold text-balance">“{it.quote}”</blockquote>
          <figcaption className="mt-6 flex flex-wrap items-center justify-center gap-x-3 gap-y-2 text-sm">
            <span className="font-semibold">{it.name}</span>
            <span className="text-da-muted-fg">
              {it.role}, {it.company}
            </span>
            <span className="rounded-da-pill bg-da-success/12 px-2.5 py-0.5 font-semibold text-da-success">{it.metric}</span>
          </figcaption>
        </figure>
      </div>
    </section>
  );
}

export default TestimonialsLogos;