// ── Other secondary pages (Membership · Profile · Seasonal · Workshops · Schools · Sponsors) ──

// ── MEMBERSHIP PAGE (extended) ─────────────────────────────
function MembershipPage({ theme, dark, lang, nav, isMember, setIsMember }) {
  return (
    <div style={{ background: theme.bg, color: theme.text, paddingTop:"5rem" }}>
      <div style={{
        background: dark ? `radial-gradient(ellipse 50% 40% at 30% 100%, #1A4A20 0%, transparent 55%), linear-gradient(180deg, #0A1A10 0%, ${theme.bg} 100%)` : `radial-gradient(ellipse 50% 40% at 30% 100%, #C8DAB8 0%, transparent 55%), linear-gradient(180deg, ${theme.bg2} 0%, ${theme.bg} 100%)`,
        padding:"5rem clamp(1.5rem, 5vw, 5vw) 1rem",
      }}>
        <div className="wrap">
          <Eyebrow theme={theme}>{lang==="en"?"Membership · WiseTip+":"Membresía · WiseTip+"}</Eyebrow>
          <h1 className="serif" style={{
            fontStyle:"italic", fontWeight: 300, fontSize:"clamp(2.4rem, 5vw, 4.2rem)",
            color: theme.text, lineHeight: 1.02, letterSpacing:"-.02em",
            marginTop:".75rem", marginBottom:"1rem", maxWidth: 900,
          }}>{lang==="en"
            ? <>Read freely. Or <em>be deeply held by the system.</em></>
            : <>Lee gratis. O <em>déjate sostener por el sistema.</em></>}</h1>
        </div>
      </div>
      <Membership theme={theme} dark={dark} lang={lang}/>
      {/* premium-layer (priority audiobook etc.) */}
      <section style={{ background: dark ? theme.bg2 : theme.bg2, padding:"4rem clamp(1.5rem, 5vw, 5vw)" }}>
        <div className="wrap">
          <Eyebrow theme={theme}>{lang==="en"?"Premium layer · soft tier":"Capa premium · nivel suave"}</Eyebrow>
          <h2 className="serif" style={{ fontStyle:"italic", fontWeight: 300, fontSize:"clamp(1.6rem, 3.4vw, 2.5rem)", color: theme.text, marginTop:".5rem", marginBottom:"1.5rem", maxWidth: 700, lineHeight: 1.1 }}>
            {lang==="en"
              ? <>Annual members get a few quiet <em>extras.</em></>
              : <>Los miembros anuales reciben unos <em>extras</em> en silencio.</>}
          </h2>
          <div className="grid-3" style={{ gap:"1rem" }}>
            {[
              { t:"Priority audiobook generation", es:"Audiolibro prioritario", b:"Your TailorAudioBook moves to the front of the queue.", esB:"Tu TailorAudioBook va al frente de la cola." },
              { t:"20% off TailorAudioBooks & Birthday stories", es:"20 % en TailorAudioBooks y cumple", b:"Permanent discount on personalised audio products.", esB:"Descuento permanente en productos personalizados." },
              { t:"Founding member badge", es:"Distintivo de miembro fundador", b:"On annual sign-ups in 2026. Quiet, not loud.", esB:"En altas anuales 2026. Discreto." },
            ].map(x => (
              <div key={x.t} style={{ background: dark?theme.panel:"#fff", border:`1px solid ${theme.border}`, borderRadius: 6, padding:"1.5rem" }}>
                <div className="serif italic" style={{ fontSize:"1.2rem", color: theme.text, marginBottom: 6 }}>{lang==="en"?x.t:x.es}</div>
                <p style={{ fontSize:".88rem", color: theme.text2, fontWeight: 300, lineHeight: 1.65 }}>{lang==="en"?x.b:x.esB}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      <Footer theme={theme} dark={dark} lang={lang} nav={nav}/>
    </div>
  );
}

// ── PROFILE / LIBRARY ─────────────────────────────────────
function Profile({ theme, dark, lang, isMember, nav, setIsMember }) {
  const [tab, setTab] = useState("all");
  const [profile, setProfile] = useProfile();
  const [pickerOpen, setPickerOpen] = useState(false);
  const tabs = [
    { id:"all", label: { en:"All", es:"Todo" } },
    { id:"edition", label: { en:"Editions", es:"Ediciones" } },
    { id:"activity", label: { en:"Activities", es:"Actividades" } },
    { id:"audiobook", label: { en:"Audiobooks", es:"Audiolibros" } },
    { id:"tailor", label: { en:"TailorAudioBooks", es:"TailorAudioBooks" } },
    { id:"pack", label: { en:"Packs", es:"Packs" } },
  ];
  const list = WS_LIBRARY.filter(x => tab === "all" || x.kind === tab);

  return (
    <div style={{ background: theme.bg, color: theme.text, paddingTop:"5rem" }}>
      {/* HEADER */}
      <div style={{ padding:"4rem clamp(1.5rem, 5vw, 5vw) 2.5rem", background: dark ? theme.bg2 : theme.bg2 }}>
        <div className="wrap" style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-end", flexWrap:"wrap", gap:"1.5rem" }}>
          <div style={{ display:"flex", gap:"1.25rem", alignItems:"center" }}>
            <div style={{
              width: 64, height: 64, borderRadius:"50%",
              background: `${theme.sage}20`, border:`1.5px solid ${theme.border2}`,
              display:"flex", alignItems:"center", justifyContent:"center",
              fontFamily:"'Cormorant Garamond',serif", fontSize:"1.8rem", color: theme.sage,
            }}>{isMember?"M":"·"}</div>
            <div>
              <Eyebrow theme={theme}>{lang==="en"?"My library":"Mi biblioteca"}</Eyebrow>
              <h1 className="serif" style={{ fontStyle:"italic", fontWeight: 300, fontSize:"clamp(1.8rem, 4vw, 2.8rem)", color: theme.text, marginTop: 4 }}>
                {lang==="en"?"Everything you've kept.":"Todo lo que has guardado."}
              </h1>
              <div style={{ marginTop: 6, fontSize:".82rem", color: theme.text3 }}>
                {isMember ? (lang==="en"?"WiseTip+ member · annual":"Miembro WiseTip+ · anual") : (lang==="en"?"Free reader":"Lector gratuito")}
              </div>
            </div>
          </div>
          <div style={{ display:"flex", gap: 8 }}>
            <button onClick={() => setIsMember(!isMember)} style={{
              background:"transparent", color: theme.sage, border:`1px solid ${theme.border2}`,
              padding:"8px 14px", borderRadius: 20, fontSize:".76rem", cursor:"pointer",
            }}>{lang==="en"?"Preview as":"Vista como"} {isMember?"Free":"WiseTip+"}</button>
            {!isMember && (
              <button onClick={() => nav("membership")} style={{
                background: theme.sage, color: dark?"#050F07":"#fff", border:"none",
                padding:"8px 14px", borderRadius: 20, fontSize:".78rem", fontWeight: 600, cursor:"pointer",
              }}>{lang==="en"?"Upgrade":"Mejora"} →</button>
            )}
          </div>
        </div>
      </div>

      {/* UPGRADE BANNER */}
      {!isMember && (
        <div style={{ background: theme.gold2, borderTop:`1px solid ${theme.lockedBd}`, borderBottom:`1px solid ${theme.lockedBd}`, padding:"1rem clamp(1.5rem, 5vw, 5vw)" }}>
          <div className="wrap" style={{ display:"flex", justifyContent:"space-between", alignItems:"center", gap:"1rem", flexWrap:"wrap" }}>
            <div>
              <div style={{ fontSize:".88rem", color: theme.text, fontWeight: 500 }}>
                {lang==="en"?`You have access to 3 of ${window.WS_CURRENT && window.WS_CURRENT.num || 191} editions.`:`Tienes acceso a 3 de ${window.WS_CURRENT && window.WS_CURRENT.num || 191} ediciones.`}
              </div>
              <div style={{ fontSize:".78rem", color: theme.text2, marginTop: 2 }}>
                {lang==="en"?"Unlock the full archive, 49 audiobooks, and all activity packs.":"Desbloquea archivo completo, 49 audiolibros y todos los packs."}
              </div>
            </div>
            <button onClick={() => nav("membership")} style={{ background: theme.sage, color: dark?"#050F07":"#fff", border:"none", padding:"8px 16px", borderRadius: 20, fontSize:".82rem", fontWeight: 600, cursor:"pointer" }}>
              {lang==="en"?"See plans":"Ver planes"} →
            </button>
          </div>
        </div>
      )}

      {/* PROFILE TAGS (member's accessibility/needs) */}
      {isMember && (
        <div className="section" style={{ padding:"2.5rem clamp(1.5rem, 5vw, 5vw) 0" }}>
          <div className="wrap">
            <Eyebrow theme={theme}>{lang==="en"?"My family's tags":"Etiquetas de mi familia"}</Eyebrow>
            <p style={{ color: theme.text2, fontSize:".88rem", lineHeight: 1.6, fontWeight: 300, marginTop: 4, marginBottom:"1rem", maxWidth: 540 }}>
              {lang==="en"
                ? "These quietly shape the order of activities, packs, and podcast episodes we surface for you."
                : "Estas etiquetas dan forma silenciosa al orden de actividades, packs y episodios que te mostramos."}
            </p>

            {/* Public tags */}
            <div style={{ display:"flex", flexWrap:"wrap", gap: 6, marginBottom:"1.25rem" }}>
              {WS_NEEDS_TAGS.filter(t => !t.sensitive).map(tag => {
                const on = profile.tags.includes(tag.id);
                return (
                  <button key={tag.id} onClick={() => {
                    const next = on ? profile.tags.filter(x => x !== tag.id) : [...profile.tags, tag.id];
                    setProfile({ ...profile, tags: next });
                  }} style={{
                    padding:"5px 11px", borderRadius: 14,
                    background: on ? `${tag.hue}24` : "transparent",
                    border: `1px solid ${on ? tag.hue : theme.border2}`,
                    color: on ? tag.hue : theme.text3,
                    fontSize:".74rem", cursor:"pointer",
                  }}>{on ? "✓ " : "+ "}{tag.glyph} {tag.label[lang]}</button>
                );
              })}
            </div>

            {/* Special needs opt-in — minimal, no condition names until user opts in */}
            <div style={{
              background: theme.sage3, border: `1px solid ${theme.border2}`,
              borderRadius: 8, padding:"1.25rem 1.5rem", maxWidth: 720,
            }}>
              <div style={{ fontSize:".95rem", color: theme.text, fontWeight: 500, marginBottom: 4 }}>
                {lang==="en"?"My child has specific needs":"Mi hijo/a tiene necesidades específicas"}
              </div>
              <p style={{ fontSize:".82rem", color: theme.text2, fontWeight: 300, lineHeight: 1.6, marginBottom: 14, maxWidth: 540 }}>
                {lang==="en"
                  ? "Optional. Would you like the system to surface activities adapted to specific needs?"
                  : "Opcional. ¿Quieres que el sistema muestre actividades adaptadas a necesidades específicas?"}
              </p>
              <div style={{ display:"inline-flex", background: dark ? "rgba(255,255,255,.04)" : "#fff", border: `1px solid ${theme.border2}`, borderRadius: 18, padding: 3 }}>
                {[
                  { id: true,  label: { en: "Yes", es: "Sí" } },
                  { id: false, label: { en: "No",  es: "No" } },
                ].map(o => {
                  const on = profile.specialNeeds === o.id;
                  return (
                    <button key={String(o.id)} onClick={() => {
                      if (o.id === false) {
                        const cleanTags = profile.tags.filter(t => !WS_NEEDS_TAGS.find(x => x.id === t)?.sensitive);
                        setProfile({ ...profile, specialNeeds: false, tags: cleanTags });
                        setPickerOpen(false);
                      } else {
                        setProfile({ ...profile, specialNeeds: true });
                      }
                    }} style={{
                      padding:"6px 16px", borderRadius: 14, border:"none",
                      background: on ? theme.sage : "transparent",
                      color: on ? (dark?"#050F07":"#fff") : theme.text2,
                      fontSize:".82rem", fontWeight: on ? 600 : 400, cursor:"pointer",
                    }}>{o.label[lang]}</button>
                  );
                })}
              </div>

              {profile.specialNeeds && (
                <div style={{ marginTop:"1.25rem", paddingTop:"1.25rem", borderTop:`1px solid ${theme.divider}` }}>
                  <div className="label-tiny" style={{ color: theme.gold, marginBottom: 8 }}>
                    {lang==="en"?"Choose what applies":"Elige las que apliquen"}
                  </div>
                  <button onClick={() => setPickerOpen(o => !o)} style={{
                    background: dark ? "rgba(255,255,255,.04)" : "#fff",
                    border: `1px solid ${theme.border2}`, borderRadius: 6,
                    padding:"10px 14px", color: theme.text, fontSize:".88rem",
                    cursor:"pointer", display:"flex", justifyContent:"space-between", alignItems:"center", width:"100%", maxWidth: 460,
                  }}>
                    <span>
                      {(() => {
                        const sel = WS_NEEDS_TAGS.filter(t => t.sensitive && profile.tags.includes(t.id));
                        if (sel.length === 0) return lang==="en"?"Select — e.g. autism, low vision…":"Selecciona — ej. autismo, baja visión…";
                        return sel.map(t => t.label[lang]).join(" · ");
                      })()}
                    </span>
                    <span style={{ color: theme.sage, fontSize:"1rem" }}>{pickerOpen ? "▴" : "▾"}</span>
                  </button>
                  {pickerOpen && (
                    <div style={{
                      marginTop: 6, maxWidth: 460,
                      background: dark ? theme.panel : "#fff",
                      border: `1px solid ${theme.border2}`, borderRadius: 6,
                      padding: "8px 6px", display:"flex", flexDirection:"column", gap: 2,
                    }}>
                      {WS_NEEDS_TAGS.filter(t => t.sensitive).map(tag => {
                        const on = profile.tags.includes(tag.id);
                        return (
                          <button key={tag.id} onClick={() => {
                            const next = on ? profile.tags.filter(x => x !== tag.id) : [...profile.tags, tag.id];
                            setProfile({ ...profile, tags: next });
                          }} style={{
                            display:"flex", justifyContent:"space-between", alignItems:"center",
                            padding:"8px 12px", borderRadius: 4,
                            background: on ? `${tag.hue}1c` : "transparent",
                            border: "none", textAlign:"left", cursor:"pointer",
                            color: theme.text, fontSize:".86rem",
                          }}>
                            <span style={{ display:"flex", alignItems:"center", gap: 8 }}>
                              <span style={{ color: tag.hue }}>{tag.glyph}</span>
                              {tag.label[lang]}
                            </span>
                            {on && <span style={{ color: tag.hue, fontSize:".82rem" }}>✓</span>}
                          </button>
                        );
                      })}
                    </div>
                  )}
                  <p style={{ marginTop:".75rem", fontSize:".72rem", color: theme.text3, lineHeight: 1.5, maxWidth: 460 }}>
                    {lang==="en"
                      ? "You can switch this off at any time. Tags are stored locally on this device."
                      : "Puedes desactivarlo en cualquier momento. Las etiquetas se guardan localmente en este dispositivo."}
                  </p>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {/* TABS */}
      <div className="section" style={{ padding:"2.5rem clamp(1.5rem, 5vw, 5vw) 2rem" }}>
        <div className="wrap">
          <div style={{ display:"flex", gap: 6, flexWrap:"wrap", marginBottom:"2rem", borderBottom: `1px solid ${theme.divider}`, paddingBottom:"1rem" }}>
            {tabs.map(t => (
              <button key={t.id} onClick={() => setTab(t.id)} style={{
                padding:"7px 14px", borderRadius: 18,
                background: tab === t.id ? theme.sage3 : "transparent",
                border: `1px solid ${tab === t.id ? theme.border2 : "transparent"}`,
                color: tab === t.id ? theme.text : theme.text2,
                fontSize:".78rem", cursor:"pointer",
              }}>{t.label[lang]}</button>
            ))}
          </div>
          <div className="grid-3" style={{ gap:"1rem" }}>
            {list.map((item, i) => (
              <div key={i} style={{
                background: dark ? theme.panel : "#fff", border:`1px solid ${theme.border}`,
                borderRadius: 6, padding:"1.25rem", display:"flex", flexDirection:"column", gap: 10,
              }}>
                <div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline" }}>
                  <Pill color={theme.sage} bd={theme.border2} size=".58rem">{item.kind}</Pill>
                  <span className="mono" style={{ fontSize:".66rem", color: theme.text3 }}>{item.savedAt}</span>
                </div>
                <h3 className="serif italic" style={{ fontWeight: 400, fontSize:"1.15rem", color: theme.text, lineHeight: 1.2 }}>{item.title[lang]}</h3>
                <button style={{
                  marginTop:"auto", background:"transparent", color: theme.sage,
                  border:`1px solid ${theme.border2}`, padding:"6px 12px", borderRadius: 16,
                  fontSize:".76rem", cursor:"pointer", alignSelf:"flex-start",
                }}>{lang==="en"?"Open":"Abrir"} →</button>
              </div>
            ))}
          </div>
        </div>
      </div>
      <Footer theme={theme} dark={dark} lang={lang} nav={nav}/>
    </div>
  );
}

// ── SEASONAL HUB ────────────────────────────────────────
function _curSeason() {
  var now = new Date(), m = now.getMonth() + 1, d = now.getDate();
  if ((m === 3 && d >= 20) || m === 4 || m === 5 || (m === 6 && d <= 20)) return 'spring';
  if ((m === 6 && d >= 21) || m === 7 || m === 8 || (m === 9 && d <= 21)) return 'summer';
  if ((m === 9 && d >= 22) || m === 10 || m === 11 || (m === 12 && d <= 20)) return 'autumn';
  return 'winter';
}

function Seasonal({ theme, dark, lang, nav, isMember }) {
  var curId = _curSeason();
  var curYear = new Date().getFullYear();
  const seasons = [
    { id:"spring", title: { en:"Spring", es:"Primavera" }, sub: { en:"Soft, slow, planting", es:"Suave, lento, plantar" }, bg:"#5A8E4A", counts: { editions:12, packs:3, audio:8 } },
    { id:"summer", title: { en:"Summer", es:"Verano" }, sub: { en:"Outdoors first", es:"Aire libre primero" }, bg:"#C8A85A", counts: null },
    { id:"autumn", title: { en:"Autumn", es:"Otoño" }, sub: { en:"Leaves, lanterns, walks", es:"Hojas, faroles, paseos" }, bg:"#A04A2A", counts: null },
    { id:"winter", title: { en:"Winter", es:"Invierno" }, sub: { en:"Indoors, longer stories", es:"Dentro, historias más largas" }, bg:"#0E3A28", counts: null },
  ];
  const curSeason = seasons.find(function(s){ return s.id === curId; }) || seasons[0];
  return (
    <div style={{ background: theme.bg, color: theme.text, paddingTop:"5rem" }}>
      <div style={{ padding:"5rem clamp(1.5rem, 5vw, 5vw) 3rem" }}>
        <div className="wrap">
          <Eyebrow theme={theme}>{lang==="en"?"Seasonal hub":"Hub estacional"}</Eyebrow>
          <h1 className="serif" style={{ fontStyle:"italic", fontWeight: 300, fontSize:"clamp(2.2rem, 5vw, 4rem)", color: theme.text, lineHeight: 1.02, letterSpacing:"-.02em", marginTop:".75rem", marginBottom:"1rem", maxWidth: 900 }}>
            {lang==="en" ? <>Four times a year, <em>the system shifts.</em></> : <>Cuatro veces al año, <em>el sistema cambia.</em></>}
          </h1>
          <p style={{ color: theme.text2, fontSize:"1rem", lineHeight: 1.7, fontWeight: 300, maxWidth: 580 }}>
            {lang==="en"
              ? `Each season brings its own editorial focus, packs, and audio collections. We're currently in ${curSeason.title.en} ${curYear}.`
              : `Cada estación trae enfoque editorial, packs y audio. Estamos en ${curSeason.title.es} ${curYear}.`}
          </p>
        </div>
      </div>
      <div className="section" style={{ padding:"1rem clamp(1.5rem, 5vw, 5vw) 5rem" }}>
        <div className="wrap">
          <div className="grid-2" style={{ gap:"1rem" }}>
            {seasons.map(function(s) {
              var isCur = s.id === curId;
              return (
                <button key={s.id} style={{
                  background: s.bg, color:"#F0EBE0",
                  border: isCur ? "2px solid rgba(157,200,114,.6)" : "2px solid transparent",
                  borderRadius: 8, padding:"2rem 1.75rem",
                  textAlign:"left", cursor:"pointer", minHeight: 220,
                  display:"flex", flexDirection:"column", justifyContent:"space-between", gap: "1rem",
                  position:"relative", overflow:"hidden",
                }}>
                  {isCur && <Pill color="#9DC872" bd="#9DC87266" style={{ alignSelf:"flex-start" }}>● {lang==="en"?"Current":"Actual"}</Pill>}
                  <div>
                    <h3 className="serif italic" style={{ fontSize:"clamp(1.8rem, 3.5vw, 2.8rem)", fontWeight: 300 }}>{s.title[lang]}</h3>
                    <p style={{ fontSize:".95rem", color:"rgba(240,235,224,.75)", fontWeight: 300, marginTop: 6 }}>{s.sub[lang]}</p>
                  </div>
                  <div style={{ display:"flex", gap:"1.5rem", fontSize:".74rem", color:"rgba(240,235,224,.6)" }}>
                    <div>{s.counts ? s.counts.editions : "—"} {lang==="en"?"editions":"ediciones"}</div>
                    <div>{s.counts ? s.counts.packs : "—"} {lang==="en"?"packs":"packs"}</div>
                    <div>{s.counts ? s.counts.audio : "—"} {lang==="en"?"audiobooks":"audiolibros"}</div>
                  </div>
                </button>
              );
            })}
          </div>
        </div>
      </div>
      <Footer theme={theme} dark={dark} lang={lang} nav={nav}/>
    </div>
  );
}

// ── WORKSHOPS ────────────────────────────────────────
function Workshops({ theme, dark, lang, nav, isMember }) {
  const [forms, setForms] = useState({});

  function openForm(id) {
    setForms(f => ({ ...f, [id]: { open: true, email: "", loading: false, done: false } }));
  }
  function setEmail(id, val) {
    setForms(f => ({ ...f, [id]: { ...f[id], email: val } }));
  }
  function submitInterest(id, e) {
    e.preventDefault();
    const email = (forms[id] && forms[id].email || "").trim();
    if (!email) return;
    setForms(f => ({ ...f, [id]: { ...f[id], loading: true } }));
    fetch('/api/subscribe', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, source: 'cohort-interest-' + id }),
    }).catch(function(){}).finally(function() {
      setForms(f => ({ ...f, [id]: { ...f[id], loading: false, done: true } }));
    });
  }

  return (
    <div style={{ background: theme.bg, color: theme.text, paddingTop:"5rem" }}>
      <div style={{ padding:"5rem clamp(1.5rem, 5vw, 5vw) 3rem" }}>
        <div className="wrap">
          <Eyebrow theme={theme}>{lang==="en"?"Cohorts · completed programs":"Cohortes · programas completados"}</Eyebrow>
          <h1 className="serif" style={{ fontStyle:"italic", fontWeight: 300, fontSize:"clamp(2.2rem, 5vw, 4rem)", color: theme.text, lineHeight: 1.02, letterSpacing:"-.02em", marginTop:".75rem", marginBottom:"1rem", maxWidth: 900 }}>
            {lang==="en" ? <>Two weeks. Four weeks. <em>Then it's done.</em></> : <>Dos semanas. Cuatro semanas. <em>Luego se acaba.</em></>}
          </h1>
          <p style={{ color: theme.text2, fontSize:"1rem", lineHeight: 1.7, fontWeight: 300, maxWidth: 620 }}>
            {lang==="en"?"Not coaching. Not a course you'll abandon. Structured cohorts with a beginning and an end — and a small group of other parents going through it at the same time.":"No es coaching ni un curso que abandonarás. Cohortes estructuradas, con inicio y fin — y un pequeño grupo de padres atravesándolas a la vez."}
          </p>
        </div>
      </div>
      <div className="section" style={{ padding:"1rem clamp(1.5rem, 5vw, 5vw) 5rem" }}>
        <div className="wrap" style={{ display:"flex", flexDirection:"column", gap:"1rem" }}>
          {WS_WORKSHOPS.map((w, i) => {
            const f = forms[w.id] || {};
            const completed = w.status === "completed";
            return (
              <div key={w.id} style={{
                background: dark ? theme.panel : "#fff", border:`1px solid ${theme.border}`, borderRadius: 8,
                padding:"1.75rem 2rem", display:"grid", gridTemplateColumns:"1fr 1fr auto", gap:"2rem",
                alignItems:"start",
              }} className="grid-2">
                <div>
                  <div style={{ display:"flex", gap: 8, marginBottom: 8 }}>
                    <Pill color={theme.sage} bd={theme.border2}>{w.weeks} {lang==="en"?"weeks":"semanas"}</Pill>
                    <Pill color={theme.text3} bd={theme.border}>{w.spots} {lang==="en"?"spots":"plazas"}</Pill>
                    {completed && <Pill color={theme.text3} bd={theme.border}>{lang==="en"?"Completed":"Completado"}</Pill>}
                  </div>
                  <h3 className="serif italic" style={{ fontSize:"1.6rem", fontWeight: 400, color: theme.text, marginBottom: 4 }}>{w.title[lang]}</h3>
                  <p style={{ fontSize:".9rem", color: theme.text2, lineHeight: 1.6, fontWeight: 300 }}>{w.sub[lang]}</p>
                </div>
                <div>
                  <div className="label-tiny" style={{ color: theme.gold, marginBottom: 6 }}>{lang==="en"?"You'll leave with":"Te llevas"}</div>
                  <p style={{ fontSize:".88rem", color: theme.text2, lineHeight: 1.6, fontWeight: 300 }}>{w.outcome[lang]}</p>
                </div>
                <div style={{ textAlign:"right", minWidth: 180 }}>
                  <div className="label-tiny" style={{ color: theme.text3, marginBottom: 4 }}>{lang==="en"?"Last cohort":"Última cohorte"}</div>
                  <div style={{ fontSize:".88rem", color: theme.text3, textDecoration:"line-through", marginBottom: 14 }}>{w.next}</div>
                  {!f.open && !f.done && (
                    <button onClick={() => openForm(w.id)} style={{ background:"transparent", color: theme.sage, border:`1px solid ${theme.sage}`, padding:"9px 16px", borderRadius: 22, fontSize:".8rem", fontWeight: 600, cursor:"pointer", whiteSpace:"nowrap" }}>
                      {lang==="en"?"Notify me for next →":"Avísame para la próxima →"}
                    </button>
                  )}
                  {f.open && !f.done && (
                    <form onSubmit={(e) => submitInterest(w.id, e)} style={{ display:"flex", flexDirection:"column", gap: 8, alignItems:"flex-end" }}>
                      <input
                        type="email" required placeholder={lang==="en"?"Your email":"Tu email"}
                        value={f.email || ""} onChange={ev => setEmail(w.id, ev.target.value)}
                        style={{ width:"100%", padding:"8px 12px", borderRadius: 8, border:`1px solid ${theme.border}`, background: theme.bg, color: theme.text, fontSize:".82rem", outline:"none" }}
                      />
                      <button type="submit" disabled={f.loading} style={{ background: theme.sage, color: dark?"#050F07":"#fff", border:"none", padding:"9px 16px", borderRadius: 22, fontSize:".8rem", fontWeight: 600, cursor: f.loading?"wait":"pointer", opacity: f.loading ? 0.6 : 1 }}>
                        {f.loading ? "…" : (lang==="en"?"Count me in":"Me apunto")}
                      </button>
                    </form>
                  )}
                  {f.done && (
                    <div style={{ fontSize:".82rem", color: theme.sage, fontWeight: 500, lineHeight: 1.5 }}>
                      {lang==="en"?"Done. You'll hear first when the next edition opens.":"Listo. Serás el primero en saber cuándo abre la próxima."}
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <Footer theme={theme} dark={dark} lang={lang} nav={nav}/>
    </div>
  );
}

// ── SCHOOLS ────────────────────────────────────────────
function Schools({ theme, dark, lang, nav }) {
  return (
    <div style={{ background: theme.bg, color: theme.text, paddingTop:"5rem" }}>
      <div style={{ padding:"5rem clamp(1.5rem, 5vw, 5vw) 3rem", background: dark ? theme.panel : "#0E2318", color:"#F0EBE0" }}>
        <div className="wrap">
          <Pill color="#9DC872" bd="#9DC87266" style={{ marginBottom:"1.25rem" }}>{lang==="en"?"Institutions · B2B-light":"Instituciones · B2B-light"}</Pill>
          <h1 className="serif" style={{ fontStyle:"italic", fontWeight: 300, fontSize:"clamp(2.2rem, 5vw, 4rem)", color:"#F0EBE0", lineHeight: 1.02, letterSpacing:"-.02em", marginBottom:"1.25rem", maxWidth: 900 }}>
            {lang==="en" ? <>For schools, libraries, paediatric clinics, <em>parent communities.</em></> : <>Para colegios, bibliotecas, clínicas, <em>comunidades de padres.</em></>}
          </h1>
          <p style={{ color:"rgba(240,235,224,.6)", fontSize:"1rem", lineHeight: 1.7, fontWeight: 300, maxWidth: 600 }}>
            {lang==="en"?"WiseTip+ seats and seasonal packs for your community, with reporting that respects parents' privacy. No tracking, no per-child dashboards.":"Plazas WiseTip+ y packs estacionales para tu comunidad, con reporte respetuoso con la privacidad. Sin tracking ni paneles por niño."}
          </p>
        </div>
      </div>
      <div className="section" style={{ padding:"3rem clamp(1.5rem, 5vw, 5vw)" }}>
        <div className="wrap">
          <div className="grid-3" style={{ gap:"1rem" }}>
            {[
              { name: "Community plan", price:"€299/yr", body: { en:"25 WiseTip+ seats · 4 seasonal packs · monthly anonymous engagement report.", es:"25 plazas · 4 packs · informe anónimo mensual." } },
              { name: "School plan",    price:"€899/yr", body: { en:"100 seats · all 22+ packs · custom Earth Day pack · staff onboarding.", es:"100 plazas · todos los packs · pack Día Tierra a medida · onboarding." } },
              { name: "Network plan",   price:"€2.4k/yr",body: { en:"Unlimited seats across up to 5 sites · API for in-house portals · co-branded packs.", es:"Plazas ilimitadas en 5 centros · API · packs co-marca." } },
            ].map(p => (
              <div key={p.name} style={{ background: dark?theme.panel:"#fff", border:`1px solid ${theme.border}`, borderRadius: 8, padding:"1.75rem", display:"flex", flexDirection:"column", gap: "1rem" }}>
                <div className="label-tiny" style={{ color: theme.sage }}>{p.name}</div>
                <div className="serif" style={{ fontSize:"2rem", fontWeight: 300, color: theme.text, lineHeight: 1 }}>{p.price}</div>
                <p style={{ fontSize:".9rem", color: theme.text2, lineHeight: 1.6, fontWeight: 300, flex: 1 }}>{p.body[lang]}</p>
                <button style={{ background:"transparent", border:`1px solid ${theme.border2}`, color: theme.text, padding:"10px 18px", borderRadius: 22, fontSize:".82rem", cursor:"pointer" }}>
                  {lang==="en"?"Request info":"Pedir info"} →
                </button>
              </div>
            ))}
          </div>
        </div>
      </div>
      <Footer theme={theme} dark={dark} lang={lang} nav={nav}/>
    </div>
  );
}

// ── SPONSORS ──────────────────────────────────────────
function Sponsors({ theme, dark, lang, nav }) {
  const gold = theme.gold || "#C8A85A";
  const gold2 = theme.gold2 || (dark ? "rgba(200,168,90,.10)" : "rgba(200,168,90,.08)");
  const goldBd = dark ? "rgba(200,168,90,.22)" : "rgba(200,168,90,.30)";
  return (
    <div style={{ background: theme.bg, color: theme.text, paddingTop:"5rem" }}>
      <div style={{ padding:"5rem clamp(1.5rem, 5vw, 5vw) 3rem" }}>
        <div className="wrap">
          <Eyebrow theme={theme}>{lang==="en"?"Sponsorships · by invitation":"Patrocinios · por invitación"}</Eyebrow>
          <h1 className="serif" style={{ fontStyle:"italic", fontWeight: 300, fontSize:"clamp(2.2rem, 5vw, 4rem)", color: theme.text, lineHeight: 1.02, letterSpacing:"-.02em", marginTop:".75rem", marginBottom:"1rem", maxWidth: 900 }}>
            {lang==="en" ? <>2,100 families. <em>Rare, intentional, never intrusive.</em></> : <>2.100 familias. <em>Puntual, intencional, nunca intrusivo.</em></>}
          </h1>
          <p style={{ color: theme.text2, fontSize:"1rem", lineHeight: 1.7, fontWeight: 300, maxWidth: 680 }}>
            {lang==="en"
              ? "We would only accept at most one top-of-letter sponsor mention, and/or one joint-writing collaboration per edition — in case it would be of genuine interest to our community. Never inside premium content."
              : "Solo aceptamos como máximo una mención de patrocinador al inicio de la carta, y/o una colaboración de escritura conjunta por edición — siempre que sea de interés genuino para nuestra comunidad. Nunca dentro del contenido premium."}
          </p>
        </div>
      </div>
      <div className="section" style={{ padding:"1rem clamp(1.5rem, 5vw, 5vw) 5rem" }}>
        <div className="wrap">
          <div className="grid-2" style={{ gap:"1.25rem" }}>
            {[
              {
                name: { en:"Top-of-letter mention", es:"Mención al inicio de carta" },
                price: "€150 / edition",
                body: {
                  en:"One paragraph above the fold. One link. Written by our editors in our voice — never pasted copy. Clearly labelled as sponsored.",
                  es:"Un párrafo visible al inicio. Un enlace. Redactado por nuestros editores en nuestra voz — nunca copy pegado. Claramente etiquetado como patrocinado.",
                },
                slots: 2,
              },
              {
                name: { en:"Editorial collaboration", es:"Colaboración editorial" },
                price: { en:"On request", es:"Bajo petición" },
                body: {
                  en:"A joint-writing piece that genuinely serves our community. You contribute the subject matter; we write it in WiseTip's voice. Subject to editorial review and community relevance.",
                  es:"Una pieza escrita conjuntamente que aporta valor real a nuestra comunidad. Tú pones el tema; nosotros lo escribimos en la voz de WiseTip. Sujeto a revisión editorial y relevancia.",
                },
                slots: 2,
              },
            ].map(s => (
              <div key={s.name.en} style={{
                background: dark ? "rgba(200,168,90,.05)" : "rgba(200,168,90,.04)",
                border:`1px solid ${goldBd}`,
                borderRadius: 10, padding:"2rem 1.75rem",
                display:"flex", flexDirection:"column", gap: 12,
                position:"relative", overflow:"hidden",
              }}>
                <div style={{
                  position:"absolute", top: 0, left: 0, right: 0, height: 2,
                  background:`linear-gradient(90deg, ${gold}, transparent)`,
                }}/>
                <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", gap: 8 }}>
                  <h3 className="serif italic" style={{ fontSize:"1.5rem", fontWeight: 400, color: theme.text, lineHeight: 1.15 }}>{s.name[lang]}</h3>
                  <span style={{
                    flexShrink: 0, fontSize:".6rem", letterSpacing:".18em", textTransform:"uppercase",
                    color: gold, border:`1px solid ${goldBd}`, borderRadius: 10,
                    padding:"3px 10px", fontWeight: 600, whiteSpace:"nowrap",
                  }}>
                    {s.slots} {lang==="en"?"slots":"plazas"}
                  </span>
                </div>
                <div className="serif" style={{ fontSize:"1.7rem", fontWeight: 300, color: gold, lineHeight: 1 }}>
                  {typeof s.price === "object" ? s.price[lang] : s.price}
                </div>
                <p style={{ fontSize:".9rem", color: theme.text2, lineHeight: 1.7, fontWeight: 300 }}>{s.body[lang]}</p>
              </div>
            ))}
          </div>
          <div style={{ marginTop:"2.5rem", padding:"1.5rem 2rem", background: gold2, border:`1px solid ${goldBd}`, borderRadius: 6, fontSize:".82rem", color: theme.text2, lineHeight: 1.7 }}>
            {lang==="en"
              ? "Editorial firewall: sponsors never see content before publication. We have declined more partnership requests than we have accepted — and we intend to keep it that way."
              : "Cortafuegos editorial: los patrocinadores nunca ven el contenido antes de publicarse. Hemos rechazado más solicitudes de colaboración que las que hemos aceptado — y así seguirá siendo."}
          </div>
        </div>
      </div>
      <Footer theme={theme} dark={dark} lang={lang} nav={nav}/>
    </div>
  );
}

Object.assign(window, { MembershipPage, Profile, Seasonal, Workshops, Schools, Sponsors });