function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: 'How does genz know what to do?', a: 'You tell it. Plain English, a few sentences. genz reads your past work to learn your tone and routines, but the boundaries are yours to set.' },
    { q: 'What does genz read?', a: 'Only the tools you connect, only what you grant. Nothing leaves your account. We do not train on your data.' },
    { q: 'Will it send things without me?', a: 'Only the actions you mark as auto-send. Everything else lands in a review queue you clear in under a minute.' },
    { q: 'Is it secure?', a: 'SOC 2 Type II, end-to-end encryption in transit, encryption at rest with per-workspace keys. HIPAA and on-prem available on Enterprise.' },
    { q: 'Can I try it without paying?', a: 'Yes. 14-day free trial, no card required. Connect one tool to get started.' },
  ];
  return (
    <section id="pricing" style={{ background: 'var(--bg-elev)', borderTop: '1px solid var(--line)', scrollMarginTop: 80 }}>
      <div style={{ maxWidth: 980, margin: '0 auto', padding: '128px 32px' }}>
        <div style={{ marginBottom: 56 }}>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-subtle)', marginBottom: 20 }}>Questions</div>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 'clamp(40px, 5vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.02em', color: 'var(--fg)', margin: 0 }}>Likely on your mind.</h2>
        </div>
        <div style={{ borderTop: '1px solid var(--line)' }}>
          {items.map((it, i) => (
            <div key={i} style={{ borderBottom: '1px solid var(--line)' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{ width: '100%', textAlign: 'left', background: 'transparent', border: 'none', padding: '28px 4px', cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24 }}>
                <span style={{ fontFamily: 'var(--font-serif)', fontSize: 24, color: 'var(--fg)', lineHeight: 1.2, letterSpacing: '-0.01em' }}>{it.q}</span>
                <span style={{ fontFamily: 'var(--font-serif)', fontSize: 28, color: 'var(--brand)', flex: '0 0 auto' }}>{open === i ? '–' : '+'}</span>
              </button>
              {open === i && (
                <div style={{ padding: '0 4px 28px', maxWidth: 720 }}>
                  <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.7, color: 'var(--fg-muted)', margin: 0 }}>{it.a}</p>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.FAQ = FAQ;