function FAQPage({ onNav = () => {} }) {
  const faqs = [
    {
      q: 'Is Synth a betting service or prediction market?',
      a: (<React.Fragment>No. We never sell picks and we never tell you what to bet. Synth surfaces where the data and the market disagree — the number, the evidence, the context — and you decide what it's worth. If you choose to play, play responsibly.</React.Fragment>),
    },
    {
      q: 'Is this just AI-generated content?',
      a: (<React.Fragment>Yes. Kind of. (1) analyzing GBs of data<br /><br />It's AI-<em>discovered</em>, editorially <em>gated<span style={{ fontStyle: 'normal' }}> through prompt engineering and our editorial team</span></em>. The AI's job is coverage no human newsroom can match — read everything about every team, every day. Anything obvious, recycled, or empty gets filtered out before publication. Most of what our system finds never reaches you. What does is the good stuff.</React.Fragment>),
    },
    {
      q: 'How does the Fan Sentiment score work?',
      a: (<React.Fragment>We listen where fans actually talk — team channels, daily coverage, highlight comment sections — filter out rival-fan noise, find the topics fans are actually discussing, and score the mood 0–100, weighted by real engagement.</React.Fragment>),
    },
    {
      q: 'Which leagues, and when?',
      a: (<React.Fragment>NFL launches Fall 2026. NHL in Winter 2026, MLB, and NBA arrive in Spring 2027. Join the waitlist and tell us your teams — it genuinely shapes what we build first.</React.Fragment>),
    },
    {
      q: 'What does it cost?',
      a: (<React.Fragment>The morning newsletter — the day's top insights per league — is free. A premium offering with greater customization and real-time alerts is coming later this year.</React.Fragment>),
    },
    {
      q: "Who's behind this?",
      a: (<React.Fragment>See <a onClick={() => onNav('team')} style={{ color: 'var(--syn-orange-700)', textDecoration: 'underline', textUnderlineOffset: 3, cursor: 'pointer' }}>Our team</a>. We're fans who got tired of scrolling endless comment sections just to feel informed.</React.Fragment>),
    },
  ];
  const [open, setOpen] = React.useState(0);
  const { isPhone } = window.useIsMobile();
  return (
    <main style={{ padding: isPhone ? '56px 20px 80px' : '88px 48px 112px' }}>
      <div style={{ maxWidth: 760, margin: '0 auto' }}>
        <div style={{
          fontFamily: 'var(--syn-font-mono)', fontSize: 12, letterSpacing: '0.16em',
          textTransform: 'uppercase', color: 'var(--syn-fg-subtle)', fontWeight: 500, marginBottom: 20,
        }}>FAQ</div>
        <h1 style={{
          fontFamily: 'var(--syn-font-display)', fontSize: isPhone ? 34 : 56, fontWeight: 600,
          letterSpacing: '-0.035em', lineHeight: 1.04, color: 'var(--syn-navy)', margin: '0 0 48px',
        }}>Frequently Asked Questions</h1>
        <div style={{ borderTop: '1px solid var(--syn-rule)' }}>
          {faqs.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderBottom: '1px solid var(--syn-rule)' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: isPhone ? 14 : 24,
                  background: 'transparent', border: 0, padding: isPhone ? '20px 2px' : '26px 4px', cursor: 'pointer', textAlign: 'left',
                }}>
                  <span style={{
                    fontFamily: 'var(--syn-font-display)', fontSize: isPhone ? 18 : 23, fontWeight: 600,
                    letterSpacing: '-0.015em', color: 'var(--syn-navy)',
                  }}>{f.q}</span>
                  <span style={{
                    flexShrink: 0, width: 26, height: 26, position: 'relative',
                    transition: 'transform 240ms cubic-bezier(0.2,0.7,0.2,1)',
                    transform: isOpen ? 'rotate(45deg)' : 'none',
                  }}>
                    <span style={{ position: 'absolute', top: '50%', left: 3, right: 3, height: 1.5, background: 'var(--syn-navy)', transform: 'translateY(-50%)' }} />
                    <span style={{ position: 'absolute', left: '50%', top: 3, bottom: 3, width: 1.5, background: 'var(--syn-navy)', transform: 'translateX(-50%)' }} />
                  </span>
                </button>
                <div style={{
                  display: 'grid',
                  gridTemplateRows: isOpen ? '1fr' : '0fr',
                  transition: 'grid-template-rows 320ms cubic-bezier(0.2,0.7,0.2,1)',
                }}>
                  <div style={{ overflow: 'hidden' }}>
                    <p style={{
                      fontFamily: 'var(--syn-font-body)', fontSize: 16.5, lineHeight: 1.7,
                      color: 'var(--syn-fg-muted)', margin: 0, padding: '0 4px 28px', maxWidth: 640,
                    }}>{f.a}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        <p style={{
          fontFamily: 'var(--syn-font-mono)', fontSize: 12, lineHeight: 1.6, letterSpacing: '0.02em',
          color: 'var(--syn-fg-subtle)', margin: '40px 0 0',
        }}>Responsible-gambling language is under legal review for Ontario / Canada requirements ahead of launch.</p>
      </div>
    </main>
  );
}
window.FAQPage = FAQPage;