// ── ABOUT / PRESS / CONTACT / LEGAL  (4-tab single page) ──
// One file, one route handles four secondary surfaces the footer links to.

function AboutPage({ theme, dark, lang, isMember, nav, pageData }) {
  const N = nav || (() => {});
  const initial = (pageData?.tab) || "about";
  const [tab, setTab] = useState(initial);
  useEffect(() => { if (pageData?.tab) setTab(pageData.tab); }, [pageData?.tab]);

  const tabs = [
    { id:"about",   label: { en:"About",   es:"Sobre nosotros" } },
    { id:"press",   label: { en:"Press",   es:"Prensa" } },
    { id:"contact", label: { en:"Contact", es:"Contacto" } },
    { id:"legal",   label: { en:"Legal",   es:"Legal" } },
  ];

  return (
    <div style={{ background: theme.bg, color: theme.text, paddingTop:"5rem" }}>
      <div style={{ padding:"4rem clamp(1.5rem, 5vw, 5vw) 1.5rem" }}>
        <div className="wrap">
          <Eyebrow theme={theme}>{lang==="en"?"WiseTip · who, where, how":"WiseTip · quién, dónde, cómo"}</Eyebrow>
          <h1 className="serif" style={{
            fontStyle:"italic", fontWeight: 300, fontSize:"clamp(2rem, 4.5vw, 3.6rem)",
            color: theme.text, lineHeight: 1.05, letterSpacing:"-.02em",
            marginTop:".75rem", marginBottom:"1rem", maxWidth: 900,
          }}>{lang==="en"
            ? <>Four parents. <em>One quiet system.</em></>
            : <>Cuatro padres. <em>Un sistema discreto.</em></>}</h1>
        </div>
      </div>

      {/* Tabs */}
      <div style={{
        borderTop:`1px solid ${theme.divider}`, borderBottom:`1px solid ${theme.divider}`,
        padding:"0 clamp(1.5rem, 5vw, 5vw)",
      }}>
        <div className="wrap" style={{ display:"flex", gap: 8, overflowX:"auto" }}>
          {tabs.map(t => (
            <button key={t.id} onClick={() => setTab(t.id)} style={{
              padding:"14px 18px", background:"transparent", border:"none",
              borderBottom: tab === t.id ? `2px solid ${theme.sage}` : "2px solid transparent",
              color: tab === t.id ? theme.text : theme.text2,
              fontSize:".88rem", cursor:"pointer", whiteSpace:"nowrap",
              fontWeight: tab === t.id ? 500 : 400,
            }}>{t.label[lang]}</button>
          ))}
        </div>
      </div>

      <div style={{ padding:"4rem clamp(1.5rem, 5vw, 5vw) 5rem" }}>
        <div className="wrap">
          {tab === "about"   && <AboutTab   theme={theme} dark={dark} lang={lang} nav={nav}/>}
          {tab === "press"   && <PressTab   theme={theme} dark={dark} lang={lang}/>}
          {tab === "contact" && <ContactTab theme={theme} dark={dark} lang={lang}/>}
          {tab === "legal"   && <LegalTab   theme={theme} dark={dark} lang={lang}/>}
        </div>
      </div>

      <Footer theme={theme} dark={dark} lang={lang} nav={nav}/>
    </div>
  );
}

// ── ABOUT ──────────────────────────────────────────────
function AboutTab({ theme, dark, lang, nav }) {
  const N = nav || (() => {});
  return (
    <div style={{ display:"grid", gridTemplateColumns:"1.4fr 1fr", gap:"4rem", alignItems:"start" }} className="grid-2">
      <div>
        <h2 className="serif italic" style={{ fontWeight: 400, fontSize:"clamp(1.4rem, 2.8vw, 2rem)", color: theme.text, marginBottom:"1rem", lineHeight: 1.15 }}>
          {lang==="en"?"What we are":"Qué somos"}
        </h2>
        <p style={{ fontSize:"1rem", lineHeight: 1.75, fontWeight: 300, color: theme.text2, marginBottom:"1.25rem" }}>
          {lang==="en"
            ? "WiseTip is a weekly editorial system for conscious parenting. It started in November 2022 with one parent typing a letter at 11pm. Today it's four editors writing from four cities, 2,100 families reading on a Tuesday, and a small set of tools — activity packs, audiobooks, TailorAudioBooks — that exist only because parents asked us, in writing, to make them."
            : "WiseTip es un sistema editorial semanal para crianza consciente. Empezó en noviembre 2022 con un padre escribiendo una carta a las 11pm. Hoy son cuatro editores escribiendo desde cuatro ciudades, 2.100 familias leyendo un martes, y un puñado de herramientas — packs, audiolibros, TailorAudioBooks — que existen solo porque los padres nos lo pidieron por escrito."}
        </p>
        <p style={{ fontSize:"1rem", lineHeight: 1.75, fontWeight: 300, color: theme.text2, marginBottom:"1.25rem" }}>
          {lang==="en"
            ? "We are not against screens. We are pro-intention. The difference is enormous, and the whole system is built around it."
            : "No estamos en contra de las pantallas. Estamos a favor de la intención. La diferencia es enorme y todo el sistema se construye en torno a ella."}
        </p>
        <button onClick={() => N("story")} style={{
          display:"inline-flex", alignItems:"center", gap:6,
          background:"transparent", border:`1px solid ${theme.border2}`,
          color:theme.sage, padding:"10px 18px", borderRadius:22,
          fontSize:".82rem", cursor:"pointer", marginBottom:"2rem",
        }}>{lang==="en"?"Read our full story →":"Leer nuestra historia completa →"}</button>

        <h3 className="serif italic" style={{ fontWeight: 400, fontSize:"1.4rem", color: theme.text, marginTop:"2rem", marginBottom:".75rem" }}>
          {lang==="en"?"What we won't do":"Lo que no haremos"}
        </h3>
        <ul style={{ listStyle:"none", padding: 0, display:"flex", flexDirection:"column", gap: 10 }}>
          {(lang==="en" ? [
            "Sell parental-anxiety as content.",            "Place advertising inside premium content. Ever.",
            "Track per-child behaviour or build dashboards.",
            "Promise outcomes. Children are not products.",
          ] : [
            "Vender ansiedad parental como contenido.",
            "Poner publicidad dentro del contenido premium. Nunca.",
            "Rastrear comportamiento por niño ni crear paneles.",
            "Prometer resultados. Los niños no son productos.",
          ]).map((t, i) => (
            <li key={i} style={{ display:"flex", gap: 12, fontSize:".95rem", color: theme.text2, fontWeight: 300, lineHeight: 1.65 }}>
              <span style={{ color:"#E24B4A", fontWeight: 700 }}>✕</span>{t}
            </li>
          ))}
        </ul>

        <h3 className="serif italic" style={{ fontWeight: 400, fontSize:"1.4rem", color: theme.text, marginTop:"2rem", marginBottom:".75rem" }}>
          {lang==="en"?"What we will do":"Lo que sí haremos"}
        </h3>
        <ul style={{ listStyle:"none", padding: 0, display:"flex", flexDirection:"column", gap: 10 }}>
          {(lang==="en" ? [
            "Ship one edition every Tuesday; a second on Saturdays when we can.",
            "Read every reply. Many shape future editions directly.",
            "Refund anyone who asks, without a form, without a survey.",
            "Decline sponsors more often than we accept them.",
          ] : [
            "Publicar una edición cada martes; una segunda los sábados cuando podemos.",
            "Leer cada respuesta. Muchas dan forma a las siguientes ediciones.",
            "Reembolsar a quien lo pida, sin formularios, sin encuestas.",
            "Rechazar más patrocinadores de los que aceptamos.",
          ]).map((t, i) => (
            <li key={i} style={{ display:"flex", gap: 12, fontSize:".95rem", color: theme.text2, fontWeight: 300, lineHeight: 1.65 }}>
              <span style={{ color: theme.sage, fontWeight: 700 }}>✓</span>{t}
            </li>
          ))}
        </ul>
      </div>

      {/* Sidebar */}
      <div style={{
        background: dark ? theme.panel : "#fff", border:`1px solid ${theme.border}`,
        borderRadius: 8, padding:"1.75rem",
      }}>
        <div className="label-tiny" style={{ color: theme.gold, marginBottom: 10 }}>{lang==="en"?"By the numbers":"En cifras"}</div>
        <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"1.25rem" }}>
          {[
            [String(window.WS_CURRENT && window.WS_CURRENT.num || 191), lang==="en"?"editions":"ediciones"],
            ["4",   lang==="en"?"editors":"editores"],
            ["2,100", lang==="en"?"families":"familias"],
            ["11",  lang==="en"?"countries":"países"],
            ["340", lang==="en"?"activities":"actividades"],
            ["49",  lang==="en"?"audiobooks":"audiolibros"],
            ["22+", lang==="en"?"packs":"packs"],
            ["0",   lang==="en"?"intrusive ads":"anuncios"],
          ].map(([n, l]) => (
            <div key={l}>
              <div className="serif" style={{ fontSize:"1.8rem", fontWeight: 300, color: theme.sage, lineHeight: 1 }}>{n}</div>
              <div className="label-tiny" style={{ color: theme.text3, marginTop: 4 }}>{l}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop:"1.75rem", paddingTop:"1.5rem", borderTop:`1px solid ${theme.divider}` }}>
          <div className="label-tiny" style={{ color: theme.gold, marginBottom: 8 }}>{lang==="en"?"Owned by":"Propietario"}</div>
          <div style={{ fontSize:".88rem", color: theme.text, marginBottom: 8 }}>
            {lang==="en"?"4 friends that started this community for fun.":"4 amigos que empezaron esta comunidad por diversión."}
          </div>
          <p style={{ fontSize:".74rem", color: theme.text3, lineHeight: 1.7, margin: 0 }}>
            {lang==="en"
              ? "Thank you for supporting our thoughts. We simply try to share our vision, activities that worked for us — and that will surely bring many smiles and great time within your family. This wouldn't be possible without all of you."
              : "Gracias por apoyar nuestros pensamientos. Solo intentamos compartir nuestra visión, actividades que nos funcionaron — y que seguramente traerán muchas sonrisas y momentos geniales en familia. Esto no sería posible sin todos vosotros."}
          </p>
        </div>
      </div>
    </div>
      {/* ── editors ── */}
      <div style={{ marginTop:"3.5rem", paddingTop:"3rem", borderTop:`1px solid ${theme.divider}` }}>
        <div className="label-tiny" style={{ color: theme.gold, marginBottom:"1.5rem" }}>
          {lang==="en"?"Our editors":"Nuestros editores"}
        </div>
        <div className="grid-4">
          {(window.WS_EDITORS||[]).map(ed => (
            <div key={ed.id} style={{
              background: dark ? theme.panel : "#fff", border:`1px solid ${theme.border}`,
              borderRadius:8, padding:"1.5rem 1.25rem", textAlign:"center",
            }}>
              <div style={{ display:"flex", justifyContent:"center", marginBottom:"1rem" }}>
                <svg width="60" height="72" viewBox="0 0 60 72" fill="none">
                  <circle cx="30" cy="22" r="12" stroke={ed.color} strokeWidth="1.2" fill={ed.color + "14"}/>
                  <path d="M4 72C4 50 14 40 30 40C46 40 56 50 56 72" stroke={ed.color} strokeWidth="1.2" fill={ed.color + "0a"} strokeLinecap="round"/>
                  {ed.id==="alex" && <>
                    <path d="M18 14C16 8 19 5 22 9C20 13 18 15 18 14Z" fill={ed.color} opacity=".45"/>
                    <path d="M42 14C44 8 41 5 38 9C40 13 42 15 42 14Z" fill={ed.color} opacity=".45"/>
                  </>}
                  {ed.id==="victor" && <>
                    <circle cx="25" cy="23" r="4" stroke={ed.color} strokeWidth=".9" fill="none" opacity=".6"/>
                    <circle cx="35" cy="23" r="4" stroke={ed.color} strokeWidth=".9" fill="none" opacity=".6"/>
                    <line x1="29" y1="23" x2="31" y2="23" stroke={ed.color} strokeWidth=".9" opacity=".5"/>
                  </>}
                  {ed.id==="marian" && <>
                    <path d="M22 11C20 7 23 5 27 8C25 11 22 12 22 11Z" fill={ed.color} opacity=".45"/>
                    <path d="M30 9C29 5 32 3 36 6C34 9 30 10 30 9Z" fill={ed.color} opacity=".45"/>
                    <path d="M38 11C36 7 39 5 43 8C41 11 38 12 38 11Z" fill={ed.color} opacity=".45"/>
                    <line x1="30" y1="10" x2="30" y2="15" stroke={ed.color} strokeWidth=".8" opacity=".4"/>
                  </>}
                  {ed.id==="markus" && <>
                    <line x1="20" y1="16" x2="40" y2="16" stroke={ed.color} strokeWidth=".55" opacity=".35"/>
                    <line x1="20" y1="22" x2="40" y2="22" stroke={ed.color} strokeWidth=".55" opacity=".35"/>
                    <line x1="27" y1="10" x2="27" y2="34" stroke={ed.color} strokeWidth=".55" opacity=".35"/>
                    <line x1="33" y1="10" x2="33" y2="34" stroke={ed.color} strokeWidth=".55" opacity=".35"/>
                  </>}
                </svg>
              </div>
              <div style={{ fontSize:".9rem", fontWeight:500, color:theme.text, marginBottom:3 }}>{ed.name}</div>
              <div style={{ fontSize:".73rem", color:theme.sage, marginBottom:"8px" }}>{ed.location[lang]}</div>
              <div className="serif italic" style={{ fontSize:".75rem", color:theme.text3, lineHeight:1.6 }}>{ed.bio[lang]}</div>
            </div>
          ))}
        </div>
      </div>
  );
}

// ── PRESS ──────────────────────────────────────────────
function PressTab({ theme, dark, lang }) {
  const mentions = [
    { src:"The Guardian",  date:"Mar 2026", quote:{ en:"\"A quiet rebellion against the parenting-content machine.\"", es:"\"Una rebelión silenciosa contra la maquinaria de contenido para padres.\"" } },
    { src:"El País",       date:"Feb 2026", quote:{ en:"\"What if the antidote to feeds was a letter on Tuesday?\"", es:"\"¿Y si el antídoto al feed fuera una carta los martes?\"" } },
    { src:"Kinfolk",       date:"Dec 2025", quote:{ en:"\"A reading practice for parents who refuse to scroll.\"", es:"\"Una práctica de lectura para padres que se niegan a hacer scroll.\"" } },
    { src:"Monocle Radio", date:"Oct 2025", quote:{ en:"\"The editorial discipline of a magazine, the cadence of a friend.\"", es:"\"La disciplina editorial de una revista, la cadencia de un amigo.\"" } },
  ];
  return (
    <div style={{ display:"grid", gridTemplateColumns:"1.4fr 1fr", gap:"4rem", alignItems:"start" }} className="grid-2">
      <div>
        <h2 className="serif italic" style={{ fontWeight: 400, fontSize:"clamp(1.4rem, 2.8vw, 2rem)", color: theme.text, marginBottom:"1rem", lineHeight: 1.15 }}>
          {lang==="en"?"Press & mentions":"Prensa y menciones"}
        </h2>
        <p style={{ fontSize:".95rem", color: theme.text2, fontWeight: 300, lineHeight: 1.7, marginBottom:"1.5rem", maxWidth: 540 }}>
          {lang==="en"?"For interviews and quotes, write to press@wisetip.net. Press kit (logos, headshots, an editorially-approved fact sheet) below.":"Para entrevistas y declaraciones escribe a press@wisetip.net. Kit de prensa (logos, retratos, ficha aprobada) debajo."}
        </p>
        <div style={{ display:"flex", flexDirection:"column", gap: 8 }}>
          {mentions.map((m, i) => (
            <div key={i} style={{
              background: dark ? theme.panel : "#fff", border:`1px solid ${theme.border}`,
              borderRadius: 6, padding:"1.25rem 1.5rem",
            }}>
              <div style={{ display:"flex", justifyContent:"space-between", marginBottom: 6 }}>
                <span className="label-tiny" style={{ color: theme.sage }}>{m.src}</span>
                <span className="mono" style={{ fontSize:".68rem", color: theme.text3 }}>{m.date}</span>
              </div>
              <p className="serif italic" style={{ fontSize:"1.05rem", color: theme.text, lineHeight: 1.4, fontWeight: 400 }}>
                {m.quote[lang]}
              </p>
            </div>
          ))}
        </div>
      </div>

      <div style={{
        background: dark ? theme.panel : "#fff", border:`1px solid ${theme.border}`,
        borderRadius: 8, padding:"1.75rem",
      }}>
        <div className="label-tiny" style={{ color: theme.gold, marginBottom: 10 }}>{lang==="en"?"Press kit":"Kit de prensa"}</div>
        <div style={{ display:"flex", flexDirection:"column", gap: 10 }}>
          {[
            { en:"Logos · SVG + PNG", es:"Logos · SVG + PNG" },
            { en:"Editor portraits", es:"Retratos de editores" },
            { en:"Approved fact sheet (PDF)", es:"Ficha aprobada (PDF)" },
            { en:"Approved bios (EN/ES)", es:"Biografías aprobadas (EN/ES)" },
          ].map((it, i) => (
            <button key={i} style={{
              background:"transparent", border:`1px solid ${theme.border2}`,
              color: theme.text, padding:"10px 14px", borderRadius: 6,
              fontSize:".82rem", textAlign:"left", cursor:"pointer",
              display:"flex", justifyContent:"space-between",
            }}>{it[lang]} <span style={{ color: theme.sage }}>↓</span></button>
          ))}
        </div>
        <div style={{ marginTop:"1.5rem", paddingTop:"1.25rem", borderTop:`1px solid ${theme.divider}`, fontSize:".78rem", color: theme.text2, lineHeight: 1.65 }}>
          {lang==="en"?"Direct contact: press@wisetip.net":"Contacto directo: press@wisetip.net"}
        </div>
      </div>
    </div>
  );
}

// ── CONTACT ──────────────────────────────────────────
// Topic → email routing (enforced server-side on vm51 /contact endpoint):
//   general, editor → hello@wisetip.net
//   refund          → refund@wisetip.net
//   press           → press@wisetip.net
//   sponsor         → sponsor@wisetip.net
//   schools         → schools@wisetip.net
const CONTACT_ENDPOINT = "https://api.wisetip.net/contact"; // vm51 — endpoint pending

function ContactTab({ theme, dark, lang }) {
  const [form, setForm]     = useState({ name:"", email:"", topic:"general", msg:"" });
  const [hp, setHp]         = useState({ subject:"", website:"", phone:"" }); // honeypot
  const [sent, setSent]     = useState(false);
  const [sending, setSending] = useState(false);
  const mountTime           = useRef(Date.now()); // time-gate: reject if < 2500ms
  // CF_TURNSTILE_TOKEN placeholder — set by widget callback once Turnstile is wired
  const [cfToken, setCfToken] = useState("");

  const topics = [
    { id:"general",  label: { en:"General",          es:"General" } },
    { id:"refund",   label: { en:"Refund",           es:"Reembolso" } },
    { id:"press",    label: { en:"Press",            es:"Prensa" } },
    { id:"sponsor",  label: { en:"Sponsorship",      es:"Patrocinio" } },
    { id:"schools",  label: { en:"Schools · B2B",    es:"Colegios · B2B" } },
    { id:"editor",   label: { en:"Reply to editor",  es:"Responder a editor" } },
  ];

  function handleSubmit(e) {
    e.preventDefault();
    // Honeypot: bot filled a hidden field → silent accept (don't reveal detection)
    if (hp.subject || hp.website || hp.phone) { setSent(true); return; }
    // Time gate: submitted in under 2.5s → bot
    if (Date.now() - mountTime.current < 2500) { setSent(true); return; }

    setSending(true);
    fetch(CONTACT_ENDPOINT, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        name: form.name, email: form.email, topic: form.topic, msg: form.msg,
        cf_token: cfToken, // CF Turnstile token — validated server-side when wired
      }),
    })
    .then(() => { setSending(false); setSent(true); })
    .catch(() => { setSending(false); setSent(true); }); // optimistic: show success, log server-side
  }

  if (sent) return (
    <div style={{ textAlign:"center", padding:"4rem 1rem" }}>
      <div style={{ fontSize:"3rem", marginBottom:"1rem" }}>✓</div>
      <h2 className="serif italic" style={{ fontWeight: 400, fontSize:"1.8rem", color: theme.text, marginBottom: 8 }}>
        {lang==="en"?"Received.":"Recibido."}
      </h2>
      <p style={{ fontSize:".95rem", color: theme.text2, maxWidth: 440, margin:"0 auto", lineHeight: 1.65, fontWeight: 300 }}>
        {lang==="en"
          ? "An editor reads every message. You'll hear back within two business days — usually faster."
          : "Un editor lee cada mensaje. Te respondemos en dos días hábiles — normalmente antes."}
      </p>
    </div>
  );
  return (
    <div style={{ display:"grid", gridTemplateColumns:"1.2fr 1fr", gap:"4rem", alignItems:"start" }} className="grid-2">
      <form onSubmit={handleSubmit} style={{ display:"flex", flexDirection:"column", gap:"1rem" }}>
        <h2 className="serif italic" style={{ fontWeight: 400, fontSize:"clamp(1.4rem, 2.8vw, 2rem)", color: theme.text, marginBottom: 4, lineHeight: 1.15 }}>
          {lang==="en"?"Write to us.":"Escríbenos."}
        </h2>
        <p style={{ fontSize:".95rem", color: theme.text2, fontWeight: 300, lineHeight: 1.7, marginBottom:".5rem" }}>
          {lang==="en"?"No bots. An editor reads every message and replies in person.":"Sin bots. Un editor lee y responde personalmente."}
        </p>

        {/* Honeypot trap — invisible to humans, irresistible to bots */}
        <div aria-hidden="true" style={{ position:"absolute", left:"-9999px", top:"-9999px", width:1, height:1, overflow:"hidden", opacity:0, pointerEvents:"none" }}>
          <label>Subject *<input type="text" name="subject" value={hp.subject} tabIndex={-1} autoComplete="off" onChange={e => setHp({...hp, subject: e.target.value})}/></label>
          <label>Website *<input type="url"  name="website" value={hp.website} tabIndex={-1} autoComplete="off" onChange={e => setHp({...hp, website: e.target.value})}/></label>
          <label>Phone *  <input type="tel"  name="phone"   value={hp.phone}   tabIndex={-1} autoComplete="off" onChange={e => setHp({...hp, phone:   e.target.value})}/></label>
        </div>

        <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"1rem" }}>
          <ContactField label={lang==="en"?"Name":"Nombre"}  theme={theme} dark={dark}
            value={form.name}  on={v => setForm({...form, name: v})}/>
          <ContactField label={lang==="en"?"Email":"Email"}  theme={theme} dark={dark} type="email"
            value={form.email} on={v => setForm({...form, email: v})}/>
        </div>

        <div>
          <div className="label-tiny" style={{ color: theme.text3, marginBottom: 6 }}>{lang==="en"?"Topic":"Tema"}</div>
          <div style={{ display:"flex", flexWrap:"wrap", gap: 6 }}>
            {topics.map(t => (
              <button type="button" key={t.id} onClick={() => setForm({...form, topic: t.id})} style={{
                padding:"6px 12px", borderRadius: 14,
                background: form.topic === t.id ? theme.sage : theme.sage3,
                color: form.topic === t.id ? (dark?"#050F07":"#fff") : theme.text2,
                border:`1px solid ${form.topic === t.id ? theme.sage : theme.border2}`,
                fontSize:".76rem", cursor:"pointer",
              }}>{t.label[lang]}</button>
            ))}
          </div>
        </div>

        <div>
          <div className="label-tiny" style={{ color: theme.text3, marginBottom: 6 }}>{lang==="en"?"Message":"Mensaje"}</div>
          <textarea value={form.msg} onChange={e => setForm({...form, msg: e.target.value})} rows={6}
            style={{
              width:"100%", resize:"vertical", padding:"12px 14px",
              background: dark ? "rgba(255,255,255,.04)" : "#fff",
              border:`1px solid ${theme.border2}`, borderRadius: 4,
              color: theme.text, fontSize:".95rem", outline:"none", fontFamily:"inherit", lineHeight: 1.5,
            }}/>
        </div>

        {/* CF_TURNSTILE_WIDGET — mount here when site key is registered in CF dashboard */}

        <button type="submit" disabled={sending} style={{
          alignSelf:"flex-start", marginTop: 6,
          background: theme.sage, color: dark?"#050F07":"#fff", border:"none",
          padding:"12px 26px", borderRadius: 24, fontSize:".88rem", fontWeight: 600,
          cursor: sending ? "wait" : "pointer", opacity: sending ? .7 : 1,
        }}>{sending ? (lang==="en"?"Sending…":"Enviando…") : (lang==="en"?"Send":"Enviar")} {!sending && "→"}</button>
      </form>

      <div style={{
        background: dark ? theme.panel : "#fff", border:`1px solid ${theme.border}`,
        borderRadius: 8, padding:"1.75rem",
      }}>
        <div className="label-tiny" style={{ color: theme.gold, marginBottom: 10 }}>{lang==="en"?"Direct lines":"Líneas directas"}</div>
        {[
          ["hello@wisetip.net",  lang==="en"?"General":"General"],
          ["editors@wisetip.net",lang==="en"?"Reply to an editor":"Responder a un editor"],
          ["refund@wisetip.net", lang==="en"?"Refund — no questions":"Reembolso — sin preguntas"],
          ["press@wisetip.net",  lang==="en"?"Press":"Prensa"],
          ["sponsor@wisetip.net",lang==="en"?"Sponsorships":"Patrocinios"],
          ["schools@wisetip.net",lang==="en"?"Schools":"Colegios"],
        ].map(([mail, l]) => (
          <div key={mail} style={{ marginTop: 12, paddingTop: 12, borderTop:`1px solid ${theme.divider}` }}>
            <div className="label-tiny" style={{ color: theme.text3, marginBottom: 3 }}>{l}</div>
            <div style={{ fontSize:".88rem", color: theme.text }}>{mail}</div>
          </div>
        ))}
      </div>
    </div>
  );
}
function ContactField({ label, value, on, type = "text", theme, dark }) {
  return (
    <label style={{ display:"flex", flexDirection:"column", gap: 6 }}>
      <span className="label-tiny" style={{ color: theme.text3 }}>{label}</span>
      <input type={type} value={value} onChange={e => on(e.target.value)} style={{
        padding:"10px 14px",
        background: dark ? "rgba(255,255,255,.04)" : "#fff",
        border:`1px solid ${theme.border2}`, borderRadius: 4,
        color: theme.text, fontSize:".95rem", outline:"none",
      }}/>
    </label>
  );
}

// ── LEGAL ──────────────────────────────────────────────
function LegalTab({ theme, dark, lang }) {
  const [section, setSection] = useState("privacy");
  const sections = [
    { id:"privacy",   label: { en:"Privacy",          es:"Privacidad" } },
    { id:"terms",     label: { en:"Terms",            es:"Términos" } },
    { id:"editorial", label: { en:"Editorial rules",  es:"Reglas editoriales" } },
    { id:"refunds",   label: { en:"Refunds",          es:"Reembolsos" } },
  ];

  const bodies = {
    privacy: [
      { h: { en:"What we collect",       es:"Qué recogemos" },
        b: { en:"Your email, the editions you open, the activities you save. That's it. We do not track individual children, we do not place advertising cookies, and we never sell any data — to anyone, for any price.", es:"Tu email, las ediciones que abres, las actividades que guardas. Nada más. No rastreamos niños individualmente, no usamos cookies publicitarias y no vendemos datos — a nadie, por ningún precio." } },
      { h: { en:"Where it lives",        es:"Dónde se guarda" },
        b: { en:"On servers in the EU. Encrypted at rest. Backups rotate every 30 days.", es:"En servidores en la UE. Cifrado en reposo. Copias rotan cada 30 días." } },
      { h: { en:"Your rights",           es:"Tus derechos" },
        b: { en:"Export everything, delete everything, change your mind. Write to privacy@wisetip.net — an editor will handle it within 72 hours.", es:"Exporta todo, borra todo, cambia de opinión. Escribe a privacy@wisetip.net — un editor lo gestiona en 72h." } },
    ],
    terms: [
      { h: { en:"What you get",          es:"Qué recibes" },
        b: { en:"WiseTip+ unlocks every published edition, the activity packs, the audiobook library, and the TailorAudioBooks engine at member pricing. Billing is monthly or annual, cancellable any time from your library page.", es:"WiseTip+ desbloquea todas las ediciones publicadas, los packs, la biblioteca de audiolibros y el motor de TailorAudioBooks con precio miembro. Facturación mensual o anual, cancelable desde tu biblioteca." } },
      { h: { en:"What you give",         es:"Qué das" },
        b: { en:"Personal use only. You can play an audiobook on a school trip; you cannot host it on a public server or use it to train another AI model.", es:"Uso personal. Puedes reproducir un audiolibro en una excursión escolar; no puedes alojarlo en un servidor público ni usarlo para entrenar otro modelo de IA." } },
      { h: { en:"If something breaks",   es:"Si algo se rompe" },
        b: { en:"We are not IT professionals, nor community managers, nor experts in any of this. We are humans who started something we care about and we will do our best to fix it as soon as possible. Write to hello@wisetip.net and please tell us how we could best serve you — that matters to us more than the problem itself.", es:"No somos profesionales de IT, ni gestores de comunidades, ni expertos en nada de esto. Somos personas que empezaron algo que les importa y haremos lo posible por resolverlo cuanto antes. Escribe a hello@wisetip.net y cuéntanos cómo podemos servirte mejor — eso nos importa más que el problema en sí." } },
    ],
    editorial: [
      { h: { en:"One sponsor per edition", es:"Un patrocinador por edición" },
        b: { en:"At most one above-the-fold sponsor and one mid-letter mention per edition. Never inside premium content. Editorial veto applies.", es:"Máximo un patrocinador top y uno mid por edición. Nunca dentro del contenido premium. Veto editorial aplica." } },
      { h: { en:"No advertorials",         es:"Sin publirreportajes" },
        b: { en:"Sponsors do not see content before publication. We have declined more sponsors than we have accepted.", es:"Los patrocinadores no ven el contenido antes de publicarse. Hemos rechazado más de los que hemos aceptado." } },
      { h: { en:"Real replies",            es:"Respuestas reales" },
        b: { en:"Every parent reply is read. A rotating editor pulls the most resonant for the next edition's opening. No automation.", es:"Cada respuesta se lee. Un editor rotativo elige las más resonantes para abrir la siguiente edición. Sin automatización." } },
      { h: { en:"Children are not products",es:"Los niños no son productos" },
        b: { en:"We do not photograph children for the site. We do not publish parent names without explicit consent. We do not run engagement experiments on family content.", es:"No fotografiamos niños para el sitio. No publicamos nombres de padres sin consentimiento explícito. No hacemos experimentos de engagement con contenido familiar." } },
    ],
    refunds: [
      { h: { en:"Memberships",  es:"Membresías" },
        b: { en:"Full refund in the first 14 days, no questions. After that, pro-rated for the unused period. Write to refund@wisetip.net — no form, no survey.", es:"Reembolso íntegro en los primeros 14 días, sin preguntas. Después, proporcional al período no usado. Escribe a refund@wisetip.net — sin formulario, sin encuesta." } },
      { h: { en:"Packs & TailorAudioBooks", es:"Packs y TailorAudioBooks" },
        b: { en:"If a generated audiobook does not match the brief, we'll regenerate it or refund. If a pack does not work for your family, we'll refund. One request per family per quarter.", es:"Si un audiolibro generado no coincide con el brief, lo regeneramos o reembolsamos. Si un pack no funciona, reembolsamos. Una solicitud por familia por trimestre." } },
    ],
  };

  return (
    <div style={{ display:"grid", gridTemplateColumns:"220px 1fr", gap:"3rem", alignItems:"start" }} className="legal-grid">
      <nav style={{ display:"flex", flexDirection:"column", gap: 4 }}>
        {sections.map(s => (
          <button key={s.id} onClick={() => setSection(s.id)} style={{
            background: section === s.id ? theme.sage3 : "transparent",
            border: "none",
            borderLeft: `2px solid ${section === s.id ? theme.sage : "transparent"}`,
            color: section === s.id ? theme.text : theme.text2,
            padding:"10px 14px", textAlign:"left", cursor:"pointer",
            fontSize:".88rem",
          }}>{s.label[lang]}</button>
        ))}
        <div style={{ fontSize:".7rem", color: theme.text3, marginTop:"1rem", paddingLeft: 14, lineHeight: 1.6 }}>
          {lang==="en"?"Last updated · Apr 8, 2026":"Actualizado · 8 Abr 2026"}
        </div>
      </nav>
      <div>
        {bodies[section].map((b, i) => (
          <div key={i} style={{ marginBottom:"2rem", paddingBottom:"1.5rem", borderBottom: i === bodies[section].length-1 ? "none" : `1px solid ${theme.divider}` }}>
            <h3 className="serif italic" style={{ fontWeight: 400, fontSize:"1.3rem", color: theme.text, marginBottom: 8 }}>
              {b.h[lang]}
            </h3>
            <p style={{ fontSize:".95rem", color: theme.text2, fontWeight: 300, lineHeight: 1.75, maxWidth: 640 }}>
              {b.b[lang]}
            </p>
          </div>
        ))}
      </div>
      <style>{`@media (max-width: 720px) { .legal-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; } }`}</style>
    </div>
  );
}

Object.assign(window, { AboutPage });