// ── PACKS STORE PAGE ────────────────────────────────────────
// Pay-per-item OR included in WiseTip+. Filterable by category & need.

function Packs({ theme, dark, lang, isMember, nav }) {
  const [cat, setCat] = useState("all");
  const [need, setNeed] = useState("all");

  const cats = [
    { id:"all",       label: { en:"All",          es:"Todos" } },
    { id:"season",    label: { en:"Seasonal",     es:"Estacional" } },
    { id:"holiday",   label: { en:"Holidays",     es:"Fiestas" } },
    { id:"ritual",    label: { en:"Lunar · ritual",es:"Lunares · ritual" } },
    { id:"lifeevent", label: { en:"Life events",  es:"Eventos de vida" } },
    { id:"need",      label: { en:"Need-based",   es:"Por necesidad" } },
  ];

  const list = WS_PACKS.filter(p =>
    (cat === "all" || p.category === cat) &&
    (need === "all" || p.needs.includes(need))
  );

  return (
    <div style={{ background: theme.bg, color: theme.text, paddingTop:"5rem" }}>
      <div style={{
        background: dark
          ? `radial-gradient(ellipse 50% 40% at 50% 100%, rgba(200,168,90,.12) 0%, transparent 55%), linear-gradient(180deg, #0A1A10 0%, ${theme.bg} 100%)`
          : `radial-gradient(ellipse 50% 40% at 50% 100%, rgba(138,96,32,.08) 0%, transparent 55%), linear-gradient(180deg, ${theme.bg2} 0%, ${theme.bg} 100%)`,
        padding:"5rem clamp(1.5rem, 5vw, 5vw) 3rem",
      }}>
        <div className="wrap">
          <Eyebrow theme={theme}>{lang==="en"?"Seasonal & themed activity packs":"Packs de actividades por temporada"}</Eyebrow>
          <h1 className="serif" style={{
            fontStyle:"italic", fontWeight:300, fontSize:"clamp(2.2rem, 5vw, 4.2rem)",
            color: theme.text, lineHeight: 1.02, letterSpacing:"-.02em",
            marginTop:".75rem", marginBottom:"1rem", maxWidth: 920,
          }}>{lang==="en"
            ? <>Print, fold, fridge it. <em>Done by Sunday.</em></>
            : <>Imprimir, doblar, en la nevera. <em>Listo para el domingo.</em></>}</h1>
          <p style={{ color: theme.text2, fontSize:"1.02rem", lineHeight: 1.7, fontWeight: 300, maxWidth: 620 }}>
            {lang==="en"
              ? "Each pack is a single PDF — eight to thirty screen-free activities tuned to a season, a holiday, a life event or a specific need. Pay-per-item, or included with WiseTip+."
              : "Cada pack es un PDF — de 8 a 30 actividades sin pantallas afinadas a una temporada, fiesta, evento de vida o necesidad concreta. Por unidad, o incluido con WiseTip+."}
          </p>
        </div>
      </div>

      {/* DUAL-TIER STRIP */}
      <div style={{
        background: theme.sage3, borderTop: `1px solid ${theme.border}`, borderBottom:`1px solid ${theme.border}`,
        padding:"1rem clamp(1.5rem, 5vw, 5vw)",
      }}>
        <div className="wrap" style={{ display:"flex", gap:"1.5rem", justifyContent:"space-between", flexWrap:"wrap", alignItems:"center" }}>
          <div style={{ display:"flex", gap:"2rem", alignItems:"center", flexWrap:"wrap" }}>
            <div style={{ display:"flex", alignItems:"center", gap: 10 }}>
              <span className="serif" style={{ fontSize:"1.5rem", color: theme.gold, fontStyle:"italic", fontWeight: 400 }}>€</span>
              <div>
                <div className="label-tiny" style={{ color: theme.gold }}>{lang==="en"?"Option 1 · Pay per pack":"Opción 1 · Pago por pack"}</div>
                <div style={{ fontSize:".82rem", color: theme.text }}>{lang==="en"?"€5.99–9.99 each · keep forever":"5,99 – 9,99 € cada uno · para siempre"}</div>
              </div>
            </div>
            <span style={{ width: 1, height: 36, background: theme.divider }}/>
            <div style={{ display:"flex", alignItems:"center", gap: 10 }}>
              <span className="serif" style={{ fontSize:"1.5rem", color: theme.sage, fontStyle:"italic", fontWeight: 400 }}>+</span>
              <div>
                <div className="label-tiny" style={{ color: theme.sage }}>{lang==="en"?"Option 2 · WiseTip+":"Opción 2 · WiseTip+"}</div>
                <div style={{ fontSize:".82rem", color: theme.text }}>{lang==="en"?"Every pack · always · plus everything else":"Todos los packs · siempre · más todo lo demás"}</div>
              </div>
            </div>
          </div>
          {!isMember && (
            <button onClick={() => nav("membership")} style={{
              background: theme.sage, color: dark?"#050F07":"#fff", border:"none",
              padding:"10px 18px", borderRadius: 22, fontSize:".82rem", fontWeight: 600, cursor:"pointer",
            }}>{lang==="en"?"See WiseTip+":"Ver WiseTip+"} →</button>
          )}
        </div>
      </div>

      {/* FILTERS */}
      <div style={{ padding:"2rem clamp(1.5rem, 5vw, 5vw) 1rem" }}>
        <div className="wrap" style={{ display:"flex", flexDirection:"column", gap:".9rem" }}>
          <div style={{ display:"flex", gap: 6, flexWrap:"wrap", alignItems:"center" }}>
            <span className="label-tiny" style={{ color: theme.text3, marginRight: 4 }}>{lang==="en"?"Category":"Categoría"}</span>
            {cats.map(c => (
              <button key={c.id} onClick={() => setCat(c.id)} style={{
                padding:"6px 14px", borderRadius: 18,
                background: cat === c.id ? theme.sage : theme.sage3,
                color: cat === c.id ? (dark?"#050F07":"#fff") : theme.text2,
                border:`1px solid ${cat === c.id ? theme.sage : theme.border2}`,
                fontSize:".76rem", cursor:"pointer",
              }}>{c.label[lang]}</button>
            ))}
          </div>
          <div style={{ display:"flex", gap: 6, flexWrap:"wrap", alignItems:"center" }}>
            <span className="label-tiny" style={{ color: theme.text3, marginRight: 4 }}>{lang==="en"?"Suited to":"Apto para"}</span>
            <button onClick={() => setNeed("all")} style={{
              padding:"5px 10px", borderRadius: 14,
              background: need === "all" ? theme.sage : "transparent",
              color: need === "all" ? (dark?"#050F07":"#fff") : theme.text2,
              border:`1px solid ${need === "all" ? theme.sage : theme.border2}`,
              fontSize:".7rem", cursor:"pointer",
            }}>{lang==="en"?"Any":"Cualquiera"}</button>
            {WS_NEEDS_TAGS.slice(0,10).map(t => (
              <button key={t.id} onClick={() => setNeed(t.id === need ? "all" : t.id)} style={{
                padding:"5px 10px", borderRadius: 14,
                background: need === t.id ? `${t.hue}24` : "transparent",
                border:`1px solid ${need === t.id ? t.hue : theme.border2}`,
                color: need === t.id ? t.hue : theme.text3,
                fontSize:".7rem", cursor:"pointer",
              }}>{t.glyph} {t.label[lang]}</button>
            ))}
          </div>
        </div>
      </div>

      <div className="section" style={{ padding:"2rem clamp(1.5rem, 5vw, 5vw) 5rem" }}>
        <div className="wrap">
          <div style={{ fontSize:".8rem", color: theme.text3, marginBottom:"1.25rem" }}>
            {list.length} {lang==="en"?"packs":"packs"}
          </div>
          <div className="grid-3" style={{ gap:"1.25rem" }}>
            {list.map(p => <PackCard key={p.id} p={p} theme={theme} dark={dark} lang={lang} isMember={isMember} nav={nav}/>)}
          </div>
        </div>
      </div>
    </div>
  );
}

function PackCard({ p, theme, dark, lang, isMember, nav }) {
  return (
    <article onClick={() => nav && nav("pack", { id: p.id })} style={{
      background: dark ? theme.panel : "#fff",
      border: `1px solid ${theme.border}`, borderRadius: 8, overflow:"hidden",
      display:"flex", flexDirection:"column", cursor:"pointer",
    }}>
      <div style={{
        background: p.cover, color:"#F0EBE0",
        padding:"1.5rem 1.4rem", position:"relative",
        minHeight: 110, display:"flex", flexDirection:"column", justifyContent:"space-between",
      }}>
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start" }}>
          <span className="label-tiny" style={{ color:"rgba(240,235,224,.7)" }}>{p.season[lang]}</span>
          <span className="serif italic" style={{ fontSize:"2rem", lineHeight: 1, fontWeight: 300 }}>{p.glyph}</span>
        </div>
        <h3 className="serif italic" style={{ fontSize:"1.3rem", fontWeight: 400, lineHeight: 1.15, marginTop:".5rem" }}>{p.title[lang]}</h3>
      </div>
      <div style={{ padding:"1.1rem 1.3rem", display:"flex", flexDirection:"column", gap:".75rem", flex: 1 }}>
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", color: theme.text3 }}>
          <span className="mono" style={{ fontSize:".68rem" }}>{p.activities} {lang==="en"?"activities":"actividades"} · {p.pdfPages}p</span>
          <span className="mono" style={{ fontSize:".68rem" }}>{lang==="en"?"Ages":"Edades"} {p.ages}</span>
        </div>
        <div style={{ display:"flex", flexWrap:"wrap", gap: 4 }}>
          {p.needs.slice(0, 4).map(nid => {
            const tag = WS_NEEDS_TAGS.find(x => x.id === nid);
            return <span key={nid} style={{ fontSize:".62rem", padding:"2px 7px", borderRadius: 10, background: theme.sage3, color: theme.text3 }}>{tag?.glyph} {tag?.label[lang]}</span>;
          })}
        </div>
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginTop:"auto", paddingTop:".5rem", borderTop:`1px solid ${theme.divider}` }}>
          <div>
            <div className="serif" style={{ fontSize:"1.3rem", color: theme.text, fontWeight: 400, lineHeight: 1 }}>€{p.price}</div>
            <div style={{ fontSize:".66rem", color: theme.sage, marginTop: 3 }}>
              {isMember
                ? (lang==="en"?"✓ included in WiseTip+":"✓ incluido en WiseTip+")
                : (lang==="en"?"or included in WiseTip+":"o incluido en WiseTip+")}
            </div>
          </div>
          <button style={{
            background: isMember ? theme.sage3 : theme.sage,
            color: isMember ? theme.sage : (dark?"#050F07":"#fff"),
            border: isMember ? `1px solid ${theme.sage}` : "none",
            padding:"8px 14px", borderRadius: 20,
            fontSize:".76rem", fontWeight: 600, cursor:"pointer",
          }}>{isMember ? (lang==="en"?"Download":"Descargar") : (lang==="en"?"Add":"Añadir")} →</button>
        </div>
      </div>
    </article>
  );
}

Object.assign(window, { Packs });