Testimonials Cards

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

export interface TestimonialsCardsItem {
  quote: string;
  name: string;
  role: string;
  company: string;
  initials: string;
}

export interface TestimonialsCardsProps {
  eyebrow?: string;
  title?: string;
  items?: TestimonialsCardsItem[];
  className?: string;
}

const DEFAULT_ITEMS: TestimonialsCardsItem[] = [
  {
    quote: "Implementation took two weeks, including the NetSuite sync. Support answered every question within the hour.",
    name: "Jordan Ortiz",
    role: "Finance Manager",
    company: "Parcel",
    initials: "JO",
  },
  {
    quote: "Automatic reconciliation is the feature I didn’t know I needed. 97% of our payments match on their own.",
    name: "Aisha Khan",
    role: "Senior Accountant",
    company: "Lumen Health",
    initials: "AK",
  },
  {
    quote: "Our customers love the payment portal. We get paid by card the same day the invoice goes out.",
    name: "Tom Becker",
    role: "Founder",
    company: "Studio Nine",
    initials: "TB",
  },
  {
    quote: "SSO, audit logs and granular roles made our security review a formality.",
    name: "Grace Liu",
    role: "IT Director",
    company: "Brightline",
    initials: "GL",
  },
  {
    quote: "We replaced three tools and cut our AR headcount needs as we doubled revenue.",
    name: "Samuel Adeyemi",
    role: "COO",
    company: "Northwind",
    initials: "SA",
  },
  { quote: "The cash forecast is now the first tab our CEO opens every Monday.", name: "Lena Hoffmann", role: "FP&A Lead", company: "Kestrel", initials: "LH" },
];

/** Clean 3-column grid of bordered quote cards with company name header, quote, and initials avatar + role footer divided by a hairline. */
export function TestimonialsCards({
  eyebrow = "Testimonials",
  title = "Finance teams run on Ledgerly",
  items = DEFAULT_ITEMS,
  className,
}: TestimonialsCardsProps) {
  return (
    <section aria-labelledby="nc-cards-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <p className="text-xs font-semibold tracking-da-label text-da-primary uppercase">{eyebrow}</p>
        <h2 id="nc-cards-title" className="mt-3 font-da-display text-[clamp(2rem,4.5vw,3rem)] leading-[1.1] font-extrabold tracking-da-display">
          {title}
        </h2>
        <ul className="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {items.map((t) => (
            <li key={t.name}>
              <figure className="da-stroke flex h-full flex-col rounded-da-lg bg-da-surface p-6 text-da-surface-fg">
                <p className="text-xs font-semibold tracking-da-label text-da-muted-fg uppercase">{t.company}</p>
                <blockquote className="mt-3 flex-1 text-[15px] leading-relaxed">“{t.quote}”</blockquote>
                <figcaption className="mt-6 flex items-center gap-3 border-t border-da-border pt-4">
                  <span aria-hidden className="grid size-9 place-items-center rounded-full bg-da-muted text-sm font-semibold">
                    {t.initials}
                  </span>
                  <span className="text-sm">
                    <span className="block font-semibold">{t.name}</span>
                    <span className="block text-da-muted-fg">{t.role}</span>
                  </span>
                </figcaption>
              </figure>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default TestimonialsCards;