// Newsletter + Footer

function Newsletter(){
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);
  const submit = (e) => { e.preventDefault(); if (email.includes("@")) setSent(true); };
  return (
    <section id="newsletter" className="paper-bg" style={{ padding: "120px 0" }}>
      <div className="wrap-narrow" style={{ textAlign:"center" }}>
        <Reveal className="section-label" style={{ justifyContent:"center", display:"inline-flex" }}>
          <span className="section-num">§ 12</span>
          <span style={{ marginLeft:10 }}>Field Dispatches</span>
        </Reveal>
        <Reveal delay={1}>
          <h2 className="display" style={{ margin:"24px auto", maxWidth:"22ch", textAlign:"center" }}>
            Notes from the <em>forest floor</em>.
          </h2>
        </Reveal>
        <Reveal delay={2}>
          <p className="lede" style={{ margin:"0 auto 32px", maxWidth:"56ch" }}>
            One monthly letter — harvest updates, new lots, lab reports, and the occasional scientific footnote. No spam. No AI slop.
          </p>
        </Reveal>
        <Reveal delay={3}>
          {sent ? (
            <div className="card" style={{ maxWidth:520, margin:"0 auto", padding:28 }}>
              <div className="hand" style={{ fontSize:28, color:"var(--copper)" }}>Welcome to the field.</div>
              <p style={{ margin:"8px 0 0", color:"var(--ink-2)" }}>Check your inbox — your first dispatch is on the way.</p>
            </div>
          ) : (
            <form onSubmit={submit} style={{ maxWidth:520, margin:"0 auto", display:"flex", border:"1px solid var(--ink)", background:"var(--cream-hi)" }}>
              <input
                type="email" required placeholder="you@address.com" value={email}
                onChange={(e)=>setEmail(e.target.value)}
                style={{ flex:1, padding:"16px 18px", border:0, background:"transparent", font:"inherit", fontFamily:"var(--serif)", fontSize:16, color:"var(--ink)" }}
              />
              <button type="submit" className="btn" style={{ borderRadius:0, border:"none", borderLeft:"1px solid var(--ink)" }}>
                Subscribe <span className="arrow">→</span>
              </button>
            </form>
          )}
        </Reveal>
      </div>
    </section>
  );
}

function Footer(){
  return (
    <footer style={{ background:"var(--ink)", color:"var(--paper)", padding:"80px 0 40px" }}>
      <div className="wrap">
        <div className="grid g4" style={{ gap:40, alignItems:"start" }}>
          <div>
            <div style={{ fontFamily:"var(--serif)", fontSize:32, letterSpacing:"-0.02em" }}>
              Excelsa
            </div>
            <p style={{ marginTop:14, color:"rgba(244,237,225,0.65)", fontSize:14, lineHeight:1.6, maxWidth:"30ch" }}>
              The forgotten third species of coffee — regenerative, resilient, and back on the menu.
            </p>
          </div>
          <FooterCol title="Learn">
            <a href="#species">What is Excelsa</a>
            <a href="#science">The science</a>
            <a href="#history">A history</a>
            <a href="#chemistry">Chemistry</a>
            <a href="#cupping">Cupping</a>
          </FooterCol>
          <FooterCol title="Shop">
            <a href="https://excelsacoffee.com/collections/frontpage" target="_blank" rel="noopener">Excelsacoffee.com</a>
            <a href="https://www.amazon.com/stores/ExcelsaCoffee/page/B84E6CB2-25C1-458B-AAB5-1441967921D7" target="_blank" rel="noopener">Amazon storefront</a>
            <a href="#buyers">Lots &amp; lab reports</a>
          </FooterCol>
          <FooterCol title="Elsewhere">
            <a href="https://instagram.com/excelsacoffee" target="_blank" rel="noopener">Instagram @excelsacoffee</a>
            <a href="https://www.nature.com/articles/s41477-025-02073-y" target="_blank" rel="noopener">Nature Plants, 2025 ↗</a>
            <a href="https://www.smithsonianmag.com/science-nature/how-forgotten-bean-could-save-coffee-from-extinction-180986230/" target="_blank" rel="noopener">Smithsonian ↗</a>
          </FooterCol>
        </div>

        <div style={{ marginTop:60, paddingTop:24, borderTop:"1px solid rgba(244,237,225,0.15)", display:"flex", justifyContent:"space-between", alignItems:"center", flexWrap:"wrap", gap:20 }}>
          <span className="mono" style={{ fontSize:10, letterSpacing:"0.22em", textTransform:"uppercase", color:"rgba(244,237,225,0.5)" }}>
            © 2026 Excelsa Coffee Co. · All lots GPS-tagged.
          </span>
          <span className="mono" style={{ fontSize:10, letterSpacing:"0.22em", textTransform:"uppercase", color:"rgba(244,237,225,0.5)" }}>
            Lat 6.05°N · Lon 121.00°E · Alt 540 m
          </span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, children }){
  const kids = React.Children.toArray(children);
  return (
    <div>
      <div className="mono" style={{ fontSize:10, letterSpacing:"0.28em", textTransform:"uppercase", color:"rgba(244,237,225,0.6)", marginBottom:14 }}>{title}</div>
      <ul style={{ listStyle:"none", margin:0, padding:0, display:"flex", flexDirection:"column", gap:10 }}>
        {kids.map((c, i) => (
          <li key={i}>{React.cloneElement(c, { style: { color:"var(--paper)", textDecoration:"none", fontSize:14, ...c.props.style } })}</li>
        ))}
      </ul>
    </div>
  );
}

window.Newsletter = Newsletter;
window.Footer = Footer;