function FAQ() {
  const items = [
    { q: "Does Samika ever make a clinical decision?", a: "Never. Samika captures structured information and presents it. The physician makes every clinical and routing decision. This keeps Samika outside the regulatory perimeter that constrains most clinical AI." },
    { q: "How long does it take to go live?", a: "Most pilots launch in 7–14 days. We map your specialty intake, configure your PMS write-back, and shadow live calls before going hot." },
    { q: "What happens to complex calls Samika can't handle?", a: "Calls escalate gracefully. Samika hands off to your front desk during business hours, or takes a callback request and books a slot for staff to follow up." },
    { q: "Is it HIPAA compliant?", a: "Yes. Encrypted at rest and in transit, BAAs signed before pilot, full audit trails on every call. SOC-2 Type II in progress." },
    { q: "Can the doctor override an approved appointment later?", a: "Yes — every approval is reversible. The doctor's decision is logged but not locked; office managers retain full schedule control." },
    { q: "What about emergencies?", a: "Hard-coded protocol: if a caller describes a medical emergency, Samika interrupts the intake, instructs them to call 911, and logs the interaction. Reviewed quarterly by clinical advisors." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="faq section" id="faq">
      <div className="container">
        <div className="faq__head">
          <span className="eyebrow">Common questions</span>
          <h2 className="display h-md">Six things <span className="serif">every clinic asks.</span></h2>
        </div>
        <div className="faq__list">
          {items.map((it, i) => (
            <div key={i} className={`faq__item ${open === i ? "faq__item--open" : ""}`}>
              <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="faq__num">0{i+1}</span>
                <span className="faq__qtext">{it.q}</span>
                <span className="faq__caret">{open === i ? "–" : "+"}</span>
              </button>
              {open === i && <div className="faq__a">{it.a}</div>}
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .faq__head { margin-bottom: 48px; display:flex; flex-direction:column; gap: 12px; }
        .faq__list { border-top: 1px solid var(--line); }
        .faq__item { border-bottom: 1px solid var(--line); }
        .faq__q { width: 100%; background: transparent; border: 0; cursor: pointer;
          display: grid; grid-template-columns: 60px 1fr 30px; align-items: center;
          padding: 28px 0; text-align: left; font-family: inherit;
          font-size: clamp(18px, 2vw, 24px); color: var(--ink-900); letter-spacing: -0.01em;
          transition: padding .2s;
        }
        .faq__q:hover { padding-left: 8px; }
        .faq__num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-400); letter-spacing: 0.14em; }
        .faq__qtext { font-weight: 400; }
        .faq__caret { font-size: 22px; color: var(--ink-500); text-align: right; }
        .faq__a { padding: 0 0 28px 60px; max-width: 70ch; color: var(--ink-600); font-size: 15.5px; line-height: 1.6; }
      `}</style>
    </section>
  );
}
window.FAQ = FAQ;