// UI components for Break Debate booking flow walkthrough.
// All static — driven by props. The cursor & state machine lives in app.jsx.

const BD = {
  sidebarBg: '#0b1226',
  sidebarSelected: '#1c2540',
  sidebarText: '#ffffff',
  sidebarMuted: '#e5e7eb',
  brandBlue: '#1e4fc8',
  ink: '#0b1230',
  inkSoft: '#11173a',
  textMute: '#6b7280',
  textLight: '#9ca3af',
  border: '#e5e7eb',
  borderSoft: '#eef0f3',
  panel: '#ffffff',
  scrim: 'rgba(11, 18, 48, 0.45)',
  slot: '#f4f5f7',
  slotHover: '#eceef1',
  pillBlue: '#e8effb',
  pillBlueText: '#1e4fc8',
  font: "'Inter', 'StyreneB', system-ui, sans-serif",
};

// --- Tiny SVG icon set (matches screenshots) ----------------------------------
const Icon = {
  Book: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 18} height={p.size || 18} fill="none" stroke={p.color || 'currentColor'} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 4.5A1.5 1.5 0 0 1 5.5 3H19a1 1 0 0 1 1 1v15.5"/>
      <path d="M4 4.5V20a1 1 0 0 0 1 1h15"/>
      <path d="M9 7h7M9 11h7M9 15h5"/>
    </svg>
  ),
  Folder: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 18} height={p.size || 18} fill="none" stroke={p.color || 'currentColor'} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z"/>
    </svg>
  ),
  Activity: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 18} height={p.size || 18} fill="none" stroke={p.color || 'currentColor'} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="4" y="4" width="14" height="16" rx="1.5"/>
      <path d="M7 4v-1M15 4v-1"/>
      <circle cx="11" cy="11" r="2"/>
      <path d="M7 16c1-1.5 2.5-2 4-2s3 0.5 4 2"/>
    </svg>
  ),
  Bank: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 18} height={p.size || 18} fill="none" stroke={p.color || 'currentColor'} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 10l9-5 9 5"/>
      <path d="M5 10v8M19 10v8M9 10v8M15 10v8"/>
      <path d="M3 20h18"/>
    </svg>
  ),
  Chat: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 18} height={p.size || 18} fill="none" stroke={p.color || 'currentColor'} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 12a8 8 0 0 1-11.3 7.3L4 21l1.7-5.7A8 8 0 1 1 21 12Z"/>
    </svg>
  ),
  Bell: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 18} height={p.size || 18} fill="none" stroke={p.color || 'currentColor'} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M6 10a6 6 0 1 1 12 0c0 5 2 6 2 6H4s2-1 2-6"/>
      <path d="M10 20a2 2 0 0 0 4 0"/>
    </svg>
  ),
  ChevronRight: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 16} height={p.size || 16} fill="none" stroke={p.color || 'currentColor'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9 6l6 6-6 6"/>
    </svg>
  ),
  ChevronDown: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 16} height={p.size || 16} fill="none" stroke={p.color || 'currentColor'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M6 9l6 6 6-6"/>
    </svg>
  ),
  ChevronLeft: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 16} height={p.size || 16} fill="none" stroke={p.color || 'currentColor'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M15 6l-6 6 6 6"/>
    </svg>
  ),
  ArrowLeft: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 20} height={p.size || 20} fill="none" stroke={p.color || 'currentColor'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M19 12H5M12 19l-7-7 7-7"/>
    </svg>
  ),
  Search: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 18} height={p.size || 18} fill="none" stroke={p.color || 'currentColor'} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="11" cy="11" r="7"/>
      <path d="M21 21l-4.3-4.3"/>
    </svg>
  ),
  Plus: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 18} height={p.size || 18} fill="none" stroke={p.color || 'currentColor'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 5v14M5 12h14"/>
    </svg>
  ),
  Person: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 18} height={p.size || 18} fill="none" stroke={p.color || 'currentColor'} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="8" r="4"/>
      <path d="M4 21c0-4 4-6 8-6s8 2 8 6"/>
    </svg>
  ),
  Clock: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 18} height={p.size || 18} fill="none" stroke={p.color || 'currentColor'} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9"/>
      <path d="M12 7v5l3 2"/>
    </svg>
  ),
  Globe: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 16} height={p.size || 16} fill="none" stroke={p.color || 'currentColor'} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9"/>
      <path d="M3 12h18"/>
      <path d="M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/>
    </svg>
  ),
  Calendar: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 18} height={p.size || 18} fill="none" stroke={p.color || 'currentColor'} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="16" rx="2"/>
      <path d="M3 9h18M8 3v4M16 3v4"/>
    </svg>
  ),
  Trash: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 16} height={p.size || 16} fill="none" stroke={p.color || 'currentColor'} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12"/>
    </svg>
  ),
  X: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 16} height={p.size || 16} fill="none" stroke={p.color || 'currentColor'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M6 6l12 12M6 18L18 6"/>
    </svg>
  ),
  Dots: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 18} height={p.size || 18} fill={p.color || 'currentColor'}>
      <circle cx="6" cy="12" r="1.4"/>
      <circle cx="12" cy="12" r="1.4"/>
      <circle cx="18" cy="12" r="1.4"/>
    </svg>
  ),
  ShieldB: (p) => (
    <svg viewBox="0 0 40 40" width={p.size || 40} height={p.size || 40} fill="none">
      <rect x="2" y="2" width="36" height="36" rx="9" fill={BD.brandBlue}/>
      <path d="M14 11h7.5c2.6 0 4.5 1.5 4.5 4 0 1.7-1 2.9-2.4 3.5 1.9.5 3.1 1.9 3.1 4 0 2.8-2.1 4.5-5.2 4.5H14V11Z" fill="#fff"/>
      <path d="M17.5 14v3.5h3.7c1.2 0 2-.7 2-1.8s-.8-1.7-2-1.7h-3.7Zm0 6.3v3.7h4c1.4 0 2.3-.7 2.3-1.9 0-1.1-.9-1.8-2.3-1.8h-4Z" fill={BD.brandBlue}/>
    </svg>
  ),
  Star: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 20} height={p.size || 20} fill={p.color || 'currentColor'}>
      <path d="M12 2l3 7 7 .7-5 4.5 1.5 7L12 17.5 5.5 21.2 7 14.2l-5-4.5L9 9l3-7Z"/>
    </svg>
  ),
};

// --- Sidebar ----------------------------------------------------------------
function Sidebar({ activeNav = 'My Courses' }) {
  const items = [
    { id: 'My Courses', label: 'My Courses', icon: <Icon.Book size={18} /> },
    { id: 'All Courses', label: 'All Courses', icon: <Icon.Folder size={18} /> },
    { id: 'Activity', label: 'Activity', icon: <Icon.Activity size={18} /> },
    { id: 'Fees', label: 'Fees', icon: <Icon.Bank size={18} /> },
    { id: 'Chats', label: 'Chats', icon: <Icon.Chat size={18} /> },
    { id: 'Notifications', label: 'Notifications', icon: <Icon.Bell size={18} /> },
  ];

  return (
    <aside style={{
      width: 232, flexShrink: 0,
      background: BD.sidebarBg,
      color: BD.sidebarText,
      display: 'flex', flexDirection: 'column',
      padding: '20px 16px',
      borderRight: '1px solid rgba(255,255,255,0.04)',
    }}>
      {/* Brand */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '4px 6px 24px' }}>
        <Icon.ShieldB size={38} />
        <span style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em' }}>Break Debate</span>
      </div>

      {/* Nav */}
      <nav style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        {items.map(it => {
          const active = it.id === activeNav;
          return (
            <div key={it.id} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '11px 12px',
              borderRadius: 8,
              background: active ? BD.sidebarSelected : 'transparent',
              color: active ? '#fff' : 'rgba(255,255,255,0.85)',
              fontSize: 14.5,
              fontWeight: active ? 600 : 500,
              letterSpacing: '-0.005em',
            }}>
              {it.icon}
              <span>{it.label}</span>
            </div>
          );
        })}
      </nav>

      <div style={{ flex: 1 }} />

      {/* Account */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '10px 12px',
        background: 'rgba(255,255,255,0.04)',
        borderRadius: 10,
        marginTop: 12,
      }}>
        <div style={{
          width: 30, height: 30, borderRadius: '50%',
          background: 'linear-gradient(180deg, #cdd5e0 0%, #aab3c2 100%)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#2a3450', fontSize: 13, fontWeight: 600,
        }}>
          <Icon.Person size={16} color="#2a3450" />
        </div>
        <span style={{ flex: 1, fontSize: 14, fontWeight: 500 }}>Account</span>
        <Icon.ChevronRight size={14} color="rgba(255,255,255,0.6)" />
      </div>
    </aside>
  );
}

// --- Dashboard (courses page) -----------------------------------------------
function Dashboard({ courseTileRef, sessionCardRef, showUpcomingSession = false }) {
  return (
    <div style={{ flex: 1, background: '#fff', position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
      {/* Big blue hero banner */}
      <div style={{
        background: BD.brandBlue,
        margin: '8px 0 0',
        borderRadius: '0 0 18px 18px',
        height: 360,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
        position: 'relative',
      }}>
        <div style={{
          fontFamily: BD.font,
          fontWeight: 800,
          color: '#fff',
          textAlign: 'center',
          lineHeight: 0.85,
          letterSpacing: '-0.02em',
        }}>
          <div style={{ fontSize: 180 }}>BREAK</div>
          <div style={{ fontSize: 86, letterSpacing: '0.04em', marginTop: 6 }}>DEBATE</div>
        </div>
      </div>

      {/* Course header strip */}
      <div style={{
        padding: '24px 40px 0',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        flexShrink: 0,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <Icon.ShieldB size={42} />
          <div style={{ fontSize: 22, fontWeight: 600, color: BD.ink, letterSpacing: '-0.01em' }}>Break Debate</div>
        </div>
        <button style={{
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '10px 18px',
          background: '#fff',
          border: `1px solid ${BD.border}`,
          borderRadius: 8,
          color: BD.ink,
          fontSize: 14.5, fontWeight: 500,
          fontFamily: BD.font,
          cursor: 'default',
        }}>
          <Icon.Plus size={16} />
          Join course
        </button>
      </div>

      {/* Courses grid */}
      <div style={{ padding: '28px 40px 32px', display: 'flex', gap: 40, flex: 1, minHeight: 0 }}>
        {/* Left: course list */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 16, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ fontSize: 16, fontWeight: 500, color: BD.textMute }}>My Courses (2)</div>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '8px 14px',
              border: `1px solid ${BD.border}`,
              borderRadius: 8,
              width: 320,
              color: BD.textLight, fontSize: 14,
            }}>
              <Icon.Search size={16} color={BD.brandBlue}/>
              Search
            </div>
          </div>

          {/* Tile 1 */}
          <div style={{
            display: 'flex', gap: 18, alignItems: 'center',
            padding: 16,
            border: `1px solid ${BD.border}`,
            borderRadius: 12,
          }}>
            <div style={{
              width: 110, height: 78, borderRadius: 8,
              background: 'linear-gradient(135deg, #d9c89d 0%, #b8956a 60%, #8b6f4b 100%)',
              flexShrink: 0,
              position: 'relative', overflow: 'hidden',
            }}>
              <div style={{ position: 'absolute', bottom: 8, left: 12, width: 50, height: 26, background: '#1e3a8a', borderRadius: 2, boxShadow: '2px -2px 0 #b91c1c, 4px -4px 0 #f5deb3' }}/>
              <div style={{ position: 'absolute', top: 18, right: 14, width: 14, height: 14, borderRadius: '50%', background: '#e74c3c' }}/>
            </div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 17, fontWeight: 600, color: BD.ink, marginBottom: 4, letterSpacing: '-0.01em' }}>Break Debate LD Application</div>
              <div style={{ fontSize: 14, color: BD.textMute }}>Advanced Lincoln-Douglas Debate</div>
            </div>
          </div>

          {/* Tile 2 — LD Drill Sessions */}
          <div ref={courseTileRef} style={{
            display: 'flex', gap: 18, alignItems: 'center',
            padding: 16,
            border: `1px solid ${BD.border}`,
            borderRadius: 12,
          }}>
            <div style={{
              width: 110, height: 78, borderRadius: 8,
              background: 'linear-gradient(180deg, #6b8db8 0%, #2c4a73 100%)',
              flexShrink: 0,
              position: 'relative', overflow: 'hidden',
            }}>
              <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 30% 80%, rgba(255,255,255,0.4) 0%, transparent 30%), radial-gradient(circle at 60% 70%, rgba(255,255,255,0.3) 0%, transparent 25%), radial-gradient(circle at 80% 60%, rgba(255,255,255,0.35) 0%, transparent 28%)' }}/>
            </div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 17, fontWeight: 600, color: BD.ink, marginBottom: 4, letterSpacing: '-0.01em' }}>LD Drill Sessions</div>
              <div style={{ fontSize: 14, color: BD.textMute }}>Shyla Maan</div>
            </div>
          </div>
        </div>

        {/* Right: Upcoming tabs & content */}
        <div style={{ width: 540, flexShrink: 0, display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', gap: 8, marginBottom: 18 }}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 8,
              padding: '8px 14px',
              border: `1px solid ${BD.border}`,
              borderRadius: 8,
              fontSize: 14, color: BD.ink, fontWeight: 500,
            }}>
              Upcoming <span style={{
                background: BD.borderSoft, padding: '1px 8px', borderRadius: 10,
                fontSize: 12, color: BD.textMute, fontWeight: 600,
              }}>{showUpcomingSession ? '1' : '0'}</span>
            </div>
            <div style={{
              padding: '8px 14px',
              border: `1px solid ${BD.border}`,
              borderRadius: 8,
              fontSize: 14, color: BD.textMute, fontWeight: 500,
            }}>Past</div>
          </div>

          {showUpcomingSession ? (
            <div ref={sessionCardRef} style={{
              display: 'flex', gap: 14, alignItems: 'flex-start',
              padding: 16,
              border: `1px solid ${BD.border}`,
              borderRadius: 12,
            }}>
              <div style={{
                width: 56, flexShrink: 0,
                background: BD.ink, color: '#fff',
                borderRadius: 6,
                textAlign: 'center',
                padding: '6px 0',
              }}>
                <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' }}>May</div>
                <div style={{ fontSize: 22, fontWeight: 700, lineHeight: 1.1 }}>16</div>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 16, fontWeight: 600, color: BD.ink, marginBottom: 4 }}>Live Session</div>
                <div style={{ fontSize: 11, color: BD.textMute, letterSpacing: '0.08em', fontWeight: 600, marginBottom: 8 }}>HOSTED BY ARCHAN SEN</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: BD.textMute, marginBottom: 8 }}>
                  <Icon.Clock size={14} color={BD.textMute}/>
                  Sat 07:00 AM – 08:00 AM
                </div>
                <div style={{
                  display: 'inline-block',
                  padding: '3px 10px',
                  borderRadius: 4,
                  background: BD.pillBlue,
                  color: BD.pillBlueText,
                  fontSize: 12, fontWeight: 500,
                }}>Upcoming</div>
              </div>
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flex: 1, paddingTop: 24 }}>
              <CalendarEmpty size={140} />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// 3D calendar empty-state illustration
function CalendarEmpty({ size = 110 }) {
  return (
    <svg viewBox="0 0 120 110" width={size} height={size * 0.92} fill="none" style={{ opacity: 0.94 }}>
      <ellipse cx="60" cy="100" rx="44" ry="4" fill="#eef0f3"/>
      <rect x="18" y="14" width="84" height="78" rx="6" fill="#cfd5de"/>
      <rect x="18" y="14" width="84" height="20" rx="6" fill="#7e879a"/>
      <rect x="18" y="28" width="84" height="6" fill="#7e879a"/>
      <rect x="22" y="42" width="76" height="46" rx="3" fill="#f6f7f9"/>
      <g fill="#cfd5de">
        <rect x="26" y="46" width="10" height="10" rx="1.5"/>
        <rect x="40" y="46" width="10" height="10" rx="1.5"/>
        <rect x="54" y="46" width="10" height="10" rx="1.5"/>
        <rect x="68" y="46" width="10" height="10" rx="1.5"/>
        <rect x="82" y="46" width="10" height="10" rx="1.5"/>
        <rect x="26" y="60" width="10" height="10" rx="1.5"/>
        <rect x="40" y="60" width="10" height="10" rx="1.5" fill="#0b1230"/>
        <rect x="54" y="60" width="10" height="10" rx="1.5"/>
        <rect x="68" y="60" width="10" height="10" rx="1.5"/>
        <rect x="82" y="60" width="10" height="10" rx="1.5"/>
        <rect x="26" y="74" width="10" height="10" rx="1.5"/>
        <rect x="40" y="74" width="10" height="10" rx="1.5"/>
        <rect x="54" y="74" width="10" height="10" rx="1.5"/>
        <rect x="68" y="74" width="10" height="10" rx="1.5"/>
        <rect x="82" y="74" width="10" height="10" rx="1.5"/>
      </g>
      <rect x="32" y="6" width="3" height="14" rx="1.5" fill="#7e879a"/>
      <rect x="85" y="6" width="3" height="14" rx="1.5" fill="#7e879a"/>
      <circle cx="92" cy="80" r="14" fill="#fff" stroke="#cfd5de" strokeWidth="1.5"/>
      <path d="M92 73v8M92 81l4 2" stroke="#7e879a" strokeWidth="1.6" strokeLinecap="round"/>
      <circle cx="100" cy="58" r="2.4" fill="#7e879a"/>
      <path d="M101 50l3 3M104 50l-3 3" stroke="#7e879a" strokeWidth="1.4" strokeLinecap="round"/>
    </svg>
  );
}

// --- Course page (Shyla Maan / LD Drill Sessions) ---------------------------
function CoursePage({ bookSessionRef, sessionCardRef, showUpcomingSession = false, sessionCardClicked = false }) {
  return (
    <div style={{ flex: 1, background: '#fff', display: 'flex', flexDirection: 'column' }}>
      {/* Top: title row */}
      <div style={{ padding: '28px 40px 0', display: 'flex', alignItems: 'flex-start', gap: 16 }}>
        <Icon.ArrowLeft size={22} color={BD.ink}/>
        <div>
          <div style={{ fontSize: 26, fontWeight: 700, color: BD.ink, letterSpacing: '-0.015em' }}>Shyla Maan</div>
          <div style={{ fontSize: 15, color: BD.textMute, marginTop: 2 }}>LD Drill Sessions</div>
        </div>
      </div>

      {/* Tabs */}
      <div style={{ padding: '24px 40px 0', display: 'flex', gap: 28 }}>
        <div style={{ paddingBottom: 12, borderBottom: `2px solid ${BD.ink}`, color: BD.ink, fontWeight: 600, fontSize: 15 }}>Home</div>
        <div style={{ paddingBottom: 12, color: BD.textMute, fontWeight: 500, fontSize: 15 }}>Timeline</div>
      </div>
      <div style={{ height: 1, background: BD.border, margin: '0 0 0 0' }}/>

      {/* Main content */}
      <div style={{ padding: '32px 40px', display: 'flex', gap: 32, flex: 1, minHeight: 0 }}>
        {/* Left: sessions list / empty state */}
        <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
          {showUpcomingSession ? (
            <>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
                <div style={{ fontSize: 24, fontWeight: 700, color: BD.ink, letterSpacing: '-0.015em' }}>1 Upcoming Session</div>
                <BookSessionButton refEl={bookSessionRef} variant="muted"/>
              </div>
              <div style={{ background: BD.borderSoft, padding: '10px 18px', borderRadius: 10, fontSize: 15, color: BD.ink, fontWeight: 500, marginBottom: 18 }}>
                May 2026
              </div>
              <div ref={sessionCardRef} style={{
                display: 'flex', gap: 18, alignItems: 'flex-start',
                padding: '8px 0',
                opacity: sessionCardClicked ? 0.6 : 1,
                transition: 'opacity 200ms',
              }}>
                <div style={{
                  width: 64, flexShrink: 0,
                  background: BD.ink, color: '#fff',
                  borderRadius: 6,
                  textAlign: 'center',
                  padding: '7px 0',
                }}>
                  <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.06em' }}>May</div>
                  <div style={{ fontSize: 24, fontWeight: 700, lineHeight: 1.1 }}>16</div>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 18, fontWeight: 600, color: BD.ink, marginBottom: 4 }}>Live Session</div>
                  <div style={{ fontSize: 11, color: BD.textMute, letterSpacing: '0.1em', fontWeight: 600, marginBottom: 10 }}>HOSTED BY ARCHAN SEN</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 14, color: BD.textMute, marginBottom: 10 }}>
                    <Icon.Clock size={14} color={BD.textMute}/>
                    Sat 07:00 AM – 08:00 AM
                  </div>
                  <div style={{
                    display: 'inline-block',
                    padding: '3px 10px',
                    borderRadius: 4,
                    background: BD.pillBlue,
                    color: BD.pillBlueText,
                    fontSize: 12, fontWeight: 500,
                  }}>Upcoming</div>
                </div>
              </div>
            </>
          ) : (
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
              <CalendarEmpty size={150} />
              <div style={{ fontSize: 24, fontWeight: 700, color: BD.ink, marginTop: 20, letterSpacing: '-0.015em' }}>No Sessions</div>
              <div style={{ fontSize: 15, color: BD.textMute, marginTop: 8, marginBottom: 24 }}>You don't have any sessions scheduled yet.</div>
              <BookSessionButton refEl={bookSessionRef}/>
            </div>
          )}
        </div>

        {/* Right: Coach + Admin list */}
        <CoachList />
      </div>
    </div>
  );
}

function BookSessionButton({ refEl, variant = 'primary' }) {
  return (
    <div ref={refEl} style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      padding: '11px 22px',
      background: BD.ink,
      color: '#fff',
      borderRadius: 8,
      fontSize: 15, fontWeight: 500,
      fontFamily: BD.font,
      cursor: 'default',
      letterSpacing: '-0.005em',
    }}>
      <Icon.Calendar size={16} color="#fff"/>
      Book Session
    </div>
  );
}

const COACHES_FULL = [
  ['Archan Sen','A'], ['Ariel Gabay','A'],
  ['Ava Moon','A'], ['Bryce Sheffield','B'],
  ['Cyrus Esmailzadeh','C'], ['David Wise','D'],
  ['Elaine Yates','E'], ['Eric Gong','E'],
  ['Ethan Andrew','E'], ['Ezra Segal','E'],
  ['Jerry Chen','J'], ['Jordan Keller','J', true /* has photo */],
  ['Kailey Cabrera','K'], ['Kavneer Majhail','K'],
  ['Kush Vijapure','K'], ['Michael Ross','M'],
  ['Pranav Balakrishnan','P'], ['Riley Reichel','R'],
  ['Rowan Maclean','R'], ['Sophia Dal Pra','S'],
];

function CoachList() {
  return (
    <div style={{
      width: 480, flexShrink: 0,
      border: `1px solid ${BD.border}`,
      borderRadius: 12,
      padding: '20px 24px',
      display: 'flex', flexDirection: 'column',
      maxHeight: '100%', overflow: 'hidden',
    }}>
      <div style={{ fontSize: 16, fontWeight: 600, color: BD.ink, marginBottom: 16, letterSpacing: '-0.01em' }}>Coach</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', columnGap: 24, rowGap: 14 }}>
        {COACHES_FULL.map(([name, letter, hasPhoto]) => (
          <CoachRow key={name} name={name} letter={letter} hasPhoto={hasPhoto}/>
        ))}
      </div>

      <div style={{ borderTop: `1px solid ${BD.border}`, margin: '16px 0 14px' }}/>
      <div style={{ fontSize: 16, fontWeight: 600, color: BD.ink, marginBottom: 14, letterSpacing: '-0.01em' }}>Admin</div>
      <CoachRow name="Vikrant Maan" letter="V"/>
    </div>
  );
}

function CoachRow({ name, letter, hasPhoto }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <div style={{
        width: 30, height: 30, borderRadius: '50%',
        background: hasPhoto ? 'linear-gradient(135deg,#7a5b3a,#3a2615)' : BD.ink,
        color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 13, fontWeight: 600,
        flexShrink: 0,
      }}>
        {letter}
      </div>
      <span style={{ fontSize: 14.5, color: BD.ink, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{name}</span>
    </div>
  );
}

Object.assign(window, {
  BD, Icon, Sidebar, Dashboard, CoursePage, BookSessionButton, CoachList, CoachRow, CalendarEmpty,
  COACHES_FULL,
});