/* ===========================================================================
   Azure Helper — Graph Explorer + Learning hub
   =========================================================================== */
function navigateToGuide(prompt, scenarioId) {
  window.dispatchEvent(new CustomEvent("AH_NAVIGATE", {
    detail: {
      view: "agent",
      seed: {
        prompt,
        scenarioId,
      },
    },
  }));
}

function GraphView() {
  const samples = AH.graphSamples;
  const [sel, setSel] = useState(samples[0]);
  const [method, setMethod] = useState(samples[0].method);
  const [url, setUrl] = useState(samples[0].url);
  const [resp, setResp] = useState(samples[0]);
  const [running, setRunning] = useState(false);
  const [ran, setRan] = useState(true);
  const [showExplain, setShowExplain] = useState(true);
  const [runError, setRunError] = useState("");

  const cats = useMemo(() => {
    const m = {}; samples.forEach(s => { (m[s.cat] = m[s.cat] || []).push(s); }); return m;
  }, []);

  const quickOps = [
    {
      label: "Tenant licenses snapshot",
      sampleName: "Subscribed SKUs",
      guidePrompt: "How do I reclaim unused E5 licenses?",
      scenarioId: "guests",
    },
    {
      label: "Admin MFA policy check",
      sampleName: "Conditional Access policies",
      guidePrompt: AH.scenarios.mfa.prompt,
      scenarioId: "mfa",
    },
    {
      label: "Guest user discovery",
      sampleName: "Guest users (top 5)",
      guidePrompt: AH.scenarios.guests.prompt,
      scenarioId: "guests",
    },
  ];

  function pick(s) { setSel(s); setMethod(s.method); setUrl(s.url); setRan(false); setResp(s); }
  function findSampleByRequest(nextMethod, nextUrl) {
    return samples.find((s) => s.method === nextMethod && s.url === nextUrl) || null;
  }

  async function run() {
    setRunning(true);
    setRan(false);
    setRunError("");

    try {
      if (!window.AHRuntime) {
        await new Promise((resolve) => setTimeout(resolve, 850));
        setResp(sel);
      } else {
        const selectedRequest = findSampleByRequest(method, url) || sel;
        const operationId = selectedRequest.operationId;
        if (!operationId) {
          throw new Error("This custom URL is not in the approved query catalog. Pick a sample query from the left panel.");
        }
        const result = await window.AHRuntime.queryGraph({
          operationId,
          params: selectedRequest.params || {},
        });
        setResp({ ...selectedRequest, resp: result.data });
      }
      setRan(true);
    } catch (error) {
      setRunError(error.message || "Graph query failed");
      setResp({ ...sel, resp: { error: error.message || "Graph query failed" } });
      setRan(true);
    } finally {
      setRunning(false);
    }
  }

  return (
    <div style={{ display: "grid", gridTemplateColumns: "248px 1fr", height: "100%", minHeight: 0 }}>
      {/* sample sidebar */}
      <div style={{ borderRight: "1px solid var(--border)", overflowY: "auto", padding: "20px 14px", background: "var(--bg)" }}>
        <SecLabel>sample queries</SecLabel>
        <div className="mono dim" style={{ fontSize: 11.5, margin: "8px 0 16px" }}>Click to load. Read-only &amp; safe.</div>
        {Object.entries(cats).map(([cat, list]) => (
          <div key={cat} style={{ marginBottom: 16 }}>
            <div className="mono" style={{ fontSize: 11, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: "1px", marginBottom: 7 }}>{cat}</div>
            <div className="col" style={{ gap: 5 }}>
              {list.map((s, i) => (
                <button key={i} onClick={() => pick(s)} className="row" style={{
                  gap: 8, textAlign: "left", padding: "8px 10px", borderRadius: 6, cursor: "pointer",
                  background: sel === s ? "var(--surface-2)" : "transparent",
                  border: "1px solid " + (sel === s ? "var(--border-2)" : "transparent"),
                  fontFamily: "var(--sans)", fontSize: 13, color: sel === s ? "var(--text)" : "var(--text-2)"
                }}>
                  <Method m={s.method} />
                  <span style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{s.name}</span>
                </button>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* main */}
      <div className="col" style={{ minHeight: 0, overflowY: "auto" }}>
        <div style={{ padding: "22px 26px 0" }}>
          <Crumbs items={[{ label: "Graph Explorer", on: true }, { label: "v1.0" }, { label: "see every call the agent makes" }]} />
          <h2 className="h2" style={{ marginTop: 14 }}>Graph Explorer</h2>
          <p style={{ color: "var(--text-2)", fontSize: 14, marginTop: 8, maxWidth: 640 }}>
            The same REST API the agent uses, exposed for learning. Run a query, read the raw JSON, and let the Helper explain what every field means.
          </p>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 9, marginTop: 14 }}>
            {quickOps.map((op, i) => (
              <div key={i} className="card" style={{ padding: "11px 12px" }}>
                <div className="mono" style={{ fontSize: 12.5, fontWeight: 700, color: "var(--text)" }}>{op.label}</div>
                <div className="row" style={{ gap: 7, marginTop: 8 }}>
                  <button
                    className="btn btn-quiet btn-sm"
                    onClick={async () => {
                      const sample = samples.find((s) => s.name === op.sampleName) || samples[0];
                      pick(sample);
                      try {
                        setRunning(true);
                        setRunError("");
                        const result = await window.AHRuntime.queryGraph({
                          operationId: sample.operationId,
                          params: sample.params || {},
                        });
                        setResp({ ...sample, resp: result.data });
                        setRan(true);
                      } catch (error) {
                        setRunError(error.message || "Graph query failed");
                        setResp({ ...sample, resp: { error: error.message || "Graph query failed" } });
                        setRan(true);
                      } finally {
                        setRunning(false);
                      }
                    }}
                  >
                    <Icon name="play" size={12} color="var(--primary)" /> Run now
                  </button>
                  <button className="btn btn-ghost btn-sm" onClick={() => navigateToGuide(op.guidePrompt, op.scenarioId)}>
                    <Icon name="arrow" size={12} color="var(--primary)" /> Guide
                  </button>
                </div>
              </div>
            ))}
          </div>

          <div className="row" style={{ gap: 0, marginTop: 20, border: "1px solid var(--border-2)", borderRadius: 8, overflow: "hidden", background: "var(--inset)" }}>
            <select value={method} onChange={e => setMethod(e.target.value)} className="mono" style={{
              background: "var(--surface-2)", color: "var(--text)", border: "none", borderRight: "1px solid var(--border)",
              padding: "12px 14px", fontWeight: 700, fontSize: 13, cursor: "pointer"
            }}>
              <option>GET</option><option>POST</option><option>PATCH</option><option>DELETE</option>
            </select>
            <div className="mono dim" style={{ padding: "12px 0 12px 14px", fontSize: 13, whiteSpace: "nowrap" }}>https://graph.microsoft.com</div>
            <input className="mono grow" value={url} onChange={e => setUrl(e.target.value)} style={{
              background: "transparent", color: "var(--text)", border: "none", padding: "12px 10px", fontSize: 13, outline: "none"
            }} />
            <button className="btn btn-primary" onClick={run} disabled={running} style={{ borderRadius: 0, margin: 3 }}>
              {running ? <><Icon name="refresh" size={14} color="#04221d" /> Running</> : <><Icon name="play" size={13} color="#04221d" /> Run query</>}
            </button>
          </div>

          <div className="row wrap" style={{ gap: 8, marginTop: 11 }}>
            <span className="chip cy">200 OK</span>
            <span className="chip">scope: {sel.cat === "Security" ? "Policy.Read.All" : sel.cat === "Licensing" ? "Directory.Read.All" : "User.Read.All"}</span>
            <span className="chip">consent: granted</span>
            <span className="chip">~{(Math.random() * 80 + 40).toFixed(0)} ms</span>
          </div>
          {runError && (
            <div className="row" style={{ marginTop: 10 }}>
              <span className="chip" style={{ color: "var(--rose)", borderColor: "rgba(244,117,127,.4)" }}>
                {runError}
              </span>
            </div>
          )}
          <div className="row wrap" style={{ gap: 7, marginTop: 10 }}>
            <button
              className="btn btn-quiet btn-sm"
              onClick={() => navigateToGuide(`Explain this Graph query and give me a practical workflow: ${url}`, AH.routePrompt(url))}
            >
              <Icon name="arrow" size={13} color="var(--primary)" /> Send to Guide
            </button>
            <button
              className="btn btn-ghost btn-sm"
              onClick={() => {
                const cmd = `Invoke-MgGraphRequest -Method ${method} -Uri \"${url}\"`;
                navigator.clipboard && navigator.clipboard.writeText(cmd);
              }}
            >
              <Icon name="copy" size={12} color="var(--primary)" /> Copy PowerShell cmdlet
            </button>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: showExplain ? "1fr 300px" : "1fr", gap: 16, padding: "20px 26px 26px", alignItems: "start" }}>
          <div>
            <div className="between" style={{ marginBottom: 8 }}>
              <SecLabel>response · json</SecLabel>
              <span className="chip click" onClick={() => setShowExplain(s => !s)}>
                <Icon name="book" size={12} color="var(--violet)" /> {showExplain ? "hide" : "explain"}
              </span>
            </div>
            {running
              ? <div className="code center" style={{ height: 220, color: "var(--text-dim)" }}><Thinking label="calling graph.microsoft.com" /></div>
              : <JsonView data={resp.resp} style={{ margin: 0, opacity: ran ? 1 : 0.5 }} />}
          </div>

          {showExplain && (
            <div className="card fade" style={{ background: "var(--violet-dim)", borderColor: "rgba(167,139,250,.25)", position: "sticky", top: 12 }}>
              <div className="row" style={{ gap: 8, marginBottom: 10 }}>
                <Icon name="spark" size={15} color="var(--violet)" />
                <span className="mono" style={{ fontSize: 11.5, fontWeight: 700, color: "var(--violet)", letterSpacing: ".5px", textTransform: "uppercase" }}>Helper explains</span>
              </div>
              <div style={{ fontSize: 13, color: "var(--text-2)", lineHeight: 1.65 }}>{sel.explain}</div>
              {sel.teach && (
                <div style={{ marginTop: 11, paddingTop: 11, borderTop: "1px solid rgba(167,139,250,.2)", fontSize: 12.5, color: "var(--text-2)", lineHeight: 1.55 }}>
                  <span className="mono" style={{ color: "var(--gold)", fontWeight: 700, fontSize: 11 }}>TRY NEXT&nbsp;&nbsp;</span>{sel.teach}
                </div>
              )}
              <div className="hr" style={{ margin: "13px 0" }} />
              <div className="mono dim" style={{ fontSize: 11.5, marginBottom: 7 }}>related cmdlet</div>
              <div className="code" style={{ padding: "9px 11px", fontSize: 12 }}>
                <span className="tok-cmd">Invoke-MgGraphRequest</span> <span className="tok-flag">-Method</span> {method} <span className="tok-flag">-Uri</span> <span className="tok-str">"{url}"</span>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* ===========================================================================
   Learning hub
   =========================================================================== */
const LEARN_TABS = [
  { id: "paths", label: "Learning paths", icon: "layers" },
  { id: "explain", label: "Quick explainers", icon: "book" },
  { id: "glossary", label: "Jargon buster", icon: "list" },
  { id: "quiz", label: "Knowledge check", icon: "spark" },
];

function PathCard({ path }) {
  const [done, setDone] = useState(new Set());
  const [open, setOpen] = useState(false);
  const pct = Math.round((done.size / path.lessons.length) * 100);
  function toggleLesson(i) { setDone(s => { const n = new Set(s); n.has(i) ? n.delete(i) : n.add(i); return n; }); }
  return (
    <div className="card hover" style={{ display: "flex", flexDirection: "column" }}>
      <div className="between" style={{ marginBottom: 11 }}>
        <span className={"chip " + path.accent}>{path.level}</span>
        <span className="mono dim" style={{ fontSize: 11.5 }}>{path.lessons.length} lessons · {path.mins} min</span>
      </div>
      <h3 className="h3" style={{ fontSize: 17 }}>{path.title}</h3>
      <p style={{ color: "var(--text-2)", fontSize: 13.5, lineHeight: 1.6, marginTop: 8 }}>{path.blurb}</p>

      {/* progress */}
      <div style={{ marginTop: 14 }}>
        <div className="between" style={{ marginBottom: 6 }}>
          <span className="mono dim" style={{ fontSize: 11 }}>{done.size}/{path.lessons.length} complete</span>
          <span className="mono" style={{ fontSize: 11, color: pct === 100 ? "var(--primary)" : "var(--text-dim)" }}>{pct}%</span>
        </div>
        <div style={{ height: 6, borderRadius: 4, background: "var(--inset)", overflow: "hidden" }}>
          <div style={{ height: "100%", width: pct + "%", background: "var(--primary)", transition: "width .3s", borderRadius: 4 }} />
        </div>
      </div>

      {open && (
        <div className="col" style={{ gap: 8, marginTop: 14 }}>
          {path.lessons.map((l, i) => (
            <div key={i} className="card" style={{ padding: "10px 11px", background: done.has(i) ? "var(--primary-dim)" : "var(--surface-2)" }}>
              <button onClick={() => toggleLesson(i)} className="row" style={{
                gap: 10, cursor: "pointer", textAlign: "left", background: "transparent", border: "none", padding: 0,
                fontFamily: "var(--sans)", fontSize: 13, color: "var(--text)", width: "100%"
              }}>
                <span style={{
                  width: 20, height: 20, borderRadius: 5, flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center",
                  border: "1px solid " + (done.has(i) ? "var(--primary)" : "var(--border-2)"),
                  background: done.has(i) ? "var(--primary)" : "transparent"
                }}>{done.has(i) ? <Icon name="check" size={13} color="#04221d" /> : <span className="mono dim" style={{ fontSize: 11 }}>{i + 1}</span>}</span>
                <span style={{ textDecoration: done.has(i) ? "line-through" : "none", opacity: done.has(i) ? 0.7 : 1, fontWeight: 600 }}>
                  {typeof l === "string" ? l : l.title}
                </span>
              </button>
              {typeof l === "object" && (
                <div className="col" style={{ gap: 7, marginTop: 9, marginLeft: 30 }}>
                  <div className="mono dim" style={{ fontSize: 11.5 }}>Objective: {l.objective}</div>
                  <div className="mono" style={{ fontSize: 11.5, color: "var(--gold)" }}>Lab: {l.lab}</div>
                  {l.link && (
                    <a href={l.link} target="_blank" rel="noopener" className="chip click" style={{ alignSelf: "flex-start", textDecoration: "none" }}>
                      Microsoft Learn reference
                    </a>
                  )}
                </div>
              )}
            </div>
          ))}
        </div>
      )}

      <button className="btn btn-quiet btn-sm" style={{ marginTop: 14, alignSelf: "flex-start" }} onClick={() => setOpen(o => !o)}>
        <Icon name={open ? "chevron" : "play"} size={13} color="var(--primary)" style={open ? { transform: "rotate(90deg)" } : null} />
        {open ? "Hide lessons" : done.size ? "Continue path" : "Start path"}
      </button>
    </div>
  );
}

function GlossaryTab() {
  const [q, setQ] = useState("");
  const list = AH.glossary.filter(g => (g.term + " " + g.def).toLowerCase().includes(q.toLowerCase()));
  return (
    <div>
      <div style={{ position: "relative", maxWidth: 420, marginBottom: 18 }}>
        <input className="inp" value={q} onChange={e => setQ(e.target.value)} placeholder="Search a term… e.g. SKU, tenant, $ref" style={{ paddingLeft: 36 }} />
        <span style={{ position: "absolute", left: 12, top: 11 }}><Icon name="eye" size={15} color="var(--text-dim)" /></span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: 12 }}>
        {list.map((g, i) => (
          <div key={i} className="card" style={{ padding: "14px 16px" }}>
            <div className="mono" style={{ fontWeight: 700, fontSize: 14, color: "var(--primary)" }}>{g.term}</div>
            <p style={{ color: "var(--text-2)", fontSize: 13, lineHeight: 1.6, marginTop: 7 }}>{g.def}</p>
          </div>
        ))}
        {list.length === 0 && <div className="mono dim" style={{ fontSize: 13 }}>No term matches "{q}".</div>}
      </div>
    </div>
  );
}

function QuizTab() {
  const qs = AH.quiz;
  const [i, setI] = useState(0);
  const [picked, setPicked] = useState(null);
  const [score, setScore] = useState(0);
  const [doneAll, setDoneAll] = useState(false);
  const cur = qs[i];

  function choose(idx) {
    if (picked != null) return;
    setPicked(idx);
    if (idx === cur.answer) setScore(s => s + 1);
  }
  function next() {
    if (i + 1 >= qs.length) { setDoneAll(true); return; }
    setI(i + 1); setPicked(null);
  }
  function restart() { setI(0); setPicked(null); setScore(0); setDoneAll(false); }

  if (doneAll) {
    return (
      <div className="card" style={{ maxWidth: 520, textAlign: "center", padding: "36px 26px" }}>
        <div style={{ width: 56, height: 56, borderRadius: "50%", margin: "0 auto 16px", background: "var(--primary-dim)", border: "1px solid var(--border-strong)", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <Icon name="check" size={28} color="var(--primary)" />
        </div>
        <h3 className="h3" style={{ fontSize: 20 }}>You scored {score}/{qs.length}</h3>
        <p className="dim" style={{ fontSize: 14, marginTop: 8 }}>
          {score === qs.length ? "Flawless — you've got the fundamentals down." : "Solid. Revisit the explainers for anything that tripped you up."}
        </p>
        <button className="btn btn-primary" style={{ marginTop: 18 }} onClick={restart}><Icon name="refresh" size={14} color="#04221d" /> Try again</button>
      </div>
    );
  }

  return (
    <div className="card" style={{ maxWidth: 600 }}>
      <div className="between" style={{ marginBottom: 14 }}>
        <span className="mono dim" style={{ fontSize: 12 }}>Question {i + 1} of {qs.length}</span>
        <span className="chip cy">score {score}</span>
      </div>
      <h3 className="h3" style={{ fontSize: 16, lineHeight: 1.4 }}>{cur.q}</h3>
      <div className="col" style={{ gap: 9, marginTop: 16 }}>
        {cur.options.map((o, idx) => {
          const isAns = idx === cur.answer;
          const chosen = picked === idx;
          let bd = "var(--border)", bg = "var(--surface-2)";
          if (picked != null) {
            if (isAns) { bd = "var(--primary)"; bg = "var(--primary-dim)"; }
            else if (chosen) { bd = "rgba(244,117,127,.5)"; bg = "var(--rose-dim)"; }
          }
          return (
            <button key={idx} onClick={() => choose(idx)} className="row between" style={{
              padding: "12px 14px", borderRadius: 7, cursor: picked != null ? "default" : "pointer",
              border: "1px solid " + bd, background: bg, textAlign: "left",
              fontFamily: "var(--sans)", fontSize: 14, color: "var(--text)"
            }}>
              <span>{o}</span>
              {picked != null && isAns && <Icon name="check" size={16} color="var(--primary)" />}
              {picked != null && chosen && !isAns && <Icon name="x" size={16} color="var(--rose)" />}
            </button>
          );
        })}
      </div>
      {picked != null && (
        <div className="fade" style={{ marginTop: 14, padding: "12px 14px", borderRadius: 7, background: "var(--violet-dim)", border: "1px solid rgba(167,139,250,.22)" }}>
          <div className="row" style={{ gap: 7, marginBottom: 5 }}>
            <Icon name="book" size={14} color="var(--violet)" />
            <span className="mono" style={{ fontSize: 11, fontWeight: 700, color: "var(--violet)", textTransform: "uppercase" }}>Why</span>
          </div>
          <div style={{ fontSize: 13, color: "var(--text-2)", lineHeight: 1.6 }}>{cur.explain}</div>
          <button className="btn btn-primary btn-sm" style={{ marginTop: 13 }} onClick={next}>
            {i + 1 >= qs.length ? "See score" : "Next question"} <Icon name="arrow" size={13} color="#04221d" />
          </button>
        </div>
      )}
    </div>
  );
}

function LearnView() {
  const [tab, setTab] = useState("paths");
  function practiceFromTopic(topic) {
    if (/guest|external|license|cost/i.test(topic)) {
      navigateToGuide(AH.scenarios.guests.prompt, "guests");
      return;
    }
    if (/conditional|mfa|zero trust|security/i.test(topic)) {
      navigateToGuide(AH.scenarios.mfa.prompt, "mfa");
      return;
    }
    navigateToGuide(AH.scenarios.onboard.prompt, "onboard");
  }

  return (
    <div style={{ overflowY: "auto", height: "100%" }}>
      <div style={{ maxWidth: 1060, margin: "0 auto", padding: "26px 26px 50px" }}>
        <Crumbs items={[{ label: "Learn", on: true }, { label: "Azure & M365, decoded" }, { label: "teach-as-you-do" }]} />
        <h2 className="h2" style={{ marginTop: 14 }}>The <span className="gold">Learning hub</span></h2>
        <p style={{ color: "var(--text-2)", fontSize: 14, marginTop: 8, maxWidth: 640 }}>
          Guided paths, plain-language explainers, a jargon buster, and a quick knowledge check — so every task the Helper runs leaves you a little more fluent.
        </p>

        {/* sub-nav */}
        <div className="row wrap" style={{ gap: 7, margin: "22px 0 24px" }}>
          {LEARN_TABS.map(tb => (
            <button key={tb.id} onClick={() => setTab(tb.id)} className="row mono" style={{
              gap: 8, padding: "8px 14px", borderRadius: 7, cursor: "pointer", fontSize: 13, fontWeight: 600,
              background: tab === tb.id ? "var(--surface-2)" : "transparent",
              color: tab === tb.id ? "var(--primary)" : "var(--text-2)",
              border: "1px solid " + (tab === tb.id ? "var(--border-2)" : "var(--border)")
            }}>
              <Icon name={tb.icon} size={14} color={tab === tb.id ? "var(--primary)" : "var(--text-dim)"} /> {tb.label}
            </button>
          ))}
        </div>

        {tab === "paths" && (
          <div className="fade" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(330px, 1fr))", gap: 16 }}>
            {AH.learningPaths.map((p, i) => (
              <div key={i} className="col" style={{ gap: 8 }}>
                <PathCard path={p} />
                <button className="btn btn-quiet btn-sm" onClick={() => practiceFromTopic(p.title)}>
                  <Icon name="arrow" size={13} color="var(--primary)" /> Practice this in Guide
                </button>
              </div>
            ))}
          </div>
        )}

        {tab === "explain" && (
          <div className="fade">
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(330px, 1fr))", gap: 16 }}>
              {AH.learnCards.map((c, i) => (
                <div key={i} className="card hover" style={{ display: "flex", flexDirection: "column" }}>
                  <div className="between" style={{ marginBottom: 12 }}>
                    <span className="chip cy">{c.tag}</span>
                    <Icon name="book" size={16} color="var(--text-dim)" />
                  </div>
                  <PS path="Learn" cmd={c.cmd} />
                  <h3 className="h3" style={{ marginTop: 12 }}>{c.title}</h3>
                  <p style={{ color: "var(--text-2)", fontSize: 13.5, lineHeight: 1.65, marginTop: 9 }}>{c.body}</p>
                  <div className="hr" style={{ margin: "14px 0 12px" }} />
                  <div className="row wrap" style={{ gap: 7 }}>{c.terms.map((tm, j) => <span key={j} className="chip">{tm}</span>)}</div>
                  <button className="btn btn-quiet btn-sm" style={{ marginTop: 11, alignSelf: "flex-start" }} onClick={() => practiceFromTopic(c.title)}>
                    <Icon name="arrow" size={13} color="var(--primary)" /> Try this topic in Guide
                  </button>
                </div>
              ))}
            </div>
            <div className="card" style={{ marginTop: 18, background: "var(--surface-2)" }}>
              <SecLabel>browse by topic on Microsoft Learn</SecLabel>
              <div className="crumbs" style={{ marginTop: 12, fontSize: 14 }}>
                <span className="chev">&gt;</span>
                {[
                  { label: "Entra ID", url: "https://learn.microsoft.com/entra/" },
                  { label: "Zero Trust", url: "https://learn.microsoft.com/security/zero-trust/" },
                  { label: "Conditional Access", url: "https://learn.microsoft.com/entra/identity/conditional-access/" },
                  { label: "Licensing", url: "https://learn.microsoft.com/microsoft-365/admin/manage/assign-licenses-to-users" },
                  { label: "Microsoft Graph", url: "https://learn.microsoft.com/graph/overview" },
                  { label: "Teams", url: "https://learn.microsoft.com/microsoftteams/" },
                  { label: "Intune", url: "https://learn.microsoft.com/mem/intune/" },
                  { label: "Defender", url: "https://learn.microsoft.com/defender/" },
                ].map((tm, i) => (
                  <React.Fragment key={i}>
                    {i > 0 && <span className="sep">·</span>}
                    <a href={tm.url} target="_blank" rel="noopener" className="chip click" style={{ border: "none", background: "transparent", padding: "2px 2px", textDecoration: "none" }}>{tm.label}</a>
                  </React.Fragment>
                ))}
              </div>
            </div>
          </div>
        )}

        {tab === "glossary" && <div className="fade"><GlossaryTab /></div>}
        {tab === "quiz" && <div className="fade"><QuizTab /></div>}
      </div>
    </div>
  );
}

Object.assign(window, { GraphView, LearnView });