FAQ — two columns with intro

import { ArrowRight } from "lucide-react";

const faqs = [
  { q: "Is there really a free plan?", a: "Yes. Starter is free for as long as you like and includes ten invoices a month, card and bank payments and reminders. You only pay when you need more." },
  { q: "Can my clients pay by card?", a: "They can pay by card, bank transfer or wallet straight from the invoice email. Money lands in your account in two working days." },
  { q: "What happens when an invoice is late?", a: "Tallybook sends polite reminders on the schedule you choose and can add a late fee automatically. You can pause reminders for any client." },
  { q: "Do you work with my accounting software?", a: "Invoices and payments sync to the most popular accounting tools every hour, so your books stay matched to your bank." },
  { q: "Can I bring my existing clients and invoices?", a: "Upload a spreadsheet or connect your old tool and we import clients, items and open invoices in a few minutes." },
  { q: "How do I cancel?", a: "From Settings, at any time, in two clicks. You can export everything first, and we keep your data for 90 days in case you come back." },
];

export function FaqTwoColumn() {
  return (
    <section aria-labelledby="faq-two-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="max-w-2xl">
          <p className="text-[13px] font-medium text-primary">FAQ</p>
          <h2 id="faq-two-title" className="mt-3 text-3xl font-semibold tracking-tight text-fg sm:text-4xl">Questions, answered</h2>
          <p className="mt-4 text-base text-fg-muted sm:text-lg">The things people ask most before they send their first invoice.</p>
        </div>

        <dl className="mt-12 grid gap-x-14 gap-y-8 md:grid-cols-2">
          {faqs.map((f) => (
            <div key={f.q}>
              <dt className="text-base font-semibold tracking-tight text-fg">{f.q}</dt>
              <dd className="mt-2 text-sm leading-relaxed text-fg-muted">{f.a}</dd>
            </div>
          ))}
        </dl>

        <div className="mt-12 flex flex-wrap items-center justify-between gap-3 rounded-lg bg-surface px-6 py-5 text-sm text-fg">
          <span>Can’t find what you’re looking for?</span>
          <a href="/help" className="inline-flex items-center gap-1.5 font-medium text-primary hover:underline">
            Browse the help centre <ArrowRight className="size-4" aria-hidden />
          </a>
        </div>
      </div>
    </section>
  );
}