// ── PACK DETAIL PAGE ─────────────────────────────────────────────────
// Full contents of one pack: intro, who-it's-for, how-to-use, format,
// the complete week-by-week table of contents, and one sample activity
// shown as a taste. Reads pageData.id. Buy-per-pack or WiseTip+.

function PDlum(hex) {
  const h = (hex || "#0E2318").replace("#", "");
  const r = parseInt(h.slice(0, 2), 16) / 255, g = parseInt(h.slice(2, 4), 16) / 255, b = parseInt(h.slice(4, 6), 16) / 255;
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function PackDetail({ theme, dark, lang, isMember, nav, pageData }) {
  const id = (pageData && pageData.id) || "winter";
  const p = (window.WS_PACKS || []).find(x => x.id === id);
  const full = (window.WS_PACKS_FULL || {})[id];

  if (!p) {
    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", marginBottom: ".75rem" }}>{lang === "en" ? "Pack not found." : "Pack no encontrado."}</div>
          <button onClick={() => nav("packs")} style={{ background: theme.sage, color: dark ? "#050F07" : "#fff", border: "none", padding: "10px 20px", borderRadius: 22, fontSize: ".85rem", fontWeight: 600, marginTop: "1rem" }}>{lang === "en" ? "All packs" : "Todos los packs"} →</button>
        </div>
      </div>
    );
  }

  const coverText = PDlum(p.cover) > 0.62 ? "#1B2B1E" : "#F0EBE0";
  const softText = PDlum(p.cover) > 0.62 ? "rgba(27,43,30,.7)" : "rgba(240,235,224,.7)";
  const sample = full && full.sampleActivityId ? (window.WS_ACTIVITIES_FULL || {})[full.sampleActivityId] : null;

  return (
    <div style={{ background: theme.bg, color: theme.text, paddingTop: "5rem", minHeight: "100vh" }}>
      {/* COVER HERO */}
      <header style={{ background: p.cover, color: coverText, padding: "clamp(3rem,7vh,5rem) clamp(1.5rem,5vw,5vw) clamp(2.5rem,6vh,4rem)", position: "relative", overflow: "hidden" }}>
        <Grain amount={.06}/>
        <div className="wrap" style={{ position: "relative" }}>
          <button onClick={() => nav("packs")} style={{ background: "none", border: "none", color: coverText, opacity: .8, cursor: "pointer", fontSize: ".78rem", marginBottom: "1.5rem", letterSpacing: ".05em" }}>← {lang === "en" ? "All packs" : "Todos los packs"}</button>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: "2rem", flexWrap: "wrap" }}>
            <div style={{ maxWidth: 640 }}>
              <div className="label-tiny" style={{ color: softText, marginBottom: ".75rem" }}>{p.season[lang]}</div>
              <h1 className="serif italic" style={{ fontWeight: 400, fontSize: "clamp(2.2rem,5.5vw,4rem)", lineHeight: 1.05, letterSpacing: "-.015em", marginBottom: "1.25rem" }}>{p.title[lang]}</h1>
              {full && <p style={{ fontSize: "clamp(1rem,2.2vw,1.15rem)", lineHeight: 1.7, fontWeight: 300, color: softText, maxWidth: 560 }}>{full.intro[lang]}</p>}
            </div>
            <span className="serif" style={{ fontSize: "clamp(3rem,8vw,6rem)", lineHeight: 1, fontWeight: 300, opacity: .9 }}>{p.glyph}</span>
          </div>
          <div style={{ display: "flex", gap: "2rem", flexWrap: "wrap", marginTop: "2rem", paddingTop: "1.5rem", borderTop: `1px solid ${coverText}22` }}>
            <PDStat label={lang === "en" ? "Activities" : "Actividades"} value={p.activities} c={coverText} s={softText}/>
            <PDStat label={lang === "en" ? "Pages" : "Páginas"} value={p.pdfPages} c={coverText} s={softText}/>
            <PDStat label={lang === "en" ? "Ages" : "Edades"} value={p.ages} c={coverText} s={softText}/>
            {full && <PDStat label={lang === "en" ? "Print" : "Imprimir"} value={full.format.printAt[lang]} c={coverText} s={softText}/>}
          </div>
        </div>
      </header>

      {/* BUY STRIP */}
      <div style={{ background: theme.sage3, borderBottom: `1px solid ${theme.border}`, padding: "1.1rem clamp(1.5rem,5vw,5vw)" }}>
        <div className="wrap" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: "1rem", flexWrap: "wrap" }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
            <span className="serif" style={{ fontSize: "1.8rem", color: theme.text, fontWeight: 400 }}>€{p.price}</span>
            <span style={{ fontSize: ".82rem", color: theme.sage }}>{isMember ? (lang === "en" ? "✓ included in your WiseTip+" : "✓ incluido en tu WiseTip+") : (lang === "en" ? "one-time · keep forever · or free with WiseTip+" : "pago único · para siempre · o gratis con WiseTip+")}</span>
          </div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            <button style={{ background: isMember ? theme.sage : "transparent", color: isMember ? (dark ? "#050F07" : "#fff") : theme.sage, border: `1px solid ${theme.sage}`, padding: "9px 18px", borderRadius: 22, fontSize: ".82rem", fontWeight: 600, cursor: "pointer" }}>
              {isMember ? (lang === "en" ? "Download PDF ↓" : "Descargar PDF ↓") : (lang === "en" ? `Buy €${p.price}` : `Comprar €${p.price}`)}
            </button>
            {!isMember && (
              <button onClick={() => nav("membership")} style={{ background: theme.sage, color: dark ? "#050F07" : "#fff", border: "none", padding: "9px 18px", borderRadius: 22, fontSize: ".82rem", fontWeight: 600, cursor: "pointer" }}>{lang === "en" ? "Get all packs · WiseTip+" : "Todos los packs · WiseTip+"} →</button>
            )}
          </div>
        </div>
      </div>

      {/* BODY */}
      <div style={{ padding: "3rem clamp(1.5rem,5vw,5vw) 4rem" }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: "3rem", alignItems: "start" }} className="grid-2">
          {/* LEFT — table of contents */}
          <div>
            <div className="label-tiny" style={{ color: theme.sage, marginBottom: "1.25rem" }}>{lang === "en" ? "What's inside" : "Qué contiene"}</div>
            {full ? (
              <div style={{ background: dark ? theme.panel : "#fff", border: `1px solid ${theme.border}`, borderRadius: 10, overflow: "hidden" }}>
                {full.contents.map((c, i) => {
                  const prem = c.tier === "premium";
                  return (
                    <div key={c.n} style={{ display: "grid", gridTemplateColumns: "40px 1fr auto", gap: "1rem", alignItems: "center", padding: "1rem 1.25rem", borderBottom: i === full.contents.length - 1 ? "none" : `1px solid ${theme.divider}` }}>
                      <span className="serif" style={{ fontSize: "1.3rem", color: theme.sage, fontWeight: 300 }}>{String(c.n).padStart(2, "0")}</span>
                      <div>
                        <div style={{ fontSize: ".98rem", color: theme.text, fontFamily: "'Cormorant Garamond',serif", fontStyle: "italic", fontWeight: 500 }}>{c.title[lang]}</div>
                        <div style={{ fontSize: ".8rem", color: theme.text3, fontWeight: 300, marginTop: 2, lineHeight: 1.4 }}>{c.note[lang]}</div>
                      </div>
                      <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 4 }}>
                        <span style={{ fontSize: ".58rem", padding: "2px 8px", borderRadius: 9, letterSpacing: ".1em", textTransform: "uppercase", background: prem ? theme.gold2 : theme.sage3, color: prem ? theme.gold : theme.sage, border: `1px solid ${prem ? theme.gold + "44" : theme.border2}` }}>{prem ? "WiseTip+" : (lang === "en" ? "Free" : "Gratis")}</span>
                        <span className="mono" style={{ fontSize: ".64rem", color: theme.text4 }}>{c.dur}m</span>
                      </div>
                    </div>
                  );
                })}
              </div>
            ) : (
              <p style={{ color: theme.text3 }}>{lang === "en" ? "Contents coming soon." : "Contenido próximamente."}</p>
            )}

            {/* SAMPLE ACTIVITY */}
            {sample && (
              <div style={{ marginTop: "2.5rem" }}>
                <div className="label-tiny" style={{ color: theme.gold, marginBottom: "1rem" }}>{lang === "en" ? "See one in full" : "Mira una completa"}</div>
                <div style={{ background: dark ? theme.panel : "#fff", border: `1px solid ${theme.border2}`, borderRadius: 10, padding: "1.5rem 1.6rem" }}>
                  <h3 className="serif italic" style={{ fontWeight: 400, fontSize: "1.5rem", color: theme.text, lineHeight: 1.15, marginBottom: ".6rem" }}>{sample.title[lang]}</h3>
                  <p style={{ fontSize: ".92rem", color: theme.text2, lineHeight: 1.6, fontWeight: 300, marginBottom: "1.1rem" }}>{sample.intro[lang]}</p>
                  <div className="label-tiny" style={{ color: theme.sage, marginBottom: ".6rem" }}>{lang === "en" ? "First steps" : "Primeros pasos"}</div>
                  <ol style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10, marginBottom: "1.25rem" }}>
                    {sample.steps[lang].slice(0, 2).map((s, i) => (
                      <li key={i} style={{ display: "flex", gap: 11, alignItems: "flex-start", fontSize: ".9rem", color: theme.text2, lineHeight: 1.55 }}>
                        <span style={{ flexShrink: 0, width: 22, height: 22, borderRadius: "50%", background: theme.sage3, border: `1px solid ${theme.border2}`, color: theme.sage, fontSize: ".7rem", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "'JetBrains Mono',monospace" }}>{i + 1}</span>
                        {s}
                      </li>
                    ))}
                  </ol>
                  <button onClick={() => nav("activitydetail", { id: sample.id })} style={{ background: "transparent", border: `1px solid ${theme.border2}`, color: theme.sage, padding: "8px 16px", borderRadius: 20, fontSize: ".8rem", fontWeight: 500, cursor: "pointer" }}>{lang === "en" ? "Open the full activity →" : "Abrir la actividad completa →"}</button>
                </div>
              </div>
            )}
          </div>

          {/* RIGHT — who / how sidebar */}
          <aside style={{ display: "flex", flexDirection: "column", gap: "1.25rem", position: "sticky", top: "6rem" }}>
            {full && (
              <>
                <PDCard theme={theme} dark={dark} label={lang === "en" ? "Who it's for" : "Para quién es"} body={full.whoFor[lang]}/>
                <PDCard theme={theme} dark={dark} label={lang === "en" ? "How to use it" : "Cómo usarlo"} body={full.howToUse[lang]}/>
              </>
            )}
            <div style={{ background: theme.sage4, border: `1px solid ${theme.sage}44`, borderRadius: 10, padding: "1.4rem 1.5rem" }}>
              <div className="serif italic" style={{ fontSize: "1.2rem", color: theme.text, marginBottom: ".5rem" }}>{lang === "en" ? "Suited to" : "Apto para"}</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                {p.needs.map(nid => {
                  const t = (window.WS_NEEDS_TAGS || []).find(x => x.id === nid);
                  return t ? <span key={nid} style={{ fontSize: ".68rem", padding: "3px 10px", borderRadius: 12, background: `${t.hue}1c`, color: t.hue, border: `1px solid ${t.hue}44` }}>{t.glyph} {t.label[lang]}</span> : null;
                })}
              </div>
            </div>
          </aside>
        </div>
      </div>
    </div>
  );
}

function PDStat({ label, value, c, s }) {
  return (
    <div>
      <div className="serif" style={{ fontSize: "1.6rem", color: c, fontWeight: 300, lineHeight: 1 }}>{value}</div>
      <div className="label-tiny" style={{ color: s, marginTop: 4 }}>{label}</div>
    </div>
  );
}

function PDCard({ theme, dark, label, body }) {
  return (
    <div style={{ background: dark ? theme.panel : "#fff", border: `1px solid ${theme.border}`, borderRadius: 10, padding: "1.3rem 1.5rem" }}>
      <div className="label-tiny" style={{ color: theme.sage, marginBottom: ".6rem" }}>{label}</div>
      <p style={{ fontSize: ".88rem", color: theme.text2, lineHeight: 1.6, fontWeight: 300 }}>{body}</p>
    </div>
  );
}

Object.assign(window, { PackDetail });