const FAQ = () => {
  const items = [
    { q: "How is this different from Apple Intelligence in Mail?", a: "Apple Intelligence is Apple-only — no Claude, GPT, or Gemini option. It doesn't learn your voice across mail, can't be configured per account, has no cost log or kill-switch, and doesn't expose action-items extraction or freeform prompts. MailTwin does all of that, and uses Apple Intelligence for free as one of its eight providers." },
    { q: "Where does my email content actually go?", a: "Straight from your Mac to whichever AI provider's key you've configured. There is no MailTwin server in the path. We literally cannot see your prompts or replies — the only thing that hits our infrastructure is anonymized crash reports (opt-in) and the public config.json that holds the model kill-switch flags." },
    { q: "Do I need an API key? Is there a free option?", a: "Two free options ship in the box: Apple Intelligence (macOS 15.1+, on-device) and Ollama (any local model you can run). For Claude / GPT / Gemini / Grok / Groq / DeepSeek you supply your own key — typical usage is a few dollars a month, and the cost log shows exact spend per request." },
    { q: "How does per-account voice learning work?", a: "On first run MailTwin indexes your sent mail per account and builds a small style vector locally. The vector is included as context when generating a reply. Switching mailbox switches voice automatically. The index never leaves your Mac." },
    { q: "What permissions does MailTwin need?", a: "Two: Automation (to talk to Mail.app via AppleScript) and Accessibility (for the CGEvent paste). We deliberately avoid System Events to keep it to two TCC grants instead of three. Both can be revoked any time in System Settings → Privacy & Security." },
    { q: "Can I share a license with my family or small team?", a: "Yes — the 5-pack ($99) gives you five activations to share, with lifetime 1.x updates. Each install activates against the same license and works independently. There is no MDM, VPP, or SCIM today; that's on the roadmap once we have public installs to learn from." },
    { q: "What happens if a model gets deprecated overnight?", a: "We flip a flag on updates.mailtwin.ai/config.json and every install surfaces a banner with a one-click switch to a working provider — typically within four hours. No app update or reinstall needed." },
    { q: "What languages are supported?", a: "Seven, on day one: English, Norwegian (bokmål), German, French, Spanish, Japanese, and Simplified Chinese. UI, prompt scaffolding, and reply generation are all localized — your reply matches the language of the original message." },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" style={{ background:'var(--bg)' }}>
      <div className="container-tight">
        <div style={{ display:'grid', gridTemplateColumns:'320px 1fr', gap: 64 }}>
          <div>
            <div className="eyebrow"><span className="dot" /> FAQ</div>
            <h2 style={{ marginTop: 18 }}>Questions, <span className="serif" style={{ fontStyle:'italic' }}>answered.</span></h2>
            <p style={{ color:'var(--muted)', marginTop: 18, fontSize: 15 }}>
              Still stuck? Email <a href="mailto:hello@mailtwin.ai" style={{ color:'var(--purple)', textDecoration:'underline' }}>hello@mailtwin.ai</a> — we reply within a day.
            </p>
          </div>
          <div>
            {items.map((it, i) => (
              <div key={i} style={{ borderTop: i === 0 ? '1px solid var(--line)' : 'none', borderBottom:'1px solid var(--line)' }}>
                <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                  width:'100%', textAlign:'left', background:'none', border:'none',
                  padding:'22px 0', display:'flex', alignItems:'center', gap: 16,
                }}>
                  <span style={{ flex: 1, fontSize: 17, fontWeight: 600, color:'var(--ink)' }}>{it.q}</span>
                  <span style={{ color:'var(--purple)', flexShrink: 0 }}>
                    {open === i ? <Icons.Minus /> : <Icons.Plus />}
                  </span>
                </button>
                {open === i && (
                  <div style={{ paddingBottom: 24, color:'var(--muted)', fontSize: 15, lineHeight: 1.65, maxWidth: 640 }}>
                    {it.a}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.FAQ = FAQ;