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({ items }: { items: QA[] }) {
  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>
  );
}