// Newsletter signup + additions to footer

function Newsletter() {
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);
  const submit = async (e) => {
    e.preventDefault();
    if (!email) return;
    setSent(true);
    try {
      await NE_API.subscribeNewsletter(email.trim().toLowerCase());
    } catch (err) {
      console.warn("newsletter subscribe failed", err);
    }
    setTimeout(() => { setSent(false); setEmail(""); }, 3400);
  };
  return (
    <section className="paper" style={{ padding: "90px 0", borderTop: "1px solid rgba(47,51,29,0.08)", borderBottom: "1px solid rgba(47,51,29,0.08)" }}>
      <div className="container" style={{ maxWidth: 820, textAlign: "center" }}>
        <div style={{ color: "var(--moss-500)", display: "inline-block", marginBottom: 18 }}>
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
            <path d="M4 6h16v12H4z" />
            <path d="M4 6l8 7 8-7" />
          </svg>
        </div>
        <div className="rule" style={{ justifyContent: "center", marginBottom: 18 }}>Walk with us</div>
        <h2 style={{ fontSize: "clamp(32px, 4vw, 48px)", lineHeight: 1.15 }}>
          Letters from <em style={{ fontWeight: 400, color: "var(--moss-600)" }}>the grounds.</em>
        </h2>
        <p style={{ fontSize: 16, lineHeight: 1.65, color: "rgba(47,51,29,0.7)", marginTop: 18, maxWidth: 560, margin: "18px auto 0" }}>
          Once a month, a short dispatch from New Eden — progress, prayer requests, a photo from the site, a story from the children we're building for. No asks. Just the walk.
        </p>

        <form onSubmit={submit} style={{ marginTop: 36, display: "flex", gap: 10, maxWidth: 520, margin: "36px auto 0", flexWrap: "wrap" }}>
          <input
            type="email" required placeholder="you@example.com"
            value={email} onChange={e => setEmail(e.target.value)}
            style={{ flex: "1 1 240px", padding: "16px 18px", fontSize: 15, background: "var(--cream-50)", border: "1px solid rgba(47,51,29,0.2)", borderRadius: 2 }}
          />
          <button type="submit" className="btn btn-gold" style={{ padding: "16px 28px" }}>
            {sent ? "Amen — you're in." : "Subscribe"}
          </button>
        </form>
        <div style={{ marginTop: 14, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(47,51,29,0.45)" }}>
          One letter a month · unsubscribe anytime
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Newsletter });