FAQ

import { Plus } from "lucide-react";

const faqs = [
  { q: "Do my clients need an account to pay?", a: "No. Each invoice has a pay link. Your client opens it, pays by card or bank transfer, and gets a receipt by email." },
  { q: "What does Fernbill charge on payments?", a: "Only the payment processor’s fee, shown before you send. Fernbill adds nothing on top." },
  { q: "Can I bill in another currency?", a: "Yes. Pick any of 24 currencies per invoice. Totals on your dashboard are shown in your home currency." },
  { q: "Can I change or cancel my plan?", a: "Any time, from Settings. If you cancel, you keep access until the end of the period you’ve paid for." },
  { q: "Who can see my invoices?", a: "Only you, the people you invite and the client each invoice is addressed to." },
];

export function Faq() {
  return (
    <section aria-labelledby="faq-title" className="bg-bg font-sans">
      <div className="mx-auto grid max-w-6xl gap-10 px-4 py-20 sm:px-6 lg:grid-cols-[0.8fr_1.4fr] lg:gap-16">
        <div>
          <h2 id="faq-title" className="text-3xl font-semibold tracking-tight text-fg">Questions, answered</h2>
          <p className="mt-4 text-sm leading-relaxed text-fg-muted">
            Can’t find what you’re after?{" "}
            <a href="/contact" className="text-primary underline underline-offset-4">Write to us</a> — a person replies within a working day.
          </p>
        </div>
        <div className="border-t border-border">
          {faqs.map((f, i) => (
            <details key={f.q} open={i === 0} className="group border-b border-border">
              <summary className="flex cursor-pointer list-none items-center justify-between gap-4 py-4 text-[15px] font-medium text-fg [&::-webkit-details-marker]:hidden">
                {f.q}
                <Plus className="size-4 shrink-0 text-fg-subtle transition group-open:rotate-45" aria-hidden />
              </summary>
              <p className="pb-5 pr-8 text-sm leading-relaxed text-fg-muted">{f.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}