// NewsletterBand — full-bleed pink conversion band
function NewsletterBand() {
  const [email, setEmail] = React.useState('');
  const [first, setFirst] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <section style={{background:'#B11871', color:'#fff', padding:'88px 0'}}>
      <div className="wrap" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 56, alignItems: 'center'}}>
        <div>
          <div style={{fontSize: 12, fontWeight: 700, letterSpacing:'.2em', textTransform:'uppercase', opacity:.85}}>The Newsletter</div>
          <h2 style={{fontSize: 56, fontWeight: 800, lineHeight: 1, letterSpacing:'-.015em', margin: '12px 0 16px'}}>Get the<br/>Social Status</h2>
          <p style={{fontSize: 16, opacity:.95, maxWidth: 420, lineHeight: 1.55}}>Monthly. Short. Actually useful. Zero fluff, all signal, dropped straight into your inbox.</p>
        </div>
        <form onSubmit={e => { e.preventDefault(); setSubmitted(true); }} style={{background:'transparent'}}>
          {submitted ? (
            <div style={{background:'#fff', color:'#111', padding:'28px 24px', borderRadius: 0}}>
              <div style={{fontWeight: 800, fontSize: 22, textTransform:'uppercase', marginBottom: 8}}>You're in.</div>
              <div style={{fontSize: 14}}>See you in your inbox next Monday.</div>
            </div>
          ) : (
            <>
              <div style={{marginBottom: 10}}><label style={{fontSize:12, fontWeight:600, display:'block', marginBottom: 4}}>Email</label>
                <input required value={email} onChange={e=>setEmail(e.target.value)} className="field-input" type="email" placeholder="you@brand.com"/>
              </div>
              <div style={{marginBottom: 16}}><label style={{fontSize:12, fontWeight:600, display:'block', marginBottom: 4}}>First name</label>
                <input value={first} onChange={e=>setFirst(e.target.value)} className="field-input"/>
              </div>
              <button type="submit" style={{background:'#000', color:'#fff', padding:'16px 36px', border:0, fontWeight: 700, fontSize: 14, cursor:'pointer'}}>Subscribe</button>
            </>
          )}
        </form>
      </div>
    </section>
  );
}

window.NewsletterBand = NewsletterBand;