// Newsletter (Oslo Blick) + Contact + Footer
function Newsletter({ t }) {
  const [email, setEmail] = React.useState("");
  const [done, setDone] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (email && email.includes("@")) {
      const url = `https://buttondown.com/osloblikk?email=${encodeURIComponent(email)}`;
      window.open(url, "_blank", "noopener,noreferrer");
      setDone(true);
    }
  };
  return (
    <section id="newsletter" className="section" style={{
      background: "var(--canvas)",
      position: "relative", overflow: "hidden",
    }}>
      {/* decorative */}
      <div aria-hidden style={{
        position: "absolute", left: -160, top: 80,
        width: 320, height: 320, borderRadius: "50%",
        background: "radial-gradient(circle, var(--orange-soft) 0%, transparent 70%)",
        opacity: 0.5,
      }} />
      <div className="shell" style={{ position: "relative" }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 80,
          alignItems: "center",
        }} className="nl-grid">
          <div>
            <Reveal><Eyebrow>{t.newsletter.eyebrow}</Eyebrow></Reveal>
            <Reveal delay={80}>
              <h2 style={{
                marginTop: 24,
                fontSize: "clamp(44px, 6vw, 76px)",
                lineHeight: 1.0,
                letterSpacing: "-0.025em",
                fontWeight: 500,
              }}>
                {t.newsletter.title}{" "}
                <span className="serif-italic" style={{ color: "var(--orange-deep)" }}>{t.newsletter.titleItalic}</span>
                {t.newsletter.titleEnd}
              </h2>
            </Reveal>
            <Reveal delay={160}>
              <p style={{
                marginTop: 28, fontSize: 17, lineHeight: 1.6,
                color: "var(--muted)", maxWidth: 46 + "ch",
              }}>{t.newsletter.lede}</p>
            </Reveal>
          </div>

          <Reveal delay={240}>
            <div style={{
              background: "var(--surface)",
              border: "1px solid var(--border-strong)",
              borderRadius: 12,
              padding: 32,
              boxShadow: "0 1px 2px rgba(26,23,20,0.04)",
            }}>
              {/* Mock newsletter masthead */}
              <div style={{
                paddingBottom: 16,
                borderBottom: "1px solid var(--border)",
                display: "flex", justifyContent: "space-between", alignItems: "baseline",
              }}>
                <div className="serif-italic" style={{
                  fontSize: 28, color: "var(--ink)",
                }}>Osloblikk</div>
                <div style={{
                  fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase",
                  color: "var(--muted)",
                }}>№ 47 · Søndag</div>
              </div>
              <div style={{
                marginTop: 18, height: 4, background: "var(--orange)",
                width: 36, borderRadius: 2,
              }} />
              <p style={{
                marginTop: 18, fontSize: 13, lineHeight: 1.6, color: "var(--muted)",
              }}>
                Forrige uke: en kort tekst om Munch, sollyset på Grünerløkka, og hvorfor T-banen i januar fortsatt overrasker.
              </p>

              {!done ? (
                <form onSubmit={submit} style={{ marginTop: 28 }}>
                  <input
                    type="email"
                    className="input"
                    placeholder={t.newsletter.placeholder}
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    required
                  />
                  <button type="submit" className="btn btn-orange" style={{
                    marginTop: 20, width: "100%", justifyContent: "center",
                  }}>
                    {t.newsletter.cta}<Arrow />
                  </button>
                  <div style={{
                    marginTop: 14, fontSize: 12, color: "var(--subtle)",
                    textAlign: "center",
                  }}>{t.newsletter.meta}</div>
                </form>
              ) : (
                <div style={{
                  marginTop: 28, padding: "20px 18px",
                  background: "var(--orange-tint)",
                  border: "1px solid var(--orange-soft)",
                  borderRadius: 8,
                  fontSize: 14, color: "var(--orange-deep)",
                  textAlign: "center",
                }}>
                  ✓ {t.newsletter.thanks}
                </div>
              )}
            </div>
          </Reveal>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .nl-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
      `}</style>
    </section>
  );
}

function Contact({ t }) {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [msg, setMsg] = React.useState("");
  const [done, setDone] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (name && email && msg) {
      const subject = encodeURIComponent(`Henvendelse fra ${name}`);
      const body = encodeURIComponent(`${msg}\n\n— ${name}\n${email}`);
      window.location.href = `mailto:sebastian@rework.no?subject=${subject}&body=${body}`;
      setDone(true);
    }
  };

  return (
    <section id="contact" className="section" style={{
      background: "var(--canvas-deep)",
      borderTop: "1px solid var(--border)",
    }}>
      <div className="shell">
        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 100,
        }} className="contact-grid">
          <div>
            <Reveal><Eyebrow>{t.contact.eyebrow}</Eyebrow></Reveal>
            <Reveal delay={80}>
              <h2 style={{
                marginTop: 24,
                fontSize: "clamp(36px, 8vw, 110px)",
                lineHeight: 0.96,
                letterSpacing: "-0.03em",
                fontWeight: 500,
              }}>
                {t.contact.title}{" "}
                <span className="serif-italic" style={{ color: "var(--orange-deep)" }}>{t.contact.titleItalic}</span>
                {t.contact.titleEnd}
              </h2>
            </Reveal>
            <Reveal delay={160}>
              <p style={{
                marginTop: 32, fontSize: 17, lineHeight: 1.6,
                color: "var(--muted)", maxWidth: 40 + "ch",
              }}>{t.contact.lede}</p>
            </Reveal>
            <Reveal delay={240}>
              <div style={{
                marginTop: 48, paddingTop: 28,
                borderTop: "1px solid var(--border-strong)",
              }}>
                <div style={{
                  fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase",
                  color: "var(--muted)", marginBottom: 10,
                }}>{t.contact.direct}</div>
                <a href="mailto:sebastian@rework.no" style={{
                  fontSize: 22, color: "var(--ink)",
                  borderBottom: "1px solid var(--orange)", paddingBottom: 2,
                  fontWeight: 500,
                }}>sebastian@rework.no</a>
              </div>
            </Reveal>
          </div>

          <Reveal delay={200}>
            <div className="contact-card" style={{
              background: "var(--surface)",
              border: "1px solid var(--border-strong)",
              borderRadius: 12,
              padding: 36,
            }}>
              {!done ? (
                <form onSubmit={submit}>
                  <Field label={t.contact.name}>
                    <input type="text" className="input" required
                      value={name} onChange={(e) => setName(e.target.value)} />
                  </Field>
                  <Field label={t.contact.email}>
                    <input type="email" className="input" required
                      value={email} onChange={(e) => setEmail(e.target.value)} />
                  </Field>
                  <Field label={t.contact.message}>
                    <textarea className="textarea" rows="4" required
                      value={msg} onChange={(e) => setMsg(e.target.value)} />
                  </Field>
                  <button type="submit" className="btn btn-primary" style={{
                    marginTop: 28, width: "100%", justifyContent: "center",
                  }}>
                    {t.contact.cta}<Arrow />
                  </button>
                </form>
              ) : (
                <div style={{
                  padding: "60px 20px", textAlign: "center",
                }}>
                  <div className="serif-italic" style={{
                    fontSize: 48, color: "var(--orange-deep)", marginBottom: 16,
                  }}>Takk.</div>
                  <p style={{ fontSize: 15, color: "var(--muted)" }}>
                    {t.contact.thanks}
                  </p>
                </div>
              )}
            </div>
          </Reveal>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .contact-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
        @media (max-width: 720px) {
          .contact-card { padding: 24px !important; }
        }
      `}</style>
    </section>
  );
}

function Field({ label, children }) {
  return (
    <div style={{ marginBottom: 8 }}>
      <div style={{
        fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
        color: "var(--muted)", marginBottom: 2,
      }}>{label}</div>
      {children}
    </div>
  );
}

function Footer({ t }) {
  return (
    <footer className="site-footer" style={{
      padding: "60px 0 40px",
      borderTop: "1px solid var(--border)",
      background: "var(--canvas)",
    }}>
      <div className="shell" style={{
        display: "flex", justifyContent: "space-between", alignItems: "center",
        flexWrap: "wrap", gap: 24,
      }}>
        <div style={{
          display: "flex", alignItems: "center", gap: 12,
        }}>
          <img src="assets/rework-wordmark.png" alt="Rework" style={{
            height: 24, width: "auto", display: "block",
            mixBlendMode: "multiply", opacity: 0.85,
          }} />
        </div>
        <div style={{ fontSize: 13, color: "var(--muted)", maxWidth: 360 }}>
          {t.footer.tag}
        </div>
        <div style={{ fontSize: 12, color: "var(--subtle)" }}>
          © 2026 · Oslo, Norge
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) {
          .site-footer { padding: 40px 0 24px !important; }
        }
      `}</style>
    </footer>
  );
}

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