/* educator-screens1.jsx — Dashboard, Cohorts, Learners */

/* ── DASHBOARD ── */
function Dashboard({ go }) {
  return (
    <div>
      <div className="between" style={{ marginBottom: 24 }}>
        <div className="page-head" style={{ marginBottom: 0 }}>
          <h1>Good morning, Eva 👋</h1>
          <p>Thursday 5 June 2026 · 2 active cohorts in progress</p>
        </div>
        <button className="btn btn-acc" onClick={() => go("prep")}><Icon name="slides" size={15} />Prepare Session</button>
      </div>

      {/* KPI cards */}
      <div className="stat-grid">
        {[
        { label: "Active Cohorts", val: "2", sub: "of 5 total", icon: "users", ic: "var(--vh-blue-500)", bg: "var(--vh-blue-50)" },
        { label: "My Learners", val: "29", sub: "↑ 3 active today", icon: "person", ic: "#2e7d32", bg: "#e8f5e9" },
        { label: "Avg Completion", val: "74%", sub: "↓ 2% vs last session", icon: "bars", ic: "#b45309", bg: "var(--accent-soft)" },
        { label: "Eval Score", val: "4.5", sub: "↑ 0.3 vs last cohort", icon: "star", ic: "#7c3aed", bg: "#f3e8ff" }].
        map((s) =>
        <div key={s.label} className="card stat-card">
            <div className="between" style={{ marginBottom: 12 }}>
              <div className="eyebrow">{s.label}</div>
              <div className="stat-ico" style={{ background: s.bg }}><Icon name={s.icon} size={17} style={{ color: s.ic }} /></div>
            </div>
            <div className="kpi" style={{ fontSize: 34 }}>{s.val}</div>
            <div className="dim" style={{ fontSize: 12.5, marginTop: 6 }}>{s.sub}</div>
          </div>
        )}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 18, marginBottom: 18 }}>
        {/* Sessions */}
        <div className="card" style={{ padding: 22 }}>
          <div className="between" style={{ marginBottom: 16 }}>
            <div className="eyebrow">Upcoming Sessions</div>
            <button className="btn btn-ghost btn-sm" onClick={() => go("cohorts")}>View all</button>
          </div>
          {SESSIONS.map((s, i) =>
          <div key={i} style={{ display: "flex", gap: 16, padding: "13px 0", borderBottom: i < SESSIONS.length - 1 ? "1px solid var(--line-2)" : "none" }}>
              <div style={{ width: 48, textAlign: "center", flex: "none" }}>
                <div style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: 22, lineHeight: 1, color: s.color }}>{s.day}</div>
                <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: ".1em", color: "var(--ink-3)", textTransform: "uppercase" }}>{s.mon}</div>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 700, fontSize: 14 }}>{s.course}</div>
                <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: 2 }}>{s.time} · {s.type}</div>
                <div style={{ fontSize: 12.5, color: "var(--ink-2)", marginTop: 5, fontStyle: "italic" }}>{s.topic}</div>
              </div>
              <span className="tag blue" style={{ alignSelf: "flex-start" }}>{s.type}</span>
            </div>
          )}
        </div>
        {/* Activity */}
        <div className="card" style={{ padding: 22 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>Recent Learner Activity</div>
          {ACTIVITY.map((a, i) =>
          <div key={i} className="act-item">
              <div className="act-dot" style={{ background: a.bg }}><Icon name={a.icon} size={15} style={{ color: a.ic }} /></div>
              <div style={{ flex: 1 }}><div style={{ fontSize: 13.5 }}>{a.text}</div></div>
              <div style={{ fontSize: 11.5, color: "var(--ink-3)", whiteSpace: "nowrap" }}>{a.time}</div>
            </div>
          )}
        </div>
      </div>

      {/* Cohort progress */}
      <div className="card" style={{ padding: 22 }}>
        <div className="between" style={{ marginBottom: 18 }}>
          <div className="eyebrow">Cohort Completion Overview</div>
          <button className="btn btn-ghost btn-sm" onClick={() => go("cohorts")}>Manage cohorts</button>
        </div>
        {COHORTS.filter((c) => c.status !== "Evaluation Sent").map((c) =>
        <div key={c.id} style={{ marginBottom: 14 }}>
            <div className="between" style={{ marginBottom: 7 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <Icon name={c.icon} size={16} style={{ color: c.color }} />
                <span style={{ fontWeight: 700, fontSize: 13.5 }}>{c.course}</span>
                <span className="dim" style={{ fontSize: 12.5 }}>{c.client} · {c.pp} pp</span>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span className={"tag" + (c.status === "Conducting" ? " accent" : c.status === "Completed" ? " green" : "")}>{c.status}</span>
                <span className="kpi" style={{ fontSize: 14, minWidth: 34, textAlign: "right" }}>{c.completion}%</span>
              </div>
            </div>
            <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
              <Bar pct={c.completion} cls={c.completion === 100 ? "green" : ""} />
            </div>
          </div>
        )}
      </div>
    </div>);

}

/* ── AGENDA VIEW (used inside Cohorts) ── */
const AGENDA_DAYS = [
{ date: 'Thu 5 Jun 2026', sessions: [
  { course: 'IPMA-D® | Shell', time: '09:00–17:00', type: 'On-site', topic: 'Module 3: Stakeholder Engagement', color: 'var(--vh-blue-500)', icon: 'graduation', pp: 15 },
  { course: 'BiSL® | ABN AMRO', time: '10:00–18:00', type: 'Blended', topic: 'Module 5: Information Management', color: 'var(--vh-teal)', icon: 'layers', pp: 14 }]
},
{ date: 'Fri 6 Jun 2026', sessions: [
  { course: 'IPMA-D® | Shell', time: '09:00–16:00', type: 'On-site', topic: 'Module 4: Leadership & Teams', color: 'var(--vh-blue-500)', icon: 'graduation', pp: 15 }]
},
{ date: 'Mon 9 Jun 2026', sessions: [
  { course: 'BiSL® | ABN AMRO', time: '09:00–17:00', type: 'Blended', topic: 'Assessment & Certification Prep', color: 'var(--vh-teal)', icon: 'layers', pp: 14 }]
},
{ date: 'Tue 6 Jul 2026', sessions: [
  { course: 'ITIL® 4 | Microsoft NL', time: '09:00–17:00', type: 'Online', topic: 'Module 1: Introduction to ITIL 4', color: 'var(--vh-blue-400)', icon: 'globe', pp: 28 }]
},
{ date: 'Wed 7 Jul 2026', sessions: [
  { course: 'ITIL® 4 | Microsoft NL', time: '09:00–17:00', type: 'Online', topic: 'Module 2: Service Value System', color: 'var(--vh-blue-400)', icon: 'globe', pp: 28 }]
}];


function AgendaView() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
      {AGENDA_DAYS.map((day, di) =>
      <div key={di}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
            <div style={{ fontFamily: 'var(--display)', fontWeight: 800, fontSize: 15, color: 'var(--ink)' }}>{day.date}</div>
            <div style={{ flex: 1, height: 1, background: 'var(--line)' }} />
            <span className="tag">{day.sessions.length} session{day.sessions.length > 1 ? 's' : ''}</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {day.sessions.map((s, si) =>
          <div key={si} className="card" style={{ padding: '16px 20px', display: 'flex', gap: 18, alignItems: 'center' }}>
                <div style={{ width: 4, alignSelf: 'stretch', borderRadius: 999, background: s.color, flex: 'none' }} />
                <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--surface-3)', display: 'grid', placeItems: 'center', flex: 'none' }}>
                  <Icon name={s.icon} size={18} style={{ color: s.color }} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 700, fontSize: 14.5 }}>{s.course}</div>
                  <div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 3, fontStyle: 'italic' }}>{s.topic}</div>
                </div>
                <div style={{ textAlign: 'right', flex: 'none' }}>
                  <div style={{ fontWeight: 700, fontSize: 13.5 }}>{s.time}</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 3 }}>{s.pp} participants</div>
                </div>
                <span className="tag teal" style={{ flex: 'none' }}>{s.type}</span>
                <button className="btn btn-outline btn-sm" disabled title="Binnenkort" style={{ flex: 'none', opacity:.5, cursor:"not-allowed" }}>View <Icon name="arrowR" size={12} /></button>
              </div>
          )}
          </div>
        </div>
      )}
    </div>);

}

/* ── CALENDAR / TIMELINE VIEW (used inside Cohorts) ── */
const CAL_MONTHS = [
  { k: "Dec", y: 25, label: "Dec ’25", days: 31 },
  { k: "Jan", y: 26, label: "Jan ’26", days: 31 },
  { k: "Feb", y: 26, label: "Feb ’26", days: 28 },
  { k: "Mar", y: 26, label: "Mar ’26", days: 31 },
  { k: "Apr", y: 26, label: "Apr ’26", days: 30 },
  { k: "May", y: 26, label: "May ’26", days: 31 },
  { k: "Jun", y: 26, label: "Jun ’26", days: 30 },
  { k: "Jul", y: 26, label: "Jul ’26", days: 31 }];

const N_COLS = CAL_MONTHS.length;

function calFrac(str, fallbackYear) {
  const m = String(str).match(/(\d+)\s+([A-Za-z]{3})(?:\s*'?(\d{2}))?/);
  if (!m) return 0;
  const day = parseInt(m[1], 10), mon = m[2], yy = m[3] ? parseInt(m[3], 10) : fallbackYear;
  const colIdx = CAL_MONTHS.findIndex((c) => c.k === mon && c.y === yy);
  if (colIdx < 0) return 0;
  return colIdx + (day - 1) / CAL_MONTHS[colIdx].days;
}
function calYear(endStr) { const m = String(endStr).match(/'?(\d{2})\b/); return m ? parseInt(m[1], 10) : 26; }

const CAL_STATUS = {
  Conducting: { c: "var(--vh-orange)", t: "#231f20" },
  Planned: { c: "var(--vh-blue-400)", t: "#fff" },
  Completed: { c: "#2e7d32", t: "#fff" },
  "Evaluation Sent": { c: "#7c3aed", t: "#fff" } };

function CalendarView() {
  const todayFrac = calFrac("5 Jun '26", 26);
  const rows = COHORTS.map((c) => {
    const yr = calYear(c.end);
    const s = calFrac(c.start, yr), e = calFrac(c.end, yr);
    return { ...c, s, e: Math.max(e, s + 0.12) };
  });

  return (
    <div className="card" style={{ padding: 22, overflow: "hidden" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 18, marginBottom: 16, flexWrap: "wrap" }}>
        <div className="eyebrow" style={{ marginBottom: 0 }}>Delivery Timeline · Dec 2025 – Jul 2026</div>
        <div style={{ flex: 1 }} />
        {Object.keys(CAL_STATUS).map((k) =>
        <span key={k} style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, fontWeight: 600, color: "var(--ink-2)" }}>
            <span style={{ width: 11, height: 11, borderRadius: 3, background: CAL_STATUS[k].c }} />{k}
          </span>
        )}
      </div>

      <div style={{ position: "relative", paddingLeft: 188 }}>
        <div style={{ display: "flex", borderBottom: "1px solid var(--line)", marginBottom: 6 }}>
          {CAL_MONTHS.map((mo) =>
          <div key={mo.k + mo.y} style={{ flex: 1, textAlign: "center", fontSize: 11.5, fontWeight: 700, color: "var(--ink-3)", padding: "0 0 8px", letterSpacing: ".03em" }}>{mo.label}</div>
          )}
        </div>

        <div style={{ position: "absolute", left: 188, right: 0, top: 28, bottom: 0, pointerEvents: "none" }}>
          {CAL_MONTHS.map((mo, i) =>
          <div key={i} style={{ position: "absolute", top: 0, bottom: 0, left: i / N_COLS * 100 + "%", width: 1, background: "var(--line-2)" }} />
          )}
          <div style={{ position: "absolute", top: 0, bottom: 0, left: todayFrac / N_COLS * 100 + "%", width: 2, background: "var(--vh-orange)" }}>
            <span style={{ position: "absolute", top: -2, left: "50%", transform: "translateX(-50%)", background: "var(--vh-orange)", color: "#231f20", fontSize: 10, fontWeight: 800, padding: "2px 7px", borderRadius: 999, whiteSpace: "nowrap" }}>Today</span>
          </div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 11, position: "relative", paddingTop: 6 }}>
          {rows.map((c) => {
            const st = CAL_STATUS[c.status] || CAL_STATUS.Planned;
            return (
              <div key={c.id} style={{ display: "flex", alignItems: "center", height: 42 }}>
                <div style={{ width: 188, marginLeft: -188, paddingRight: 14, display: "flex", alignItems: "center", gap: 9, flex: "none" }}>
                  <div style={{ width: 30, height: 30, borderRadius: 8, background: "var(--surface-3)", display: "grid", placeItems: "center", flex: "none" }}><Icon name={c.icon} size={15} style={{ color: c.color }} /></div>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontWeight: 700, fontSize: 12.5, lineHeight: 1.15, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.course.replace(" Certification", "").replace(" Foundation", "")}</div>
                    <div style={{ fontSize: 11, color: "var(--ink-3)" }}>{c.client}</div>
                  </div>
                </div>
                <div style={{ position: "relative", flex: 1, height: "100%" }}>
                  <div title={c.course + " · " + c.client + " · " + c.start + "–" + c.end} style={{ position: "absolute", top: "50%", transform: "translateY(-50%)", left: c.s / N_COLS * 100 + "%", width: (c.e - c.s) / N_COLS * 100 + "%", minWidth: 64, height: 30, borderRadius: 8, background: st.c, display: "flex", alignItems: "center", padding: "0 10px", gap: 7, boxShadow: "0 2px 8px rgba(29,61,124,.18)", overflow: "hidden" }}>
                    <span style={{ fontSize: 11.5, fontWeight: 700, color: st.t, whiteSpace: "nowrap" }}>{c.start}–{c.end.replace(/\s*'\d{2}/, "")}</span>
                    {c.completion > 0 && c.completion < 100 &&
                    <span style={{ marginLeft: "auto", fontSize: 10.5, fontWeight: 800, color: st.t, opacity: .85 }}>{c.completion}%</span>}
                  </div>
                </div>
              </div>);

          })}
        </div>
      </div>

      <div style={{ marginTop: 18, paddingTop: 14, borderTop: "1px solid var(--line)", fontSize: 12.5, color: "var(--ink-3)" }}>
        <Icon name="calendar" size={13} style={{ color: "var(--vh-blue-500)", verticalAlign: "-2px", marginRight: 6 }} />
        {rows.filter((c) => c.status === "Conducting").length} cohorts running now · next up: <strong style={{ color: "var(--ink-2)" }}>ITIL® 4 · Microsoft NL (6 Jul)</strong>
      </div>
    </div>);

}

/* ── COHORTS — Kanban + Agenda + Table ── */
function Cohorts() {
  const [view, setView] = useState("pipeline");
  const [filter, setFilter] = useState("All");

  const COLS = [
  { id: "Planned", label: "Planned", icon: "clock", color: "var(--ink-3)" },
  { id: "Conducting", label: "Conducting", icon: "bolt", color: "#b45309" },
  { id: "Completed", label: "Completed", icon: "check", color: "#2e7d32" },
  { id: "Evaluation Sent", label: "Evaluation Sent", icon: "star", color: "#7c3aed" }];


  const filteredList = filter === "All" ? COHORTS : COHORTS.filter((c) => c.status === filter);

  return (
    <div>
      <div className="between" style={{ marginBottom: 22 }}>
        <div className="page-head" style={{ marginBottom: 0 }}>
          <h1>My Cohorts</h1>
          <p>{COHORTS.length} cohorts total · 2 conducting now · 1 upcoming</p>
        </div>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <div className="segtabs">
            <button className={"segtab" + (view === "pipeline" ? " on" : "")} onClick={() => setView("pipeline")}><Icon name="pipeline" size={13} /> Pipeline</button>
            <button className={"segtab" + (view === "calendar" ? " on" : "")} onClick={() => setView("calendar")}><Icon name="calendar" size={13} /> Calendar</button>
            <button className={"segtab" + (view === "agenda" ? " on" : "")} onClick={() => setView("agenda")}><Icon name="clock" size={13} /> Agenda</button>
            <button className={"segtab" + (view === "table" ? " on" : "")} onClick={() => setView("table")}><Icon name="list" size={13} /> Table</button>
          </div>
          <button className="btn btn-acc" disabled title="Binnenkort" style={{ opacity:.5, cursor:"not-allowed" }}><Icon name="plus" size={14} />New Session</button>
        </div>
      </div>

      {view === "calendar" ?
      <CalendarView /> :
      view === "agenda" ?
      <AgendaView /> :
      view === "pipeline" ?
      <>
          {/* Status tabs */}
          <div style={{ display: "flex", gap: 8, marginBottom: 20, flexWrap: "wrap" }}>
            {COLS.map((col) => {
            const count = COHORTS.filter((c) => c.status === col.id).length;
            return (
              <button key={col.id} style={{ display: "flex", alignItems: "center", gap: 7, padding: "8px 14px", borderRadius: 999, border: "1.5px solid var(--line)", background: "var(--surface)", cursor: "pointer", fontSize: 13, fontWeight: 600, color: "var(--ink-2)", transition: "border-color .14s" }}
              onMouseEnter={(e) => e.currentTarget.style.borderColor = "var(--vh-blue-200)"}
              onMouseLeave={(e) => e.currentTarget.style.borderColor = "var(--line)"}>
                  <Icon name={col.icon} size={13} style={{ color: col.color }} />{col.label}
                  <span style={{ background: "var(--surface-3)", borderRadius: 999, padding: "1px 7px", fontSize: 11.5, fontWeight: 700, color: col.color }}>{count}</span>
                </button>);

          })}
          </div>
          {/* Kanban columns */}
          <div style={{ display: "flex", gap: 14, overflowX: "auto", paddingBottom: 16, alignItems: "flex-start" }}>
            {COLS.map((col) => {
            const cards = COHORTS.filter((c) => c.status === col.id);
            return (
              <div key={col.id} style={{ minWidth: 230, width: 230, flex: "none" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 12, padding: "0 2px" }}>
                    <Icon name={col.icon} size={13} style={{ color: col.color }} />
                    <span style={{ fontSize: 11.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".08em", color: col.color }}>{col.label}</span>
                    <span style={{ marginLeft: "auto", background: "var(--surface-3)", borderRadius: 999, padding: "1px 8px", fontSize: 11.5, fontWeight: 700, color: "var(--ink-3)" }}>{cards.length}</span>
                  </div>
                  <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                    {cards.map((c) =>
                  <div key={c.id} className="card" style={{ padding: "14px 16px", cursor: "pointer" }}
                  onMouseEnter={(e) => e.currentTarget.style.boxShadow = "var(--shadow-md)"}
                  onMouseLeave={(e) => e.currentTarget.style.boxShadow = "var(--shadow-sm)"}>
                        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
                          <div style={{ width: 30, height: 30, borderRadius: 8, background: "var(--surface-3)", display: "grid", placeItems: "center", flex: "none" }}>
                            <Icon name={c.icon} size={15} style={{ color: c.color }} />
                          </div>
                          <div style={{ minWidth: 0 }}>
                            <div style={{ fontWeight: 700, fontSize: 13, lineHeight: 1.2 }}>{c.course.replace(" Certification", "").replace(" Foundation", "")}</div>
                            <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{c.client}</div>
                          </div>
                        </div>
                        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", fontSize: 12, color: "var(--ink-2)" }}>
                          <span style={{ background: "var(--surface-3)", borderRadius: 6, padding: "2px 8px", fontWeight: 600 }}>{c.type}</span>
                          <span style={{ background: "var(--surface-3)", borderRadius: 6, padding: "2px 8px", fontWeight: 600 }}>{c.pp} pp</span>
                        </div>
                        <div style={{ fontSize: 11.5, color: "var(--ink-3)", marginTop: 8 }}>📅 {c.start} – {c.end}</div>
                        {c.completion > 0 && <div style={{ marginTop: 10 }}><div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "var(--ink-3)", marginBottom: 4 }}><span>Progress</span><span style={{ fontWeight: 700 }}>{c.completion}%</span></div><Bar pct={c.completion} cls={c.completion === 100 ? "green" : ""} /></div>}
                      </div>
                  )}
                    {cards.length === 0 && <div style={{ padding: "20px 16px", borderRadius: 12, border: "1.5px dashed var(--line)", textAlign: "center", fontSize: 12.5, color: "var(--ink-3)" }}>+ Add</div>}
                  </div>
                </div>);

          })}
          </div>
        </> :

      <>
          <div style={{ display: "flex", gap: 8, marginBottom: 18 }}>
            {["All", "Conducting", "Planned", "Completed", "Evaluation Sent"].map((v) =>
          <button key={v} className={"filter-chip" + (filter === v ? " on" : "")} onClick={() => setFilter(v)}>{v}</button>
          )}
          </div>
          <div className="card">
            <table className="tbl">
              <thead><tr><th>Course</th><th>Client</th><th>Delivery</th><th>Dates</th><th>Participants</th><th>Progress</th><th>Status</th><th></th></tr></thead>
              <tbody>
                {filteredList.map((c) =>
              <tr key={c.id}>
                    <td>
                      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                        <div style={{ width: 36, height: 36, borderRadius: 10, background: "var(--surface-3)", display: "grid", placeItems: "center" }}><Icon name={c.icon} size={18} style={{ color: c.color }} /></div>
                        <div><div style={{ fontWeight: 700 }}>{c.course}</div><div className="dim" style={{ fontSize: 12 }}>Van Haren</div></div>
                      </div>
                    </td>
                    <td style={{ fontWeight: 600 }}>{c.client}</td>
                    <td><span className="tag teal">{c.type}</span></td>
                    <td className="dim" style={{ fontSize: 13 }}>{c.start} – {c.end}</td>
                    <td style={{ fontWeight: 700 }}>{c.pp}</td>
                    <td style={{ minWidth: 130 }}>
                      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                        <Bar pct={c.completion} cls={c.completion === 100 ? "green" : ""} />
                        <span style={{ fontSize: 12.5, fontWeight: 700, minWidth: 34 }}>{c.completion}%</span>
                      </div>
                    </td>
                    <td><span className={"tag" + (c.status === "Conducting" ? " accent" : c.status === "Completed" ? " green" : c.status === "Evaluation Sent" ? " blue" : "")}>{c.status}</span></td>
                    <td><button className="btn btn-outline btn-sm" disabled title="Binnenkort" style={{ opacity:.5, cursor:"not-allowed" }}>View <Icon name="arrowR" size={12} /></button></td>
                  </tr>
              )}
              </tbody>
            </table>
          </div>
        </>
      }
    </div>);

}

/* ── LEARNERS ── */
function Learners() {
  const [q, setQ] = useState("");const [f, setF] = useState("All");
  const list = LEARNERS.filter((l) => {
    const m = !q || l.name.toLowerCase().includes(q.toLowerCase()) || l.org.toLowerCase().includes(q.toLowerCase());
    const s = f === "All" || f === "Behind" && l.status === "behind" || f === "Active" && l.status === "active";
    return m && s;
  });
  return (
    <div>
      <div className="between" style={{ marginBottom: 24 }}>
        <div className="page-head" style={{ marginBottom: 0 }}><h1>Learners</h1><p>{LEARNERS.length} registered · {LEARNERS.filter((l) => l.status === "active").length} active</p></div>
        <button className="btn btn-acc" disabled title="Binnenkort" style={{ opacity:.5, cursor:"not-allowed" }}><Icon name="plus" size={15} />Invite Learner</button>
      </div>
      <div style={{ display: "flex", gap: 12, marginBottom: 18, alignItems: "center" }}>
        <label className="search" style={{ maxWidth: 320, flex: "none" }}>
          <Icon name="search" size={15} /><input placeholder="Search by name, org…" value={q} onChange={(e) => setQ(e.target.value)} />
        </label>
        <div className="segtabs">
          {["All", "Active", "Behind"].map((v) => <button key={v} className={"segtab" + (f === v ? " on" : "")} onClick={() => setF(v)}>{v}</button>)}
        </div>
        <select style={{ marginLeft: "auto", padding: "9px 13px", border: "1px solid var(--line)", borderRadius: 10, fontSize: 13, fontFamily: "var(--body)", color: "var(--ink)", background: "var(--surface)", cursor: "pointer" }}>
          <option>All courses</option>
          <option>IPMA-D®</option><option>BiSL®</option><option>ITIL® 4</option>
        </select>
        <span className="dim" style={{ fontSize: 13, fontWeight: 600 }}>{list.length} learners</span>
      </div>
      <div className="card">
        <table className="tbl">
          <thead><tr><th>Learner</th><th>Organisation</th><th>Enrolled Courses</th><th>XP</th><th>Streak</th><th>Last Active</th><th>Status</th><th></th></tr></thead>
          <tbody>
            {list.map((l) =>
            <tr key={l.id}>
                <td>
                  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    <Av initials={l.initials} size={34} />
                    <div><div style={{ fontWeight: 700 }}>{l.name}</div><div className="dim" style={{ fontSize: 12 }}>{l.role}</div></div>
                  </div>
                </td>
                <td className="muted" style={{ fontSize: 13 }}>{l.org}</td>
                <td><div style={{ display: "flex", gap: 5, flexWrap: "wrap" }}>{l.courses.map((c) => <CourseChip key={c} name={c} />)}</div></td>
                <td><span className="kpi" style={{ fontSize: 14 }}>{l.xp.toLocaleString()}</span></td>
                <td><span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontWeight: 700, color: "var(--accent-ink)" }}><Icon name="flame" size={13} style={{ color: "var(--accent)" }} />{l.streak}d</span></td>
                <td className="dim" style={{ fontSize: 13 }}>{l.last}</td>
                <td><span className={"tag" + (l.status === "behind" ? " red" : " green")}>{l.status === "behind" ? "⚠ Behind" : "active"}</span></td>
                <td><button className="btn btn-outline btn-sm" disabled title="Binnenkort" style={{ opacity:.5, cursor:"not-allowed" }}>View <Icon name="arrowR" size={12} /></button></td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>);

}

Object.assign(window, { Dashboard, Cohorts, Learners });