// ============================================================
// FAQ — ported from public/components/faq.html. Same content,
// same sectioned layout, collapsible questions. Content lives in
// data/faq.ts so adding an entry is a one-line data change.
// ============================================================

import { useState } from 'react';
import { FAQ_DATA } from '@/data/faq';

function FaqItem({ q, a }: { q: string; a: string }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="border-b border-border last:border-0">
      <button
        onClick={() => setOpen(!open)}
        className="w-full text-left py-3 px-4 flex items-center justify-between hover:bg-muted/40 transition-colors"
        aria-expanded={open}
      >
        <span className="font-medium text-sm">{q}</span>
        <span className="text-muted-foreground text-sm">{open ? '−' : '+'}</span>
      </button>
      {open && (
        <div className="px-4 pb-4 text-sm text-muted-foreground leading-relaxed whitespace-pre-line">
          {a}
        </div>
      )}
    </div>
  );
}

export default function Faq() {
  return (
    <div className="max-w-4xl mx-auto p-6 space-y-6">
      <header>
        <h1 className="text-2xl font-semibold">Frequently Asked Questions</h1>
        <p className="text-sm text-muted-foreground">
          Learn how Pediatric AI Scribe works and get the most out of it.
        </p>
      </header>
      {FAQ_DATA.map((section) => (
        <section
          key={section.section}
          className="rounded-lg border border-border overflow-hidden"
        >
          <h2 className="bg-muted/40 px-4 py-2 text-sm font-semibold">
            {section.section}
          </h2>
          <div className="bg-card">
            {section.items.map((item) => (
              <FaqItem key={item.q} q={item.q} a={item.a} />
            ))}
          </div>
        </section>
      ))}
    </div>
  );
}