// ── 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 Seasonal({ theme, dark, lang, nav, isMember }) {
  const seasons = [
    { id:"spring", title: { en:"Spring", es:"Primavera" }, sub: { en:"Soft, slow, planting", es:"Suave, lento, plantar" }, bg:"#5A8E4A", cur: true },
    { id:"summer", title: { en:"Summer", es:"Verano" }, sub: { en:"Outdoors first", es:"Aire libre primero" }, bg:"#C8A85A" },
    { id:"autumn", title: { en:"Autumn", es:"Otoño" }, sub: { en:"Leaves, lanterns, walks", es:"Hojas, faroles, paseos" }, bg:"#A04A2A" },
    { id:"winter", title: { en:"Winter", es:"Invierno" }, sub: { en:"Indoors, longer stories", es:"Dentro, historias más largas" }, bg:"#0E3A28" },
  ];
  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 Spring 2026.":"Cada estación trae enfoque editorial, packs y audio. Estamos en primavera 2026."}
          </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(s => (
              <button key={s.id} style={{
                background: s.bg, color:"#F0EBE0",
                border:"none", 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",
              }}>
                {s.cur && <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.id === "spring" ? "12" : "—"} {lang==="en"?"editions":"ediciones"}</div>
                  <div>{s.id === "spring" ? "3" : "—"} {lang==="en"?"packs":"packs"}</div>
                  <div>{s.id === "spring" ? "8" : "—"} {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 }) {
  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"?"Workshops · finite programs":"Talleres · programas finitos"}</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) => (
            <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:"center",
            }} 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>
                </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" }}>
                <div className="label-tiny" style={{ color: theme.sage, marginBottom: 6 }}>{lang==="en"?"Next cohort":"Próxima cohorte"}</div>
                <div style={{ fontSize:".88rem", color: theme.text, marginBottom: 10 }}>{w.next}</div>
                <button style={{ background: theme.sage, color: dark?"#050F07":"#fff", border:"none", padding:"10px 18px", borderRadius: 22, fontSize:".82rem", fontWeight: 600, cursor:"pointer" }}>
                  {lang==="en"?"Enroll":"Apuntarme"} →
                </button>
              </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 }) {
  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 · zero intrusive ads":"Patrocinios · cero anuncios intrusivos"}</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>One sponsor per edition.</em></> : <>2.100 familias. <em>Un patrocinador por edición.</em></>}
          </h1>
          <p style={{ color: theme.text2, fontSize:"1rem", lineHeight: 1.7, fontWeight: 300, maxWidth: 620 }}>
            {lang==="en"?"Conscious parenting and responsible consumption families. We accept at most one top-of-letter sponsor and one mid-letter mention per edition — never inside premium content.":"Padres con crianza consciente y consumo responsable. Aceptamos máximo un patrocinador top y uno mid por edición — 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:"1rem" }}>
            {[
              { name: "Top placement", price:"€150 / edition", body:{ en:"Above-the-fold mention, one paragraph, one link.", es:"Mención visible, un párrafo, un enlace." }, slots: 4 },
              { name: "Mid placement", price:"€100 / edition", body:{ en:"Between the story and the activity block.", es:"Entre la historia y el bloque de actividad." }, slots: 4 },
              { name: "Web sidebar",   price:"€300–400 / mo",  body:{ en:"On the public archive pages. Two slots, no rotation.", es:"En el archivo público. Dos slots, sin rotación." }, slots: 2 },
              { name: "Seasonal pack co-brand", price:"€2.4k / pack", body:{ en:"Your imprint on one seasonal activity pack. Editorial veto applies.", es:"Tu sello en un pack. Veto editorial aplica." }, slots: 1 },
            ].map(s => (
              <div key={s.name} style={{ background: dark?theme.panel:"#fff", border:`1px solid ${theme.border}`, borderRadius: 8, padding:"1.75rem", display:"flex", flexDirection:"column", gap: 10 }}>
                <div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline" }}>
                  <h3 className="serif italic" style={{ fontSize:"1.4rem", fontWeight: 400, color: theme.text }}>{s.name}</h3>
                  <Pill color={theme.sage} bd={theme.border2}>{s.slots} {lang==="en"?"slots":"plazas"}</Pill>
                </div>
                <div className="serif" style={{ fontSize:"1.6rem", fontWeight: 300, color: theme.sage, lineHeight: 1 }}>{s.price}</div>
                <p style={{ fontSize:".88rem", color: theme.text2, lineHeight: 1.65, fontWeight: 300 }}>{s.body[lang]}</p>
              </div>
            ))}
          </div>
          <div style={{ marginTop:"2.5rem", padding:"1.5rem 2rem", background: theme.sage3, border:`1px dashed ${theme.border2}`, borderRadius: 6, fontSize:".82rem", color: theme.text2, lineHeight: 1.65 }}>
            {lang==="en"
              ? "Editorial firewall: sponsors never see content before publication. We've declined more sponsors than we've accepted."
              : "Cortafuegos editorial: los patrocinadores nunca ven el contenido antes de publicarse. Hemos rechazado a más patrocinadores que aceptado."}
          </div>
        </div>
      </div>
      <Footer theme={theme} dark={dark} lang={lang} nav={nav}/>
    </div>
  );
}

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