// EmailCapture.jsx — primary CTA section
const EmailCapture = () => {
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);
  const onSubmit = (e) => { e.preventDefault(); if (email) setSubmitted(true); };

  return (
    <section id="notify" style={{
      background: '#fff', color: '#0A0A0A',
      padding: 'clamp(96px, 12vw, 160px) clamp(20px, 4vw, 64px)',
    }}>
      <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'left' }}>
        <div className="eyebrow on-light" style={{ marginBottom: 24 }}>Mailing List · No spam</div>
        <h2 style={{
          fontFamily: "'Helvetica Inserat', Impact, sans-serif",
          fontSize: 'clamp(48px, 7vw, 112px)',
          lineHeight: 0.9,
          letterSpacing: '-0.02em',
          textTransform: 'uppercase',
          fontWeight: 400,
        }}>
          Be the first<br/>to taste it.
        </h2>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: 'rgba(0,0,0,0.7)', marginTop: 24, maxWidth: 540 }}>
          Superior launches in select retailers across the Upper Midwest this summer. Drop your email and we'll let you know the moment it's available near you.
        </p>

        {submitted ? (
          <div style={{
            marginTop: 36, padding: '28px 28px',
            background: '#0A0A0A', color: '#fff',
            borderLeft: '4px solid #00B14F',
            display: 'flex', flexDirection: 'column', gap: 8,
          }}>
            <div style={{ fontFamily: "'Druk Wide', sans-serif", fontSize: 22, textTransform: 'uppercase' }}>You're on the list.</div>
            <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)' }}>Check {email} for a confirmation. Welcome to Superior.</div>
          </div>
        ) : (
          <form onSubmit={onSubmit} style={{ marginTop: 36, display: 'flex', flexDirection: 'column', gap: 14, maxWidth: 540 }}>
            <div style={{ display: 'flex', gap: 0 }}>
              <input
                type="email" required
                value={email} onChange={(e) => setEmail(e.target.value)}
                placeholder="you@example.com"
                style={{
                  flex: 1, padding: '16px 18px',
                  border: '1.5px solid #0A0A0A', borderRight: 'none',
                  font: '400 16px/1.2 Inter, sans-serif', background: '#fff',
                  outline: 'none', borderRadius: 0,
                }}
              />
              <button type="submit" className="btn btn-primary-light">Notify Me</button>
            </div>
            <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: 'rgba(0,0,0,0.7)' }}>
              <input type="checkbox" defaultChecked style={{ width: 16, height: 16, accentColor: '#0A0A0A' }}/>
              Send me retail availability updates and tasting events.
            </label>
          </form>
        )}
      </div>
    </section>
  );
};

window.EmailCapture = EmailCapture;