Feature grid

import { BarChart3, Clock, CreditCard, Lock, Mail, Users, type LucideIcon } from "lucide-react";

const features: { icon: LucideIcon; title: string; body: string }[] = [
  { icon: Mail, title: "Polite reminders", body: "Late clients get a nudge on a schedule you set, in words you wrote." },
  { icon: CreditCard, title: "Card or bank transfer", body: "Every invoice carries a pay link. Money lands in two working days." },
  { icon: Clock, title: "Recurring invoices", body: "Retainers bill themselves on the same day every month." },
  { icon: BarChart3, title: "Cash-flow view", body: "See what’s due this week, what’s late and what’s already in." },
  { icon: Users, title: "Client portal", body: "Clients find every invoice and receipt in one place, no login." },
  { icon: Lock, title: "Tax-ready exports", body: "Hand your accountant a clean CSV or PDF pack at year end." },
];

export function FeatureGrid() {
  return (
    <section aria-labelledby="features-title" className="bg-bg font-sans">
      <div className="mx-auto max-w-6xl px-4 py-20 sm:px-6 sm:py-24">
        <div className="mx-auto max-w-xl text-center">
          <p className="text-[13px] font-medium text-primary">Everything after “send”</p>
          <h2 id="features-title" className="mt-3 text-balance text-3xl font-semibold tracking-tight text-fg sm:text-4xl">
            The boring half of freelancing, handled
          </h2>
          <p className="mt-4 text-pretty text-base leading-relaxed text-fg-muted sm:text-lg">
            Fernbill looks after the paperwork between finishing the job and the money arriving.
          </p>
        </div>

        <div className="mt-14 grid gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
          {features.map(({ icon: Icon, title, body }) => (
            <div key={title}>
              <span className="inline-grid size-10 place-items-center rounded bg-primary-soft text-primary-soft-fg">
                <Icon className="size-5" aria-hidden />
              </span>
              <h3 className="mt-4 text-base font-semibold tracking-tight text-fg">{title}</h3>
              <p className="mt-1.5 text-sm leading-relaxed text-fg-muted">{body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}