function Newsletter() {
  const [email, setEmail] = useState("");
  const [sent, setSent]   = useState(false);
  const mobile = useMobile();
  return (
    <section id="newsletter" style={{
      padding: "var(--section-pad) 0",
      background: "var(--ink)",
      color: "var(--paper)",
    }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1.1fr 1fr", gap: mobile ? 40 : 80, alignItems: "center" }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 20 }}>
              <div style={{ width: 40, height: 1, background: "var(--ocra)" }} />
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "#c9955a" }}>
                La lettera del sabato
              </div>
            </div>
            <h2 style={{
              fontFamily: "var(--font-display)", fontSize: "clamp(44px, 5vw, 76px)",
              fontWeight: 400, lineHeight: 1, letterSpacing: "-0.02em", margin: 0,
            }}>
              Una storia di <em style={{ color: "#e9b977" }}>Calabria</em>,<br/>
              ogni sabato mattina.
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, opacity: 0.8, maxWidth: 520, marginTop: 28 }}>
              Un articolo lungo, due foto, una ricetta, un evento da segnare in agenda.
              Niente spam, niente pubblicità. Cancellabile con un clic.
            </p>
          </div>
          <div>
            <form onSubmit={e => { e.preventDefault(); setSent(true); }}
              style={{ position: "relative" }}>
              <div style={{ display: "flex", borderBottom: "1px solid color-mix(in oklab, var(--paper) 40%, transparent)", paddingBottom: 10 }}>
                <input
                  type="email"
                  value={email}
                  onChange={e => setEmail(e.target.value)}
                  placeholder="la.tua@email.it"
                  required
                  style={{
                    flex: 1, background: "transparent", border: "none", outline: "none",
                    color: "var(--paper)", fontFamily: "var(--font-display)", fontSize: 26,
                  }} />
                <button type="submit" style={{
                  background: "transparent", border: "none", color: "var(--paper)",
                  display: "inline-flex", alignItems: "center", gap: 8,
                  fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", padding: "0 8px",
                }}>
                  {sent ? "Iscritto ✓" : "Iscriviti"} <IconArrow />
                </button>
              </div>
              <div style={{
                marginTop: 28, fontSize: 12, opacity: 0.6, fontFamily: "var(--font-mono)",
                letterSpacing: "0.06em", lineHeight: 1.7,
              }}>
                Oltre 18.400 lettori · Stilata con cura da Cosenza.<br/>
                Registrazione al Tribunale di Catanzaro n. 03/2019.
              </div>

              <div style={{
                display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, marginTop: 40,
                paddingTop: 28, borderTop: "1px solid color-mix(in oklab, var(--paper) 20%, transparent)",
              }}>
                {[
                  { n: "Sabato", l: "Cadenza settimanale" },
                  { n: "12'", l: "Tempo medio di lettura" },
                  { n: "0 €", l: "Gratuita, per sempre" },
                ].map(x => (
                  <div key={x.l}>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 500 }}>{x.n}</div>
                    <div style={{ fontSize: 11, opacity: 0.7, marginTop: 4, fontFamily: "var(--font-mono)", letterSpacing: "0.1em", textTransform: "uppercase" }}>{x.l}</div>
                  </div>
                ))}
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Newsletter = Newsletter;