Features — 3-column icon grid

import { CreditCard, FileText, Globe, Lock, Mail, Repeat, type LucideIcon } from "lucide-react";

const features: { icon: LucideIcon; title: string; text: string }[] = [
  { icon: FileText, title: "Invoices in a minute", text: "Pick a client, add the lines, send. Your logo and terms are already on it." },
  { icon: Mail, title: "Polite reminders", text: "Late clients get a nudge on your schedule, in words you wrote." },
  { icon: CreditCard, title: "Pay links", text: "Card or bank transfer on every invoice, with the money in two days." },
  { icon: Repeat, title: "Retainers", text: "Monthly clients are billed on the same day, without you lifting a finger." },
  { icon: Globe, title: "24 currencies", text: "Bill abroad in their money; see the rate before you send." },
  { icon: Lock, title: "Year-end exports", text: "Hand your accountant a clean pack of CSVs and PDFs." },
];

export function FeaturesIconGrid() {
  return (
    <section aria-labelledby="features-title" className="bg-bg font-sans">
      <div className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:py-24">
        <div className="mb-8 grid items-end gap-4 lg:mb-12 lg:grid-cols-[1.1fr_1fr] lg:gap-12">
          <div>
            <p className="text-[13px] font-medium text-primary">Everything in one place</p>
            <h2 id="features-title" className="mt-3.5 text-balance text-3xl font-semibold tracking-tight text-fg sm:text-4xl">
              The money side of your business, sorted
            </h2>
          </div>
          <p className="text-pretty text-base leading-relaxed text-fg-muted">
            Six tools that replace the spreadsheet, the reminder emails and the end-of-year panic.
          </p>
        </div>
        {/* 1px gaps over a border-coloured background draw the hairlines between cells */}
        <div className="grid gap-px overflow-hidden rounded-xl border border-border bg-border sm:grid-cols-2 lg:grid-cols-3">
          {features.map(({ icon: Icon, title, text }) => (
            <div key={title} className="grid content-start gap-2.5 bg-bg p-6 lg:p-7">
              <span className="mb-2 grid size-10 place-items-center rounded border border-border bg-bg text-fg shadow-sm">
                <Icon className="size-[19px]" aria-hidden />
              </span>
              <h3 className="text-base font-semibold tracking-tight text-fg">{title}</h3>
              <p className="text-pretty text-[14.5px] leading-relaxed text-fg-muted">{text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}