const Subscribe = ({ onSubscribe }) => {
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState(null);

  var handleSubmit = () => {
    if (!email || !email.includes('@')) return;
    setStatus('sending');
    var fn = onSubscribe || (window.IBA_GHOST && window.IBA_GHOST.subscribe);
    if (fn) {
      Promise.resolve(fn(email)).then(() => {
        setStatus('done');
        setEmail('');
      }).catch(() => setStatus('error'));
    } else {
      setStatus('done');
      setEmail('');
    }
  };

  return (
    <div className="ib-cta">
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.18em', color: 'var(--amber)', textTransform: 'uppercase', marginBottom: '8px' }}>// SUBSCRIBE</div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: '44px', color: 'var(--text)', margin: '0 0 12px', letterSpacing: '0.02em', fontWeight: 400 }}>
        First access to new drops<span className="ib-caret"></span>
      </div>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: '16px', color: 'var(--text-2)', margin: '0 0 24px', maxWidth: '520px' }}>
        We ship emails the same way we ship code — only when it's worth it.
      </p>
      {status === 'done' ? (
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: '14px', color: 'var(--amber)', letterSpacing: '0.06em' }}>
          &#10003; You're in. Watch your inbox.
        </div>
      ) : (
        <div style={{ display: 'flex', maxWidth: '520px', border: '1px solid var(--amber-dim)' }}>
          <div style={{ padding: '14px', color: 'var(--amber)', fontFamily: 'var(--font-mono)' }}>$</div>
          <input type="email" placeholder="email@example.com" value={email}
            onChange={(e) => setEmail(e.target.value)}
            onKeyDown={(e) => { if (e.key === 'Enter') handleSubmit(); }}
            style={{
              flex: 1, padding: '14px 4px', fontFamily: 'var(--font-mono)', color: 'var(--text)',
              background: 'transparent', border: 'none', outline: 'none', fontSize: '14px',
            }} />
          <button onClick={handleSubmit} disabled={status === 'sending'} style={{
            padding: '14px 24px', background: 'var(--amber)', color: 'var(--bg)', border: 'none',
            fontFamily: 'var(--font-mono)', fontSize: '12px', letterSpacing: '0.1em', fontWeight: 700,
            textTransform: 'uppercase', cursor: 'pointer',
            opacity: status === 'sending' ? 0.6 : 1,
          }}>{status === 'sending' ? '...' : 'SEND'}</button>
        </div>
      )}
      {status === 'error' && (
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: '12px', color: 'var(--error, #ff6b35)', marginTop: '8px' }}>
          Something broke. Try again.
        </div>
      )}
    </div>
  );
};

window.Subscribe = Subscribe;