export function FaqSection() {
  const faqs = [
    {
      q: "When should I book my tax appointment?",
      a: "Most clients book between January and April, but we are available year‑round for planning, extensions, and prior‑year filings.",
    },
    {
      q: "Do you offer virtual appointments?",
      a: "Yes. We support secure virtual appointments for clients across Virginia, Maryland, and beyond using document upload and video calls.",
    },
    {
      q: "What should I bring to my first meeting?",
      a: "Bring last year’s return, current W‑2s or 1099s, identification, and any business or rental income records you have.",
    },
    {
      q: "Can you help with IRS letters or audits?",
      a: "Our team can review IRS notices, explain what they mean, and represent you in responding or preparing documentation.",
    },
  ];

  return (
    <section
      id="faq"
      className="bg-emerald-50 py-10 sm:py-12 md:py-16 border-t border-emerald-100"
    >
      <div className="mx-auto max-w-6xl px-4 md:px-6">
        <div className="mb-6 max-w-2xl">
          <h2 className="text-2xl font-semibold tracking-tight text-emerald-950 sm:text-3xl">
            Questions about working with Ghion Financial
          </h2>
          <p className="mt-3 text-sm text-emerald-900/80 sm:text-base">
            Here are answers to some of the most common questions clients ask us
            before their first appointment.
          </p>
        </div>
        <div className="space-y-3">
          {faqs.map((item) => (
            <details
              key={item.q}
              className="group rounded-2xl border border-emerald-100 bg-white px-4 py-3 shadow-sm"
            >
              <summary className="flex cursor-pointer list-none items-center justify-between gap-3 text-sm font-semibold text-emerald-950">
                <span>{item.q}</span>
                <span className="h-5 w-5 rounded-full border border-emerald-200 text-xs text-emerald-700 group-open:bg-emerald-600 group-open:text-white flex items-center justify-center">
                  +
                </span>
              </summary>
              <p className="mt-2 text-sm text-emerald-900/80">{item.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

