// Sidebar — always visible on desktop, slide-over on mobile
function Sidebar({ currentModule, currentSection, onSelectModule, onSelectSection, sidebarOpen, onClose, previewMode = false }) {
  const progress = getProgress();
  const totalDone = previewMode
    ? (getModuleProgress(1) === 100 ? 1 : 0)
    : MODULES_DATA.filter(m => getModuleProgress(m.id) === 100).length;

  // Find in-progress module for "continue" highlight
  const inProgress = MODULES_DATA.find(m => {
    if (previewMode && m.id !== 1) return false;
    const p = getModuleProgress(m.id);
    return p > 0 && p < 100;
  });

  return (
    <>
      {/* Mobile overlay */}
      {sidebarOpen && (
        <div onClick={onClose} style={{ position:'fixed',inset:0,background:'rgba(0,0,0,0.7)',zIndex:40,display:'none' }}
          className="mobile-overlay" />
      )}

      <aside style={{
        position: 'fixed', left: 0, top: 52, bottom: 0,
        width: 260,
        background: '#050505',
        borderRight: '1px solid #1a1a1a',
        display: 'flex', flexDirection: 'column',
        zIndex: 20,
        overflowY: 'auto',
        overflowX: 'hidden',
      }} id="main-sidebar">

        {/* Course progress summary */}
        <div style={{ padding:'18px 18px 14px', borderBottom:'1px solid #111' }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:8 }}>
            <span style={{ fontFamily:'JetBrains Mono,monospace', fontSize:9, letterSpacing:'0.18em', color:'#444', textTransform:'uppercase' }}>Course Progress</span>
            <span style={{ fontFamily:'JetBrains Mono,monospace', fontSize:9, color:'#C9A84C', letterSpacing:'0.14em' }}>{previewMode ? `${totalDone}/1 preview` : `${totalDone}/12`}</span>
          </div>
          <div style={{ height:2, background:'#111', borderRadius:1 }}>
            <div style={{ height:'100%', width:`${(totalDone/12)*100}%`, background:'#C9A84C', borderRadius:1, transition:'width 0.4s' }} />
          </div>
        </div>

        {/* Module list */}
        <nav style={{ flex:1, padding:'8px 0 24px' }}>
          {MODULES_DATA.map(mod => {
            const locked = previewMode && mod.id !== 1;
            const pct = getModuleProgress(mod.id);
            const isActive = currentModule && currentModule.id === mod.id;
            const isDone = pct === 100;
            const isStarted = pct > 0 && !isDone;
            const isContinue = inProgress && inProgress.id === mod.id && !isActive;
            const accentColor = mod.accent === 'tech' ? '#3B82F6' : '#C9A84C';

            if (locked) {
              return (
                <div key={mod.id} style={{ padding:'9px 16px 9px 14px', opacity:0.45 }}>
                  <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                    <span style={{ fontFamily:'JetBrains Mono,monospace', fontSize:7, color:'#333' }}>🔒</span>
                    <div style={{ flex:1, minWidth:0 }}>
                      <div style={{ fontFamily:'Inter,sans-serif', fontSize:12, color:'#444', lineHeight:1.3 }}>{mod.title}</div>
                      <div style={{ fontFamily:'JetBrains Mono,monospace', fontSize:8, color:'#2a2a2a', marginTop:4 }}>MOD {mod.num} · <a href="/#pricing" onClick={e => e.stopPropagation()} style={{ color:'#555' }}>Unlock</a></div>
                    </div>
                  </div>
                </div>
              );
            }

            return (
              <div key={mod.id}>
                <button
                  onClick={() => onSelectModule(mod)}
                  style={{
                    width:'100%', textAlign:'left',
                    background: isActive ? '#111' : 'none',
                    border:'none',
                    borderLeft: isActive ? `2px solid ${accentColor}` : '2px solid transparent',
                    padding:'9px 16px 9px 14px',
                    cursor:'pointer',
                    display:'flex', alignItems:'center', gap:10,
                    transition:'background 0.12s'
                  }}
                >
                  {/* Status indicator */}
                  <div style={{ width:18, height:18, borderRadius:'50%', flexShrink:0, display:'flex', alignItems:'center', justifyContent:'center',
                    background: isDone ? '#C9A84C' : isStarted ? 'transparent' : 'transparent',
                    border: isDone ? 'none' : isStarted ? `1.5px solid ${accentColor}` : '1.5px solid #2a2a2a'
                  }}>
                    {isDone
                      ? <span style={{ fontSize:9, color:'#000', fontWeight:700 }}>✓</span>
                      : isStarted
                        ? <div style={{ width:6, height:6, borderRadius:'50%', background:accentColor }} />
                        : <span style={{ fontFamily:'JetBrains Mono,monospace', fontSize:7, color:'#333' }}>{mod.id}</span>
                    }
                  </div>

                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontFamily:'Inter,sans-serif', fontSize:12,
                      fontWeight: isActive ? 500 : 400,
                      color: isActive ? '#fff' : isDone ? '#666' : '#888',
                      whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis',
                      lineHeight: 1.3
                    }}>{mod.title}</div>
                    <div style={{ display:'flex', gap:8, marginTop:2, alignItems:'center' }}>
                      <span style={{ fontFamily:'JetBrains Mono,monospace', fontSize:8, color:'#333', letterSpacing:'0.12em' }}>
                        {mod.num}
                      </span>
                      {isContinue && (
                        <span style={{ fontFamily:'JetBrains Mono,monospace', fontSize:8, color:accentColor, letterSpacing:'0.1em', textTransform:'uppercase' }}>
                          ← resume {pct}%
                        </span>
                      )}
                      {isStarted && !isContinue && (
                        <span style={{ fontFamily:'JetBrains Mono,monospace', fontSize:8, color:'#333' }}>{pct}%</span>
                      )}
                    </div>
                  </div>
                </button>

                {/* Section links — only for active module */}
                {isActive && mod.sections && (
                  <div style={{ paddingLeft:46, paddingRight:12, paddingBottom:6 }}>
                    {mod.sections.map((sec, si) => {
                      const done = progress[mod.id]?.[sec.id];
                      const isCur = currentSection === sec.id;
                      return (
                        <button key={sec.id} onClick={() => onSelectSection(sec.id)}
                          style={{
                            width:'100%', textAlign:'left', background:'none', border:'none',
                            padding:'4px 0', cursor:'pointer', display:'flex', alignItems:'center', gap:7
                          }}>
                          <div style={{ width:4, height:4, borderRadius:'50%', flexShrink:0,
                            background: done ? '#C9A84C' : isCur ? accentColor : '#222'
                          }} />
                          <span style={{ fontFamily:'Inter,sans-serif', fontSize:11,
                            color: isCur ? '#fff' : done ? '#555' : '#444',
                            fontWeight: isCur ? 500 : 400,
                            whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'
                          }}>{sec.title}</span>
                        </button>
                      );
                    })}
                    {/* Exercises link */}
                    {mod.exercises && mod.exercises.length > 0 && (
                      <button onClick={() => onSelectSection('exercises')}
                        style={{ width:'100%', textAlign:'left', background:'none', border:'none', padding:'4px 0', cursor:'pointer', display:'flex', alignItems:'center', gap:7 }}>
                        <div style={{ width:4, height:4, borderRadius:'50%', flexShrink:0, background: currentSection === 'exercises' ? accentColor : '#222' }} />
                        <span style={{ fontFamily:'Inter,sans-serif', fontSize:11, color: currentSection === 'exercises' ? '#fff' : '#444', fontWeight: currentSection === 'exercises' ? 500 : 400 }}>
                          Exercises ({mod.exercises.length})
                        </span>
                      </button>
                    )}
                  </div>
                )}
              </div>
            );
          })}
        </nav>

        {/* Footer */}
        <div style={{ padding:'14px 18px', borderTop:'1px solid #111', flexShrink:0 }}>
          <div style={{ fontFamily:'JetBrains Mono,monospace', fontSize:8, letterSpacing:'0.18em', color:'#333', textTransform:'uppercase' }}>
            Rondanini Publishing · 2025
          </div>
        </div>
      </aside>

      {/* Mobile slide-over (separate from above) */}
      <style>{`
        @media (max-width: 900px) {
          #main-sidebar {
            transform: ${sidebarOpen ? 'translateX(0)' : 'translateX(-100%)'};
            transition: transform 0.25s ease;
            top: 0 !important;
            z-index: 50 !important;
          }
          .mobile-overlay { display: block !important; }
        }
        @media (min-width: 901px) {
          #main-sidebar { transform: none !important; }
        }
      `}</style>
    </>
  );
}

Object.assign(window, { Sidebar });