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

export default function FAQ({ items }: { items: QA[] }) {
  return (
    <section 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 className="text-3xl 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) => (
            <details
              key={i}
              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">
                {x.q}
                <span className="transition-transform group-open:rotate-180">⌄</span>
              </summary>
              <p className="mt-3 text-sm text-neutral-700 dark:text-neutral-300">{x.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}
