function SubscribeCTA({ onStart = () => {} }) {
  const [email, setEmail] = React.useState('');
  const { isPhone } = window.useIsMobile();
  return (
    <section style={{
      padding: isPhone ? '72px 20px' : '120px 48px',
      background: '#FFFFFF',
      borderTop: '1px solid var(--syn-rule)',
      textAlign: 'center',
    }}>
      <div style={{ maxWidth: 640, margin: '0 auto' }}>
        <h2 style={{
          fontFamily: 'var(--syn-font-display)', fontSize: 17,
          fontWeight: 600, letterSpacing: '-0.035em', lineHeight: 1.05,
          color: 'var(--syn-navy)', margin: '0 0 18px',
        }}><span style={{ fontSize: isPhone ? 40 : 68 }}><span style={{ fontSize: isPhone ? 40 : 76 }}>Five minute read.</span><br /><span style={{ fontSize: isPhone ? 40 : 76 }}>7AM EST.</span></span></h2>
        <p style={{
          fontFamily: 'var(--syn-font-display)', fontSize: 19,
          lineHeight: 1.45, color: 'var(--syn-fg-muted)',
          margin: '0 0 36px', fontWeight: 400,
        }}>Top insights, free, every morning — starting with the 2026 NFL season.</p>
        <form
          onSubmit={e => { e.preventDefault(); onStart(email); }}
          style={{
            display: 'flex', flexDirection: isPhone ? 'column' : 'row', gap: 8, maxWidth: 460,
            margin: '0 auto',
          }}>
          <input
            type="email"
            value={email}
            onChange={e => setEmail(e.target.value)}
            placeholder="Enter your email"
            style={{
              flex: 1, padding: '14px 16px',
              fontFamily: 'var(--syn-font-body)', fontSize: 15,
              border: '1px solid var(--syn-border-strong)', borderRadius: 12,
              background: 'var(--syn-paper)', color: 'var(--syn-fg)',
              outline: 'none',
            }}
          />
          <button style={{
            background: 'var(--syn-navy)', color: 'var(--syn-paper)',
            border: 0, borderRadius: 12, padding: '14px 22px',
            fontFamily: 'var(--syn-font-body)', fontSize: 15, fontWeight: 500,
            cursor: 'pointer', whiteSpace: 'nowrap',
          }}>Sign up for early access</button>
        </form>
      </div>
    </section>
  );
}
window.SubscribeCTA = SubscribeCTA;