// ── SIGN-UP · the free funnel ────────────────────────────────────────
// The actual freemium entry point: capture an email, promise no tracking,
// and set up the free↔WiseTip+ choice. Client-only (shows a success
// state). Route: "signup".

const { useState: useSU } = React;

function Signup({ theme, dark, lang, nav, setIsMember }) {
  const [email, setEmail] = useSU("");
  const [langPref, setLangPref] = useSU(lang);
  const [done, setDone] = useSU(false);
  const [err, setErr] = useSU(false);

  const submit = (e) => {
    e && e.preventDefault();
    const ok = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email.trim());
    if (!ok) { setErr(true); return; }
    setErr(false); setDone(true);
  };

  return (
    <div style={{ background: theme.bg, color: theme.text, minHeight: "100vh", paddingTop: "5rem" }}>
      {/* HERO / FORM */}
      <header style={{ position: "relative", overflow: "hidden", background: dark ? "#0B1C12" : "#0E2318", color: "#F0EBE0", padding: "clamp(3.5rem,9vh,6.5rem) clamp(1.5rem,5vw,5vw) clamp(3.5rem,9vh,6.5rem)" }}>
        <Particles count={20} theme={{ sage: "#7DBE5A", sage3: "rgba(125,190,90,.08)" }}/>
        <Trees theme={{ sage: "#7DBE5A" }} dark={true}/>
        <Grain amount={.05}/>
        <div className="wrap-sm" style={{ position: "relative", textAlign: "center" }}>
          {!done ? (
            <>
              <div className="label-tiny" style={{ color: "#9DC872", marginBottom: "1.25rem", letterSpacing: ".16em" }}>{lang === "en" ? "Start free · one letter a week" : "Empieza gratis · una carta a la semana"}</div>
              <h1 className="serif" style={{ fontStyle: "italic", fontWeight: 300, fontSize: "clamp(2.4rem,6vw,4.4rem)", color: "#F0EBE0", lineHeight: 1.04, letterSpacing: "-.015em", marginBottom: "1.25rem" }}>
                {lang === "en" ? <>Not anti-screen.<br/>Pro-intention.</> : <>No anti-pantallas.<br/>Pro-intención.</>}
              </h1>
              <p style={{ color: "rgba(240,235,224,.65)", fontSize: "clamp(1.02rem,2.2vw,1.2rem)", lineHeight: 1.7, fontWeight: 300, maxWidth: 520, margin: "0 auto 2.5rem" }}>
                {lang === "en"
                  ? "A short, honest letter every week from four parents in four cities. Free to read. No tracking, ever."
                  : "Una carta corta y honesta cada semana de cuatro padres en cuatro ciudades. Gratis. Sin rastreo, nunca."}
              </p>

              <form onSubmit={submit} style={{ maxWidth: 480, margin: "0 auto" }}>
                <div style={{ display: "flex", gap: 8, flexWrap: "wrap", justifyContent: "center" }}>
                  <input
                    type="email" value={email} onChange={e => { setEmail(e.target.value); setErr(false); }}
                    placeholder={lang === "en" ? "your@email.com" : "tu@correo.com"}
                    style={{ flex: "1 1 240px", minWidth: 0, padding: "13px 18px", background: "rgba(255,255,255,.07)", border: `1px solid ${err ? "#C45A3A" : "rgba(255,255,255,.2)"}`, borderRadius: 26, color: "#F0EBE0", fontSize: ".95rem", outline: "none" }}/>
                  <button type="submit" style={{ background: "#7DBE5A", color: "#050F07", border: "none", padding: "13px 26px", borderRadius: 26, fontSize: ".92rem", fontWeight: 600, cursor: "pointer", whiteSpace: "nowrap" }}>
                    {lang === "en" ? "Start free →" : "Empieza gratis →"}
                  </button>
                </div>
                {err && <div style={{ color: "#E08A6A", fontSize: ".8rem", marginTop: 10 }}>{lang === "en" ? "Please enter a valid email." : "Introduce un correo válido."}</div>}
                <div style={{ display: "flex", gap: 8, justifyContent: "center", marginTop: 16, alignItems: "center" }}>
                  <span className="label-tiny" style={{ color: "rgba(240,235,224,.4)" }}>{lang === "en" ? "Read in" : "Leer en"}</span>
                  {["en", "es"].map(l => (
                    <button key={l} type="button" onClick={() => setLangPref(l)} style={{ padding: "4px 12px", borderRadius: 14, border: `1px solid ${langPref === l ? "#7DBE5A" : "rgba(255,255,255,.2)"}`, background: langPref === l ? "rgba(125,190,90,.18)" : "transparent", color: langPref === l ? "#9DC872" : "rgba(240,235,224,.6)", fontSize: ".7rem", letterSpacing: ".1em", textTransform: "uppercase", fontWeight: 600, cursor: "pointer" }}>{l}</button>
                  ))}
                </div>
              </form>
            </>
          ) : (
            <div style={{ animation: "reveal .5s ease both" }}>
              <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 64, height: 64, borderRadius: "50%", background: "rgba(125,190,90,.16)", border: "1px solid rgba(125,190,90,.5)", color: "#9DC872", fontSize: "1.6rem", marginBottom: "1.5rem" }}>✓</span>
              <h1 className="serif" style={{ fontStyle: "italic", fontWeight: 300, fontSize: "clamp(2rem,5vw,3.4rem)", color: "#F0EBE0", lineHeight: 1.08, marginBottom: "1rem" }}>{lang === "en" ? "You're in." : "Ya estás dentro."}</h1>
              <p style={{ color: "rgba(240,235,224,.65)", fontSize: "1.1rem", lineHeight: 1.7, fontWeight: 300, maxWidth: 480, margin: "0 auto 2rem" }}>
                {lang === "en"
                  ? <>The next edition lands in your inbox this week — in {langPref === "en" ? "English" : "Spanish"}. Until then, start with this one:</>
                  : <>La próxima edición llega a tu bandeja esta semana — en {langPref === "en" ? "inglés" : "español"}. Mientras, empieza por esta:</>}
              </p>
              <div style={{ display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap" }}>
                <button onClick={() => nav("edition", { num: window.WS_CURRENT && window.WS_CURRENT.num || 191 })} style={{ background: "#7DBE5A", color: "#050F07", border: "none", padding: "12px 24px", borderRadius: 24, fontSize: ".9rem", fontWeight: 600, cursor: "pointer" }}>{lang === "en" ? "Read this week's edition →" : "Lee la edición de esta semana →"}</button>
                <button onClick={() => nav("home")} style={{ background: "transparent", color: "#F0EBE0", border: "1px solid rgba(255,255,255,.25)", padding: "12px 20px", borderRadius: 24, fontSize: ".9rem", cursor: "pointer" }}>{lang === "en" ? "Explore the site" : "Explorar el sitio"}</button>
              </div>
            </div>
          )}
        </div>
      </header>

      {/* FREE vs WISETIP+ */}
      <div style={{ padding: "4rem clamp(1.5rem,5vw,5vw)" }}>
        <div className="wrap" style={{ textAlign: "center" }}>
          <Eyebrow theme={theme}>{lang === "en" ? "Free is genuinely free" : "Lo gratis es de verdad gratis"}</Eyebrow>
          <h2 className="serif" style={{ fontStyle: "italic", fontWeight: 300, fontSize: "clamp(1.6rem,3.5vw,2.4rem)", color: theme.text, marginTop: ".5rem", marginBottom: "2.5rem" }}>
            {lang === "en" ? "Start with the letter. Upgrade only if you want the rest." : "Empieza por la carta. Sube de nivel solo si quieres el resto."}
          </h2>
          <div className="grid-2" style={{ gap: "1.25rem", maxWidth: 820, margin: "0 auto", textAlign: "left" }}>
            <SUPlan theme={theme} dark={dark} tone={theme.sage}
              name={lang === "en" ? "Free" : "Gratis"}
              price={lang === "en" ? "€0 · forever" : "0 € · para siempre"}
              items={lang === "en"
                ? ["The weekly edition — a short version of 4 blocks", "The full archive, searchable", "Free activities & one free pack sample", "Both languages, no tracking"]
                : ["La edición semanal — versión corta de 4 bloques", "El archivo completo, con búsqueda", "Actividades gratis y una muestra de pack", "Ambos idiomas, sin rastreo"]}
              cta={lang === "en" ? "You just did this ✓" : "Acabas de hacerlo ✓"} onCta={null}/>
            <SUPlan theme={theme} dark={dark} tone={theme.gold} featured
              name="WiseTip+"
              price={lang === "en" ? "from €6 / month" : "desde 6 € / mes"}
              items={lang === "en"
                ? ["The full edition — all 7 blocks, long form", "Every activity, step-by-step", "All seasonal packs, always", "TailorAudioBooks & the full podcast"]
                : ["La edición completa — los 7 bloques, versión larga", "Cada actividad, paso a paso", "Todos los packs de temporada, siempre", "TailorAudioBooks y el podcast completo"]}
              cta={lang === "en" ? "See WiseTip+ →" : "Ver WiseTip+ →"} onCta={() => nav("membership")}/>
          </div>
        </div>
      </div>
    </div>
  );
}

function SUPlan({ theme, dark, tone, name, price, items, cta, onCta, featured }) {
  return (
    <div style={{ background: dark ? theme.panel : "#fff", border: `1px solid ${featured ? tone + "66" : theme.border}`, borderRadius: 12, padding: "1.75rem 1.75rem 1.5rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 8 }}>
        <span className="serif italic" style={{ fontSize: "1.6rem", color: featured ? tone : theme.text, fontWeight: 400 }}>{name}</span>
        <span style={{ fontSize: ".82rem", color: theme.text3 }}>{price}</span>
      </div>
      <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
        {items.map((it, i) => (
          <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: ".9rem", color: theme.text2, lineHeight: 1.5 }}>
            <span style={{ color: tone, marginTop: 1 }}>{featured ? "✦" : "—"}</span>{it}
          </li>
        ))}
      </ul>
      <button onClick={onCta || undefined} disabled={!onCta} style={{ background: onCta ? tone : "transparent", color: onCta ? (dark ? "#050F07" : "#fff") : theme.text3, border: onCta ? "none" : `1px solid ${theme.border2}`, padding: "11px 18px", borderRadius: 22, fontSize: ".85rem", fontWeight: 600, cursor: onCta ? "pointer" : "default" }}>{cta}</button>
    </div>
  );
}

Object.assign(window, { Signup });