export function FAQBlock({
  faqs,
}: {
  faqs: { question: string; answer: string }[];
}) {
  if (faqs.length === 0) return null;

  return (
    <section className="mt-12">
      <h2 className="text-xl font-bold text-[var(--text-primary)] mb-6">
        Frequently Asked Questions
      </h2>
      <div className="space-y-4">
        {faqs.map((faq) => (
          <details
            key={faq.question}
            className="group rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-surface)]"
          >
            <summary className="cursor-pointer px-5 py-4 text-[15px] font-semibold text-[var(--text-primary)] select-none list-none flex items-center justify-between gap-3">
              <span>{faq.question}</span>
              <svg
                className="w-4 h-4 shrink-0 text-[var(--text-muted)] transition-transform group-open:rotate-180"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth={2}
              >
                <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
              </svg>
            </summary>
            <div className="px-5 pb-4 text-sm leading-relaxed text-[var(--text-secondary)]">
              {faq.answer}
            </div>
          </details>
        ))}
      </div>
    </section>
  );
}