// Nelly section — elevated, minimal, efficient

const NELLY_POSTS = [
  { t: "Why Your Pillowcase Is Ruining Your Hair", d: "Apr 22" },
  { t: "The Five Products I'd Re-Buy Tomorrow",     d: "Apr 18" },
  { t: "On Under-Painting (And Why I Stopped)",     d: "Apr 11" },
  { t: "A Skin Cycle That Actually Fits a Week",    d: "Apr 04" },
];

function Nelly() {
  return (
    <section className="section" aria-labelledby="nelly-h">
      <div className="container">
        <div className="nelly reveal">
          <div className="nelly-portrait">
            <img src="/contributors/nelly.png" alt="Portrait of Nelly, Contributing Editor" />
            <span className="stamp">Contributing Editor</span>
            <span className="sig">Nelly.</span>
          </div>
          <div className="nelly-copy">
            <div className="kicker">A Column</div>
            <h3 id="nelly-h">On keeping what <em>works.</em></h3>
            <p className="deck">
              "I don't buy things twice. When something works, I keep it. When it doesn't, I edit it out. My pillowcase was something I never thought to edit — until my hair started telling me otherwise."
            </p>
            <div className="byline">
              <b>Nelly</b>
              <span>·</span>
              <span className="at">@legacybynelly</span>
              <span>·</span>
              <span>Weekly</span>
            </div>
            <div className="nelly-ctas">
              <a className="btn btn-primary" href="#">Read the column <span aria-hidden="true">→</span></a>
              <a className="btn btn-ghost" href="#">All from Nelly</a>
            </div>
            <div className="nelly-posts">
              {NELLY_POSTS.map((p, i) => (
                <a key={p.t} className="np" href="#">
                  <span className="np-n">0{i+1}</span>
                  <span className="np-t">{p.t}</span>
                  <span className="np-d">{p.d}</span>
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Newsletter() {
  const [email, setEmail] = React.useState("");
  const [status, setStatus] = React.useState("idle");
  const [error, setError] = React.useState("");

  async function handleSubmit(event) {
    event.preventDefault();
    setError("");
    setStatus("submitting");

    try {
      const response = await fetch("/api/subscribe", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      });

      if (!response.ok) throw new Error("Subscribe failed");
      setStatus("success");
    } catch {
      setStatus("idle");
      setError("Something went wrong. Try again.");
    }
  }

  return (
    <section className="section section-tight">
      <div className="container">
        <div className="newsletter reveal">
          <div>
            <div className="eyebrow">The Dispatch</div>
            <h3>One email on <em>Sundays.</em> Nothing else.</h3>
            <p className="lede">A short letter from the editors: three techniques worth trying, one product we actually re-bought, and whatever Nelly is thinking about this week.</p>
          </div>
          <div>
            {status === "success" ? (
              <div className="nl-form nl-success" aria-live="polite">
                <span>You're in.</span>
              </div>
            ) : (
              <form className="nl-form" onSubmit={handleSubmit}>
                <input
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="your@email.com"
                  aria-label="Email address"
                  aria-describedby={error ? "newsletter-error" : undefined}
                  autoComplete="email"
                  inputMode="email"
                  required
                />
                <button type="submit" disabled={status === "submitting"}>
                  {status === "submitting" ? "Sending" : "Subscribe"} <span aria-hidden="true">→</span>
                </button>
              </form>
            )}
            {error ? <div className="nl-error" id="newsletter-error" role="status">{error}</div> : null}
            <div className="nl-meta">Weekly · No spam · Unsubscribe anytime</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nelly, Newsletter });