// ── 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>Ten moments.</em></>
              : <>Tres años. <em>Diez 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 — uses shared PricingPlans component (pricing-plans.jsx)
function Membership({ theme, dark, lang }) {
  return (
    <section id="membership" className="section" style={{ background: theme.bg }}>
      <div className="wrap">
        <div style={{ textAlign:"center", margin:"0 auto 2.5rem", maxWidth: 720 }}>
          <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>
        </div>

        <PricingPlans
          theme={theme} dark={dark} lang={lang}
          freeCta={lang==="en" ? "Start free →" : "Empieza gratis →"}
          freeOnCta={() => N("subscribe")}
          onUpgrade={() => N("membership")}
        />

        {/* schools 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",
          maxWidth: 820, margin:"3rem auto 0",
        }}>
          <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>
  );
}

// ─────────────────────────────────────────────────────────────
// WEEKEND PACK SIGNUP — homepage footer banner
function Subscribe({ theme, dark, lang }) {
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  const [error, setError] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!email) return;
    setError(null);
    try {
      const res = await fetch('/api/pack/signup', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, lang }),
      });
      if (res.ok) {
        setSent(true);
      } else {
        setError(lang === "en" ? "Something went wrong. Try again." : "Algo salió mal. Inténtalo de nuevo.");
      }
    } catch(err) {
      setError(lang === "en" ? "Something went wrong. Try again." : "Algo salió mal. Inténtalo de nuevo.");
    }
  };

  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"?"Free, every Friday":"Gratis, cada viernes"}
        </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"
            ? <>Your family's weekend, <em style={{ color:"#9DC872" }}>planned.</em></>
            : <>El fin de semana de tu familia, <em style={{ color:"#9DC872" }}>organizado.</em></>}
        </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"
            ? "One of our editors picks a dinner you cook together, two Saturday activities, and a Sunday project. Around 6–8 hours offline. Arrives before noon on Fridays."
            : "Uno de nuestros editores elige una cena que cocinéis juntos, dos actividades para el sábado y un proyecto de domingo. Entre 6 y 8 horas sin pantallas."}
        </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"?"You're in. Check your inbox Friday.":"Perfecto. Revisa tu correo el viernes."}
          </div>
        ) : (
          <form onSubmit={handleSubmit} style={{
            display:"flex", gap: 8, maxWidth: 480, margin:"0 auto 1rem",
          }}>
            <input id="pack-signup-email" name="email" 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, cursor:"pointer",
            }}>{lang==="en"?"Get this Friday's pack →":"Envíame el plan de este viernes →"}</button>
          </form>
        )}
        {error && (
          <div style={{ fontSize:".82rem", color:"#E07070", marginBottom:".5rem" }}>{error}</div>
        )}
        <div style={{ fontSize:".7rem", color:"rgba(240,235,224,.3)" }}>
          {lang==="en"?"Free forever. Arrives Fridays before noon.":"Gratis para siempre. Llega los viernes antes del mediodía."}
        </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"?"Recipes":"Recetas",
      links: lang==="en"
        ? [["Family recipe book", "/recipes/"], ["Weekly menus", "/recipes/#menus"]]
        : [["Libro de recetas", "/recipes/"], ["Menús semanales", "/recipes/#menus"]],
    },
    {
      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"], ["Contact", "about?tab=contact"]]
        : [["Nuestra historia", "story"], ["Patrocinios", "sponsors"], ["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(5, 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}>
                    {page.startsWith("/")
                      ? <a href={page} style={{
                          fontSize:".82rem", color:"rgba(240,235,224,.6)",
                          textDecoration:"none",
                        }}>{label}</a>
                      : <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 });