// ── OUR STORY page ─────────────────────────────────────────
// Route: #story
// Five sections: Manifesto hero → Editors → How it works → Why WiseTip → CTA

function StoryPage({ theme, dark, lang, nav, isMember }) {
  const N = nav || (() => {});

  // ── data ──────────────────────────────────────────────────
  const editors = [
    {
      name: "Markus",
      city: { en: "Barcelona", es: "Barcelona" },
      since: { en: "Founding editor · 2022 · 62 lead editions · 6 second voice", es: "Editor fundador · 2022 · 62 ediciones principales · 6 segunda voz" },
      bio: {
        en: "Markus wrote the first edition on a Tuesday night when the house was finally quiet. He was not trying to start something. He was trying to make sense of a week in which his oldest had stopped asking for the tablet and started asking questions instead. He still edits every Tuesday.",
        es: "Markus escribió la primera edición un martes por la noche cuando la casa ya estaba en silencio. No pretendía empezar nada. Intentaba entender una semana en la que su hijo mayor había dejado de pedir la tablet y había empezado a hacer preguntas. Sigue editando todos los martes.",
      },
    },
    {
      name: "Victor",
      city: { en: "Vienna", es: "Viena" },
      since: { en: "Editor · 2023 · 43 lead editions · 6 second voice", es: "Editor · 2023 · 43 ediciones principales · 6 segunda voz" },
      bio: {
        en: "Victor joined after edition forty-three, which he had shared with seven families in his building. He covers the quieter side of the system — the evenings that do not go as planned, the conversations that happen in transit, the child who does not fit the standard frame.",
        es: "Victor se unió después de la edición cuarenta y tres, que había compartido con siete familias de su edificio. Cubre el lado más silencioso del sistema: las tardes que no salen como se planearon, las conversaciones que ocurren de camino, el niño que no encaja en el molde.",
      },
    },
    {
      name: "Marian",
      city: { en: "London", es: "Londres" },
      since: { en: "Editor · 2023 · 45 lead editions · 7 second voice", es: "Editora · 2023 · 45 ediciones principales · 7 segunda voz" },
      bio: {
        en: "Marian came from ten years in primary education before she started reading WiseTip as a parent. Her editions tend to begin mid-scene — in a classroom, on a staircase, at the end of a bad afternoon — and work outward from there. She edits the practical insight block for the whole team.",
        es: "Marian venía de diez años en educación primaria cuando empezó a leer WiseTip como madre. Sus ediciones suelen comenzar a mitad de escena — en un aula, en una escalera, al final de una mala tarde — y avanzan desde ahí. Edita el bloque de insight práctico para todo el equipo.",
      },
    },
    {
      name: "Alex",
      city: { en: "New York", es: "Nueva York" },
      since: { en: "Editor · 2024 · 41 lead editions · 7 second voice", es: "Editor · 2024 · 41 ediciones principales · 7 segunda voz" },
      bio: {
        en: "Alex covers the archive. He joined after a reader suggested that the early editions — the ones written when there were forty subscribers — deserved a second reading. He spent three months revisiting them before writing his first original edition. He is still writing every other week.",
        es: "Alex cubre el archivo. Se unió después de que un lector sugiriera que las primeras ediciones — las escritas cuando había cuarenta suscriptores — merecían una segunda lectura. Pasó tres meses revisándolas antes de escribir su primera edición original. Sigue escribiendo cada dos semanas.",
      },
    },
  ];

  const blocks = [
    {
      n: "01", key: "opening",
      en: ["Opening", "A scene. Something that happened. The week rendered in two or three paragraphs."],
      es: ["Apertura", "Una escena. Algo que ocurrió. La semana en dos o tres párrafos."],
    },
    {
      n: "02", key: "story",
      en: ["Story", "The longer piece. A real situation, observed without advice."],
      es: ["Historia", "La pieza larga. Una situación real, observada sin consejos."],
    },
    {
      n: "03", key: "reflection",
      en: ["Reflection", "What the editors noticed. What they are still wondering about."],
      es: ["Reflexión", "Lo que los editores notaron. Lo que aún se preguntan."],
    },
    {
      n: "04", key: "insight",
      en: ["Practical insight", "One thing to try. Written to fit a Tuesday afternoon."],
      es: ["Insight práctico", "Una cosa que probar. Escrita para caber en una tarde de martes."],
    },
    {
      n: "05", key: "activity",
      en: ["Activity", "A hands-on prompt. Age-ranged, season-aware. WiseTip+ only."],
      es: ["Actividad", "Un ejercicio concreto. Por edades y estación. Solo WiseTip+."],
      premium: true,
    },
    {
      n: "06", key: "resources",
      en: ["Resources", "Three or four things the editors actually read that week. WiseTip+ only."],
      es: ["Recursos", "Tres o cuatro cosas que los editores leyeron esa semana. Solo WiseTip+."],
      premium: true,
    },
    {
      n: "07", key: "closing",
      en: ["Closing", "One paragraph. Quiet. WiseTip+ only."],
      es: ["Cierre", "Un párrafo. Tranquilo. Solo WiseTip+."],
      premium: true,
    },
    {
      n: "08", key: "bonus",
      en: ["Bonus chapter", "When inspiration arrives between editions: a 6–10 chapter story, released one chapter at a time on Saturdays. Not every week — only when the writing is ready. WiseTip+ only."],
      es: ["Capítulo extra", "Cuando la inspiración llega entre ediciones: una historia de 6–10 capítulos, publicada un capítulo a la vez los sábados. No cada semana — solo cuando la escritura está lista. Solo WiseTip+."],
      premium: true,
    },
  ];

  const reasons = lang === "en" ? [
    ["No algorithm", "WiseTip arrives once a week, at the same time, via email. There is no feed, no recommendation loop, no engagement hook."],
    ["Written by parents, for parents", "All four editors are parents. Everything in the editions comes from lived situations, not research abstractions."],
    ["Both languages, always", "Every edition is published simultaneously in English and Spanish. Not translated — co-written."],
    ["The content earns the subscription", "The freemium edition is a real piece of writing, not a teaser. The premium layer adds depth, not just length."],
    ["No advertising inside the content", "Sponsors exist. They are disclosed, they appear above the fold, and they never touch the editorial."],
    ["You can reply", "Every edition has a reply address. An editor reads it. Many reader replies have shaped future editions directly."],
  ] : [
    ["Sin algoritmo", "WiseTip llega una vez a la semana, a la misma hora, por email. No hay feed, no hay bucle de recomendación, no hay gancho de engagement."],
    ["Escrito por padres, para padres", "Los cuatro editores son padres. Todo en las ediciones viene de situaciones vividas, no de abstracciones de investigación."],
    ["Los dos idiomas, siempre", "Cada edición se publica simultáneamente en inglés y español. No traducida — co-escrita."],
    ["El contenido se gana la suscripción", "La edición freemium es una pieza real de escritura, no un adelanto. La capa premium añade profundidad, no solo extensión."],
    ["Sin publicidad dentro del contenido", "Los patrocinadores existen. Se revelan, aparecen antes del desplazamiento y nunca tocan la editorial."],
    ["Puedes responder", "Cada edición tiene una dirección de respuesta. Un editor la lee. Muchas respuestas han dado forma directamente a ediciones futuras."],
  ];

  // ── styles ─────────────────────────────────────────────────
  const stS = {
    section: { padding:"clamp(4rem,9vh,7rem) clamp(1.5rem,5vw,5vw)" },
    h2: { fontFamily:"'Cormorant Garamond',serif", fontStyle:"italic", fontWeight:300, fontSize:"clamp(2rem,4vw,3.2rem)", lineHeight:1.05, letterSpacing:"-.02em", marginBottom:"1.25rem" },
    body: { fontSize:"1rem", lineHeight:1.8, fontWeight:300, color:theme.text2, maxWidth:640 },
    eyebrow: { fontFamily:"'JetBrains Mono',monospace", fontSize:".68rem", letterSpacing:".12em", textTransform:"uppercase", color:theme.sage, marginBottom:".75rem" },
  };

  return (
    <div style={{ background:theme.bg, color:theme.text }}>

      {/* ── 1. HERO ── */}
      <section style={{
        position:"relative", overflow:"hidden", minHeight:"88vh",
        background: dark ? "#0B1C12" : "#1A2E1C",
        display:"flex", flexDirection:"column", justifyContent:"center",
        padding:"clamp(6rem,14vh,10rem) clamp(1.5rem,5vw,5vw) clamp(4rem,8vh,6rem)",
      }}>
        <Particles count={20} theme={{ sage:theme.sage }}/>
        <Trees theme={theme} dark={true}/>
        <Grain amount={.05}/>
        <div className="wrap" style={{ position:"relative", zIndex:1, maxWidth:860 }}>
          <div style={stS.eyebrow}>{lang==="en"?"WiseTip · Our story":"WiseTip · Nuestra historia"}</div>
          <h1 className="serif" style={{
            fontStyle:"italic", fontWeight:300,
            fontSize:"clamp(2.6rem,6vw,5rem)",
            color:"#F0EBE0", lineHeight:1.0, letterSpacing:"-.025em",
            marginBottom:"2rem",
          }}>
            {lang==="en"
              ? <>Not anti-screen.<br/><em style={{color:theme.sage}}>Pro-intention.</em></>
              : <>No anti-pantallas.<br/><em style={{color:theme.sage}}>Pro-intención.</em></>}
          </h1>
          <p style={{ fontSize:"clamp(1rem,1.5vw,1.2rem)", lineHeight:1.75, fontWeight:300, color:"rgba(240,235,224,.72)", maxWidth:620, marginBottom:"3rem" }}>
            {lang==="en"
              ? "It started in November 2022 with one parent typing a letter at 11pm. No plan. No audience. Just the need to make sense of a particular week with children and screens and silence. Today it's four editors writing from four cities, and 2,100 families reading on a Tuesday."
              : "Empezó en noviembre de 2022 con un padre escribiendo una carta a las 11pm. Sin plan. Sin audiencia. Solo la necesidad de entender una semana particular con niños, pantallas y silencio. Hoy son cuatro editores desde cuatro ciudades y 2.100 familias leyendo un martes."}
          </p>
          {/* wife's verbatim quote */}
          <blockquote style={{
            borderLeft:`3px solid ${theme.sage}`, paddingLeft:"1.5rem",
            maxWidth:560,
          }}>
            <p className="serif" style={{ fontStyle:"italic", fontSize:"clamp(1.1rem,2vw,1.5rem)", fontWeight:300, color:"#F0EBE0", lineHeight:1.4, marginBottom:".5rem" }}>
              {lang==="en"
                ? "\u201cWe didn\u2019t take away their screens. We forgot the cable. They did the rest.\u201d"
                : "\u00abNo les quitamos las pantallas. Olvidamos el cable. Ellos hicieron el resto.\u00bb"}
            </p>
            <cite style={{ fontSize:".78rem", color:"rgba(240,235,224,.4)", fontStyle:"normal", fontFamily:"'JetBrains Mono',monospace", letterSpacing:".08em" }}>
              {lang==="en"?"— Edition #1, November 2022":"— Edición #1, noviembre 2022"}
            </cite>
          </blockquote>
        </div>
      </section>

      {/* ── 2. EDITORS ── */}
      <section style={{ ...stS.section, background:theme.bg }}>
        <div className="wrap">
          <div style={stS.eyebrow}>{lang==="en"?"The editors":"Los editores"}</div>
          <h2 className="serif" style={{ ...stS.h2, color:theme.text }}>
            {lang==="en"?"Four parents. Four cities.":"Cuatro padres. Cuatro ciudades."}
          </h2>
          <p style={{ ...stS.body, marginBottom:"3.5rem" }}>
            {lang==="en"
              ? "No editorial board. No content strategy team. Four people who became parents in different cities and found that the hardest part was not the big decisions — it was the ordinary Tuesdays."
              : "Sin consejo editorial. Sin equipo de estrategia de contenido. Cuatro personas que se convirtieron en padres en ciudades distintas y descubrieron que la parte más difícil no eran las grandes decisiones, sino los martes ordinarios."}
          </p>
          <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit, minmax(260px, 1fr))", gap:"1.5rem" }}>
            {editors.map(ed => (
              <div key={ed.name} style={{
                background: dark ? theme.panel : "#fff",
                border:`1px solid ${theme.border}`,
                borderRadius:8, padding:"2rem",
              }}>
                <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom:"1.25rem" }}>
                  <div>
                    <div className="serif" style={{ fontSize:"1.6rem", fontWeight:400, color:theme.text, lineHeight:1 }}>{ed.name}</div>
                    <div style={{ fontSize:".82rem", color:theme.sage, marginTop:4 }}>{ed.city[lang]}</div>
                  </div>
                  <div style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:".62rem", color:theme.text3, letterSpacing:".06em", textAlign:"right", lineHeight:1.5 }}>
                    {ed.since[lang].split("·").map((s,i)=><div key={i}>{s.trim()}</div>)}
                  </div>
                </div>
                <p style={{ fontSize:".9rem", lineHeight:1.75, fontWeight:300, color:theme.text2 }}>{ed.bio[lang]}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── 3. HOW IT WORKS ── */}
      <section style={{ ...stS.section, background:theme.bg2 }}>
        <div className="wrap">
          <div style={stS.eyebrow}>{lang==="en"?"Every Tuesday — and Saturdays":"Cada martes — y los sábados"}</div>
          <h2 className="serif" style={{ ...stS.h2, color:theme.text }}>
            {lang==="en"?"Seven blocks. One letter. A chapter when it happens.":"Siete bloques. Una carta. Un capítulo cuando llega."}
          </h2>
          <p style={{ ...stS.body, marginBottom:"3rem" }}>
            {lang==="en"
              ? "WiseTip is a structured form, not a blog. Each edition has the same seven parts in the same order. The structure is a promise: you always know what's coming, and the editors always know what they owe you."
              : "WiseTip es una forma estructurada, no un blog. Cada edición tiene los mismos siete bloques en el mismo orden. La estructura es una promesa: siempre sabes qué viene, y los editores siempre saben qué te deben."}
          </p>
          <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit, minmax(240px, 1fr))", gap:"1px", background:theme.divider, borderRadius:8, overflow:"hidden" }}>
            {blocks.map(b => (
              <div key={b.n} style={{
                background: dark ? theme.panel : "#fff",
                padding:"1.5rem",
                borderLeft: b.premium ? `3px solid ${theme.gold}` : `3px solid ${theme.sage}`,
              }}>
                <div style={{ display:"flex", justifyContent:"space-between", marginBottom:".75rem" }}>
                  <span className="mono" style={{ fontSize:".65rem", color: b.premium ? theme.gold : theme.sage, letterSpacing:".1em" }}>{b.n}</span>
                  {b.premium && <span style={{ fontSize:".6rem", fontFamily:"'JetBrains Mono',monospace", color:theme.gold, letterSpacing:".08em", background:theme.gold2, padding:"2px 8px", borderRadius:10 }}>WiseTip+</span>}
                </div>
                <div style={{ fontWeight:500, fontSize:".92rem", color:theme.text, marginBottom:".4rem" }}>{b[lang==="en"?"en":"es"][0]}</div>
                <div style={{ fontSize:".82rem", color:theme.text2, lineHeight:1.65, fontWeight:300 }}>{b[lang==="en"?"en":"es"][1]}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop:"2rem", padding:"1.25rem 1.5rem", background:theme.gold2, border:`1px solid ${theme.lockedBd}`, borderRadius:6, maxWidth:620 }}>
            <p style={{ fontSize:".88rem", color:theme.text2, lineHeight:1.7, fontWeight:300 }}>
              {lang==="en"
                ? `The free edition includes blocks 01–04 in a shorter form. WiseTip+ unlocks the full depth of all seven — plus bonus chapters when they arrive, and the complete archive of ${WS_CURRENT && WS_CURRENT.num || 197} editions.`
                : `La edición gratuita incluye los bloques 01–04 en forma breve. WiseTip+ desbloquea la profundidad completa de los siete — y el archivo completo de ${WS_CURRENT && WS_CURRENT.num || 197} ediciones.`}
            </p>
          </div>
        </div>
      </section>

      {/* ── 4. WHY WISETIP ── */}
      <section style={{ ...stS.section, background:theme.bg }}>
        <div className="wrap">
          <div style={stS.eyebrow}>{lang==="en"?"Why WiseTip":"Por qué WiseTip"}</div>
          <h2 className="serif" style={{ ...stS.h2, color:theme.text }}>
            {lang==="en"?"What makes it different.":"Qué lo hace diferente."}
          </h2>
          <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit, minmax(280px, 1fr))", gap:"2rem", marginTop:"2.5rem" }}>
            {reasons.map(([title, body], i) => (
              <div key={i}>
                <div style={{ width:32, height:2, background:theme.sage, marginBottom:"1rem" }}/>
                <div style={{ fontWeight:500, fontSize:".95rem", color:theme.text, marginBottom:".5rem" }}>{title}</div>
                <p style={{ fontSize:".88rem", color:theme.text2, lineHeight:1.75, fontWeight:300 }}>{body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── 5. CTA ── */}
      <section style={{
        position:"relative", overflow:"hidden",
        background: dark ? "#0B1C12" : "#1A2E1C",
        padding:"clamp(5rem,10vh,8rem) clamp(1.5rem,5vw,5vw)",
        textAlign:"center",
      }}>
        <Grain amount={.04}/>
        <div className="wrap" style={{ position:"relative", zIndex:1, maxWidth:620, margin:"0 auto" }}>
          <div style={stS.eyebrow}>{lang==="en"?"Start reading":"Empieza a leer"}</div>
          <h2 className="serif" style={{ fontStyle:"italic", fontWeight:300, fontSize:"clamp(2rem,4vw,3.2rem)", color:"#F0EBE0", lineHeight:1.05, marginBottom:"1.25rem" }}>
            {lang==="en"?"The next edition ships Tuesday.":"La próxima edición sale el martes."}
          </h2>
          <p style={{ fontSize:".95rem", color:"rgba(240,235,224,.6)", lineHeight:1.75, fontWeight:300, marginBottom:"2.5rem" }}>
            {lang==="en"
              ? "Join free. Read this week's edition. Upgrade only if you want the full depth."
              : "Únete gratis. Lee la edición de esta semana. Mejora solo si quieres la profundidad completa."}
          </p>
          <div style={{ display:"flex", gap:"1rem", justifyContent:"center", flexWrap:"wrap" }}>
            <button onClick={() => N("signup")} style={{
              background:theme.sage, color: dark?"#050F07":"#fff",
              border:"none", padding:"14px 32px", borderRadius:28,
              fontSize:".95rem", fontWeight:600, cursor:"pointer",
            }}>{lang==="en"?"Join free →":"Únete gratis →"}</button>
            <button onClick={() => N("edition")} style={{
              background:"transparent", color:"rgba(240,235,224,.75)",
              border:"1px solid rgba(240,235,224,.2)", padding:"14px 28px", borderRadius:28,
              fontSize:".95rem", cursor:"pointer",
            }}>{lang==="en"?"Read a sample edition":"Leer una edición de muestra"}</button>
          </div>
        </div>
      </section>

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

Object.assign(window, { StoryPage });
