/* screens-dash.jsx — Dashboard + Live sessions */
const { useState: dState, useEffect: dEffect } = React;

function useCountdown(target) {
  const [now, setNow] = dState(Date.now());
  dEffect(() => { const t = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(t); }, []);
  let diff = Math.max(0, new Date(target).getTime() - now);
  const d = Math.floor(diff / 86400000); diff -= d * 86400000;
  const h = Math.floor(diff / 3600000); diff -= h * 3600000;
  const m = Math.floor(diff / 60000); diff -= m * 60000;
  const s = Math.floor(diff / 1000);
  return { d, h, m, s };
}

function CountUnit({ n, label }) {
  return (
    <div className="col" style={{ alignItems: 'center', gap: 2 }}>
      <span style={{ fontFamily: 'var(--font-head)', fontWeight: 800, fontSize: 30, lineHeight: 1, color: 'inherit' }}>{String(n).padStart(2, '0')}</span>
      <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: '.08em', textTransform: 'uppercase', color: 'currentColor', opacity: .6 }}>{label}</span>
    </div>
  );
}

function fmtDate(iso) {
  return new Date(iso).toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' }) +
    ' · ' + new Date(iso).toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
}

function LiveSessionCard({ s, big, onJoin }) {
  const { d, h, m, s: sec } = useCountdown(s.scheduled_for); // re-renders every second
  const nowMs = Date.now();
  const startMs = new Date(s.scheduled_for).getTime();
  const endMs   = startMs + (s.duration_minutes || 60) * 60 * 1000;
  const isPast    = nowMs > endMs;
  const isActive  = nowMs >= startMs && nowMs <= endMs;
  const canJoin   = nowMs >= startMs - 60 * 60 * 1000 && !isPast; // 1 hr before → end

  return (
    <div className="card card-pad" style={{ background: big ? 'var(--brand-ink)' : 'var(--surface)', color: big ? '#fff' : 'var(--text)',
      borderColor: isActive ? 'var(--lime)' : big ? 'transparent' : 'var(--border)',
      boxShadow: isActive ? '0 0 0 2px var(--lime)' : undefined }}>
      <div className="row gap-10" style={{ justifyContent: 'space-between', marginBottom: 12 }}>
        {isActive
          ? <span className="pill sync" style={{ background: 'rgba(143,191,46,.18)', color: 'var(--lime-strong)', fontWeight: 800 }}><span className="dot" style={{ background: 'var(--lime-strong)', animation: 'pulse 1.2s infinite' }} /> Live now</span>
          : <span className="pill sync"><span className="dot" style={{ background: 'currentColor' }} /> Live session</span>}
        {s.module_title && <span style={{ fontSize: 13, fontWeight: 700, color: big ? 'rgba(255,255,255,.6)' : 'var(--text-muted)' }}>{s.module_title}</span>}
      </div>
      <h3 style={{ fontSize: big ? 26 : 20, color: big ? '#fff' : 'var(--text)' }}>{s.title}</h3>
      {s.description && <p style={{ fontSize: 15, color: big ? 'rgba(255,255,255,.65)' : 'var(--text-muted)', margin: '6px 0 0', lineHeight: 1.5 }}>{s.description}</p>}
      <div className="row gap-16" style={{ marginTop: 10, color: big ? 'rgba(255,255,255,.72)' : 'var(--text-muted)', fontWeight: 600, fontSize: 14.5, flexWrap: 'wrap' }}>
        <span className="row gap-6"><Icon name="calendar" size={16} /> {fmtDate(s.scheduled_for)}</span>
        {s.duration_minutes && <span className="row gap-6"><Icon name="clock" size={16} /> {s.duration_minutes} min</span>}
        {s.instructor && <span className="row gap-6"><Icon name="users" size={16} /> {s.instructor}</span>}
      </div>
      {isPast ? (
        <div style={{ marginTop: 16 }}>
          {s.recording_url
            ? <a href={s.recording_url} target="_blank" rel="noopener noreferrer" className="btn btn-primary" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><Icon name="play" size={17} /> Watch Recording</a>
            : <span className="muted" style={{ fontSize: 14 }}>Recording not yet available</span>}
        </div>
      ) : isActive ? (
        <div className="row" style={{ justifyContent: 'space-between', alignItems: 'center', marginTop: 18,
          padding: 14, borderRadius: 'var(--radius)', background: big ? 'rgba(143,191,46,.12)' : 'rgba(143,191,46,.08)', border: '1px solid rgba(143,191,46,.3)' }}>
          <span style={{ fontWeight: 700, fontSize: 15, color: 'var(--lime-strong)' }}>Session in progress</span>
          <button className="btn btn-primary" onClick={onJoin} disabled={!s.meeting_url}>
            <Icon name="play" size={17} /> Join now
          </button>
        </div>
      ) : (
        <>
          <div className="row" style={{ justifyContent: 'space-between', alignItems: 'center', marginTop: 18,
            padding: 14, borderRadius: 'var(--radius)', background: big ? 'rgba(255,255,255,.06)' : 'var(--surface-2)' }}>
            <div className="row" style={{ gap: 14 }}>
              <CountUnit n={d} label="days" /><CountUnit n={h} label="hrs" /><CountUnit n={m} label="min" /><CountUnit n={sec} label="sec" />
            </div>
            <button className="btn btn-primary" onClick={onJoin} disabled={!canJoin || !s.meeting_url}
              title={canJoin ? 'Join now' : 'Link opens 1 hour before start'}>
              <Icon name="play" size={17} /> {canJoin ? 'Join now' : 'Join'}
            </button>
          </div>
          {!canJoin && <p style={{ marginTop: 10, fontSize: 13, color: big ? 'rgba(255,255,255,.55)' : 'var(--text-muted)', fontWeight: 600 }}>The room opens 1 hour before the start time.</p>}
        </>
      )}
    </div>
  );
}
function OnboardingTour({ onClose }) {
  const { useState: dState } = React;
  const [step, setStep] = dState(0);
  
  const slides = [
    { title: "Welcome to Edstutia LMS", desc: "A premium learning environment built for cohort-based courses. Navigate using the sidebar to find your dashboard, curriculum, community, and support.", icon: "compass" },
    { title: "Curriculum & Progress", desc: "Modules are broken down into manageable lessons. Track your completion, pick up right where you left off, and see exactly what's required next.", icon: "layers" },
    { title: "Live Sessions", desc: "Join immersive synchronous sessions with your instructor and peers directly from the dashboard. Rooms open early for AV checks.", icon: "users" },
    { title: "Community & Support", desc: "Learning is social. Dive into the community discussions, reflect on your lessons, and get help whenever you need it.", icon: "chat" }
  ];

  const s = slides[step];

  return (
    <div className="tour-overlay">
       <div className="tour-modal" key={step}>
          <div className="tour-slide">
             <div className="tour-slide-graphic">
                <Icon name={s.icon} size={80} />
             </div>
             <div className="tour-slide-content stack">
                <h2>{s.title}</h2>
                <p>{s.desc}</p>
             </div>
             <div style={{ flex: 1 }} />
             <div className="tour-controls">
                <div className="tour-dots">
                   {slides.map((_, i) => (
                      <div key={i} className={`tour-dot ${i === step ? 'active' : ''}`} />
                   ))}
                </div>
                <div className="row gap-10">
                   <button className="btn btn-ghost" onClick={onClose}>Skip</button>
                   {step < slides.length - 1 ? (
                      <button className="btn btn-primary" onClick={() => setStep(step + 1)}>Next <Icon name="arrow" size={16}/></button>
                   ) : (
                      <button className="btn btn-primary" onClick={onClose}><Icon name="check" size={16}/> Get Started</button>
                   )}
                </div>
             </div>
          </div>
       </div>
    </div>
  );
}

function Dashboard({ go }) {
  const E = window.EDSTUTIA;

  // Two different status systems share the same field:
  // CMS:      'draft' | 'published'           (admin-controlled, from Supabase)
  // Progress: 'available' | 'locked' | 'in-progress' | 'completed'  (learner state)
  // Dashboard must only show published content — exclude Supabase draft modules/lessons.
  // Static data.js modules (id starts with 'm' + digit) are always visible.
  const visibleModules = (E.modules || []).filter(m =>
    String(m.id).match(/^m\d/) || m.status === 'published'
  );
  const allLessons = visibleModules.flatMap(m =>
    (m.lessons || []).filter(l => l.status !== 'draft')
  );

  const done = allLessons.filter(l => l.status === 'completed').length;
  const inProgLessons = allLessons.filter(l => l.status === 'in-progress');
  const overall = allLessons.length
    ? Math.round((done + inProgLessons.reduce((s, l) => s + (l.progress || 0) / 100, 0)) / allLessons.length * 100)
    : 0;

  // Current lesson: in-progress first → first available/published → first visible
  const current = allLessons.find(l => l.status === 'in-progress')
    || allLessons.find(l => l.status === 'available' || l.status === 'published')
    || allLessons[0];

  const curMod = current
    ? visibleModules.find(m => (m.lessons || []).some(l => l.id === current.id))
    : visibleModules[0];

  // Module-level progress (published/active lessons only)
  const modLessons = curMod ? (curMod.lessons || []).filter(l => l.status !== 'draft') : [];
  const modDone = modLessons.filter(l => l.status === 'completed').length;
  const modPct = modLessons.length ? Math.round((modDone / modLessons.length) * 100) : 0;

  const [tourCompleted, setTourCompleted] = dState(() => localStorage.getItem('eds_tour_completed') === 'true');
  const [showTour, setShowTour] = dState(false);

  const completeTour = () => {
    localStorage.setItem('eds_tour_completed', 'true');
    setTourCompleted(true);
    setShowTour(false);
  };

  return (
    <div className="page page-wide enter">

      {showTour && <OnboardingTour onClose={completeTour} />}

      {!tourCompleted && !showTour && (
        <div className="tour-welcome-banner">
          <div>
             <h2 style={{ fontSize: 26, marginBottom: 8 }}>Ready to explore the platform?</h2>
             <p style={{ fontSize: 16, opacity: 0.9, maxWidth: 500 }}>Take a quick 4-step tour to learn how to navigate your curriculum, join live sessions, and engage with the community.</p>
          </div>
          <div className="row gap-10" style={{ zIndex: 1 }}>
             <button className="btn btn-ghost" style={{ background: 'rgba(255,255,255,0.1)', color: '#fff', borderColor: 'transparent' }} onClick={completeTour}>Skip for now</button>
             <button className="btn btn-primary" style={{ background: '#fff', color: 'var(--brand-ink)' }} onClick={() => setShowTour(true)}>Start Tour <Icon name="play" size={16} /></button>
          </div>
        </div>
      )}

      <div style={{ marginBottom: 28 }}>
        <span className="eyebrow">Immersive Learning Lab Cohort · Summer 2026</span>
        <h1 style={{ fontSize: 38, marginTop: 6 }}>Welcome back, {E.learner.first}.</h1>

        {/* Progress strip */}
        {curMod && (
          <div style={{ marginTop: 22 }}>
            <p style={{
              fontSize: 12, fontWeight: 800, letterSpacing: '.09em', textTransform: 'uppercase',
              color: 'var(--lime-strong)', marginBottom: 10,
            }}>
              Your course progress
            </p>
            <div style={{
              padding: '16px 20px',
              background: 'linear-gradient(130deg, var(--lime-soft) 0%, color-mix(in srgb, var(--lime) 10%, var(--surface)) 100%)',
              border: '1.5px solid color-mix(in srgb, var(--lime) 55%, transparent)',
              borderRadius: 14,
              display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap',
            }}>

              {/* Module badge */}
              <div style={{
                background: 'var(--lime)', color: 'var(--brand-ink)',
                borderRadius: 9, padding: '8px 15px',
                fontFamily: 'var(--font-head)', fontWeight: 800, fontSize: 12.5,
                whiteSpace: 'nowrap', letterSpacing: '.03em', flex: 'none',
                boxShadow: '0 2px 8px color-mix(in srgb, var(--lime) 45%, transparent)',
              }}>
                Module {curMod.num} <span style={{ opacity: .65 }}>of {visibleModules.length}</span>
              </div>

              {/* Module name + progress bar */}
              <div style={{ flex: 1, minWidth: 160 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
                  <span style={{ fontWeight: 700, fontSize: 14.5, color: 'var(--text)', lineHeight: 1.2 }}>{curMod.title}</span>
                  <span style={{ fontWeight: 700, fontSize: 13, color: 'var(--lime-strong)', whiteSpace: 'nowrap', marginLeft: 14 }}>
                    {modDone}&thinsp;/&thinsp;{modLessons.length} lessons
                  </span>
                </div>
                <div style={{ height: 6, background: 'rgba(0,0,0,.09)', borderRadius: 99, overflow: 'hidden' }}>
                  <div style={{
                    height: '100%',
                    width: (modPct || 0) + '%',
                    background: 'linear-gradient(90deg, var(--lime-strong), var(--lime))',
                    borderRadius: 99,
                    transition: 'width .9s cubic-bezier(.4,0,.2,1)',
                    minWidth: modPct > 0 ? 12 : 0,
                  }} />
                </div>
              </div>

              {/* Thin divider */}
              <div style={{ width: 1, height: 32, background: 'var(--lime)', opacity: .3, flex: 'none' }} />

              {/* Overall % */}
              <div style={{ textAlign: 'center', flex: 'none', minWidth: 58 }}>
                <div style={{
                  fontFamily: 'var(--font-head)', fontWeight: 800, fontSize: 28,
                  color: 'var(--lime-strong)', lineHeight: 1,
                }}>{overall}%</div>
                <div style={{
                  fontSize: 11, fontWeight: 700, color: 'var(--text-muted)',
                  marginTop: 3, textTransform: 'uppercase', letterSpacing: '.07em',
                }}>overall</div>
              </div>

            </div>
          </div>
        )}
      </div>

      <div className="grid" style={{ gridTemplateColumns: '1.55fr 1fr', gap: 22, alignItems: 'start' }}>
        {/* Continue learning */}
        {current && curMod ? (
        <div className="card" style={{ overflow: 'hidden' }}>
          <div style={{ background: 'var(--lime-soft)', padding: '22px 26px' }}>
            <span className="eyebrow">Continue learning</span>
            <div className="row gap-16" style={{ marginTop: 12, alignItems: 'flex-start' }}>
              <div style={{ width: 54, height: 54, borderRadius: 16, background: 'var(--brand-ink)', color: 'var(--lime)', display: 'grid', placeItems: 'center', flex: 'none' }}>
                <Icon name="headset" size={28} />
              </div>
              <div style={{ flex: 1 }}>
                <span className="muted" style={{ fontWeight: 700, fontSize: 14 }}>{curMod.title} · Lesson {current.num}</span>
                <h2 style={{ fontSize: 26, marginTop: 2 }}>{current.title}</h2>
                <p style={{ marginTop: 6, fontSize: 16 }}>{current.summary}</p>
              </div>
            </div>
          </div>
          <div className="card-pad">
            <p className="muted" style={{ marginBottom: 16, fontWeight: 600, fontSize: 15.5 }}>Lesson {current.num} of {modLessons.length} in this module · about {current.minutes} minutes</p>
            <div className="row gap-10" style={{ flexWrap: 'wrap' }}>
              <button className="btn btn-primary btn-lg" onClick={() => go({ name: 'lesson', id: current.id })}><Icon name="play" size={19} /> Resume lesson</button>
              <button className="btn btn-ghost btn-lg" onClick={() => go({ name: 'curriculum' })}><Icon name="grid" size={19} /> All modules</button>
            </div>
          </div>
        </div>
        ) : (
        <div className="card card-pad" style={{ display: 'grid', placeItems: 'center', minHeight: 180, color: 'var(--text-muted)', textAlign: 'center' }}>
          <div>
            <Icon name="layers" size={32} style={{ marginBottom: 10, opacity: .4 }} />
            <p style={{ fontWeight: 700 }}>No published lessons yet</p>
            <p style={{ fontSize: 14, marginTop: 4 }}>Check back soon — your course content is being prepared.</p>
          </div>
        </div>
        )}

        {/* Next live session */}
        <div className="stack">
          {E.live && E.live[0]
            ? <LiveSessionCard s={E.live[0]} big onJoin={() => go({ name: 'live' })} />
            : <div className="card card-pad" style={{ color: 'var(--text-muted)', textAlign: 'center', padding: 32 }}><Icon name="calendar" size={28} style={{ marginBottom: 8, opacity: .4 }} /><p style={{ fontWeight: 700 }}>No upcoming live sessions</p></div>
          }
        </div>
      </div>

      {/* Modules progress — only published modules */}
      <div className="sec-head" style={{ marginTop: 38 }}>
        <h2>Your modules</h2>
        <button className="btn btn-ghost btn-sm" onClick={() => go({ name: 'curriculum' })}>View curriculum <Icon name="arrow" size={16} /></button>
      </div>
      <div className="grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
        {visibleModules.map(mod => {
          const visLessons = (mod.lessons || []).filter(l => l.status !== 'draft');
          const lc = visLessons.length;
          const dc = visLessons.filter(l => l.status === 'completed').length;
          const hasCurrent = current && visLessons.some(l => l.id === current.id);
          const status = lc === 0 ? 'Empty' : dc === lc ? 'Complete' : hasCurrent || dc > 0 ? 'In progress' : 'Not started';
          const live = visLessons.some(l => l.type === 'SYNCHRONOUS');
          return (
            <div key={mod.id} className="card card-pad card-hover" onClick={() => go({ name: 'curriculum', focus: mod.id })}>
              <span style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 12.5, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--lime-strong)' }}>Module {mod.num}</span>
              <h3 style={{ fontSize: 20, marginTop: 6 }}>{mod.title}</h3>
              <div className="row gap-10" style={{ marginTop: 16, alignItems: 'center' }}>
                <span className="pill" style={status === 'In progress' ? { background: 'var(--lime-soft)', color: 'var(--lime-strong)' } : undefined}>{status}</span>
                <span className="muted" style={{ fontSize: 14, fontWeight: 600 }}>{lc} lesson{lc !== 1 ? 's' : ''}{live ? ' · includes live' : ''}</span>
              </div>
            </div>
          );
        })}
      </div>

      {/* What's next + community */}
      <div className="grid" style={{ gridTemplateColumns: '1.2fr 1fr', gap: 22, marginTop: 38, alignItems: 'start' }}>
        <div>
          <div className="sec-head"><h2>What's next</h2></div>
          <div className="card card-pad stack" style={{ gap: 0 }}>
            {[
              current && curMod && { ic: 'play', t: 'Continue ' + current.title, s: curMod.title, act: () => go({ name: 'lesson', id: current.id }) },
              current && { ic: 'pen', t: 'Write your Lesson 1 reflection', s: 'Reflection journal', act: () => go({ name: 'lesson', id: current.id }) },
              E.live && E.live[0] && { ic: 'calendar', t: 'Prepare for First VR Dive', s: 'Live · ' + fmtDate(E.live[0].date), act: () => go({ name: 'live' }) },
            ].filter(Boolean).map((r, i) => (
              <button key={i} onClick={r.act} className="row gap-16" style={{ border: 'none', background: 'none', margin: 0, font: 'inherit', color: 'inherit', textAlign: 'left', cursor: 'pointer', padding: '15px 4px',
                borderTop: i ? '1px solid var(--border)' : 'none', width: '100%' }}>
                <span style={{ width: 40, height: 40, borderRadius: 'var(--radius-sm)', background: 'var(--lime-soft)', color: 'var(--lime-strong)', display: 'grid', placeItems: 'center', flex: 'none' }}><Icon name={r.ic} size={20} /></span>
                <span className="col" style={{ flex: 1 }}><strong style={{ fontSize: 16 }}>{r.t}</strong><span className="muted" style={{ fontSize: 13.5 }}>{r.s}</span></span>
                <Icon name="chevron" size={18} style={{ color: 'var(--text-muted)' }} />
              </button>
            ))}
          </div>
        </div>
        <div>
          <div className="sec-head"><h2>From the community</h2>
            <button className="btn btn-ghost btn-sm" onClick={() => go({ name: 'community' })}>Visit <Icon name="arrow" size={16} /></button>
          </div>
          <div className="card card-pad">
            {E.community.threads.slice(0, 2).map((t, i) => (
              <button key={t.id} onClick={() => go({ name: 'community' })} className="row gap-10" style={{ border: 'none', background: 'none', margin: 0, font: 'inherit', color: 'inherit', textAlign: 'left', cursor: 'pointer', width: '100%',
                padding: '12px 2px', borderTop: i ? '1px solid var(--border)' : 'none', alignItems: 'flex-start' }}>
                <div className="avatar" style={{ width: 38, height: 38, fontSize: 13, background: t.role === 'Instructor' ? 'linear-gradient(135deg,#6BA8E8,#2C5E94)' : undefined }}>{t.avatar}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <strong style={{ fontSize: 15.5, lineHeight: 1.3, display: 'block' }}>{t.title}</strong>
                  <span className="muted" style={{ fontSize: 13.5 }}>{t.author} · {t.replies.length} {t.replies.length === 1 ? 'reply' : 'replies'}</span>
                </div>
              </button>
            ))}
            <button className="btn btn-soft btn-sm" style={{ marginTop: 14, width: '100%' }} onClick={() => go({ name: 'community' })}><Icon name="chat" size={16} /> Join the conversation</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function LiveSessions({ go }) {
  const [sessions, setSessions] = dState([]);
  const [loading, setLoading] = dState(true);

  dEffect(() => {
    if (!window.supabaseClient) { setLoading(false); return; }
    (async () => {
      const { data } = await window.supabaseClient
        .from('live_sessions').select('*').order('scheduled_for', { ascending: true });
      setSessions(data || []);
      setLoading(false);
    })();
  }, []);

  const nowMs = Date.now();
  const endMs = s => new Date(s.scheduled_for).getTime() + (s.duration_minutes || 60) * 60 * 1000;
  const upcoming = sessions.filter(s => endMs(s) > nowMs);
  const past = [...sessions.filter(s => endMs(s) <= nowMs)].reverse();
  const handleJoin = s => { if (s.meeting_url) window.open(s.meeting_url, '_blank', 'noopener,noreferrer'); };

  return (
    <div className="page enter">
      <span className="eyebrow">Synchronous</span>
      <h1 style={{ fontSize: 34, marginTop: 6 }}>Live sessions</h1>
      <p className="muted" style={{ fontSize: 18, marginTop: 6, maxWidth: 620 }}>Join your cohort and instructor in real time. Rooms open 1 hour early — there's nothing to install.</p>

      {loading ? (
        <div className="stack" style={{ marginTop: 26, gap: 18 }}>
          <Skeleton height={260} radius={16} />
          <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 18 }}>
            <Skeleton height={160} radius={16} /><Skeleton height={160} radius={16} />
          </div>
        </div>
      ) : sessions.length === 0 ? (
        <div className="card card-pad" style={{ marginTop: 26, textAlign: 'center', padding: '64px 24px', color: 'var(--text-muted)' }}>
          <Icon name="calendar" size={40} style={{ marginBottom: 14 }} />
          <p style={{ fontWeight: 700, fontSize: 18 }}>No sessions scheduled yet</p>
          <p style={{ fontSize: 15, marginTop: 6 }}>Your instructor will add upcoming live sessions here. Check back soon!</p>
        </div>
      ) : (
        <>
          {upcoming.length > 0 && (
            <div className="stack" style={{ marginTop: 26, gap: 18 }}>
              <LiveSessionCard s={upcoming[0]} big onJoin={() => handleJoin(upcoming[0])} />
              {upcoming.length > 1 && (
                <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 18 }}>
                  {upcoming.slice(1).map(s => <LiveSessionCard key={s.id} s={s} onJoin={() => handleJoin(s)} />)}
                </div>
              )}
            </div>
          )}
          {past.length > 0 && (
            <div style={{ marginTop: 32 }}>
              <p style={{ fontWeight: 800, fontSize: 12, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 16 }}>Past Sessions</p>
              <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 18 }}>
                {past.map(s => <LiveSessionCard key={s.id} s={s} onJoin={() => handleJoin(s)} />)}
              </div>
            </div>
          )}
        </>
      )}

      {upcoming.length > 0 && (
        <div className="card card-pad" style={{ marginTop: 22, background: 'var(--lime-soft)', borderColor: 'transparent' }}>
          <div className="row gap-16" style={{ alignItems: 'flex-start' }}>
            <Icon name="bulb" size={26} style={{ color: 'var(--lime-strong)', flex: 'none', marginTop: 2 }} />
            <div>
              <h3 style={{ fontSize: 19 }}>New to live sessions?</h3>
              <p style={{ marginTop: 6, fontSize: 16 }}>You can join from this computer with a headset or just your screen — a desktop alternative is always available. Test your camera and microphone from the waiting room before class begins.</p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Dashboard, LiveSessions, LiveSessionCard, fmtDate });