Testimonials — highlighted phrases

import { ArrowRight } from "lucide-react";

const quotes = [
  { before: "I used to spend the last Friday of every month chasing payments. Now ", highlight: "the reminders go out on their own", after: " and that Friday is mine again.", name: "Priya Natarajan", role: "Owner, Lantern Joinery" },
  { before: "Our accountant asked what had changed, because ", highlight: "the books finally matched the bank", after: " without anyone touching them.", name: "Tom Alvarez", role: "Director, Alvarez Plumbing" },
  { before: "Clients in four countries, one screen. ", highlight: "I know what’s late before they do", after: ", and I haven’t built a spreadsheet since.", name: "Sofia Marín", role: "Freelance translator" },
];

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

export function TestimonialsHighlighted() {
  return (
    <section aria-labelledby="words-title" className="bg-bg px-5 py-12 font-sans sm:px-10 sm:py-20">
      <div className="mx-auto grid max-w-6xl gap-8 lg:grid-cols-[0.8fr_1.5fr] lg:gap-[72px]">
        <div className="grid content-start justify-items-start gap-3.5">
          <p className="text-[13px] font-medium text-primary">In their words</p>
          <h2 id="words-title" className="text-balance text-3xl font-semibold tracking-tight text-fg sm:text-4xl">The part they mention first</h2>
          <p className="text-base leading-relaxed text-fg-muted">We asked owners what changed after their first month with Tallybook. These are their answers, unedited.</p>
          <a href="/customers" className="mt-1.5 inline-flex h-9 items-center gap-1.5 rounded border border-border-strong bg-bg px-3.5 text-sm font-medium text-fg hover:bg-surface">
            Read more stories <ArrowRight className="size-4" aria-hidden />
          </a>
        </div>
        <ul>
          {quotes.map((q, i) => (
            <li key={q.name}>
              <figure className={"grid gap-4 border-t border-border py-7 last:pb-0 " + (i === 0 ? "lg:border-t-0 lg:pt-0" : "")}>
                <blockquote className="text-pretty text-lg font-medium leading-relaxed tracking-tight text-fg-muted sm:text-[23px]">
                  <p>
                    “{q.before}
                    <em className="rounded-sm bg-primary-soft px-1 not-italic text-primary-soft-fg [box-decoration-break:clone]">{q.highlight}</em>
                    {q.after}”
                  </p>
                </blockquote>
                <figcaption className="flex items-center gap-2.5 text-[13.5px] text-fg-muted">
                  <span className="grid size-7 place-items-center rounded-full bg-primary-soft text-[11px] font-medium text-primary-soft-fg" aria-hidden>{initials(q.name)}</span>
                  <span><span className="font-semibold text-fg">{q.name}</span> · {q.role}</span>
                </figcaption>
              </figure>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}