/* gamify.jsx — Course gamification: select a deck → settings → generated game */

const DIFFS = {
  Casual:    { mult: 1,   q: 6,  time: "no timer",   xp: 20, blurb: "Relaxed pace, hints on, no time pressure." },
  Balanced:  { mult: 1.5, q: 10, time: "60s / round", xp: 35, blurb: "The default. Hints on tricky items, light timer." },
  Challenge: { mult: 2.2, q: 14, time: "30s / round", xp: 60, blurb: "No hints, tight timer, streak multipliers." },
};
const MODES = [
  { id: "quiz", name: "Knowledge quizzes", icon: "target", desc: "Auto-generated MCQs per slide" },
  { id: "flash", name: "Flashcards", icon: "layers", desc: "Spaced-repetition key terms" },
  { id: "timed", name: "Timed challenges", icon: "bolt", desc: "Beat-the-clock rapid rounds" },
  { id: "scenario", name: "Scenario branching", icon: "dice", desc: "Decision paths with consequences" },
];

/* ---- the gamify settings modal ---- */
function GamifyModal({ course, onClose, onGenerate }) {
  const [diff, setDiff] = useState("Balanced");
  const [inter, setInter] = useState(3);
  const [modes, setModes] = useState({ quiz: true, flash: true, timed: false, scenario: false });
  const [board, setBoard] = useState(true);
  const [scope, setScope] = useState("Cohort");
  const d = DIFFS[diff];
  const interactions = Math.round(d.q * (0.6 + inter * 0.18));
  const xpTotal = interactions * d.xp;
  const badges = 2 + (modes.timed ? 1 : 0) + (modes.scenario ? 1 : 0) + (inter >= 4 ? 1 : 0);

  return (
    <div className="scrim" onClick={onClose}>
      <div className="modal scroll" onClick={e => e.stopPropagation()} style={{ maxWidth: 600 }}>
        {/* head */}
        <div style={{ padding: "22px 24px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 14, position: "sticky", top: 0, background: "var(--surface)", zIndex: 2 }}>
          <div className="hex-flat" style={{ width: 46, height: 46, flex: "none", clipPath: "polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)", background: "var(--accent-soft)", display: "grid", placeItems: "center" }}>
            <Icon name="wand" size={24} style={{ color: "var(--accent)" }} />
          </div>
          <div style={{ flex: 1 }}>
            <h3 style={{ fontSize: 19, fontWeight: 700 }}>Gamify this course</h3>
            <p className="dim" style={{ fontSize: 13, marginTop: 2 }}>Tune the game, then generate.</p>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x" size={20} /></button>
        </div>

        <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 22 }}>
          {/* source */}
          <div>
            <div className="eyebrow" style={{ marginBottom: 9 }}>Source material</div>
            <div style={{ display: "flex", alignItems: "center", gap: 13, padding: 13, borderRadius: 13, border: "1.5px solid var(--vh-blue-200)", background: "var(--vh-blue-50)" }}>
              <div style={{ width: 38, height: 38, borderRadius: 9, background: "var(--vh-orange)", display: "grid", placeItems: "center", color: "#fff", flex: "none" }}><Icon name="pptx" size={20} /></div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 600 }}>{course.title.replace(/[®™]/g, "")}.pptx</div>
                <div className="dim" style={{ fontSize: 12 }}>24 slides · selected source deck</div>
              </div>
              <span className="tag accent" style={{ fontSize: 11 }}><Icon name="check" size={12} />Selected</span>
            </div>
          </div>

          {/* difficulty */}
          <div>
            <div className="between" style={{ marginBottom: 9 }}><div className="eyebrow">Difficulty</div></div>
            <div className="seg" style={{ width: "100%", display: "grid", gridTemplateColumns: "1fr 1fr 1fr" }}>
              {Object.keys(DIFFS).map(k => <button key={k} className={diff === k ? "on" : ""} onClick={() => setDiff(k)}>{k}</button>)}
            </div>
            <p className="dim" style={{ fontSize: 12.5, marginTop: 9 }}>{d.blurb} · <b>{d.q} questions</b> · {d.time}</p>
          </div>

          {/* interactivity */}
          <div>
            <div className="between" style={{ marginBottom: 11 }}>
              <div className="eyebrow">Level of interactivity</div>
              <span className="tag accent" style={{ fontSize: 11 }}>{["Minimal", "Light", "Balanced", "Rich", "Immersive"][inter - 1]}</span>
            </div>
            <input type="range" className="vh" min={1} max={5} step={1} value={inter} onChange={e => setInter(+e.target.value)} />
            <div className="between dim" style={{ fontSize: 11, marginTop: 7 }}><span>Read &amp; click</span><span>Hands-on game</span></div>
          </div>

          {/* game modes */}
          <div>
            <div className="eyebrow" style={{ marginBottom: 11 }}>Game elements</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
              {MODES.map(m => {
                const on = modes[m.id];
                return (
                  <button key={m.id} onClick={() => setModes(s => ({ ...s, [m.id]: !s[m.id] }))}
                    style={{ textAlign: "left", padding: 13, borderRadius: 13, border: "1.5px solid " + (on ? "var(--vh-blue-500)" : "var(--line)"), background: on ? "var(--vh-blue-50)" : "var(--surface)", display: "flex", gap: 11, alignItems: "flex-start", transition: "all .15s" }}>
                    <Icon name={m.icon} size={20} style={{ color: on ? "var(--vh-blue-500)" : "var(--ink-3)", marginTop: 1, flex: "none" }} />
                    <div>
                      <div style={{ fontSize: 13.5, fontWeight: 600 }}>{m.name}</div>
                      <div className="dim" style={{ fontSize: 11.5, marginTop: 2, lineHeight: 1.35 }}>{m.desc}</div>
                    </div>
                  </button>
                );
              })}
            </div>
          </div>

          {/* leaderboard */}
          <div style={{ display: "flex", alignItems: "center", gap: 14, padding: 15, borderRadius: 14, background: "var(--surface-2)", border: "1px solid var(--line)" }}>
            <div className="hex-flat" style={{ width: 40, height: 40, flex: "none", clipPath: "polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)", background: "var(--vh-navy)", display: "grid", placeItems: "center" }}><Icon name="trophy" size={20} style={{ color: "#fff" }} /></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 600 }}>Leaderboards</div>
              <div className="dim" style={{ fontSize: 12 }}>Rank learners by XP and streaks</div>
            </div>
            {board && <div className="seg" style={{ marginRight: 4 }}>{["Cohort", "Global"].map(s => <button key={s} className={scope === s ? "on" : ""} onClick={() => setScope(s)} style={{ fontSize: 12, padding: "6px 11px" }}>{s}</button>)}</div>}
            <button onClick={() => setBoard(b => !b)} aria-label="toggle leaderboard" style={{ width: 48, height: 28, borderRadius: 999, background: board ? "var(--vh-blue-500)" : "var(--line)", position: "relative", transition: "background .15s", flex: "none" }}>
              <span style={{ position: "absolute", top: 3, left: board ? 23 : 3, width: 22, height: 22, borderRadius: 999, background: "#fff", transition: "left .15s", boxShadow: "var(--shadow-sm)" }} />
            </button>
          </div>

          {/* live summary */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 10 }}>
            {[["interactions", interactions, "target"], ["XP on offer", xpTotal.toLocaleString(), "bolt"], ["badges", badges, "medal"]].map(([k, v, ic]) => (
              <div key={k} style={{ padding: "13px 14px", borderRadius: 13, background: "var(--vh-blue-50)", textAlign: "center" }}>
                <Icon name={ic} size={18} style={{ color: "var(--vh-blue-500)" }} />
                <div className="kpi" style={{ fontSize: 22, marginTop: 4 }}>{v}</div>
                <div className="dim" style={{ fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: ".06em" }}>{k}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ padding: "16px 24px", borderTop: "1px solid var(--line)", display: "flex", gap: 12, position: "sticky", bottom: 0, background: "var(--surface)" }}>
          <button className="btn btn-ghost" onClick={onClose} style={{ flex: "none" }}>Cancel</button>
          <button className="btn btn-acc" style={{ flex: 1 }} onClick={() => onGenerate({ diff, inter, modes, board, scope, interactions, xpTotal, badges })}>
            <Icon name="wand" size={18} />Generate game
          </button>
        </div>
      </div>
    </div>
  );
}

/* ---- generating overlay ---- */
function Generating({ course, onDone }) {
  const steps = ["Reading 24 slides…", "Extracting key concepts…", "Writing quiz questions…", "Placing XP & badges…", "Building the game path…"];
  const [i, setI] = useState(0);
  useEffect(() => {
    if (i >= steps.length) { const t = setTimeout(onDone, 350); return () => clearTimeout(t); }
    const t = setTimeout(() => setI(i + 1), 520); return () => clearTimeout(t);
  }, [i]);
  const pct = Math.min(100, Math.round((i / steps.length) * 100));
  return (
    <div className="scrim">
      <div className="modal" style={{ maxWidth: 440, padding: 34, textAlign: "center" }}>
        <div style={{ width: 80, height: 88, margin: "0 auto 20px", position: "relative" }}>
          <div className="hex-flat" style={{ position: "absolute", inset: 0, clipPath: "polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)", background: "var(--accent-soft)" }} />
          <div className="hex-flat" style={{ position: "absolute", inset: 0, clipPath: "polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)", background: "var(--accent)", display: "grid", placeItems: "center" }}>
            <Icon name="wand" size={34} style={{ color: "#231f20" }} />
          </div>
        </div>
        <h3 style={{ fontSize: 20, fontWeight: 700 }}>Gamifying your course</h3>
        <p className="dim" style={{ fontSize: 13.5, marginTop: 6, minHeight: 20 }}>{steps[Math.min(i, steps.length - 1)]}</p>
        <div className="bar" style={{ marginTop: 20 }}><i style={{ width: pct + "%", background: "linear-gradient(90deg,var(--vh-peach),var(--accent))", transition: "width .4s ease" }} /></div>
      </div>
    </div>
  );
}

/* ---- interactive quiz preview ---- */
const QUIZ = {
  q: "In service management, value is best described as…",
  options: [
    { t: "Delivered by the provider to the customer", ok: false },
    { t: "Co-created through provider–customer interaction", ok: true },
    { t: "The total cost of the service", ok: false },
    { t: "Only realised once a project closes", ok: false },
  ],
  why: "Value is co-created — it emerges from how the customer uses what the provider offers.",
};
function QuizPreview({ xp, onScore }) {
  const [pick, setPick] = useState(null);
  const answered = pick !== null;
  return (
    <div className="card" style={{ padding: 22 }}>
      <div className="between" style={{ marginBottom: 14 }}>
        <span className="tag accent"><Icon name="target" size={13} />Quiz · Slide 6</span>
        <Points value={"+" + xp} pointsStyle="soft" size="sm" />
      </div>
      <h3 style={{ fontSize: 18, fontWeight: 600, marginBottom: 16, lineHeight: 1.3 }}>{QUIZ.q}</h3>
      <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
        {QUIZ.options.map((o, i) => {
          let bd = "var(--line)", bg = "var(--surface)", ic = null;
          if (answered && o.ok) { bd = "var(--vh-teal)"; bg = "color-mix(in oklab,var(--vh-teal),transparent 88%)"; ic = "checkCircle"; }
          else if (answered && i === pick && !o.ok) { bd = "var(--vh-orange)"; bg = "color-mix(in oklab,var(--vh-orange),transparent 88%)"; ic = "x"; }
          return (
            <button key={i} disabled={answered} onClick={() => { setPick(i); if (o.ok) onScore(xp); }}
              style={{ textAlign: "left", padding: "13px 15px", borderRadius: 12, border: "1.5px solid " + bd, background: bg, display: "flex", alignItems: "center", gap: 12, fontSize: 14, fontWeight: 500, cursor: answered ? "default" : "pointer", transition: "all .15s" }}>
              <span style={{ width: 26, height: 26, borderRadius: 8, flex: "none", display: "grid", placeItems: "center", fontFamily: "var(--display)", fontWeight: 700, fontSize: 13, background: "var(--surface-3)", color: "var(--ink-2)" }}>{"ABCD"[i]}</span>
              <span style={{ flex: 1 }}>{o.t}</span>
              {ic && <Icon name={ic} size={20} style={{ color: o.ok ? "var(--vh-teal)" : "var(--vh-orange)" }} />}
            </button>
          );
        })}
      </div>
      {answered && (
        <div className="vh-in" style={{ marginTop: 14, padding: "12px 15px", borderRadius: 12, background: "var(--vh-blue-50)", fontSize: 13.5, display: "flex", gap: 10 }}>
          <Icon name="sparkle" size={18} style={{ color: "var(--vh-blue-500)", flex: "none", marginTop: 1 }} />
          <span className="muted">{QUIZ.why}</span>
        </div>
      )}
    </div>
  );
}

/* ---- the generated game result ---- */
function GameResult({ course, config, toast, onReplay, onPlay }) {
  const [earned, setEarned] = useState(0);
  const path = [
    { t: "Intro", icon: "book", kind: "read", done: true },
    { t: "Quiz 1", icon: "target", kind: "quiz", done: true },
    { t: "Flashcards", icon: "layers", kind: "flash" },
    { t: "Timed round", icon: "bolt", kind: "timed", locked: !config.modes.timed },
    { t: "Scenario", icon: "dice", kind: "scenario", locked: !config.modes.scenario },
    { t: "Boss quiz", icon: "trophy", kind: "boss" },
  ];
  return (
    <div className="vh-in">
      <div className="card" style={{ padding: 24, marginBottom: 20, background: "linear-gradient(120deg,var(--vh-blue-500),var(--vh-navy))", border: "none", color: "#fff", position: "relative", overflow: "hidden" }}>
        <div className="hexfield" style={{ opacity: .35 }} />
        <div className="between" style={{ position: "relative", flexWrap: "wrap", gap: 16 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <div className="hex-flat" style={{ width: 56, height: 56, flex: "none", clipPath: "polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)", background: "var(--accent)", display: "grid", placeItems: "center" }}><Icon name="checkCircle" size={28} style={{ color: "#231f20" }} /></div>
            <div>
              <div className="eyebrow" style={{ color: "var(--vh-blue-200)" }}>Game ready</div>
              <h2 style={{ fontSize: 24, fontWeight: 700, color: "#fff", marginTop: 3 }}>{course.title} — gamified</h2>
              <p style={{ color: "rgba(255,255,255,.8)", fontSize: 13.5, marginTop: 4 }}>{config.diff} difficulty · {["Minimal","Light","Balanced","Rich","Immersive"][config.inter-1]} interactivity{config.board ? " · " + config.scope + " leaderboard" : ""}</p>
            </div>
          </div>
          <div style={{ display: "flex", gap: 22 }}>
            {[["Interactions", config.interactions], ["XP on offer", config.xpTotal.toLocaleString()], ["Badges", config.badges]].map(([k, v]) => (
              <div key={k} style={{ textAlign: "center" }}>
                <div style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: 28 }}>{v}</div>
                <div style={{ fontSize: 11, color: "var(--vh-blue-200)", fontWeight: 600, textTransform: "uppercase", letterSpacing: ".06em" }}>{k}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ position: "relative", display: "flex", gap: 12, marginTop: 22 }}>
          <button className="btn btn-acc" onClick={() => onPlay ? onPlay() : toast("Launching game…", "play")}><Icon name="play" size={17} />Launch game</button>
          <button className="btn" style={{ background: "rgba(255,255,255,.16)", color: "#fff" }} onClick={onReplay}><Icon name="gear" size={16} />Adjust settings</button>
          <button className="btn" style={{ background: "rgba(255,255,255,.16)", color: "#fff" }} onClick={() => toast("Cohort publishing — coming soon", "clock")}><Icon name="share" size={16} />Publish to cohort</button>
        </div>
      </div>

      {/* game path */}
      <div className="card" style={{ padding: 24, marginBottom: 20 }}>
        <h3 style={{ fontSize: 18, fontWeight: 700, marginBottom: 18 }}>Your learning path</h3>
        <div style={{ display: "flex", alignItems: "center", gap: 0, overflowX: "auto", paddingBottom: 6 }}>
          {path.map((p, i) => (
            <React.Fragment key={i}>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 9, flex: "none", width: 104, opacity: p.locked ? .45 : 1 }}>
                <div style={{ position: "relative", width: 60, height: 66 }}>
                  <div className="hex-flat" style={{ position: "absolute", inset: 0, clipPath: "polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)", background: p.done ? "var(--vh-teal)" : p.locked ? "var(--surface-3)" : p.kind === "boss" ? "var(--accent)" : "var(--vh-blue-500)", display: "grid", placeItems: "center", boxShadow: p.locked ? "none" : "0 8px 18px rgba(18,129,196,.25)" }}>
                    <Icon name={p.locked ? "lock" : p.done ? "check" : p.icon} size={24} style={{ color: p.kind === "boss" && !p.locked ? "#231f20" : "#fff" }} />
                  </div>
                </div>
                <span style={{ fontSize: 12.5, fontWeight: 600, textAlign: "center" }}>{p.t}</span>
              </div>
              {i < path.length - 1 && <div style={{ flex: "none", width: 34, height: 3, borderRadius: 9, background: p.done ? "var(--vh-teal)" : "var(--line)", marginTop: -22 }} />}
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* preview + side */}
      <div style={{ display: "grid", gridTemplateColumns: config.board ? "1.4fr 1fr" : "1fr", gap: 20 }}>
        <div>
          <div className="between" style={{ marginBottom: 12 }}>
            <h3 style={{ fontSize: 18, fontWeight: 700 }}>Try a generated question</h3>
            <Points value={earned} pointsStyle="solid" />
          </div>
          <QuizPreview xp={DIFFS[config.diff].xp} onScore={(v) => { setEarned(e => e + v); toast("+" + v + " XP · nice!", "bolt"); }} />
        </div>
        {config.board && (
          <div className="card" style={{ padding: 22 }}>
            <div className="between" style={{ marginBottom: 14 }}>
              <h3 style={{ fontSize: 17, fontWeight: 700 }}>{config.scope} leaderboard</h3>
              <span className="tag accent" style={{ fontSize: 11 }}><Icon name="bolt" size={12} />Live</span>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
              {LEADERBOARD.slice(0, 6).map(p => (
                <div key={p.rank} style={{ display: "flex", alignItems: "center", gap: 11, padding: "8px 10px", borderRadius: 11, background: p.you ? "var(--accent-soft)" : "transparent" }}>
                  <span style={{ width: 18, fontFamily: "var(--display)", fontWeight: 800, fontSize: 14, color: p.rank <= 3 ? "var(--accent)" : "var(--ink-3)" }}>{p.rank}</span>
                  <div className="avatar" style={{ width: 30, height: 30, borderRadius: 9, fontSize: 12 }}>{p.initials}</div>
                  <span style={{ flex: 1, fontSize: 13, fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{p.name}{p.you && " · you"}</span>
                  <span style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 13 }}>{p.xp.toLocaleString()}</span>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

/* ---- course screen (detail + flow host) ---- */
function CourseScreen({ course, back, t, toast, onViewSlides, onOpenBook, onKahoot, onWordCloud }) {
  const [stage, setStage] = useState("detail"); // detail | result
  const [modal, setModal] = useState(false);
  const [gen, setGen] = useState(false);
  const [config, setConfig] = useState(null);
  const [playing, setPlaying] = useState(false); // launches the real PlayGame

  /* The actual playable game (play.jsx) — reached via Gamify → Launch game. */
  if (playing) return <PlayGame course={course} back={() => setPlaying(false)} toast={toast} />;

  const lessons = Array.from({ length: course.lessons }).map((_, i) => ({
    n: i + 1, title: ["Introduction & key concepts", "The service value system", "Guiding principles", "The four dimensions", "Practices in focus", "Continual improvement", "Roles & responsibilities", "Measurement & metrics", "Putting it together", "Exam preparation"][i % 10],
    done: i < course.done, mins: 18 + (i % 4) * 6,
  }));

  return (
    <div className="vh-in">
      <button className="btn btn-ghost" onClick={back} style={{ marginBottom: 18 }}><Icon name="chevL" size={16} />Back</button>

      {stage === "detail" && (
        <>
          {/* hero — 2 col: course info + upcoming session */}
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:0, marginBottom:22, borderRadius:"var(--r-lg)", overflow:"hidden", border:"1px solid var(--line)", boxShadow:"var(--shadow-sm)" }}>
            {/* LEFT: course identity */}
            <div style={{ position:"relative", background:`linear-gradient(120deg, ${course.color}, color-mix(in oklab, ${course.color}, #0b1c3a 55%))` }}>
              <div className="hexfield" />
              <div style={{ position:"relative", padding:"26px 26px 0" }}>
                <div style={{ display:"flex", alignItems:"center", gap:14, marginBottom:18 }}>
                  <div className="hex-flat" style={{ width:54, height:54, flex:"none", background:"rgba(255,255,255,.18)", clipPath:"polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)", display:"grid", placeItems:"center" }}><Icon name={course.icon} size={28} style={{ color:"#fff" }} /></div>
                  <div>
                    <div className="eyebrow" style={{ color:"rgba(255,255,255,.75)" }}>{course.track}</div>
                    <h1 style={{ fontSize:22, fontWeight:800, color:"#fff", marginTop:3, lineHeight:1.15 }}>{course.title}</h1>
                  </div>
                </div>
              </div>
              <div style={{ padding:"0 26px 22px", display:"flex", alignItems:"center", gap:20, flexWrap:"wrap" }}>
                <div style={{ display:"flex", alignItems:"center", gap:10 }}>
                  <Ring value={course.progress} size={44} color="rgba(255,255,255,.9)">
                    <div style={{ fontFamily:"var(--display)", fontWeight:800, fontSize:12, color:"#fff" }}>{course.progress}%</div>
                  </Ring>
                  <div style={{ color:"rgba(255,255,255,.85)" }}>
                    <div style={{ fontWeight:700, fontSize:13 }}>{course.progress}% complete</div>
                    <div style={{ fontSize:12, opacity:.7 }}>{course.done}/{course.lessons} lessons</div>
                  </div>
                </div>
                <div style={{ color:"rgba(255,255,255,.65)", fontSize:12.5 }}>
                  <div style={{ fontWeight:600 }}>{Math.round(course.mins/60)}h {course.mins%60}m total</div>
                  <div style={{ marginTop:2 }}>Slides · Quiz · Reader</div>
                </div>
              </div>
            </div>

            {/* RIGHT: enroll upcoming training */}
            <div style={{ background:"var(--surface)", padding:"22px 24px", display:"flex", flexDirection:"column", gap:12, borderLeft:"1px solid var(--line)" }}>
              <div style={{ display:"flex", alignItems:"center", gap:8 }}>
                <div style={{ width:8, height:8, borderRadius:"50%", background:"#4ade80", boxShadow:"0 0 6px #4ade80" }} />
                <span style={{ fontSize:11.5, fontWeight:700, letterSpacing:".1em", textTransform:"uppercase", color:"var(--ink-3)" }}>Upcoming training</span>
              </div>
              <div>
                <div style={{ fontFamily:"var(--display)", fontWeight:800, fontSize:17, color:"var(--ink)", marginBottom:3 }}>IPMA-D · Jun 2026</div>
                <div style={{ display:"flex", alignItems:"center", gap:6, fontSize:13, color:"var(--ink-2)" }}>
                  <span style={{ fontWeight:600 }}>📍 Physical</span>
                  <span style={{ opacity:.5 }}>·</span>
                  <span>Amsterdam · Hogehilweg 5</span>
                </div>
              </div>
              <div style={{ display:"flex", flexDirection:"column", gap:5 }}>
                {["Mon 9 Jun · 09:00–17:00","Tue 10 Jun · 09:00–17:00","Wed 11 Jun · 09:00–17:00","Thu 12 Jun · 09:00–17:00"].map((d,i)=>(
                  <div key={i} style={{ display:"flex", gap:8, fontSize:12.5, color:"var(--ink-2)" }}>
                    <span style={{ fontWeight:700, color:"var(--vh-orange)", flex:"none" }}>Day {i+1}</span>
                    <span>{d}</span>
                  </div>
                ))}
              </div>
              <div style={{ display:"flex", alignItems:"center", gap:8, padding:"10px 12px", borderRadius:10, background:"var(--surface-2)", border:"1px solid var(--line)" }}>
                <div className="avatar" style={{ width:28, height:28, borderRadius:7, fontSize:11 }}>RB</div>
                <div style={{ flex:1 }}>
                  <div style={{ fontSize:12.5, fontWeight:700 }}>Rik van der Berg</div>
                  <div className="dim" style={{ fontSize:11 }}>IPMA-A Certified Trainer</div>
                </div>
                <span style={{ fontSize:12, fontWeight:700, color:"var(--vh-teal)" }}>3 spots left</span>
              </div>
              <div style={{ display:"flex", gap:8, marginTop:"auto" }}>
                <button className="btn btn-pri" style={{ flex:1, fontSize:13, padding:"9px 14px" }}><Icon name="graduation" size={15}/>Enrolled</button>
                <button className="btn btn-acc" style={{ flex:1, fontSize:13, padding:"9px 14px" }} onClick={()=>onViewSlides&&onViewSlides()}><Icon name="play" size={15}/>Join live</button>
                <button className="btn btn-outline" style={{ fontSize:13, padding:"9px 14px" }} onClick={()=>toast("Opening location in Maps…","globe")}><Icon name="globe" size={15}/></button>
              </div>
            </div>
          </div>

          {course.id === "ipma" ? (
            <IPMACourseDetail course={course} toast={toast} onGameify={() => setModal(true)} onViewSlides={onViewSlides} onOpenBook={onOpenBook} onKahoot={onKahoot} onWordCloud={onWordCloud} />
          ) : (
            <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 20 }}>
              {/* lessons */}
              <div className="card" style={{ padding: 24 }}>
                <h3 style={{ fontSize: 18, fontWeight: 700, marginBottom: 14 }}>Lessons</h3>
                <div style={{ display: "flex", flexDirection: "column" }}>
                  {lessons.map((l, i) => (
                    <div key={l.n} style={{ display: "flex", alignItems: "center", gap: 13, padding: "12px 0", borderTop: i ? "1px solid var(--line)" : "none" }}>
                      <div style={{ width: 30, height: 30, borderRadius: 9, flex: "none", display: "grid", placeItems: "center", background: l.done ? "color-mix(in oklab,var(--vh-teal),transparent 86%)" : "var(--surface-3)" }}>
                        {l.done ? <Icon name="check" size={16} style={{ color: "var(--vh-teal)" }} /> : <span style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 13, color: "var(--ink-3)" }}>{l.n}</span>}
                      </div>
                      <span style={{ flex: 1, fontSize: 14, fontWeight: l.done ? 500 : 600, color: l.done ? "var(--ink-2)" : "var(--ink)" }}>{l.title}</span>
                      <span className="dim" style={{ fontSize: 12.5 }}>{l.mins}m</span>
                    </div>
                  ))}
                </div>
              </div>

              {/* gamify CTA */}
              <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
                <div className="card" style={{ padding: 24, position: "relative", overflow: "hidden", border: "1.5px solid color-mix(in oklab,var(--accent),transparent 55%)" }}>
                  <div style={{ position: "absolute", right: -40, top: -40, width: 150, height: 150, clipPath: "polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)", background: "var(--accent-soft)" }} />
                  <div style={{ position: "relative" }}>
                    <div className="hex-flat" style={{ width: 50, height: 50, clipPath: "polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)", background: "var(--accent)", display: "grid", placeItems: "center", marginBottom: 14 }}><Icon name="dice" size={26} style={{ color: "#231f20" }} /></div>
                    <h3 style={{ fontSize: 19, fontWeight: 700 }}>Turn this into a game</h3>
                    <p className="muted" style={{ fontSize: 13.5, marginTop: 7, lineHeight: 1.5 }}>Generate quizzes, flashcards, XP and a leaderboard straight from this course's slide deck.</p>
                    <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 16, padding: 11, borderRadius: 11, background: "var(--surface-2)", border: "1px solid var(--line)" }}>
                      <div style={{ width: 32, height: 32, borderRadius: 8, background: "var(--vh-orange)", display: "grid", placeItems: "center", color: "#fff", flex: "none" }}><Icon name="pptx" size={17} /></div>
                      <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontSize: 13, fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{course.title.replace(/[®™]/g, "")}.pptx</div><div className="dim" style={{ fontSize: 11.5 }}>24 slides</div></div>
                    </div>
                    <button className="btn btn-acc" style={{ width: "100%", marginTop: 16 }} onClick={() => setModal(true)}><Icon name="wand" size={18} />Gamify this course</button>
                  </div>
                </div>
              </div>
            </div>
          )}
        </>
      )}

      {stage === "result" && config && <GameResult course={course} config={config} toast={toast} onReplay={() => setModal(true)} onPlay={() => setPlaying(true)} />}

      {modal && <GamifyModal course={course} onClose={() => setModal(false)} onGenerate={(cfg) => { setConfig(cfg); setModal(false); setGen(true); }} />}
      {gen && <Generating course={course} onDone={() => { setGen(false); setStage("result"); }} />}
    </div>
  );
}

Object.assign(window, { CourseScreen });