// ── ACTIVITY DETAIL PAGE ─────────────────────────────────────────────
// Full, printable view of one activity. Free activities open completely;
// premium ones show intro + materials + why as a taste, and gate the
// numbered steps + variations behind a WiseTip+ wall — the same freemium
// contract as the editions. Reads pageData.id.

function ActivityDetail({ theme, dark, lang, isMember, setIsMember, pageData, nav }) {
  const id = (pageData && pageData.id) || 1;
  const full = (window.WS_ACTIVITIES_FULL || {})[id];
  // Unified lookup: an activity's stub can live in the core WS_ACTIVITIES set
  // OR in WS_CATALOG (same id space — see data-activities-catalog.jsx). Every
  // card across both surfaces deep-links here; nothing falls through.
  const stub = (window.WS_ACTIVITIES || []).find(x => x.id === id) || (window.WS_CATALOG || []).find(x => x.id === id);
  const a = full || null;

  // Truly unknown id (shouldn't happen from any in-product link) — send the reader somewhere useful.
  if (!a && !stub) {
    return (
      <div style={{ background: theme.bg, color: theme.text, paddingTop: "8rem", minHeight: "100vh", textAlign: "center" }}>
        <div className="wrap-sm">
          <div className="serif italic" style={{ fontSize: "2rem", color: theme.text, marginBottom: ".75rem" }}>
            {lang === "en" ? "That activity isn't written up yet." : "Esa actividad aún no está redactada."}
          </div>
          <button onClick={() => nav("catalog")} style={{ background: theme.sage, color: dark ? "#050F07" : "#fff", border: "none", padding: "10px 20px", borderRadius: 22, fontSize: ".85rem", fontWeight: 600, marginTop: "1rem" }}>
            {lang === "en" ? "Browse all activities" : "Ver todas las actividades"} →
          </button>
        </div>
      </div>
    );
  }

  // Stub-only activity (catalog entries not yet given the full printable
  // treatment): render a concise but real detail view instead of gating on
  // content that doesn't exist yet.
  if (!a) {
    return <ActivityDetailConcise theme={theme} dark={dark} lang={lang} isMember={isMember} setIsMember={setIsMember} nav={nav} stub={stub}/>;
  }

  const seasonTag = (window.WS_SEASON_TAGS || []).find(t => (a.seasons || []).includes(t.id) && t.id !== "any");
  const accent = (seasonTag && seasonTag.hue) || theme.sage;
  const isPrem = a.tier === "premium";
  const locked = isPrem && !isMember;

  const need = (id) => (window.WS_NEEDS_TAGS || []).find(t => t.id === id);
  const season = (id) => (window.WS_SEASON_TAGS || []).find(t => t.id === id);

  return (
    <div style={{ background: theme.bg, color: theme.text, paddingTop: "5rem", minHeight: "100vh" }}>
      {/* HERO */}
      <header style={{ position: "relative", overflow: "hidden", background: dark ? "#0B1C12" : "#0E2318", color: "#F0EBE0", padding: "clamp(3rem,7vh,5rem) clamp(1.5rem,5vw,5vw) clamp(2.5rem,6vh,4rem)" }}>
        <Particles count={14} theme={{ sage: "#7DBE5A", sage3: "rgba(125,190,90,.08)" }}/>
        <Grain amount={.05}/>
        <div className="wrap-sm" style={{ position: "relative" }}>
          <button onClick={() => nav("catalog")} style={{ background: "none", border: "none", color: accent, cursor: "pointer", fontSize: ".78rem", marginBottom: "1.5rem", letterSpacing: ".05em" }}>
            ← {lang === "en" ? "All activities" : "Todas las actividades"}
          </button>
          <div style={{ display: "flex", gap: 8, marginBottom: "1.5rem", flexWrap: "wrap" }}>
            <Pill color={accent} bd={accent + "66"}>A.{String(a.id).padStart(3, "0")}</Pill>
            <Pill color={isPrem ? "#C8A85A" : "#9DC872"} bd={isPrem ? "#C8A85A66" : "#9DC87266"}>{isPrem ? "WiseTip+" : (lang === "en" ? "Free" : "Gratis")}</Pill>
            {a.edition && <Pill color="#9DC872" bd="#9DC87266">{lang === "en" ? "From edition" : "De la edición"} #{a.edition}</Pill>}
          </div>
          <h1 className="serif" style={{ fontStyle: "italic", fontWeight: 300, fontSize: "clamp(2.2rem,5.5vw,4rem)", color: "#F0EBE0", lineHeight: 1.05, letterSpacing: "-.015em", marginBottom: "1.25rem" }}>{a.title[lang]}</h1>
          <p style={{ color: "rgba(240,235,224,.65)", fontSize: "clamp(1rem,2.2vw,1.18rem)", lineHeight: 1.7, fontWeight: 300, maxWidth: 620, marginBottom: "2rem" }}>{a.intro[lang]}</p>
          <div style={{ display: "flex", gap: "1.75rem", flexWrap: "wrap", paddingTop: "1.25rem", borderTop: "1px solid rgba(255,255,255,.1)" }}>
            <Meta label={lang === "en" ? "Ages" : "Edades"} value={`${a.ages[0]}\u2013${a.ages[1]}`}/>
            <Meta label={lang === "en" ? "Time" : "Tiempo"} value={`${a.duration} min`}/>
            <Meta label={lang === "en" ? "Best for" : "Mejor para"} value={seasonTag ? `${seasonTag.glyph} ${seasonTag.label[lang]}` : (lang === "en" ? "Any time" : "Cualquier época")}/>
          </div>
        </div>
      </header>

      {/* BODY */}
      <div style={{ padding: "3rem clamp(1.5rem,5vw,5vw) 1rem" }}>
        <div className="wrap-sm">

          {/* MATERIALS — always free */}
          <ADSection theme={theme} accent={accent} n="01" label={lang === "en" ? "You need" : "Necesitas"}>
            <ul style={{ listStyle: "none", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px 1.5rem" }} className="grid-2">
              {a.materials[lang].map((m, i) => (
                <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: ".95rem", color: theme.text2, lineHeight: 1.5 }}>
                  <span style={{ color: accent, marginTop: 1 }}>—</span>{m}
                </li>
              ))}
            </ul>
          </ADSection>

          {/* STEPS — gated for premium when not a member */}
          <ADSection theme={theme} accent={accent} n="02" label={lang === "en" ? "How it goes" : "Cómo va"}>
            {locked ? (
              <ADWall theme={theme} dark={dark} lang={lang} accent={accent}
                onUnlock={() => setIsMember && setIsMember(true)} onPlans={() => nav("membership")}/>
            ) : (
              <ol style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 16 }}>
                {a.steps[lang].map((s, i) => (
                  <li key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <span style={{ flexShrink: 0, width: 28, height: 28, borderRadius: "50%", background: `${accent}1f`, border: `1px solid ${accent}66`, color: accent, fontSize: ".82rem", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "'JetBrains Mono',monospace" }}>{i + 1}</span>
                    <span style={{ fontSize: "1rem", color: theme.text2, lineHeight: 1.6, paddingTop: 2 }}>{s}</span>
                  </li>
                ))}
              </ol>
            )}
          </ADSection>

          {/* NOTICE + WHY — free taste (compelling on their own) */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1.5rem", margin: "0 0 2.75rem" }} className="grid-2">
            <div style={{ background: theme.sage3, border: `1px solid ${theme.border}`, borderRadius: 8, padding: "1.4rem 1.5rem" }}>
              <div className="label-tiny" style={{ color: accent, marginBottom: ".6rem" }}>{lang === "en" ? "What to notice" : "Qué observar"}</div>
              <p style={{ fontSize: ".95rem", color: theme.text2, lineHeight: 1.65, fontWeight: 300 }}>{a.notice[lang]}</p>
            </div>
            <div style={{ background: theme.sage3, border: `1px solid ${theme.border}`, borderRadius: 8, padding: "1.4rem 1.5rem" }}>
              <div className="label-tiny" style={{ color: theme.gold, marginBottom: ".6rem" }}>{lang === "en" ? "Why it works" : "Por qué funciona"}</div>
              <p style={{ fontSize: ".95rem", color: theme.text2, lineHeight: 1.65, fontWeight: 300 }}>{a.why[lang]}</p>
            </div>
          </div>

          {/* VARIATIONS — gated with steps */}
          {!locked && a.variations && (
            <ADSection theme={theme} accent={accent} n="03" label={lang === "en" ? "Variations" : "Variaciones"}>
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                {a.variations[lang].map((v, i) => (
                  <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: ".95rem", color: theme.text2, lineHeight: 1.6 }}>
                    <span style={{ color: accent, fontFamily: "'Cormorant Garamond',serif", fontSize: "1.2rem", lineHeight: 1 }}>◆</span>{v}
                  </div>
                ))}
              </div>
            </ADSection>
          )}

          {/* EDITOR NOTE */}
          {a.editorNote && (
            <div style={{ margin: "1rem 0 2.5rem", padding: "1.5rem 1.75rem", background: dark ? theme.panel : "#fff", border: `1px solid ${theme.border}`, borderLeft: `3px solid ${accent}`, borderRadius: 8 }}>
              <div className="label-tiny" style={{ color: accent, marginBottom: ".6rem" }}>{lang === "en" ? "Editor's note" : "Nota del editor"}</div>
              <p className="serif italic" style={{ fontSize: "1.1rem", color: dark ? "#E8DED0" : theme.text, lineHeight: 1.6, fontWeight: 300 }}>{a.editorNote[lang]}</p>
            </div>
          )}

          {/* DOWNSTREAM */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: ".75rem", marginBottom: "1rem" }} className="grid-2">
            {a.edition && (
              <button onClick={() => nav("edition", { num: a.edition })} style={{ background: theme.sage3, border: `1px solid ${theme.border}`, borderRadius: 8, padding: "1rem 1.25rem", textAlign: "left", cursor: "pointer" }}>
                <div className="label-tiny" style={{ color: theme.sage, marginBottom: 4 }}>{lang === "en" ? "Where it's from" : "De dónde viene"}</div>
                <div className="serif italic" style={{ fontSize: ".95rem", color: theme.text }}>{lang === "en" ? `Read edition #${a.edition} →` : `Lee la edición #${a.edition} →`}</div>
              </button>
            )}
            <button onClick={() => nav("catalog")} style={{ background: theme.sage3, border: `1px solid ${theme.border}`, borderRadius: 8, padding: "1rem 1.25rem", textAlign: "left", cursor: "pointer" }}>
              <div className="label-tiny" style={{ color: theme.gold, marginBottom: 4 }}>{lang === "en" ? "Find more" : "Encuentra más"}</div>
              <div className="serif italic" style={{ fontSize: ".95rem", color: theme.text }}>{lang === "en" ? "Browse by season & need →" : "Explora por temporada y necesidad →"}</div>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function Meta({ label, value }) {
  return (
    <div>
      <div className="label-tiny" style={{ color: "rgba(240,235,224,.5)", marginBottom: 3 }}>{label}</div>
      <div style={{ fontSize: ".92rem", color: "#F0EBE0" }}>{value}</div>
    </div>
  );
}

function ADSection({ theme, accent, n, label, children }) {
  return (
    <div style={{ marginBottom: "2.75rem" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: "1.25rem" }}>
        <span className="mono" style={{ fontSize: ".68rem", color: theme.text3 }}>{n}</span>
        <span style={{ width: 24, height: 1, background: accent, opacity: .55 }}/>
        <span className="label-tiny" style={{ color: accent }}>{label}</span>
      </div>
      {children}
    </div>
  );
}

function ADWall({ theme, dark, lang, accent, onUnlock, onPlans }) {
  return (
    <div style={{ background: dark ? "linear-gradient(180deg,#14301D,#0F2417)" : "linear-gradient(180deg,#fff,#F4F1E8)", border: `1px solid ${theme.gold}55`, borderRadius: 12, padding: "clamp(1.5rem,4vw,2.5rem)", textAlign: "center" }}>
      <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 44, height: 44, borderRadius: "50%", background: `${theme.gold}22`, border: `1px solid ${theme.gold}77`, color: theme.gold, fontSize: "1.15rem", marginBottom: ".9rem" }}>✦</span>
      <div className="label-tiny" style={{ color: theme.gold, marginBottom: ".5rem" }}>{lang === "en" ? "The full method is WiseTip+" : "El método completo es WiseTip+"}</div>
      <h3 className="serif italic" style={{ fontWeight: 400, fontSize: "clamp(1.4rem,3vw,1.9rem)", color: theme.text, lineHeight: 1.15, marginBottom: ".75rem", maxWidth: 460, marginLeft: "auto", marginRight: "auto" }}>
        {lang === "en" ? "Unlock the step-by-step and the variations" : "Desbloquea el paso a paso y las variaciones"}
      </h3>
      <p style={{ fontSize: ".92rem", color: theme.text2, fontWeight: 300, lineHeight: 1.6, maxWidth: 420, margin: "0 auto 1.5rem" }}>
        {lang === "en" ? "You've seen what to notice and why it works. Members get how to run it, plus ways to adapt it for your family." : "Ya has visto qué observar y por qué funciona. Los miembros reciben cómo llevarla a cabo, más formas de adaptarla a tu familia."}
      </p>
      <div style={{ display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap" }}>
        <button onClick={onPlans} style={{ background: theme.gold, border: "none", color: dark ? "#1A1206" : "#2A1E08", padding: "11px 22px", borderRadius: 24, fontSize: ".88rem", fontWeight: 600, cursor: "pointer" }}>{lang === "en" ? "See WiseTip+ →" : "Ver WiseTip+ →"}</button>
        <button onClick={onUnlock} style={{ background: "transparent", border: `1px solid ${theme.border2}`, color: theme.text3, padding: "10px 18px", borderRadius: 24, fontSize: ".8rem", cursor: "pointer" }}>{lang === "en" ? "Preview as member" : "Ver como miembro"}</button>
      </div>
    </div>
  );
}

// ── CONCISE DETAIL · for catalog-only activities without the full ──
// printable treatment yet (no materials/steps/variations authored). Real
// page, real content — just the stub's own fields, no dead end.
function ActivityDetailConcise({ theme, dark, lang, isMember, setIsMember, nav, stub }) {
  const seasonTag = (window.WS_SEASON_TAGS || []).find(t => (stub.seasons || []).includes(t.id) && t.id !== "any");
  const accent = (seasonTag && seasonTag.hue) || theme.sage;
  const isPrem = stub.tier === "premium";
  const need = (id) => (window.WS_NEEDS_TAGS || []).find(t => t.id === id);

  return (
    <div style={{ background: theme.bg, color: theme.text, paddingTop: "5rem", minHeight: "100vh" }}>
      <header style={{ position: "relative", overflow: "hidden", background: dark ? "#0B1C12" : "#0E2318", color: "#F0EBE0", padding: "clamp(3rem,7vh,5rem) clamp(1.5rem,5vw,5vw) clamp(2.5rem,6vh,4rem)" }}>
        <Particles count={14} theme={{ sage: "#7DBE5A", sage3: "rgba(125,190,90,.08)" }}/>
        <Grain amount={.05}/>
        <div className="wrap-sm" style={{ position: "relative" }}>
          <button onClick={() => nav("catalog")} style={{ background: "none", border: "none", color: accent, cursor: "pointer", fontSize: ".78rem", marginBottom: "1.5rem", letterSpacing: ".05em" }}>
            ← {lang === "en" ? "All activities" : "Todas las actividades"}
          </button>
          <div style={{ display: "flex", gap: 8, marginBottom: "1.5rem", flexWrap: "wrap" }}>
            <Pill color={accent} bd={accent + "66"}>A.{String(stub.id).padStart(3, "0")}</Pill>
            <Pill color={isPrem ? "#C8A85A" : "#9DC872"} bd={isPrem ? "#C8A85A66" : "#9DC87266"}>{isPrem ? "WiseTip+" : (lang === "en" ? "Free" : "Gratis")}</Pill>
          </div>
          <h1 className="serif" style={{ fontStyle: "italic", fontWeight: 300, fontSize: "clamp(2.2rem,5.5vw,4rem)", color: "#F0EBE0", lineHeight: 1.05, letterSpacing: "-.015em", marginBottom: "1.25rem" }}>{stub.title[lang]}</h1>
          <p style={{ color: "rgba(240,235,224,.65)", fontSize: "clamp(1rem,2.2vw,1.18rem)", lineHeight: 1.7, fontWeight: 300, maxWidth: 620, marginBottom: "2rem" }}>{stub.summary[lang]}</p>
          <div style={{ display: "flex", gap: "1.75rem", flexWrap: "wrap", paddingTop: "1.25rem", borderTop: "1px solid rgba(255,255,255,.1)" }}>
            <Meta label={lang === "en" ? "Ages" : "Edades"} value={`${stub.ages[0]}\u2013${stub.ages[1]}`}/>
            <Meta label={lang === "en" ? "Time" : "Tiempo"} value={`${stub.duration} min`}/>
            <Meta label={lang === "en" ? "Best for" : "Mejor para"} value={seasonTag ? `${seasonTag.glyph} ${seasonTag.label[lang]}` : (lang === "en" ? "Any time" : "Cualquier época")}/>
          </div>
        </div>
      </header>

      <div style={{ padding: "3rem clamp(1.5rem,5vw,5vw) 1rem" }}>
        <div className="wrap-sm">
          <ADSection theme={theme} accent={accent} n="01" label={lang === "en" ? "Good for" : "Bueno para"}>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {(stub.needs || []).map(nid => {
                const tag = need(nid); if (!tag) return null;
                return <span key={nid} style={{ fontSize: ".8rem", padding: "6px 14px", borderRadius: 16, background: theme.sage3, border: `1px solid ${theme.border2}`, color: theme.text2 }}>{tag.glyph} {tag.label[lang]}</span>;
              })}
            </div>
          </ADSection>

          <div style={{ background: dark ? theme.panel : "#fff", border: `1px solid ${theme.border}`, borderLeft: `3px solid ${accent}`, borderRadius: 8, padding: "1.5rem 1.75rem", marginBottom: "2.5rem" }}>
            <div className="label-tiny" style={{ color: accent, marginBottom: ".6rem" }}>{lang === "en" ? "A step-by-step guide for this one is in the works" : "El paso a paso de esta actividad está en camino"}</div>
            <p style={{ fontSize: ".92rem", color: theme.text2, fontWeight: 300, lineHeight: 1.6 }}>
              {lang === "en"
                ? "For now, the idea above is the whole activity — no special materials beyond what's already at home."
                : "Por ahora, la idea de arriba es la actividad entera — sin materiales especiales más allá de lo que ya hay en casa."}
            </p>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: ".75rem", marginBottom: "1rem" }} className="grid-2">
            <button onClick={() => nav("activities")} style={{ background: theme.sage3, border: `1px solid ${theme.border}`, borderRadius: 8, padding: "1rem 1.25rem", textAlign: "left", cursor: "pointer" }}>
              <div className="label-tiny" style={{ color: theme.sage, marginBottom: 4 }}>{lang === "en" ? "Explore" : "Explora"}</div>
              <div className="serif italic" style={{ fontSize: ".95rem", color: theme.text }}>{lang === "en" ? "All activities →" : "Todas las actividades →"}</div>
            </button>
            <button onClick={() => nav("catalog")} style={{ background: theme.sage3, border: `1px solid ${theme.border}`, borderRadius: 8, padding: "1rem 1.25rem", textAlign: "left", cursor: "pointer" }}>
              <div className="label-tiny" style={{ color: theme.gold, marginBottom: 4 }}>{lang === "en" ? "Find more" : "Encuentra más"}</div>
              <div className="serif italic" style={{ fontSize: ".95rem", color: theme.text }}>{lang === "en" ? "Browse by season & need →" : "Explora por temporada y necesidad →"}</div>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ActivityDetail });