// ── Archive milestones · Editors · Membership · Subscribe · Footer ─

// ─────────────────────────────────────────────────────────────
// ARCHIVE PREVIEW — milestones
function ArchivePreview({ theme, dark, lang, nav }) {
  const items = WS_MILESTONES;
  const N = nav || (() => {});
  return (
    <section id="editions" className="section" style={{ background: theme.bg }}>
      <div className="wrap">
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-end", marginBottom:"3rem", flexWrap:"wrap", gap:"1rem" }}>
          <div style={{ maxWidth: 620 }}>
            <Eyebrow theme={theme}>{lang==="en"?"From the archive":"Desde el archivo"}</Eyebrow>
            <h2 className="serif" style={{
              fontStyle:"italic", fontWeight: 300,
              fontSize:"clamp(2rem, 4.2vw, 3.4rem)",
              color: theme.text, marginTop: ".5rem", marginBottom: ".5rem",
              letterSpacing:"-.01em", lineHeight: 1.05,
            }}>{lang==="en"
              ? <>Three years. <em>Six moments.</em></>
              : <>Tres años. <em>Seis momentos.</em></>}</h2>
            <p style={{ fontSize:".95rem", color: theme.text2, fontWeight: 300, lineHeight: 1.7 }}>
              {lang==="en"
                ? "The editions readers come back to. Cable stories. Letters. The week everything changed format."
                : "Las ediciones a las que los lectores vuelven. Historias de cables. Cartas. La semana en que todo cambió de formato."}
            </p>
          </div>
          <button onClick={() => N("archive")} style={{
            fontSize:".82rem", color: theme.sage,
            padding:"10px 18px", borderRadius: 22,
            border:`1px solid ${theme.border2}`,
            background:"transparent", cursor:"pointer",
          }}>{lang==="en"?`All ${(window.WS_CURRENT && window.WS_CURRENT.num || 191)} editions →`:`Las ${(window.WS_CURRENT && window.WS_CURRENT.num || 191)} ediciones →`}</button>
        </div>

        {/* timeline */}
        <div style={{ position:"relative" }}>
          <div aria-hidden style={{
            position:"absolute", top: 0, bottom: 0, left:"7.5%", right:"7.5%", height: 1,
            background: theme.divider, transform:"translateY(38px)", display:"none",
          }}/>
          <div className="grid-3" style={{ gap:"1rem" }}>
            {items.map((m, i) => {
              const editor = WS_EDITORS.find(e => e.id === m.editor);
              return (
                <a key={m.num} href={`#edition?num=${m.num}`} style={{
                  display:"flex", flexDirection:"column", gap:"1rem",
                  background: dark ? theme.panel : "#fff",
                  border: `1px solid ${theme.border}`,
                  borderRadius: 6, padding:"1.5rem 1.4rem",
                  color:"inherit", transition:"transform .3s, border-color .3s",
                  position:"relative", overflow:"hidden",
                }}
                onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-3px)"; e.currentTarget.style.borderColor = theme.border2; }}
                onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.borderColor = theme.border; }}>
                  {/* corner ribbon */}
                  <div style={{
                    position:"absolute", top: 12, right: 12,
                    background: theme.gold2, color: theme.gold,
                    fontSize:".58rem", letterSpacing:".18em", textTransform:"uppercase",
                    padding:"3px 8px", borderRadius: 10, fontWeight: 600,
                  }}>★ {m.badge[lang]}</div>

                  <div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline", marginTop: 12 }}>
                    <div className="serif" style={{ fontSize:"2.4rem", fontWeight: 300, color: theme.sage, lineHeight: 1 }}>#{m.num}</div>
                    <div className="mono" style={{ fontSize:".68rem", color: theme.text3 }}>{m.date}</div>
                  </div>

                  <h3 className="serif italic" style={{
                    fontSize:"1.4rem", fontWeight: 400, color: theme.text,
                    lineHeight: 1.2, marginTop: ".25rem",
                  }}>{m.title[lang]}</h3>

                  <p style={{
                    fontSize:".88rem", color: theme.text2, fontWeight: 300,
                    lineHeight: 1.65, flex: 1,
                  }}>{m.excerpt[lang]}</p>

                  <div style={{
                    display:"flex", justifyContent:"space-between", alignItems:"center",
                    paddingTop: ".75rem", borderTop: `1px solid ${theme.divider}`,
                  }}>
                    <div style={{ display:"flex", alignItems:"center", gap: 8 }}>
                      <span style={{
                        width: 22, height: 22, borderRadius: "50%",
                        background: `${editor.color}30`,
                        border: `1px solid ${editor.color}50`,
                        display:"inline-flex", alignItems:"center", justifyContent:"center",
                        fontSize:".7rem", color: editor.color, fontFamily:"'Cormorant Garamond',serif",
                      }}>{editor.name[0]}</span>
                      <span style={{ fontSize:".76rem", color: theme.text2 }}>
                        {editor.name} · {editor.location[lang].split(",")[0]}
                      </span>
                    </div>
                    <span style={{ fontSize:".82rem", color: theme.sage }}>→</span>
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// PHILOSOPHY / QUOTE band
function Philosophy({ theme, dark, lang }) {
  return (
    <section style={{
      position:"relative", padding:"clamp(6rem, 12vh, 9rem) 5vw",
      background: dark
        ? "linear-gradient(135deg, #0E3A18 0%, #162C1A 50%, #081508 100%)"
        : "linear-gradient(135deg, #6AAA5A 0%, #4A8A3A 50%, #2A6A1A 100%)",
      overflow:"hidden",
    }}>
      <div aria-hidden style={{
        position:"absolute", inset:0,
        background:`linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px)`,
        backgroundSize:"80px 80px",
      }}/>
      <div aria-hidden style={{
        position:"absolute", inset:0,
        background:"radial-gradient(ellipse at center, transparent 25%, rgba(8,15,10,.65) 100%)",
      }}/>
      <Grain amount={.05}/>

      <div className="wrap-sm" style={{ position:"relative", textAlign:"center", color:"#F0EBE0" }}>
        <span className="label-tiny" style={{ color:"rgba(240,235,224,.55)" }}>
          {lang==="en"?"Edition #12 · May 2023 · The wife's quote":"Edición #12 · Mayo 2023 · La cita de la esposa"}
        </span>
        <blockquote className="serif" style={{
          fontStyle:"italic", fontWeight: 300,
          fontSize:"clamp(1.7rem, 4.5vw, 3.6rem)",
          lineHeight: 1.18, marginTop: "1.5rem", marginBottom: "1.5rem",
          letterSpacing:"-.01em",
        }}>
          {lang==="en"
            ? <>"We didn't take away their screens.<br/><em style={{ color:"#9DC872" }}>We forgot the cable.</em><br/>They did the rest."</>
            : <>"No les quitamos las pantallas.<br/><em style={{ color:"#9DC872" }}>Olvidamos el cable.</em><br/>Ellos hicieron el resto."</>}
        </blockquote>
        <div style={{ width: 48, height: 1, background:"rgba(240,235,224,.4)", margin:"2rem auto 1rem" }}/>
        <div className="label-tiny" style={{ color:"rgba(240,235,224,.45)" }}>
          WiseTip Editorial · {lang==="en"?"Verbatim, since 2023":"Literal, desde 2023"}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// EDITORS
function EditorsSection({ theme, dark, lang }) {
  return (
    <section id="editores" className="section" style={{ background: dark ? theme.bg2 : theme.bg2 }}>
      <div className="wrap">
        <div style={{ maxWidth: 720, marginBottom: "3rem" }}>
          <Eyebrow theme={theme}>{lang==="en"?"The editorial team":"El equipo editorial"}</Eyebrow>
          <h2 className="serif" style={{
            fontStyle:"italic", fontWeight: 300,
            fontSize:"clamp(2rem, 4.2vw, 3.4rem)",
            color: theme.text, marginTop: ".5rem", marginBottom: "1rem",
            letterSpacing:"-.01em", lineHeight: 1.05,
          }}>{lang==="en"
            ? <>Four voices. <em>One purpose.</em></>
            : <>Cuatro voces. <em>Un propósito.</em></>}</h2>
          <p style={{ fontSize:".95rem", color: theme.text2, fontWeight: 300, lineHeight: 1.7, maxWidth: 540 }}>
            {lang==="en"
              ? "WiseTip is not one person's blog. Four parents writing from four cities, taking turns, never performing."
              : "WiseTip no es el blog de una sola persona. Cuatro padres escribiendo desde cuatro ciudades, por turnos, sin actuar."}
          </p>
        </div>

        <div className="grid-4">
          {WS_EDITORS.map((ed, i) => (
            <div key={ed.id} style={{
              background: dark ? theme.panel : "#fff",
              border: `1px solid ${theme.border}`,
              borderRadius: 6, padding: "1.75rem 1.5rem",
              display:"flex", flexDirection:"column", gap:".9rem",
              position:"relative", overflow:"hidden",
            }}>
              {/* color accent bar */}
              <div style={{ position:"absolute", top:0, left:0, right:0, height: 3, background: ed.color }}/>

              <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginTop: 8 }}>
                <div style={{
                  width: 56, height: 56, borderRadius: "50%",
                  background: `${ed.color}26`, border: `1.5px solid ${ed.color}66`,
                  display:"flex", alignItems:"center", justifyContent:"center",
                  fontFamily:"'Cormorant Garamond',serif",
                  fontSize:"1.6rem", color: ed.color, fontWeight: 500,
                }}>{ed.name[0]}</div>
                <span className="mono" style={{ fontSize:".66rem", color: theme.text3 }}>
                  {ed.editions} ed.
                </span>
              </div>

              <div>
                <h3 className="serif" style={{ fontSize:"1.5rem", fontWeight: 400, color: theme.text }}>{ed.name}</h3>
                <div style={{ fontSize:".74rem", color: theme.text3, marginTop: 4 }}>{ed.role[lang]}</div>
                <div style={{ fontSize:".7rem", color: ed.color, marginTop: 6, letterSpacing:".06em" }}>
                  ◉ {ed.location[lang]}
                </div>
              </div>

              <p className="serif italic" style={{
                fontSize:"1.02rem", color: theme.text2, lineHeight: 1.55,
                fontWeight: 300, paddingTop: ".75rem",
                borderTop: `1px solid ${theme.divider}`,
              }}>"{ed.bio[lang]}"</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// MEMBERSHIP — Free vs WiseTip+
function Membership({ theme, dark, lang }) {
  const [billing, setBilling] = useState("annual");
  const monthly = 14, annual = 120;
  const annualPerMo = (annual / 12).toFixed(2);

  const freeFeats = lang === "en" ? [
    "4 of 7 blocks every week",
    `All ${(window.WS_CURRENT && window.WS_CURRENT.num || 191)} freemium editions`,
    "Activity previews",
    "Weekly newsletter EN + ES",
    "No ads. No tracking.",
  ] : [
    "4 de 7 bloques cada semana",
    `Las ${(window.WS_CURRENT && window.WS_CURRENT.num || 191)} ediciones freemium`,
    "Vista previa de actividades",
    "Newsletter semanal EN + ES",
    "Sin anuncios. Sin tracking.",
  ];

  const plusFeats = lang === "en" ? [
    "All 7 blocks · every edition",
    "Full activity pack — every week",
    "49 audiobooks · whole library",
    "Resources block · printables, recipes",
    "Closing block · the editor's note",
    "Early access to new seasonal packs",
    "20% off TailorAudioBooks",
  ] : [
    "Los 7 bloques · cada edición",
    "Pack completo de actividad — cada semana",
    "49 audiolibros · biblioteca completa",
    "Bloque recursos · imprimibles, recetas",
    "Bloque de cierre · nota del editor",
    "Acceso anticipado a packs de temporada",
    "20% de descuento en TailorAudioBooks",
  ];

  return (
    <section id="membership" className="section" style={{ background: theme.bg }}>
      <div className="wrap">
        <div style={{ maxWidth: 720, marginBottom: "3rem", textAlign:"center", margin:"0 auto 3rem" }}>
          <Eyebrow theme={theme}>{lang==="en"?"Membership · WiseTip+":"Membresía · WiseTip+"}</Eyebrow>
          <h2 className="serif" style={{
            fontStyle:"italic", fontWeight: 300,
            fontSize:"clamp(2rem, 4.2vw, 3.4rem)",
            color: theme.text, marginTop: ".5rem", marginBottom: "1rem",
            letterSpacing:"-.01em", lineHeight: 1.05,
          }}>{lang==="en"
            ? <>Read freely. Or <em>go deep.</em></>
            : <>Lee gratis. O <em>profundiza.</em></>}</h2>
          <p style={{ fontSize:".95rem", color: theme.text2, fontWeight: 300, lineHeight: 1.7, maxWidth: 520, margin:"0 auto" }}>
            {lang==="en"
              ? "Two ways to be here. Both real. WiseTip is sustainable because members make it so."
              : "Dos formas de estar aquí. Las dos reales. WiseTip es sostenible porque los miembros lo hacen posible."}
          </p>

          {/* billing toggle */}
          <div style={{
            display:"inline-flex", marginTop:"1.5rem", padding: 4,
            background: theme.sage3, border:`1px solid ${theme.border}`, borderRadius: 24,
          }}>
            {["monthly","annual"].map(b => (
              <button key={b} onClick={() => setBilling(b)} style={{
                padding:"6px 16px", borderRadius: 20, border:"none",
                background: billing === b ? theme.sage : "transparent",
                color: billing === b ? (dark ? "#050F07" : "#fff") : theme.text2,
                fontSize:".78rem", fontWeight: 500,
              }}>
                {lang==="en" ? (b === "annual" ? "Annual · save 28%" : "Monthly")
                              : (b === "annual" ? "Anual · ahorra 28%" : "Mensual")}
              </button>
            ))}
          </div>
        </div>

        {/* plans */}
        <div className="grid-2" style={{ gap:"1.25rem", maxWidth: 980, margin:"0 auto" }}>
          {/* FREE */}
          <div style={{
            background: dark ? theme.panel : "#fff",
            border: `1px solid ${theme.border}`,
            borderRadius: 8, padding:"2.25rem",
            display:"flex", flexDirection:"column", gap:"1.5rem",
          }}>
            <div>
              <div className="label-tiny" style={{ color: theme.text3, marginBottom: 8 }}>
                {lang==="en"?"Free reader":"Lector gratuito"}
              </div>
              <div style={{ display:"flex", alignItems:"baseline", gap:".5rem" }}>
                <span className="serif" style={{ fontSize:"3.5rem", fontWeight: 300, color: theme.text, lineHeight: 1 }}>€0</span>
                <span style={{ fontSize:".82rem", color: theme.text3 }}>/ {lang==="en"?"forever":"siempre"}</span>
              </div>
            </div>
            <p style={{ fontSize:".88rem", color: theme.text2, lineHeight: 1.6, fontWeight: 300 }}>
              {lang==="en"
                ? "Read the weekly edition for as long as it takes. No card. No trial. No drip emails."
                : "Lee la edición semanal el tiempo que quieras. Sin tarjeta. Sin prueba. Sin emails goteo."}
            </p>
            <ul style={{ listStyle:"none", display:"flex", flexDirection:"column", gap:".75rem", flex: 1 }}>
              {freeFeats.map(f => (
                <li key={f} style={{ display:"flex", gap:10, alignItems:"flex-start", fontSize:".86rem", color: theme.text2, fontWeight: 300, lineHeight: 1.5 }}>
                  <span style={{ color: theme.sage, marginTop: 4 }}>—</span>{f}
                </li>
              ))}
            </ul>
            <button style={{
              background:"transparent", color: theme.text,
              border:`1px solid ${theme.border2}`,
              padding:"13px 24px", borderRadius: 28,
              fontSize:".86rem", fontWeight: 500,
            }}>{lang==="en"?"Continue free":"Continuar gratis"}</button>
          </div>

          {/* PLUS */}
          <div style={{
            background: dark
              ? `linear-gradient(180deg, ${theme.panel} 0%, ${theme.panel2} 100%)`
              : "linear-gradient(180deg, #1E4128 0%, #0E2318 100%)",
            border: `1px solid ${theme.sage}50`,
            borderRadius: 8, padding:"2.25rem",
            display:"flex", flexDirection:"column", gap:"1.5rem",
            color:"#F0EBE0",
            position:"relative", overflow:"hidden",
            boxShadow: `0 20px 50px rgba(0,0,0,.25)`,
          }}>
            {/* badge */}
            <div style={{
              position:"absolute", top: 16, right: 16,
              background:"#9DC872", color:"#050F07",
              fontSize:".58rem", letterSpacing:".22em", textTransform:"uppercase",
              padding:"4px 10px", borderRadius: 12, fontWeight: 700,
            }}>{lang==="en"?"Recommended":"Recomendado"}</div>

            <div>
              <div className="label-tiny" style={{ color:"#9DC872", marginBottom: 8 }}>WiseTip+</div>
              <div style={{ display:"flex", alignItems:"baseline", gap:".5rem", flexWrap:"wrap" }}>
                <span className="serif" style={{ fontSize:"3.5rem", fontWeight: 300, color:"#F0EBE0", lineHeight: 1 }}>
                  €{billing === "monthly" ? monthly : annualPerMo}
                </span>
                <span style={{ fontSize:".82rem", color:"rgba(240,235,224,.55)" }}>
                  / {lang==="en"?"month":"mes"}
                </span>
                {billing === "annual" && (
                  <span style={{ fontSize:".7rem", color:"#C8A85A", marginLeft: 8 }}>
                    {lang==="en"?`billed €${annual}/yr`:`facturado ${annual} €/año`}
                  </span>
                )}
              </div>
            </div>
            <p style={{ fontSize:".88rem", color:"rgba(240,235,224,.65)", lineHeight: 1.6, fontWeight: 300 }}>
              {lang==="en"
                ? "Every block. Every audiobook. Every activity pack. The whole archive, plus the perks the editors built for the people who stay."
                : "Cada bloque. Cada audiolibro. Cada pack. Todo el archivo, más los extras que los editores diseñaron para quienes se quedan."}
            </p>
            <ul style={{ listStyle:"none", display:"flex", flexDirection:"column", gap:".75rem", flex: 1 }}>
              {plusFeats.map(f => (
                <li key={f} style={{ display:"flex", gap:10, alignItems:"flex-start", fontSize:".86rem", color:"rgba(240,235,224,.85)", fontWeight: 300, lineHeight: 1.5 }}>
                  <span style={{ color:"#9DC872", marginTop: 2 }}>✓</span>{f}
                </li>
              ))}
            </ul>
            <button style={{
              background:"#9DC872", color:"#050F07",
              border:"none",
              padding:"13px 24px", borderRadius: 28,
              fontSize:".88rem", fontWeight: 600,
            }}>{lang==="en"?"Become a member":"Hazte miembro"} →</button>
            <div style={{ fontSize:".68rem", color:"rgba(240,235,224,.35)", textAlign:"center" }}>
              {lang==="en"?"Cancel anytime · Stripe · No auto-upsells":"Cancela cuando quieras · Stripe · Sin upsells"}
            </div>
          </div>
        </div>

        {/* compare strip */}
        <div style={{
          marginTop:"3rem",
          padding:"1.5rem 2rem", borderRadius: 6,
          background: theme.sage3, border:`1px dashed ${theme.border2}`,
          display:"flex", justifyContent:"space-between", alignItems:"center", gap:"1rem", flexWrap:"wrap",
        }}>
          <div style={{ display:"flex", alignItems:"center", gap:14 }}>
            <span style={{
              width: 34, height: 34, borderRadius:"50%",
              border:`1px solid ${theme.gold}`, color: theme.gold,
              display:"inline-flex", alignItems:"center", justifyContent:"center", fontSize:".8rem",
            }}>🎁</span>
            <div>
              <div style={{ fontSize:".88rem", color: theme.text, fontWeight: 500 }}>
                {lang==="en"?"Schools & institutions":"Colegios e instituciones"}
              </div>
              <div style={{ fontSize:".78rem", color: theme.text2, fontWeight: 300 }}>
                {lang==="en"?"Bundle packs + WiseTip+ seats for your community. From €299/yr.":"Packs + plazas WiseTip+ para tu comunidad. Desde 299 €/año."}
              </div>
            </div>
          </div>
          <button onClick={() => N("about", { tab: "contact" })} style={{
            fontSize:".82rem", color: theme.sage, padding:"8px 16px",
            border:`1px solid ${theme.border2}`, borderRadius: 20,
            background:"transparent", cursor:"pointer",
          }}>{lang==="en"?"Talk to us →":"Habla con nosotros →"}</button>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// SUBSCRIBE
function Subscribe({ theme, dark, lang }) {
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  return (
    <section id="subscribe" style={{
      padding: "clamp(5rem, 10vh, 8rem) 5vw",
      background: dark ? theme.panel : "#1E4128",
      color:"#F0EBE0", position:"relative", overflow:"hidden",
    }}>
      {/* watermark */}
      <div aria-hidden style={{
        position:"absolute", inset:0, display:"flex", alignItems:"center", justifyContent:"center",
        pointerEvents:"none",
      }}>
        <span className="serif italic" style={{
          fontSize:"clamp(8rem, 22vw, 22rem)", fontWeight: 300,
          color:"rgba(125,190,90,.04)", whiteSpace:"nowrap", letterSpacing:"-.02em",
        }}>WiseTip</span>
      </div>
      <Trees theme={{ sage:"#9DC872" }} dark={true}/>

      <div className="wrap-sm" style={{ position:"relative", textAlign:"center" }}>
        <Eyebrow theme={{ sage:"#9DC872", sage3:"rgba(125,190,90,.1)" }}>
          {lang==="en"?"Start this Tuesday":"Empieza este martes"}
        </Eyebrow>
        <h2 className="serif" style={{
          fontStyle:"italic", fontWeight: 300,
          fontSize:"clamp(2.2rem, 5.5vw, 4.4rem)",
          lineHeight: 1.05, marginTop: ".75rem", marginBottom: "1.25rem",
          letterSpacing:"-.02em",
        }}>
          {lang==="en"
            ? <>One letter <em style={{ color:"#9DC872" }}>per week.</em><br/>Then your life takes over.</>
            : <>Una carta <em style={{ color:"#9DC872" }}>por semana.</em><br/>Después tu vida sigue.</>}
        </h2>
        <p style={{ fontSize:"1rem", color:"rgba(240,235,224,.55)", maxWidth: 460, margin:"0 auto 2.25rem", fontWeight: 300, lineHeight: 1.7 }}>
          {lang==="en"
            ? "Over 2,100 families read WiseTip every Tuesday. No spam. No tracking. Unsubscribe in one click."
            : "Más de 2.100 familias leen WiseTip cada martes. Sin spam. Sin tracking. Cancela en un clic."}
        </p>

        {sent ? (
          <div style={{
            display:"inline-flex", padding:"1rem 1.5rem", borderRadius: 30,
            background:"rgba(125,190,90,.16)", border:"1px solid #9DC872",
            color:"#F0EBE0", fontSize:".92rem",
          }}>
            ✓ {lang==="en"?"Welcome. Check your inbox.":"Bienvenido. Mira tu bandeja."}
          </div>
        ) : (
          <form onSubmit={(e)=>{e.preventDefault(); if(email) setSent(true);}} style={{
            display:"flex", gap: 8, maxWidth: 480, margin:"0 auto 1rem",
          }}>
            <input type="email" required value={email} onChange={e=>setEmail(e.target.value)}
              placeholder={lang==="en"?"your@email.com":"tu@email.com"}
              style={{
                flex:1, padding:"14px 18px",
                background:"rgba(255,255,255,.05)", border:"1px solid rgba(255,255,255,.14)",
                color:"#F0EBE0", borderRadius: 30, outline:"none", fontSize:".92rem",
              }}/>
            <button type="submit" style={{
              background:"#9DC872", color:"#050F07", border:"none",
              padding:"14px 24px", borderRadius: 30,
              fontSize:".88rem", fontWeight: 600,
            }}>{lang==="en"?"Join free →":"Únete gratis →"}</button>
          </form>
        )}
        <div style={{ fontSize:".7rem", color:"rgba(240,235,224,.3)" }}>
          {lang==="en"?"No spam · No intrusive ads · Cancel anytime":"Sin spam · Sin publicidad · Cancela cuando quieras"}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// FOOTER
function Footer({ theme, dark, lang, nav }) {
  const N = nav || (() => {});
  const cols = [
    {
      title: lang==="en"?"Read":"Leer",
      links: lang==="en"
        ? [["This week", "home"], [`Archive · ${(window.WS_CURRENT && window.WS_CURRENT.num || 191)}`, "archive"], ["Sample edition", "edition"], ["Editors", "about"], ["Audiobooks · Podcast", "audiobooks"]]
        : [["Esta semana", "home"], [`Archivo · ${(window.WS_CURRENT && window.WS_CURRENT.num || 191)}`, "archive"], ["Edición de muestra", "edition"], ["Editores", "about"], ["Audiolibros · Podcast", "audiobooks"]],
    },
    {
      title: lang==="en"?"Products":"Productos",
      links: lang==="en"
        ? [["WiseTip+", "membership"], ["TailorAudioBooks", "tailor"], ["Activity packs", "packs"], ["My library", "profile"]]
        : [["WiseTip+", "membership"], ["TailorAudioBooks", "tailor"], ["Packs", "packs"], ["Mi biblioteca", "profile"]],
    },
    {
      title: lang==="en"?"Programs":"Programas",
      links: lang==="en"
        ? [["Workshops", "workshops"], ["Seasonal hub", "seasonal"], ["For schools", "schools"], ["Activities", "activities"], ["Activities by category", "catalog"]]
        : [["Talleres", "workshops"], ["Hub estacional", "seasonal"], ["Para colegios", "schools"], ["Actividades", "activities"], ["Actividades por categoría", "catalog"]],
    },
    {
      title: lang==="en"?"More":"Más",
      links: lang==="en"
        ? [["Our story", "story"], ["Sponsorships", "sponsors"], ["Press", "about?tab=press"], ["Contact", "about?tab=contact"]]
        : [["Nuestra historia", "story"], ["Patrocinios", "sponsors"], ["Prensa", "about?tab=press"], ["Contacto", "about?tab=contact"]],
    },
  ];

  return (
    <footer style={{
      background: dark ? "#040805" : "#1A1F12",
      color:"rgba(240,235,224,.55)",
      padding:"clamp(3rem, 7vh, 5rem) 5vw 2rem",
      borderTop: "1px solid rgba(255,255,255,.05)",
    }}>
      <div className="wrap">
        <div style={{
          display:"grid", gridTemplateColumns:"1.5fr repeat(4, 1fr)", gap:"3rem",
          paddingBottom:"3rem", borderBottom:"1px solid rgba(255,255,255,.06)",
        }} className="footer-grid">
          <div>
            <div className="serif" style={{ fontSize:"1.6rem", color:"#F0EBE0", marginBottom: ".5rem" }}>WiseTip</div>
            <p style={{ fontSize:".82rem", lineHeight: 1.7, fontWeight: 300, maxWidth: 280, marginBottom: "1.25rem" }}>
              {lang==="en"
                ? "A weekly editorial system for conscious parenting. Not anti-screen. Pro-intention."
                : "Un sistema editorial semanal para crianza consciente. No anti-pantallas. Pro-intención."}
            </p>
            <div style={{ marginTop:".5rem" }}>
              <div style={{ fontSize:".75rem", color:"rgba(125,190,90,.85)", fontWeight: 500, marginBottom: 10 }}>
                {lang==="en"?"2,100+ families · 11 countries":"2.100+ familias · 11 países"}
              </div>
              <button onClick={() => N("subscribe")} style={{
                display:"inline-flex", alignItems:"center", gap: 6,
                background:"#9DC872", color:"#050F07", border:"none",
                padding:"8px 18px", borderRadius: 18, fontSize:".78rem", fontWeight: 600, cursor:"pointer",
              }}>{lang==="en"?"Join free →":"Únete gratis →"}</button>
            </div>
          </div>

          {cols.map(c => (
            <div key={c.title}>
              <div className="label-tiny" style={{ color:"#9DC872", marginBottom: "1.25rem" }}>{c.title}</div>
              <ul style={{ listStyle:"none", display:"flex", flexDirection:"column", gap: 10 }}>
                {c.links.map(([label, page]) => (
                  <li key={label}>
                    <button onClick={() => {
                      if (page.includes("?")) {
                        const [p, q] = page.split("?");
                        const params = {};
                        q.split("&").forEach(kv => { const [k,v] = kv.split("="); params[k] = v; });
                        N(p, params);
                      } else N(page);
                    }} style={{
                      background:"none", border:"none", padding: 0, cursor:"pointer",
                      fontSize:".82rem", color:"rgba(240,235,224,.6)", textAlign:"left",
                    }}>{label}</button>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          paddingTop:"2rem", display:"flex", justifyContent:"space-between", alignItems:"center",
          gap:"1rem", flexWrap:"wrap", fontSize:".74rem", color:"rgba(240,235,224,.35)",
        }}>
          <div style={{ display:"flex", gap:"1.5rem", flexWrap:"wrap" }}>
            <span>© 2026 WiseTip</span>
            <button onClick={() => N("about", { tab: "legal" })} style={{ background:"none", border:"none", padding:0, color:"inherit", cursor:"pointer", fontSize:"inherit" }}>{lang==="en"?"Privacy":"Privacidad"}</button>
            <button onClick={() => N("about", { tab: "legal" })} style={{ background:"none", border:"none", padding:0, color:"inherit", cursor:"pointer", fontSize:"inherit" }}>{lang==="en"?"Terms":"Términos"}</button>
            <button onClick={() => N("about", { tab: "legal" })} style={{ background:"none", border:"none", padding:0, color:"inherit", cursor:"pointer", fontSize:"inherit" }}>{lang==="en"?"Editorial rules":"Reglas editoriales"}</button>
          </div>
          <div className="serif italic" style={{ fontSize:".82rem", color:"rgba(125,190,90,.55)" }}>
            Running with love on Narrio
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; }
        }
        @media (max-width: 540px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

Object.assign(window, { ArchivePreview, Philosophy, EditorsSection, Membership, Subscribe, Footer });