Testimonials

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

// Use real quotes from real customers, with their permission.
const testimonials = [
  { quote: "I used to spend Friday afternoons writing ‘just checking in’ emails. Now Fernbill sends them, and I only hear about it when the money arrives.",
    name: "Asha Rao", role: "Illustrator, Bengaluru", featured: true },
  { quote: "Our retainers bill themselves on the first of the month. That alone was worth the switch.", name: "Daniel Okafor", role: "Founder, Blue Pine Studio" },
  { quote: "Clients in three countries, one screen. I finally know what’s late without a spreadsheet.", name: "Lena Marsh", role: "Translator" },
  { quote: "The client portal ended the ‘can you resend that invoice?’ emails almost overnight.", name: "Ravi Menon", role: "Operations, Marigold Events" },
];

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

export function Testimonials() {
  return (
    <section aria-labelledby="quotes-title" className="bg-surface font-sans">
      <div className="mx-auto max-w-6xl px-4 py-20 sm:px-6">
        <h2 id="quotes-title" className="mx-auto max-w-xl text-balance text-center text-3xl font-semibold tracking-tight text-fg sm:text-4xl">
          Fewer awkward emails, more paid invoices
        </h2>
        <div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {testimonials.map((t) => (
            <figure
              key={t.name}
              className={cn(
                "flex flex-col justify-between gap-6 rounded-xl border border-border bg-bg p-6",
                t.featured && "bg-primary-soft sm:col-span-2 lg:col-span-3 sm:p-8",
              )}
            >
              <blockquote className={cn("text-pretty text-fg", t.featured ? "max-w-3xl text-xl font-medium leading-relaxed tracking-tight" : "text-[15px] leading-relaxed")}>
                “{t.quote}”
              </blockquote>
              <figcaption className="flex items-center gap-3 text-sm">
                <span className="inline-grid size-9 place-items-center rounded-full bg-bg text-[13px] font-medium text-primary-soft-fg ring-1 ring-border">{initials(t.name)}</span>
                <span>
                  <span className="block font-medium text-fg">{t.name}</span>
                  <span className="block text-fg-subtle">{t.role}</span>
                </span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}