// Program detail view — themed to the tak's accent color.
(function () {
  const { Icon, PROGRAMS, Media } = window.PROTO;

  const css = `
  .pg{--soft:color-mix(in srgb,var(--accent) 16%,var(--bg));}
  .pg-back{display:inline-flex;align-items:center;gap:9px;color:var(--mut);font-size:13px;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em;cursor:pointer;padding:26px 0 0;transition:color .15s;}
  .pg-back:hover{color:var(--fg);}
  .pg-hero{position:relative;overflow:hidden;padding:36px 0 56px;}
  .pg-heromedia{position:absolute;inset:0;z-index:0;}
  .pg-heromedia .shade{background:
    linear-gradient(90deg, var(--bg) 6%, color-mix(in srgb,var(--bg) 74%,transparent) 42%, color-mix(in srgb,var(--bg) 28%,transparent) 74%, transparent 100%),
    linear-gradient(to top, var(--bg) 2%, transparent 50%);}
  .pg-hero .glow{position:absolute;width:46vw;height:46vw;border-radius:50%;filter:blur(130px);
    background:var(--accent);opacity:.28;left:-12vw;top:-18vw;pointer-events:none;}
  .pg-hero .ghost{position:absolute;right:-2vw;top:0;font-family:'Anton',sans-serif;font-size:clamp(120px,18vw,260px);
    line-height:.8;color:var(--accent);opacity:.10;text-transform:uppercase;pointer-events:none;}
  .pg-hero-in{position:relative;z-index:1;max-width:64%;}
  .pg-hero h1{font-family:'Anton',sans-serif;font-size:clamp(52px,8vw,104px);text-transform:uppercase;
    line-height:.88;letter-spacing:-.01em;margin:18px 0 18px;}
  .pg-intro{font-size:clamp(17px,1.4vw,20px);color:#c9ccd2;max-width:54ch;margin:0 0 30px;line-height:1.55;}
  .pg-facts{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;background:var(--bg2);max-width:760px;}
  .pg-fact{flex:1;min-width:150px;padding:18px 22px;border-right:1px solid var(--line);}
  .pg-fact:last-child{border-right:none;}
  .pg-fact .k{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin-bottom:7px;}
  .pg-fact .v{font-family:'Anton',sans-serif;font-size:20px;text-transform:uppercase;display:flex;align-items:center;gap:8px;}

  .pg-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:start;}
  .pg-expect h3,.pg-side h3{font-family:'Anton',sans-serif;font-size:26px;text-transform:uppercase;margin:0 0 20px;}
  .pg-li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line);font-size:17px;}
  .pg-li:last-child{border-bottom:1px solid var(--line);}
  .pg-li .ck{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:flex;
    align-items:center;justify-content:center;flex:none;margin-top:1px;}
  .pg-side{background:var(--bg2);border:1px solid var(--line);border-radius:calc(var(--radius)*2);padding:28px;
    border-top:3px solid var(--accent);}
  .pg-side p{color:var(--mut);font-size:15.5px;line-height:1.6;margin:0 0 22px;}
  .pg-coach{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--line);}
  .pg-coach .av{width:50px;height:50px;border-radius:50%;background:var(--accent);color:#fff;display:flex;
    align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:20px;}
  .pg-coach .nm{font-weight:700;}
  .pg-coach .ro{color:var(--mut);font-size:13px;}

  .pg-sched{display:flex;gap:12px;flex-wrap:wrap;}
  .pg-chip{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--line);
    border-left:3px solid var(--accent);border-radius:var(--radius);padding:14px 18px;min-width:160px;}
  .pg-chip .d{font-family:'Anton',sans-serif;font-size:18px;text-transform:uppercase;}
  .pg-chip .t{color:var(--mut);font-size:15px;margin-left:auto;}

  .pg-other{display:flex;gap:12px;flex-wrap:wrap;}
  .pg-other a{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--radius);
    padding:12px 16px;cursor:pointer;transition:background .15s;font-weight:600;font-size:15px;}
  .pg-other a:hover{background:var(--bg2);}
  .pg-other .dot{width:9px;height:9px;border-radius:50%;}

  .pg-band{position:relative;overflow:hidden;border-radius:calc(var(--radius)*4);background:var(--accent);
    padding:clamp(40px,5vw,64px);display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;}
  .pg-band h2{font-family:'Anton',sans-serif;font-size:clamp(30px,4vw,48px);text-transform:uppercase;color:#fff;margin:0;line-height:.95;}
  .pg-band p{color:rgba(255,255,255,.9);margin:8px 0 0;font-size:17px;}

  @media(max-width:980px){.pg-hero-in{max-width:100%;}.pg-grid{grid-template-columns:1fr;gap:30px;}}`;

  function Program({ pkey, go, onJoin }) {
    const p = window.PROTO.byKey(pkey);
    const idx = PROGRAMS.findIndex((x) => x.key === pkey);
    const others = PROGRAMS.filter((x) => x.key !== pkey);
    if (!p) return null;
    return (
      <div className="view pg" style={{ "--accent": p.accent }}>
        <style>{css}</style>
        <div className="wrap">
          <span className="pg-back" onClick={() => go({ view: "home", anchor: "takken" })}><Icon name="back" size={16} /> Alle programma's</span>
        </div>

        <header className="pg-hero">
          <Media id={p.img} w={1800} alt={p.name} className="pg-heromedia" />
          <div className="glow"></div>
          <div className="ghost">0{idx + 1}</div>
          <div className="wrap">
            <div className="pg-hero-in">
              <span className="eyebrow">// {p.tag}</span>
              <h1>{p.name}</h1>
              <p className="pg-intro">{p.intro}</p>
              <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginBottom: 34 }}>
                <a className="btn btn-pri btn-lg" onClick={onJoin}>Plan een proefles <Icon name="arrow" size={17} /></a>
                <a className="btn btn-ghost btn-lg" href="https://ftf.wodup.nl" target="_blank">Inschrijven via WodUp</a>
              </div>
              <div className="pg-facts">
                <div className="pg-fact"><div className="k">Duur</div><div className="v"><Icon name="clock" size={18} /> {p.session.duur}</div></div>
                <div className="pg-fact"><div className="k">Intensiteit</div><div className="v"><span className="pips">{[1,2,3,4,5].map(n => <span key={n} className={"pip" + (n <= p.session.intensiteit ? " on" : "")} style={{ "--ac": p.accent }}></span>)}</span></div></div>
                <div className="pg-fact"><div className="k">Niveau</div><div className="v">{p.session.niveau}</div></div>
                <div className="pg-fact"><div className="k">Coach</div><div className="v" style={{ fontSize: 16 }}>{p.coach}</div></div>
              </div>
            </div>
          </div>
        </header>

        <section className="section" style={{ paddingTop: 30 }}>
          <div className="wrap">
            <div className="pg-grid">
              <div className="pg-expect">
                <h3>Wat je doet</h3>
                {p.expect.map((e) => (
                  <div className="pg-li" key={e}><span className="ck"><Icon name="check" size={15} /></span><span>{e}</span></div>
                ))}
              </div>
              <div className="pg-side">
                <h3 style={{ fontSize: 22 }}>Voor wie?</h3>
                <p>{p.forWho}</p>
                <div className="pg-coach">
                  <div className="av">{p.coach.split(" ").map(w => w[0]).slice(0,2).join("")}</div>
                  <div><div className="nm">{p.coach}</div><div className="ro">Jouw coach voor {p.name}</div></div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="section" style={{ paddingTop: 0 }}>
          <div className="wrap">
            <div className="sec-head"><h2 style={{ fontSize: "clamp(30px,4vw,44px)" }}>Wanneer</h2></div>
            <div className="pg-sched">
              {p.schedule.map((s, i) => (
                <div className="pg-chip" key={i}><span className="d">{s.day}</span><span className="t">{s.time}</span></div>
              ))}
            </div>
          </div>
        </section>

        <section className="section" style={{ paddingTop: 0 }}>
          <div className="wrap">
            <div className="pg-band">
              <div><h2>Klaar om te beginnen?</h2><p>Eerste les is gratis. Geen verplichtingen.</p></div>
              <a className="btn btn-lg" style={{ background: "#fff", color: "#1a1a1a" }} onClick={onJoin}>Plan je proefles <Icon name="arrow" size={17} /></a>
            </div>
          </div>
        </section>

        <section className="section" style={{ paddingTop: 0 }}>
          <div className="wrap">
            <div className="sec-head"><span className="eyebrow" style={{ color: "var(--mut)" }}>// Ontdek meer</span><h2 style={{ fontSize: "clamp(28px,3.5vw,40px)" }}>Andere programma's</h2></div>
            <div className="pg-other">
              {others.map((o) => (
                <a key={o.key} onClick={() => { go({ view: "program", key: o.key }); }}><span className="dot" style={{ background: o.accent }}></span>{o.name}</a>
              ))}
            </div>
          </div>
        </section>
      </div>
    );
  }
  window.PROTO.Program = Program;
})();