function Newsletter() {
  const [email, setEmail] = useState("");
  const [done, setDone] = useState(false);

  return (
    <section id="newsletter" className="section" style={{background:'var(--charcoal)', color:'var(--paper)'}}>
      <div className="wrap" style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:'clamp(32px, 5vw, 80px)', alignItems:'center'}} className="grid-2">
        <div>
          <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:20}}>
            <span className="diamond" style={{background:'var(--terracotta)'}}></span>
            <span className="eyebrow" style={{color:'var(--terracotta)'}}>The CASC Dispatch</span>
          </div>
          <h2 style={{color:'var(--paper)', fontWeight:300}}>
            A <span className="italic">thoughtful letter</span>, every other Thursday.
          </h2>
          <p style={{marginTop:20, color:'color-mix(in oklab, var(--paper) 75%, transparent)', fontSize:17, lineHeight:1.7, maxWidth:520}}>
            One essay on transformation or career strategy, one script or template you can use this week, and the events we think are worth your time. No fluff.
          </p>
        </div>
        <div>
          {!done ? (
            <form onSubmit={(e) => { e.preventDefault(); if (email) setDone(true); }} style={{display:'flex', flexDirection:'column', gap:14}}>
              <label style={{fontSize:11, letterSpacing:'.22em', textTransform:'uppercase', color:'color-mix(in oklab, var(--paper) 60%, transparent)'}}>Your email</label>
              <div style={{display:'flex', gap:10, alignItems:'center', borderBottom:'1px solid color-mix(in oklab, var(--paper) 40%, transparent)', paddingBottom:10}}>
                <input
                  type="email" required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="name@company.com"
                  style={{flex:1, background:'transparent', border:0, color:'var(--paper)', fontSize:18, padding:'10px 0', fontFamily:'inherit', outline:'none'}}
                />
                <button type="submit" style={{fontFamily:'inherit', background:'var(--terracotta)', color:'var(--charcoal)', border:0, padding:'12px 22px', borderRadius:999, fontSize:12, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500, cursor:'pointer'}}>
                  Subscribe →
                </button>
              </div>
              <div style={{fontSize:12, color:'color-mix(in oklab, var(--paper) 55%, transparent)', marginTop:8}}>
                Delivered via Kit. Unsubscribe anytime. ~3,400 readers.
              </div>
            </form>
          ) : (
            <div style={{padding:'28px 32px', background:'color-mix(in oklab, var(--paper) 8%, transparent)', borderLeft:'2px solid var(--terracotta)'}}>
              <div style={{fontFamily:'var(--heading-font)', fontStyle:'italic', fontSize:28}}>Welcome in.</div>
              <p style={{marginTop:10, color:'color-mix(in oklab, var(--paper) 75%, transparent)', fontSize:15, lineHeight:1.6}}>
                Check your inbox for a confirmation — the first dispatch arrives this Thursday.
              </p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Newsletter });