FAQ — grid of question cards

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

const questions: { icon: LucideIcon; q: string; a: string }[] = [
  { icon: CreditCard, q: "How do clients pay?", a: "By card, bank transfer or wallet, straight from the invoice. No account needed on their side." },
  { icon: Clock, q: "When do I get the money?", a: "Card payments land in your bank in two working days. Bank transfers arrive the same day." },
  { icon: Mail, q: "Who sends the reminders?", a: "We do, on the schedule you pick, from your business name. You can pause them for any client." },
  { icon: BarChart3, q: "Can I see who owes what?", a: "The home screen shows every unpaid invoice, how late it is and the total you’re waiting on." },
  { icon: FileText, q: "What do invoices look like?", a: "Clean and printable, with your logo, colours, tax details and payment terms on every one." },
  { icon: Lock, q: "Is my data safe?", a: "Everything is encrypted, backed up daily and stored in the region you choose when you sign up." },
];

export function FaqCards() {
  return (
    <section aria-labelledby="faq-cards-title" className="bg-bg px-5 py-16 font-sans sm:px-10 sm:py-20">
      <div className="mx-auto max-w-6xl">
        <div className="mx-auto max-w-2xl text-center">
          <h2 id="faq-cards-title" className="text-3xl font-semibold tracking-tight text-fg sm:text-4xl">Good questions</h2>
          <p className="mt-4 text-base text-fg-muted sm:text-lg">Short answers to what new customers ask in their first week.</p>
        </div>

        <ul className="mt-10 grid gap-px overflow-hidden rounded-xl border border-border bg-border sm:grid-cols-2 lg:grid-cols-3">
          {questions.map(({ icon: Icon, q, a }) => (
            <li key={q} className="grid content-start gap-3 bg-bg p-7">
              <span className="mb-1.5 grid size-10 place-items-center rounded bg-primary-soft text-primary-soft-fg"><Icon className="size-[19px]" aria-hidden /></span>
              <h3 className="text-base font-semibold text-fg">{q}</h3>
              <p className="text-sm leading-relaxed text-fg-muted">{a}</p>
            </li>
          ))}
        </ul>

        <p className="mt-6 text-center text-[13px] text-fg-subtle">
          More in the <a href="/help" className="text-primary underline underline-offset-4">help centre</a>, or write to us any time.
        </p>
      </div>
    </section>
  );
}