// ── Nav · Hero · This Week's Edition ──────────────────────────

const { useState: _u1, useEffect: _e1, useRef: _r1 } = React;

// ─────────────────────────────────────────────────────────────
// NAV — grouped, self-describing menus so newcomers can orient
//
// IA: one direct entry ("This week") + 4 labelled groups
// (Read / Activities / Listen / More). Each group item carries a
// short description — the single biggest "what is this?" fix for
// first-time visitors, who previously saw 6 cryptic flat links.

// menu model — pages match PAGES ids in app.jsx
function NAV_GROUPS(lang) {
  const en = lang === "en";
  return [
    { id: "read", label: en ? "Read" : "Leer", items: [
      { page: "archive",  label: en ? "The archive"      : "El archivo",       desc: en ? `All ${window.WS_CURRENT && window.WS_CURRENT.num || 191} weekly editions` : `Las ${window.WS_CURRENT && window.WS_CURRENT.num || 191} ediciones semanales` },
      { page: "edition",  label: en ? "A full edition"   : "Una edición completa", desc: en ? "See a whole WiseTip+ edition"    : "Mira una edición WiseTip+ completa" },
      { page: "about",    label: en ? "The editors"      : "Los editores",      desc: en ? "Four parents, four cities"          : "Cuatro padres, cuatro ciudades", data: { tab: "about" } },
    ]},
    { id: "do", label: en ? "Activities" : "Actividades", items: [
      { page: "activities", label: en ? "All activities"      : "Todas las actividades", desc: en ? "Screen-free things to do"     : "Cosas sin pantallas para hacer" },
      { page: "catalog",    label: en ? "By category"         : "Por categoría",         desc: en ? "Browse by season, age & need" : "Por temporada, edad y necesidad" },
      { page: "packs",      label: en ? "Seasonal packs"      : "Packs de temporada",    desc: en ? "Printable kits for the fridge": "Kits imprimibles para la nevera" },
    ]},
    { id: "listen", label: en ? "Listen" : "Escuchar", items: [
      { page: "audiobooks", label: en ? "Audiobooks & Podcast"  : "Audiolibros y Podcast", desc: en ? "49 stories · the podcast"       : "49 historias · el podcast" },
      { page: "tailor",     label: en ? "TailorAudioBooks"       : "TailorAudioBooks",      desc: en ? "A story made for your child"    : "Una historia hecha para tu hijo", star: true },
    ]},
    { id: "more", label: en ? "More" : "Más", items: [
      { page: "workshops", label: en ? "Workshops"    : "Talleres",     desc: en ? "Live sessions for parents"  : "Sesiones en vivo para padres" },
      { page: "seasonal",  label: en ? "Seasonal hub" : "Hub estacional",desc: en ? "What fits this time of year": "Lo que encaja esta época" },
      { page: "schools",   label: en ? "For schools"  : "Para colegios", desc: en ? "Classroom packs & seats"    : "Packs y plazas para el aula" },
      { page: "sponsors",  label: en ? "Sponsorships" : "Patrocinios",   desc: en ? "Work with WiseTip"          : "Colabora con WiseTip" },
      { page: "about",     label: en ? "About & contact": "Sobre y contacto", desc: en ? "Story, press, legal"    : "Historia, prensa, legal", data: { tab: "contact" } },
    ]},
  ];
}

// which group holds the current page (for active highlighting)
function NAV_ACTIVE_GROUP(page) {
  const map = {
    archive:"read", edition:"read", article:"read",
    activities:"do", catalog:"do", packs:"do", seasonal:"do",
    audiobooks:"listen", tailor:"listen",
    workshops:"more", schools:"more", sponsors:"more", about:"more",
  };
  return map[page] || null;
}

function Nav({ theme, dark, lang, setLang, setDark, nav, currentPage }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(null);      // desktop dropdown open (group id)
  const [mobileOpen, setMobileOpen] = useState(false);
  const closeTimer = useRef(null);

  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 30);
    window.addEventListener("scroll", fn, { passive: true });
    return () => window.removeEventListener("scroll", fn);
  }, []);

  // close menus on route change
  useEffect(() => { setOpen(null); setMobileOpen(false); }, [currentPage]);
  // lock scroll when mobile menu open
  useEffect(() => {
    document.body.style.overflow = mobileOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [mobileOpen]);

  const groups = NAV_GROUPS(lang);
  const activeGroup = NAV_ACTIVE_GROUP(currentPage);
  const go = (page, data) => { nav(page, data); setOpen(null); setMobileOpen(false); };

  const hoverOpen = (id) => { clearTimeout(closeTimer.current); setOpen(id); };
  const hoverClose = () => { closeTimer.current = setTimeout(() => setOpen(null), 140); };

  const linkColor = (isActive) => isActive ? theme.text : theme.text2;

  return (
    <nav
      onMouseLeave={hoverClose}
      style={{
        position:"fixed", top:0, left:0, right:0, zIndex: 100,
        background: (scrolled || open) ? theme.navBg : "transparent",
        backdropFilter: (scrolled || open) ? "blur(18px) saturate(140%)" : "none",
        WebkitBackdropFilter: (scrolled || open) ? "blur(18px) saturate(140%)" : "none",
        borderBottom: (scrolled || open) ? `1px solid ${theme.border}` : "1px solid transparent",
        transition: "background .35s ease, border-color .35s ease",
        padding: "1rem clamp(1.25rem, 5vw, 4vw)",
        display: "flex", alignItems: "center", justifyContent: "space-between",
      }}>
      {/* Logo */}
      <button onClick={() => go("home")} style={{
        display:"flex", alignItems:"baseline", gap:8, background:"none", border:"none", padding: 0, cursor:"pointer", flexShrink: 0,
      }}>
        <span className="serif" style={{
          fontSize:"1.45rem", fontWeight:400, color: theme.text, letterSpacing:"-.005em",
        }}>WiseTip</span>
        <span className="label-tiny" style={{ color: theme.sage, fontSize:".5rem" }}>{'v.' + (window.WS_CURRENT && window.WS_CURRENT.num || 191)}</span>
      </button>

      {/* Center links — grouped dropdowns */}
      <div className="nav-links" style={{ display:"flex", gap: "1.9rem", alignItems:"center" }}>
        {/* direct entry */}
        <button onClick={() => go("home")} style={{
          background:"none", border:"none", padding:"6px 0",
          fontSize:".84rem", color: linkColor(currentPage === "home"),
          fontWeight: currentPage === "home" ? 500 : 400, position:"relative",
        }}>
          {lang==="en" ? "This week" : "Esta semana"}
          {currentPage === "home" && <span style={{ position:"absolute", left:0, right:0, bottom:-2, height:1, background: theme.sage }}/>}
        </button>

        {/* direct: editors */}
        <button onClick={() => go("about", { tab: "about" })} style={{
          background:"none", border:"none", padding:"6px 0",
          fontSize:".84rem", color: linkColor(currentPage === "about"),
          fontWeight: currentPage === "about" ? 500 : 400, position:"relative",
        }}>
          {lang==="en" ? "Editors" : "Editores"}
          {currentPage === "about" && <span style={{ position:"absolute", left:0, right:0, bottom:-2, height:1, background: theme.sage }}/>}
        </button>

        {groups.map(g => {
          const isActive = activeGroup === g.id;
          const isOpen = open === g.id;
          return (
            <div key={g.id} onMouseEnter={() => hoverOpen(g.id)} style={{ position:"relative" }}>
              <button
                onClick={() => setOpen(isOpen ? null : g.id)}
                aria-expanded={isOpen}
                style={{
                  background:"none", border:"none", padding:"6px 0",
                  fontSize:".84rem", color: (isActive || isOpen) ? theme.text : theme.text2,
                  fontWeight: isActive ? 500 : 400,
                  display:"inline-flex", alignItems:"center", gap: 5, position:"relative",
                }}>
                {g.label}
                <svg width="9" height="9" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.6"
                  style={{ transform: isOpen ? "rotate(180deg)" : "none", transition:"transform .25s", opacity:.6 }}>
                  <path d="M2.5 4.5 6 8l3.5-3.5"/>
                </svg>
                {isActive && <span style={{ position:"absolute", left:0, right:14, bottom:-2, height:1, background: theme.sage }}/>}
              </button>

              {/* dropdown panel */}
              {isOpen && (
                <div style={{
                  position:"absolute", top:"calc(100% + 14px)", left: "50%", transform:"translateX(-50%)",
                  minWidth: 296, padding: 6,
                  background: dark ? "rgba(10,20,13,.96)" : "rgba(248,244,236,.98)",
                  border: `1px solid ${theme.border2}`, borderRadius: 12,
                  backdropFilter:"blur(20px)", WebkitBackdropFilter:"blur(20px)",
                  boxShadow:"0 24px 60px rgba(0,0,0,.35)",
                  animation:"nav-drop .18s ease both",
                }}>
                  {g.items.map(it => {
                    const itActive = currentPage === it.page;
                    return (
                      <button key={it.label} onClick={() => go(it.page, it.data)} style={{
                        display:"flex", flexDirection:"column", gap: 2, width:"100%", textAlign:"left",
                        padding:"10px 12px", borderRadius: 8, border:"none",
                        background: itActive ? theme.sage4 : "transparent",
                        transition:"background .18s",
                      }}
                      onMouseEnter={e => { if(!itActive) e.currentTarget.style.background = dark ? "rgba(255,255,255,.05)" : "rgba(0,0,0,.04)"; }}
                      onMouseLeave={e => { if(!itActive) e.currentTarget.style.background = "transparent"; }}>
                        <span style={{ display:"flex", alignItems:"center", gap: 7, fontSize:".86rem", fontWeight: 500, color: theme.text }}>
                          {it.label}
                          {it.star && <span style={{ fontSize:".54rem", letterSpacing:".14em", textTransform:"uppercase", color: theme.gold, border:`1px solid ${theme.gold}55`, borderRadius: 8, padding:"1px 6px" }}>★</span>}
                        </span>
                        <span style={{ fontSize:".72rem", color: theme.text3, fontWeight: 300, lineHeight: 1.35 }}>{it.desc}</span>
                      </button>
                    );
                  })}
                </div>
              )}
            </div>
          );
        })}
      </div>

      {/* Right controls */}
      <div style={{ display:"flex", alignItems:"center", gap: ".5rem", flexShrink: 0 }}>
        {/* lang toggle */}
        <div style={{
          display:"inline-flex", border:`1px solid ${theme.border2}`, borderRadius: 16, padding: 2,
          background: theme.sage3,
        }}>
          {["en","es"].map(l => (
            <button key={l} onClick={() => setLang(l)} style={{
              padding:"4px 10px", borderRadius: 14, border:"none",
              background: lang === l ? theme.sage : "transparent",
              color: lang === l ? (dark ? "#050F07" : "#fff") : theme.text2,
              fontSize:".7rem", letterSpacing:".1em", textTransform:"uppercase", fontWeight: 600,
            }}>{l}</button>
          ))}
        </div>
        {/* dark toggle */}
        <button onClick={() => setDark(!dark)} title="Mode" style={{
          width: 34, height: 34, borderRadius: 17,
          border: `1px solid ${theme.border2}`, background: theme.sage3,
          color: theme.text2, display:"inline-flex", alignItems:"center", justifyContent:"center",
          cursor:"pointer", padding: 0,
        }}>
          {dark
            ? <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
            : <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/></svg>}
        </button>
        {/* profile */}
        <button onClick={() => go("profile")} title={lang==="en"?"My library":"Mi biblioteca"} className="nav-profile-btn" style={{
          width: 34, height: 34, borderRadius: 17,
          border: `1px solid ${currentPage === "profile" ? theme.sage : theme.border2}`,
          background: currentPage === "profile" ? `${theme.sage}1f` : theme.sage3,
          color: currentPage === "profile" ? theme.sage : theme.text2,
          display:"inline-flex", alignItems:"center", justifyContent:"center", cursor:"pointer",
        }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
            <circle cx="12" cy="8" r="3.5"/>
            <path d="M4 20.5c1.6-3.6 4.6-5.5 8-5.5s6.4 1.9 8 5.5"/>
          </svg>
        </button>
        {/* join — hidden on small where mobile menu carries it */}
        <button onClick={() => go("signup")} className="nav-join-btn" style={{
          padding:"8px 16px", borderRadius: 20,
          background: theme.sage, color: dark ? "#050F07" : "#fff",
          fontSize:".78rem", fontWeight: 600, letterSpacing:".02em",
          marginLeft: 4, border:"none", cursor:"pointer",
        }}>{lang==="en" ? "Join free" : "Únete gratis"}</button>

        {/* mobile hamburger */}
        <button className="nav-mobile-btn" onClick={() => setMobileOpen(true)} aria-label="Menu" style={{
          display:"none", width: 38, height: 38, borderRadius: 12,
          border:`1px solid ${theme.border2}`, background: theme.sage3, color: theme.text,
          alignItems:"center", justifyContent:"center", marginLeft: 4,
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
            <path d="M4 7h16M4 12h16M4 17h16"/>
          </svg>
        </button>
      </div>

      {mobileOpen && (
        <MobileMenu theme={theme} dark={dark} lang={lang} groups={groups}
          currentPage={currentPage} go={go} onClose={() => setMobileOpen(false)}/>
      )}
    </nav>
  );
}

// ─── MOBILE MENU — full-screen, all groups expanded ──────────
function MobileMenu({ theme, dark, lang, groups, currentPage, go, onClose }) {
  return (
    <div style={{
      position:"fixed", inset:0, zIndex: 200,
      background: dark ? "rgba(6,12,8,.98)" : "rgba(245,241,232,.99)",
      backdropFilter:"blur(24px)", WebkitBackdropFilter:"blur(24px)",
      display:"flex", flexDirection:"column",
      animation:"nav-fade .2s ease both",
      overflowY:"auto",
    }}>
      {/* top bar */}
      <div style={{
        display:"flex", alignItems:"center", justifyContent:"space-between",
        padding:"1rem clamp(1.25rem, 5vw, 4vw)", flexShrink: 0,
        borderBottom:`1px solid ${theme.border}`,
      }}>
        <span className="serif" style={{ fontSize:"1.45rem", color: theme.text }}>WiseTip</span>
        <button onClick={onClose} aria-label="Close" style={{
          width: 38, height: 38, borderRadius: 12,
          border:`1px solid ${theme.border2}`, background: theme.sage3, color: theme.text,
          display:"inline-flex", alignItems:"center", justifyContent:"center",
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M6 6l12 12M18 6L6 18"/></svg>
        </button>
      </div>

      <div style={{ padding:"1.5rem clamp(1.25rem, 5vw, 4vw) 2.5rem" }}>
        {/* This week */}
        <button onClick={() => go("home")} style={{
          display:"block", width:"100%", textAlign:"left", background:"none", border:"none",
          padding:"12px 0", fontSize:"1.5rem", fontWeight: 400, color: theme.text,
          fontFamily:"'Cormorant Garamond',serif", fontStyle:"italic",
          borderBottom:`1px solid ${theme.divider}`,
        }}>{lang==="en" ? "This week" : "Esta semana"}</button>

        {groups.map(g => (
          <div key={g.id} style={{ padding:"1.5rem 0", borderBottom:`1px solid ${theme.divider}` }}>
            <div className="eyebrow" style={{ color: theme.sage, marginBottom:"1rem" }}>{g.label}</div>
            <div style={{ display:"flex", flexDirection:"column", gap: 4 }}>
              {g.items.map(it => (
                <button key={it.label} onClick={() => go(it.page, it.data)} style={{
                  display:"flex", flexDirection:"column", gap: 2, width:"100%", textAlign:"left",
                  background: currentPage === it.page ? theme.sage4 : "none",
                  border:"none", borderRadius: 8, padding:"10px 12px", margin:"0 -12px",
                }}>
                  <span style={{ display:"flex", alignItems:"center", gap: 8, fontSize:"1rem", fontWeight: 500, color: theme.text }}>
                    {it.label}
                    {it.star && <span style={{ fontSize:".54rem", letterSpacing:".14em", textTransform:"uppercase", color: theme.gold, border:`1px solid ${theme.gold}55`, borderRadius: 8, padding:"1px 6px" }}>★</span>}
                  </span>
                  <span style={{ fontSize:".8rem", color: theme.text3, fontWeight: 300 }}>{it.desc}</span>
                </button>
              ))}
            </div>
          </div>
        ))}

        {/* CTAs */}
        <div style={{ display:"flex", gap: 10, marginTop:"1.75rem", flexWrap:"wrap" }}>
          <button onClick={() => go("signup")} style={{
            flex:"1 1 auto", padding:"14px 20px", borderRadius: 28, border:"none",
            background: theme.sage, color: dark ? "#050F07" : "#fff", fontSize:".9rem", fontWeight: 600,
          }}>{lang==="en" ? "Join free" : "Únete gratis"}</button>
          <button onClick={() => go("profile")} style={{
            padding:"14px 20px", borderRadius: 28, background:"transparent",
            border:`1px solid ${theme.border2}`, color: theme.text, fontSize:".9rem", fontWeight: 500,
          }}>{lang==="en" ? "My library" : "Mi biblioteca"}</button>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// HERO
function Hero({ theme, dark, lang, t }) {
  const heroBg = dark
    ? `radial-gradient(ellipse 70% 50% at 30% 110%, #1A4A20 0%, transparent 55%),
       radial-gradient(ellipse 55% 40% at 80% 90%, #0E3018 0%, transparent 50%),
       radial-gradient(ellipse 40% 30% at 50% 0%, rgba(125,190,90,.07) 0%, transparent 60%),
       linear-gradient(180deg, #060D08 0%, #0A1A10 60%, ${theme.bg} 100%)`
    : `radial-gradient(ellipse 70% 50% at 30% 110%, #C8DAB8 0%, transparent 55%),
       radial-gradient(ellipse 55% 40% at 80% 90%, #B8CCA8 0%, transparent 50%),
       linear-gradient(180deg, #DDE3D0 0%, #E5E2D2 60%, ${theme.bg} 100%)`;

  return (
    <div id="top" style={{
      position:"relative", minHeight:"85vh",
      display:"flex", flexDirection:"column", justifyContent:"flex-start",
      overflow:"hidden", background: heroBg, paddingTop: "clamp(5rem,13vh,9rem)",
    }}>
      {/* aurora rays */}
      <div aria-hidden style={{
        position:"absolute", inset:0,
        background:"conic-gradient(from 270deg at 50% -10%, transparent 60deg, rgba(125,190,90,.06) 80deg, transparent 100deg)",
        animation:"scroll-pulse 9s ease-in-out infinite alternate",
      }}/>
      <Particles theme={theme} />
      <Trees theme={theme} dark={dark}/>
      <Grain amount={dark ? .04 : .025}/>

      {/* mist */}
      <div aria-hidden style={{
        position:"absolute", bottom:0, left:0, right:0, height:"36%",
        background:`linear-gradient(to top, ${theme.bg} 0%, ${dark?"rgba(8,15,10,.4)":"rgba(225,225,210,.5)"} 50%, transparent 100%)`,
      }}/>

      {/* main content */}
      <div className="hero-content" style={{
        position:"relative", zIndex: 5,
        padding:"0 clamp(1.5rem, 5vw, 5vw) 8vh",
        display:"grid", gridTemplateColumns:"1fr auto", alignItems:"end", gap:"3rem",
        maxWidth: 1400, margin:"0 auto", width:"100%",
      }}>
        {/* LEFT — copy */}
        <div style={{ maxWidth: 760 }}>
          <div className="reveal-d1" style={{ display:"flex", alignItems:"center", gap:14, marginBottom:"1.75rem" }}>
            <span style={{ width:32, height:1, background: theme.sage }}/>
            <span className="eyebrow" style={{ color: theme.sage }}>
              {lang==="en" ? `Edition #${window.WS_CURRENT.num} · ${window.WS_CURRENT.date.en}` : `Edición #${window.WS_CURRENT.num} · ${window.WS_CURRENT.date.es}`}
            </span>
            <span style={{ width:6, height:6, borderRadius:"50%", background:theme.sage, animation:"pulse 2s ease-in-out infinite" }}/>
            <span className="label-tiny" style={{ color: theme.text3 }}>{lang==="en"?"Live":"En vivo"}</span>
          </div>

          <h1 className="serif reveal-d2" style={{
            fontWeight: 300,
            fontSize: "clamp(3rem, 8vw, 6.6rem)",
            lineHeight: .98, letterSpacing:"-.02em",
            color: theme.text, marginBottom: "1.5rem",
          }}>
            {lang === "en" ? <>Raising with<br/><em style={{ fontStyle:"italic", color: theme.sage }}>intention.</em></>
                            : <>Criar con<br/><em style={{ fontStyle:"italic", color: theme.sage }}>intención.</em></>}
          </h1>

          <p className="reveal-d3" style={{
            fontSize:"clamp(1rem, 1.7vw, 1.2rem)", lineHeight: 1.7,
            color: theme.text2, maxWidth: 520, marginBottom:"2.25rem",
            fontWeight: 300,
          }}>
            {lang === "en"
              ? <>A weekly practice for parents who choose <em className="italic serif" style={{ fontSize:"1.1em", color: theme.text }}>less algorithm, more presence.</em> One real letter. One screen-free activity. One audiobook to close the week.</>
              : <>Una práctica semanal para padres que eligen <em className="italic serif" style={{ fontSize:"1.1em", color: theme.text }}>menos algoritmo, más presencia.</em> Una carta real. Una actividad sin pantallas. Un audiolibro para cerrar la semana.</>}
          </p>

          <div className="reveal-d4" style={{ display:"flex", gap:12, flexWrap:"wrap", alignItems:"center" }}>
            <a href="#this-week" onClick={(e) => { e.preventDefault(); const el=document.getElementById('this-week'); if(el) el.scrollIntoView({behavior:'smooth'}); }} style={{
              background: theme.sage, color: dark ? "#050F07" : "#fff",
              padding:"14px 28px", borderRadius: 30,
              fontSize:".88rem", fontWeight: 600, letterSpacing:".02em",
              display:"inline-flex", alignItems:"center", gap: 8,
            }}>{lang==="en" ? "Read this week" : "Lee esta semana"} <span>→</span></a>
            <button onClick={() => nav && nav("archive")} style={{
              background:"transparent", color: theme.text2,
              padding:"14px 24px", borderRadius: 30,
              border: `1px solid ${theme.inputBd}`,
              fontSize:".88rem", cursor:"pointer",
            }}>{lang==="en" ? `Browse ${window.WS_CURRENT.num} editions` : `Ver las ${window.WS_CURRENT.num} ediciones`}</button>
          </div>

          <div className="reveal-d4" style={{ marginTop:"2.5rem", display:"flex", alignItems:"center", gap:14, color: theme.text3 }}>
            <div style={{ display:"flex" }}>
              {[0,1,2,3].map(i => (
                <span key={i} style={{
                  width: 28, height: 28, borderRadius:"50%",
                  background: ["#4CB868","#C45A3A","#3A5FA5","#7A4A8A"][i],
                  border: `2px solid ${theme.bg}`,
                  marginLeft: i === 0 ? 0 : -8,
                  display:"inline-block",
                }}/>
              ))}
            </div>
            <div style={{ fontSize:".78rem", lineHeight: 1.5 }}>
              {lang==="en"
                ? <>Four editors. <span style={{ color: theme.text2 }}>Barcelona · NYC · Vienna · London.</span></>
                : <>Cuatro editores. <span style={{ color: theme.text2 }}>Barcelona · NYC · Viena · Londres.</span></>}
            </div>
          </div>
        </div>

        {/* RIGHT — corner stats card */}
        <div className="hero-corner reveal-d4" style={{
          background: theme.card,
          border: `1px solid ${theme.border}`,
          borderRadius: 4,
          padding: "1.75rem 1.5rem",
          backdropFilter: "blur(16px)",
          WebkitBackdropFilter: "blur(16px)",
          minWidth: 240,
        }}>
          <div className="label-tiny" style={{ color: theme.sage, marginBottom: "1.25rem" }}>
            {lang==="en"?"Since March 2023":"Desde marzo 2023"}
          </div>
          {[
            [String(window.WS_CURRENT && window.WS_CURRENT.num || 191), lang==="en"?"editions published":"ediciones publicadas"],
            ["2.1k", lang==="en"?"families · 11 countries":"familias · 11 países"],
            ["49",  lang==="en"?"audiobooks in archive":"audiolibros en archivo"],
            ["340", lang==="en"?"screen-free activities":"actividades sin pantallas"],
          ].map(([n,l], i) => (
            <div key={l} style={{
              padding:"0.75rem 0",
              borderTop: i === 0 ? "none" : `1px solid ${theme.divider}`,
            }}>
              <div className="serif" style={{
                fontSize:"2.2rem", color: theme.text, fontWeight: 300, lineHeight: 1,
              }}>{n}</div>
              <div style={{ fontSize:".7rem", color: theme.text3, marginTop: 3 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* scroll cue */}
      <div aria-hidden style={{
        position:"absolute", bottom:"1.75rem", left:"50%", transform:"translateX(-50%)",
        display:"flex", flexDirection:"column", alignItems:"center", gap: 6, zIndex: 5,
      }}>
        <span style={{ width: 1, height: 44, background: `linear-gradient(to bottom, ${theme.sage}, transparent)`, animation:"scroll-pulse 2s ease-in-out infinite" }}/>
        <span className="label-tiny" style={{ color: theme.text3, fontSize:".55rem" }}>
          {lang==="en"?"Scroll":"Baja"}
        </span>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// INTRO REEL — rolling mission statement (what / how / why)
function IntroReel({ theme, dark, lang, nav }) {
  const [active, setActive] = React.useState(0);
  const [fading, setFading] = React.useState(false);
  const TOTAL = 3;

  const slides = lang === "en" ? [
    {
      tag: "What is WiseTip",
      headline: <span>A weekly letter<br/>built for <em style={{fontStyle:"italic",color:theme.sage}}>presence.</em></span>,
      body: "WiseTip is a weekly newsletter for parents raising children with intention — seven curated blocks: one real letter, one audiobook, one screen-free activity pack. No noise. Just signal.",
      cta: { label: "Read this week", fn: () => { const el=document.getElementById("this-week"); if(el) el.scrollIntoView({behavior:"smooth"}); }},
    },
    {
      tag: "How we work",
      headline: <span>Four editors.<br/><em style={{fontStyle:"italic",color:theme.sage}}>Seven blocks.</em> Every Tuesday.</span>,
      body: "Our editorial team across Barcelona, NYC, Vienna and London curates each edition by hand — no automation, no algorithm fill. Human judgment, every week, since March 2023.",
      cta: { label: "Browse all editions", fn: () => nav && nav("archive") },
    },
    {
      tag: "Why WiseTip",
      headline: <span>Less algorithm.<br/><em style={{fontStyle:"italic",color:theme.sage}}>More connection.</em></span>,
      body: "We built WiseTip because parenting content had become engagement bait. Zero ads. Zero sponsored content. 197 editions published. 2,100 families. 11 countries. The editorial model, intact.",
      cta: { label: "Join the community", fn: () => nav && nav("signup") },
    },
  ] : [
    {
      tag: "Qué es WiseTip",
      headline: <span>Una carta semanal<br/>para la <em style={{fontStyle:"italic",color:theme.sage}}>presencia.</em></span>,
      body: "WiseTip es un boletín semanal para padres que eligen criar con intención — siete bloques: una carta real, un audiolibro, un pack de actividades sin pantalla. Sin ruido. Solo señal.",
      cta: { label: "Lee esta semana", fn: () => { const el=document.getElementById("this-week"); if(el) el.scrollIntoView({behavior:"smooth"}); }},
    },
    {
      tag: "Cómo trabajamos",
      headline: <span>Cuatro editores.<br/><em style={{fontStyle:"italic",color:theme.sage}}>Siete bloques.</em> Cada martes.</span>,
      body: "Nuestro equipo editorial en Barcelona, NYC, Viena y Londres cura cada edición a mano — sin automatización, sin relleno algorítmico. Criterio humano. Cada semana. Desde marzo de 2023.",
      cta: { label: "Ver todas las ediciones", fn: () => nav && nav("archive") },
    },
    {
      tag: "Por qué WiseTip",
      headline: <span>Menos algoritmo.<br/><em style={{fontStyle:"italic",color:theme.sage}}>Más conexión.</em></span>,
      body: "Creamos WiseTip porque el contenido para padres se había convertido en cebo de engagement. Cero anuncios. Cero contenido patrocinado. 197 ediciones. 2.100 familias. 11 países. El modelo editorial, intacto.",
      cta: { label: "Únete a la comunidad", fn: () => nav && nav("signup") },
    },
  ];

  React.useEffect(() => {
    const id = setInterval(() => {
      setFading(true);
      setTimeout(() => { setActive(a => (a + 1) % TOTAL); setFading(false); }, 320);
    }, 5200);
    return () => clearInterval(id);
  }, []);

  const go = (i) => {
    if (i === active) return;
    setFading(true);
    setTimeout(() => { setActive(i); setFading(false); }, 320);
  };

  const s = slides[active];

  return (
    <section style={{
      background: dark ? theme.bg2 : theme.bg2,
      borderBottom: `1px solid ${theme.border}`,
      padding: "clamp(3.5rem,8vh,6rem) clamp(1.5rem,5vw,5vw)",
      position: "relative", overflow: "hidden",
    }}>
      <div aria-hidden style={{
        position:"absolute", inset:0, pointerEvents:"none",
        background:`radial-gradient(ellipse 55% 90% at 100% 60%, ${dark?"rgba(125,190,90,.05)":"rgba(46,107,58,.05)"} 0%, transparent 70%)`,
      }}/>

      <div className="wrap" style={{position:"relative"}}>
        <div style={{
          display:"grid",
          gridTemplateColumns:"1fr auto",
          gap:"2rem",
          alignItems:"center",
        }}>

          <div style={{
            opacity: fading ? 0 : 1,
            transform: fading ? "translateY(10px)" : "translateY(0)",
            transition: "opacity .32s ease, transform .32s ease",
          }}>
            <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:"1.5rem",flexWrap:"wrap"}}>
              <span style={{width:22,height:1,background:theme.sage,flexShrink:0}}/>
              <span className="eyebrow" style={{color:theme.sage}}>{s.tag}</span>
              <span style={{display:"flex",gap:5,marginLeft:4,alignItems:"center"}}>
                {Array.from({length:TOTAL},(_,i) => (
                  <button key={i} onClick={() => go(i)} aria-label={`Slide ${i+1}`} style={{
                    width: i===active ? 22 : 6,
                    height: 6, borderRadius: 3,
                    background: i===active ? theme.sage : (dark?"rgba(125,190,90,.25)":"rgba(46,107,58,.25)"),
                    border:"none", padding:0, cursor:"pointer",
                    transition:"width .32s ease, background .32s ease",
                  }}/>
                ))}
              </span>
            </div>

            <h2 className="serif" style={{
              fontWeight: 300,
              fontSize: "clamp(2.2rem,4.8vw,3.8rem)",
              lineHeight: .97,
              letterSpacing: "-.02em",
              color: theme.text,
              marginBottom: "1.4rem",
            }}>{s.headline}</h2>

            <p style={{
              fontSize: "clamp(.9rem,1.4vw,1.05rem)",
              lineHeight: 1.78,
              color: theme.text2,
              maxWidth: 560,
              fontWeight: 300,
              marginBottom: "2.25rem",
            }}>{s.body}</p>

            <button
              onClick={s.cta.fn}
              onMouseEnter={e => { e.currentTarget.style.background=theme.sage; e.currentTarget.style.color=dark?"#050F07":"#fff"; }}
              onMouseLeave={e => { e.currentTarget.style.background="transparent"; e.currentTarget.style.color=theme.sage; }}
              style={{
                background:"transparent",
                color: theme.sage,
                border:`1px solid ${theme.sage}`,
                padding:"11px 26px",
                borderRadius:30,
                fontSize:".84rem",
                fontWeight:500,
                letterSpacing:".04em",
                cursor:"pointer",
                display:"inline-flex",alignItems:"center",gap:7,
                transition:"background .2s ease, color .2s ease",
              }}
            >{s.cta.label} <span aria-hidden="true">&#8594;</span></button>
          </div>

          <div style={{
            opacity: fading ? 0 : 1,
            transition: "opacity .32s ease",
            textAlign:"right",
            userSelect:"none",
            pointerEvents:"none",
          }}>
            <div className="serif" style={{
              fontSize:"clamp(5rem,13vw,10rem)",
              fontWeight:300,
              lineHeight:1,
              color: dark ? "rgba(125,190,90,.07)" : "rgba(46,107,58,.07)",
              letterSpacing:"-.04em",
            }}>
              {String(active+1).padStart(2,"0")}
            </div>
            <div className="label-tiny" style={{color:theme.text3,marginTop:2}}>
              {lang==="en" ? `of ${TOTAL}` : `de ${TOTAL}`}
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// TICKER
function Ticker({ theme, dark, lang }) {
  const items = lang === "en"
    ? [(window.WS_CURRENT && window.WS_CURRENT.num || 191) + " editions published","4 editors · 11 countries","49 audiobooks","Screen-free activity packs","0 intrusive ads · 100% editorial","TailorAudioBooks live","Membership €14/mo"]
    : [(window.WS_CURRENT && window.WS_CURRENT.num || 191) + " ediciones publicadas","4 editores · 11 países","49 audiolibros","Packs de actividades sin pantalla","0 anuncios intrusivos · 100% editorial","TailorAudioBooks en vivo","Membresía 14€/mes"];
  return (
    <div style={{
      background: dark ? theme.bg3 : theme.bg2,
      borderTop: `1px solid ${theme.border}`,
      borderBottom: `1px solid ${theme.border}`,
      padding: "14px 0", overflow:"hidden", position:"relative",
    }}>
      <div style={{ position:"absolute",inset:0, background:`linear-gradient(90deg, ${dark?theme.bg3:theme.bg2} 0%, transparent 8%, transparent 92%, ${dark?theme.bg3:theme.bg2} 100%)`, zIndex:1, pointerEvents:"none" }}/>
      <div style={{ display:"flex", animation:"ticker 38s linear infinite", whiteSpace:"nowrap", width:"max-content" }}>
        {[...items, ...items, ...items].map((item, i) => (
          <span key={i} style={{
            display:"inline-flex", alignItems:"center", gap: 14,
            padding:"0 28px", fontSize:".74rem",
            color: theme.text3, fontWeight: 400, letterSpacing:".4px",
          }}>
            {item}
            <span style={{ color: theme.sage, fontSize:".55rem" }}>◆</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// THIS WEEK'S EDITION (live demo of the freemium / premium gating)
function ThisWeek({ theme, dark, lang, t, isMember, setIsMember, nav }) {
  const ed = WS_CURRENT;
  const editor = WS_EDITORS.find(e => e.id === ed.editor);

  return (
    <section id="this-week" className="section" style={{ background: theme.bg }}>
      <div className="wrap">
        {/* header */}
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-end", marginBottom:"3rem", flexWrap:"wrap", gap:"1.5rem" }}>
          <div>
            <Eyebrow theme={theme}>{lang==="en"?"This week · Live":"Esta semana · En vivo"}</Eyebrow>
            <h2 className="serif" style={{
              fontStyle:"italic", fontWeight: 300,
              fontSize:"clamp(2rem, 4vw, 3.2rem)",
              color: theme.text, marginTop: ".5rem",
              letterSpacing:"-.01em",
            }}>{lang==="en"?"The edition that just landed.":"La edición que acaba de llegar."}</h2>
          </div>
          {/* member-state toggle (lets reviewer preview both states) */}
          <div style={{
            display:"flex", alignItems:"center", gap: 8,
            background: theme.sage3, border:`1px solid ${theme.border}`,
            borderRadius: 24, padding: 4,
          }}>
            <span className="label-tiny" style={{ color: theme.text3, paddingLeft: 10 }}>
              {lang==="en"?"Preview as":"Ver como"}
            </span>
            {[["free", lang==="en"?"Free reader":"Lector gratis"],
              ["member", lang==="en"?"WiseTip+ member":"Miembro WiseTip+"]].map(([k, l]) => (
              <button key={k} onClick={() => setIsMember(k === "member")} style={{
                background: (isMember && k==="member") || (!isMember && k==="free") ? theme.sage : "transparent",
                color: ((isMember && k==="member") || (!isMember && k==="free")) ? (dark ? "#050F07" : "#fff") : theme.text2,
                border:"none", padding:"6px 14px", borderRadius: 20,
                fontSize:".72rem", fontWeight: 500, letterSpacing:".02em",
              }}>{l}</button>
            ))}
          </div>
        </div>

        {/* edition card */}
        <article style={{
          background: dark ? theme.panel : "#fff",
          border: `1px solid ${theme.border}`,
          borderRadius: 8,
          overflow:"hidden",
          color: dark ? theme.text : theme.text,
        }}>
          {/* botanical strip */}
          <div aria-hidden="true" style={{ display:"flex", justifyContent:"center", padding:".85rem 0", background:"rgba(157,200,114,.04)" }}>
            <svg width="120" height="20" viewBox="0 0 120 20" fill="none" style={{ opacity: dark ? .4 : .6 }}>
              <line x1="0" y1="10" x2="44" y2="10" stroke="#9DC872" strokeWidth=".7"/>
              <line x1="76" y1="10" x2="120" y2="10" stroke="#9DC872" strokeWidth=".7"/>
              <path d="M48 10C46 5 50 2 54 5C52 8 48 10 48 10Z" fill="#9DC872"/>
              <path d="M60 10C58 4 62 1 66 4C64 7 60 10 60 10Z" fill="#9DC872"/>
              <path d="M72 10C70 5 74 2 78 5C76 8 72 10 72 10Z" fill="#9DC872"/>
              <line x1="60" y1="10" x2="60" y2="19" stroke="#9DC872" strokeWidth=".9" strokeLinecap="round"/>
              <path d="M53 13C52 17 56 19 60 17" stroke="#9DC872" strokeWidth=".7" fill="none" strokeLinecap="round" opacity=".7"/>
            </svg>
          </div>
          {/* edition header */}
          <div style={{
            padding:"2.5rem clamp(1.5rem, 4vw, 3.5rem) 2rem",
            borderBottom: `1px solid ${dark ? "rgba(255,255,255,.06)" : theme.divider}`,
            display:"grid", gridTemplateColumns:"1fr auto", gap:"2rem", alignItems:"start",
          }}>
            <div>
              <div style={{ display:"flex", gap: 8, marginBottom: "1.25rem", flexWrap:"wrap" }}>
                <Pill color={theme.sage} bd={theme.border2}>#{ed.num}</Pill>
                {ed.badge && <Pill color={theme.gold} bd={`${theme.gold}40`}>{ed.badge[lang]}</Pill>}
                <Pill color={dark ? "#F0EBE0" : "#1A1F12"} style={{ opacity:.7 }}>{ed.date[lang]}  ·  {ed.readTime}</Pill>
              </div>
              <h3 className="serif" style={{
                fontStyle:"italic", fontWeight: 300,
                fontSize:"clamp(1.8rem, 3.5vw, 2.8rem)", lineHeight: 1.1,
                color: dark ? "#F0EBE0" : "#1A1F12",
                marginBottom: ".75rem", letterSpacing:"-.01em",
              }}>{ed.title[lang]}</h3>
              <p style={{
                color: dark ? "rgba(240,235,224,.55)" : "rgba(26,31,18,.6)",
                fontSize: "1rem", lineHeight: 1.6, maxWidth: 620, fontWeight: 300,
              }}>{ed.subtitle[lang]}</p>
            </div>
            <div style={{
              display:"flex", flexDirection:"column", alignItems:"center", gap: 8,
              textAlign:"center",
            }}>
              <div style={{
                width: 56, height: 56, borderRadius: "50%",
                background: `${editor.color}28`,
                border: `1.5px solid ${editor.color}66`,
                display:"flex", alignItems:"center", justifyContent:"center",
                fontFamily:"'Cormorant Garamond',serif",
                fontSize:"1.5rem", color: editor.color, fontWeight: 500,
              }}>{editor.name[0]}</div>
              <div style={{ fontSize:".82rem", color: dark ? "#F0EBE0" : "#1A1F12", fontWeight: 500 }}>{editor.name}</div>
              <div style={{ fontSize:".68rem", color: dark ? "rgba(240,235,224,.4)" : "rgba(26,31,18,.45)" }}>{editor.location[lang]}</div>
            </div>
          </div>

          {/* body — 4 freemium blocks always visible; 3 premium blocks gated */}
          <div style={{ padding:"2.5rem clamp(1.5rem, 4vw, 3.5rem) 3rem" }}>
            <div style={{ display:"grid", gridTemplateColumns:"180px 1fr", gap:"2rem" }} className="block-row">
              <BlockLabel theme={theme} dark={dark} num="01" name={lang==="en"?"Opening":"Apertura"} tier="free"/>
              <p className="serif" style={{
                fontSize:"1.25rem", lineHeight: 1.7, fontWeight: 300,
                color: dark ? "#E8DED0" : "#1A1F12",
                fontStyle:"italic",
              }}>{ed.blocks.opening[lang]}</p>
            </div>

            <div style={{ display:"grid", gridTemplateColumns:"180px 1fr", gap:"2rem", marginTop:"2rem" }} className="block-row">
              <BlockLabel theme={theme} dark={dark} num="02" name={lang==="en"?"Story":"Historia"} tier="free"/>
              <p style={{
                fontSize:"1rem", lineHeight: 1.85, fontWeight: 300,
                color: dark ? "rgba(240,235,224,.78)" : "rgba(26,31,18,.78)",
              }}>{ed.blocks.reflection[lang]} {ed.blocks.opening[lang].slice(0, 140)}…</p>
            </div>

            <div style={{ display:"grid", gridTemplateColumns:"180px 1fr", gap:"2rem", marginTop:"2rem" }} className="block-row">
              <BlockLabel theme={theme} dark={dark} num="03" name={lang==="en"?"Reflection":"Reflexión"} tier="free"/>
              <p style={{
                fontSize:"1rem", lineHeight: 1.85, fontWeight: 300,
                color: dark ? "rgba(240,235,224,.78)" : "rgba(26,31,18,.78)",
              }}>{ed.blocks.reflection[lang]}</p>
            </div>

            <div style={{ display:"grid", gridTemplateColumns:"180px 1fr", gap:"2rem", marginTop:"2rem" }} className="block-row">
              <BlockLabel theme={theme} dark={dark} num="04" name={lang==="en"?"Practical insight":"Idea práctica"} tier="free"/>
              <p style={{
                fontSize:"1rem", lineHeight: 1.85, fontWeight: 300,
                color: dark ? "rgba(240,235,224,.78)" : "rgba(26,31,18,.78)",
              }}>{lang==="en"
                ? "If you only take one thing from this week: ask your child to find one stone, one leaf, one bug. Bring it home. Put it on the table. Talk about it tomorrow."
                : "Si solo te llevas una cosa esta semana: pídele a tu hijo que encuentre una piedra, una hoja, un bicho. Tráelo a casa. Ponlo en la mesa. Hablad de ello mañana."}</p>
            </div>

            {/* divider between freemium / premium */}
            <div style={{ margin:"2.75rem 0 2rem" }}>
              <div style={{ display:"flex", alignItems:"center", gap: 14 }}>
                <span style={{ flex:1, height:1, background: dark ? "rgba(255,255,255,.08)" : theme.divider }}/>
                <span className="label-tiny" style={{ color: theme.gold }}>
                  {lang==="en" ? "WiseTip+ continues below" : "WiseTip+ continúa abajo"}
                </span>
                <span style={{ flex:1, height:1, background: dark ? "rgba(255,255,255,.08)" : theme.divider }}/>
              </div>
            </div>

            {/* Premium block 05 — Activity */}
            <div style={{ display:"grid", gridTemplateColumns:"180px 1fr", gap:"2rem", marginTop:"1.5rem" }} className="block-row">
              <BlockLabel theme={theme} dark={dark} num="05" name={lang==="en"?"Activity":"Actividad"} tier="premium"/>
              {isMember ? (
                <div style={{
                  border: `1px solid ${dark ? "rgba(125,190,90,.2)" : "rgba(46,107,58,.22)"}`,
                  background: theme.sage3,
                  borderRadius: 6, padding:"1.5rem",
                }}>
                  <div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom: ".75rem", gap: "1rem", flexWrap:"wrap" }}>
                    <span className="serif italic" style={{ fontSize:"1.4rem", color: dark ? "#F0EBE0" : "#1A1F12" }}>
                      {ed.blocks.activity[lang]}
                    </span>
                    <Pill color={theme.sage} bg={theme.sage4}>{lang==="en"?"All ages · 999 min":"Todas edades · 999 min"}</Pill>
                  </div>
                  <p style={{ color: dark ? "rgba(240,235,224,.72)" : "rgba(26,31,18,.72)", fontSize:".95rem", lineHeight: 1.75, fontWeight: 300 }}>
                    {lang==="en"
                      ? "A simple offline activity for this week. Nothing on the calendar after school. No screens. No errands. See what they invent."
                      : "Una actividad sencilla y sin pantallas para esta semana. Nada en la agenda después del cole. Sin pantallas. Sin recados. Mira lo que inventan."}
                  </p>
                </div>
              ) : (
                <LockedBlock theme={theme} label={lang==="en"?"Activity · premium":"Actividad · premium"} onUnlock={() => document.getElementById("membership")?.scrollIntoView()}/>
              )}
            </div>

            {/* Premium block 06 — Resources */}
            <div style={{ display:"grid", gridTemplateColumns:"180px 1fr", gap:"2rem", marginTop:"1.5rem" }} className="block-row">
              <BlockLabel theme={theme} dark={dark} num="06" name={lang==="en"?"Resources":"Recursos"} tier="premium"/>
              {isMember ? (
                <div style={{ display:"flex", gap:".75rem", flexWrap:"wrap" }}>
                  {[
                    [lang==="en"?"Earth Day pack":"Pack Día Tierra", "PDF · 18 pages"],
                    [lang==="en"?"Print: stone journal":"Imprimible: diario piedras", "PDF · 4 pages"],
                    [lang==="en"?"Listen as audiobook":"Escuchar audiolibro", "MP3 · 14:22"],
                  ].map(([t, m]) => (
                    <a key={t} href="#" style={{
                      display:"flex", flexDirection:"column", gap: 4,
                      padding:".75rem 1rem",
                      border: `1px solid ${theme.border2}`,
                      background: theme.sage3, borderRadius: 4,
                      fontSize:".82rem", color: dark ? "#F0EBE0" : "#1A1F12",
                    }}>
                      <span style={{ fontWeight: 500 }}>{t} →</span>
                      <span className="mono" style={{ fontSize:".68rem", color: theme.text3 }}>{m}</span>
                    </a>
                  ))}
                </div>
              ) : (
                <LockedBlock theme={theme} label={lang==="en"?"Resources · premium":"Recursos · premium"} onUnlock={() => document.getElementById("membership")?.scrollIntoView()}/>
              )}
            </div>

            {/* Premium block 07 — Closing */}
            <div style={{ display:"grid", gridTemplateColumns:"180px 1fr", gap:"2rem", marginTop:"1.5rem" }} className="block-row">
              <BlockLabel theme={theme} dark={dark} num="07" name={lang==="en"?"Closing":"Cierre"} tier="premium"/>
              {isMember ? (
                <p className="serif italic" style={{
                  fontSize:"1.15rem", lineHeight: 1.7, fontWeight: 300,
                  color: dark ? "#E8DED0" : "#1A1F12",
                  borderLeft: `3px solid ${theme.sage}`,
                  paddingLeft: "1.25rem",
                }}>{ed.blocks.closing[lang]}</p>
              ) : (
                <LockedBlock theme={theme} label={lang==="en"?"Closing · premium":"Cierre · premium"} onUnlock={() => document.getElementById("membership")?.scrollIntoView()}/>
              )}
            </div>
          </div>

          {/* footer */}
          <div style={{
            padding:"1.5rem clamp(1.5rem, 4vw, 3.5rem)",
            borderTop: `1px solid ${dark ? "rgba(255,255,255,.06)" : theme.divider}`,
            background: dark ? "rgba(0,0,0,.18)" : "rgba(0,0,0,.02)",
            display:"flex", justifyContent:"space-between", alignItems:"center", gap:"1rem", flexWrap:"wrap",
          }}>
            <span className="mono" style={{ fontSize:".7rem", color: theme.text3 }}>
              wisetip.net/{lang}/newsletter/{ed.slug}/
            </span>
            <div style={{ display:"flex", gap:8 }}>
              <button onClick={() => nav && nav("article", { num: ed.num })} style={{
                background:"transparent", fontSize:".78rem", color: theme.sage, padding:"6px 14px",
                border: `1px solid ${theme.border2}`, borderRadius: 20, cursor:"pointer",
              }}>{lang==="en"?"Read full edition →":"Leer edición completa →"}</button>
            </div>
          </div>
        </article>
      </div>
    </section>
  );
}

function BlockLabel({ theme, dark, num, name, tier }) {
  const isPrem = tier === "premium";
  return (
    <div style={{ paddingTop: 4 }}>
      <div className="mono" style={{ fontSize:".7rem", color: theme.text3 }}>{num}</div>
      <div className="label-tiny" style={{ color: isPrem ? theme.gold : theme.sage, marginTop: 6 }}>{name}</div>
      <div style={{ fontSize:".66rem", marginTop: 6, color: theme.text4, letterSpacing:".05em" }}>
        {isPrem ? "WiseTip+" : "Free"}
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Hero, Ticker, ThisWeek });