/* ============================================================================
   Newsletter — band (reused on home) + full subscribe view
   ========================================================================== */
function NewsletterBand({ showPattern = true }) {
  const [email, setEmail] = React.useState("");
  const [done, setDone] = React.useState(false);
  return (
    <section className="news-band">
      {showPattern && <div className="hero-dotgrid dot-grid" style={{ opacity: .5 }} />}
      <div className="wrap" style={{ position: "relative" }}>
        <div className="news-inner">
          <Eyebrow idx="06">Newsletter</Eyebrow>
          <h2 className="section-title" style={{ marginTop: 14 }}>
            Leave with something you can use.
          </h2>
          <p style={{ fontFamily: "var(--font-serif)", fontSize: 18, color: "var(--fg-2)", lineHeight: 1.6, margin: "18px 0 0", maxWidth: "54ch" }}>
            One essay every other week — an idea worked all the way down to a next
            action you can take. No noise, no funnels. Unsubscribe in one click.
          </p>
          {done ? (
            <p className="news-reassure" style={{ color: "var(--annotation)", fontSize: 14, marginTop: 24 }}>
              ↳ Thanks — check your inbox to confirm. You're subscriber №&nbsp;2,481.
            </p>
          ) : (
            <React.Fragment>
              <form className="news-form" onSubmit={(e) => { e.preventDefault(); if (email) setDone(true); }}>
                <div className="field">
                  <label>Email</label>
                  <input type="email" required placeholder="you@domain.com"
                    value={email} onChange={(e) => setEmail(e.target.value)} />
                </div>
                <Button variant="primary">Get the next essay →</Button>
              </form>
              <p className="news-reassure">2,480 readers · No spam · ≈ 2 emails / month</p>
            </React.Fragment>
          )}
        </div>
      </div>
    </section>
  );
}

function SubscribeView() {
  return (
    <main className="wrap-read" style={{ paddingTop: 64, paddingBottom: 24 }}>
      <Eyebrow idx="06">Newsletter</Eyebrow>
      <h1 className="article-title" style={{ fontSize: "var(--text-4xl)" }}>
        The notebook, delivered.
      </h1>
      <p className="article-lead">
        I keep this site as a slow archive of what I actually thought. The
        newsletter is how I send the best of it to people who'd rather not check
        back — finished thinking, with a clear next step attached.
      </p>
      <hr className="rule" style={{ margin: "36px 0" }} />
      <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 18, marginBottom: 36 }}>
        {[
          ["Every other week", "Two essays a month, never more. Sent Sunday mornings."],
          ["One idea, worked down", "Each issue ends with something to do, not just something to feel."],
          ["Yours to leave", "One-click unsubscribe. I export nothing, sell nothing, track nothing."],
        ].map(([t, d]) => (
          <div key={t} style={{ display: "flex", gap: 16, alignItems: "baseline" }}>
            <span className="crosshair" style={{ top: 4 }} />
            <div>
              <div style={{ fontFamily: "var(--font-serif)", fontSize: 19, fontWeight: 600, color: "var(--fg-1)" }}>{t}</div>
              <div style={{ fontFamily: "var(--font-serif)", fontSize: 15, color: "var(--fg-2)", marginTop: 3 }}>{d}</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ border: "1px solid var(--line-2)", borderRadius: "var(--radius-md)", padding: 28 }}>
        <NewsletterInline />
      </div>
    </main>
  );
}

function NewsletterInline() {
  const [email, setEmail] = React.useState("");
  const [done, setDone] = React.useState(false);
  if (done) return <p className="news-reassure" style={{ color: "var(--annotation)", margin: 0 }}>↳ Confirmed soon — welcome aboard.</p>;
  return (
    <form className="news-form" style={{ marginTop: 0 }} onSubmit={(e) => { e.preventDefault(); if (email) setDone(true); }}>
      <div className="field">
        <label>Email address</label>
        <input type="email" required placeholder="you@domain.com" value={email} onChange={(e) => setEmail(e.target.value)} />
      </div>
      <Button variant="primary">Subscribe →</Button>
    </form>
  );
}

Object.assign(window, { NewsletterBand, SubscribeView, NewsletterInline });