Testimonials — two quotes side by side

import { BarChart3, Check, type LucideIcon } from "lucide-react";

const quotes: { company: string; quote: string; name: string; role: string; result: string; icon: LucideIcon }[] = [
  { company: "Larchfield", quote: "Quotes turn into invoices the moment a client says yes. Nothing gets retyped, and nothing slips through between the site visit and the bill.", name: "Julia Brandt", role: "Owner, Larchfield Gardens", result: "Paid 9 days sooner", icon: BarChart3 },
  { company: "Ovenbird", quote: "Payments land already matched to the right invoice. Our accountant spends an afternoon with us each month instead of a full week.", name: "Omar Haddad", role: "Co-owner, Ovenbird Café", result: "4 days saved monthly", icon: Check },
];

const initials = (name: string) => name.split(" ").map((w) => w[0]).join("").slice(0, 2);

export function TestimonialsDuo() {
  return (
    <section aria-label="Customer quotes" className="bg-surface px-5 py-12 font-sans sm:px-10 sm:py-20">
      <div className="mx-auto grid max-w-6xl md:grid-cols-2">
        {quotes.map((q, i) => (
          <figure
            key={q.name}
            className={
              i === 0
                ? "grid content-between gap-6 pb-9 md:py-1 md:pr-14"
                : "grid content-between gap-6 border-t border-border pt-9 md:border-l md:border-t-0 md:py-1 md:pl-14"
            }
          >
            <p className="text-[17px] font-bold tracking-tight text-fg">{q.company}</p>
            <blockquote className="text-pretty text-lg font-medium leading-relaxed tracking-tight text-fg sm:text-[22px]">
              <p>“{q.quote}”</p>
            </blockquote>
            <figcaption className="flex flex-wrap items-center justify-between gap-3.5">
              <div className="flex items-center gap-3">
                <span className="grid size-9 place-items-center rounded-full bg-primary-soft text-[13px] font-medium text-primary-soft-fg" aria-hidden>{initials(q.name)}</span>
                <div>
                  <p className="text-sm font-semibold text-fg">{q.name}</p>
                  <p className="text-[13px] text-fg-muted">{q.role}</p>
                </div>
              </div>
              <span className="inline-flex h-7 items-center gap-1.5 whitespace-nowrap rounded-full bg-primary-soft px-2.5 text-[12.5px] font-medium text-primary-soft-fg">
                <q.icon className="size-3.5" aria-hidden /> {q.result}
              </span>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
}