type QA = { q: string; a: string };

function slugify(input: string) {
  return input
    .toLowerCase()
    .replace(/[^a-z0-9\s-]/g, "")
    .trim()
    .replace(/\s+/g, "-")
    .slice(0, 80);
}

export default function FAQ() {
  const items: QA[] = [
    {
      q: "Do I need to sign a long contract?",
      a: "No. Plans are month-to-month with a 30-day cancel policy. You’ll also receive an exit plan and full documentation for a smooth handover if you ever switch providers.",
    },
    {
      q: "Do you migrate from my current host?",
      a: "Yes. We schedule a zero-downtime migration window, pre-configure backups and monitoring, and verify stability after cutover.",
    },
    {
      q: "What happens if you miss an SLA?",
      a: "You receive incident credits on your next invoice. The credit amount scales with severity and plan level — our uptime and response guarantees are real.",
    },
    {
      q: "Do you host WordPress and Next.js?",
      a: "Yes. We manage WordPress and modern Next.js hosting, including updates, uptime monitoring, and restore-tested backups.",
    },
    {
      q: "Are you GDPR compliant?",
      a: "Yes. We sign a DPA, follow least-privilege access, and maintain audit logs. Privacy and cookie templates are available on request.",
    },
    {
      q: "Can you help outside business hours?",
      a: "Mission-Critical includes 24/7 paging. Ad-hoc after-hours support is also available for Essential and Growth clients on request.",
    },
  ];

  return (
    <section
      aria-labelledby="faq-heading"
      className="relative py-24 bg-gradient-to-b from-neutral-50 via-white to-neutral-100 dark:from-neutral-950 dark:via-neutral-900 dark:to-neutral-950"
    >
      <div className="container mx-auto max-w-4xl px-4">
        <h2
          id="faq-heading"
          className="text-3xl sm:text-4xl font-bold tracking-tight bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent text-center"
        >
          Frequently Asked Questions
        </h2>

        <div className="mt-10 space-y-4">
          {items.map((x, i) => {
            const id = slugify(x.q) || `faq-${i}`;
            return (
              <details
                key={id}
                id={id}
                className="group rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/70 dark:bg-neutral-900/70 p-5 shadow-sm hover:shadow-md transition"
              >
                <summary className="cursor-pointer text-lg font-medium text-neutral-900 dark:text-white flex items-center justify-between">
                  <span>{x.q}</span>
                  <span
                    className="ml-4 select-none transition-transform group-open:rotate-180"
                    aria-hidden="true"
                  >
                    ⌄
                  </span>
                </summary>
                <div className="mt-3 text-sm text-neutral-700 dark:text-neutral-300 leading-relaxed">
                  {x.a}
                </div>
              </details>
            );
          })}
        </div>

        <p className="mt-10 text-center text-sm text-neutral-600 dark:text-neutral-400">
          Still have questions?{" "}
          <a
            href="/contact"
            className="font-medium text-blue-600 hover:underline"
          >
            Contact us
          </a>{" "}
          or{" "}
          <a
            href="/pricing"
            className="font-medium text-blue-600 hover:underline"
          >
            see Pricing & SLA
          </a>
          .
        </p>
      </div>
    </section>
  );
}