function LessonViewer({ onNavigate }) {
  const [layer, setLayer] = React.useState('exploded');
  const [chapter, setChapter] = React.useState(2);
  const [playing, setPlaying] = React.useState(false);

  const chapters = [
    { n: 1, t: 'Introduction to induction motors', dur: '2:14', done: true },
    { n: 2, t: 'Stator construction & windings', dur: '3:42', done: false, current: true },
    { n: 3, t: 'Rotor types — squirrel cage vs slip ring', dur: '4:18', done: false },
    { n: 4, t: 'End shields, bearings & fan', dur: '2:56', done: false },
    { n: 5, t: 'Star vs delta connection', dur: '3:28', done: false },
    { n: 6, t: 'Practical: safe disassembly sequence', dur: '5:12', done: false },
  ];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', height: 'calc(100vh - 60px)', overflow: 'hidden' }}>
      {/* Main 3D viewport area */}
      <div style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 16, overflow: 'auto' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
          <span className="badge navy mono">ELECTRICIAN · SEM 4</span>
          <span className="badge saffron mono">3D LESSON · L07</span>
          <span style={{ fontSize: 12, color: 'var(--ink-600)' }}><window.IconClock size={11} style={{verticalAlign: 'middle'}}/> 12 min total</span>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
            <button className="btn btn-ghost" onClick={() => onNavigate('animation')}><window.IconVideo size={13}/> Process animation</button>
            <button className="btn btn-ghost" onClick={() => window.toast('Downloading lesson notes (PDF)…')}><window.IconDownload size={13}/> Notes PDF</button>
            <button className="btn btn-ghost" onClick={() => onNavigate('tutor')}><window.IconChat size={13}/> Ask AI Tutor</button>
          </div>
        </div>

        <h1 style={{ fontFamily: 'var(--font-serif)', fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em', margin: 0, color: 'var(--ink-900)' }}>
          Three-Phase Induction Motor — Construction
        </h1>

        {/* 3D viewport */}
        <div style={{
          position: 'relative',
          borderRadius: 14,
          overflow: 'hidden',
          background: 'linear-gradient(180deg, #f8f9fb 0%, #eef1f7 100%)',
          border: '1px solid var(--ink-200)',
          aspectRatio: '16/9',
          minHeight: 380,
        }}>
          <img src="assets/hero-motor.jpg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />

          {/* Callouts */}
          {[
            { top: '13%', left: '46%', n: '1', l: 'TERMINAL BOX' },
            { top: '48%', left: '10%', n: '2', l: 'END SHIELD (DE)' },
            { top: '55%', left: '38%', n: '3', l: 'STATOR + WINDINGS' },
            { top: '55%', left: '60%', n: '4', l: 'SQUIRREL CAGE ROTOR' },
            { top: '55%', left: '84%', n: '5', l: 'COOLING FAN' },
          ].map(c => (
            <div key={c.n} style={{
              position: 'absolute', top: c.top, left: c.left,
              display: 'flex', alignItems: 'center', gap: 6,
              fontFamily: 'var(--font-mono)', fontSize: 10,
              letterSpacing: '0.08em', color: 'var(--navy-800)',
            }}>
              <div style={{
                width: 22, height: 22,
                borderRadius: '50%',
                background: 'var(--saffron-500)',
                color: 'white',
                display: 'grid', placeItems: 'center',
                fontWeight: 700, fontSize: 11,
                border: '2px solid white',
                boxShadow: '0 2px 6px rgba(0,0,0,0.2)',
              }}>{c.n}</div>
              <span style={{ background: 'white', padding: '3px 8px', borderRadius: 4, boxShadow: '0 2px 6px rgba(0,0,0,0.1)' }}>{c.l}</span>
            </div>
          ))}

          {/* Top-left HUD */}
          <div style={{ position: 'absolute', top: 14, left: 14, display: 'flex', flexDirection: 'column', gap: 6 }}>
            <div className="mono" style={{ fontSize: 10, background: 'rgba(11,42,91,0.9)', color: 'white', padding: '4px 8px', borderRadius: 4, letterSpacing: '0.08em' }}>MODEL: IE3 · 4-POLE · 415V</div>
            <div className="mono" style={{ fontSize: 10, background: 'rgba(255,255,255,0.9)', color: 'var(--navy-800)', padding: '4px 8px', borderRadius: 4, letterSpacing: '0.08em' }}>VIEW: {layer.toUpperCase()}</div>
          </div>

          {/* Top-right layer toggles */}
          <div style={{ position: 'absolute', top: 14, right: 14, display: 'flex', flexDirection: 'column', gap: 4, background: 'rgba(255,255,255,0.95)', borderRadius: 8, padding: 6, boxShadow: '0 4px 14px rgba(0,0,0,0.08)' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--ink-500)', padding: '2px 6px', letterSpacing: '0.08em' }}>VIEW MODE</div>
            {[
              { id: 'full', l: 'Full assembly', I: window.IconCube },
              { id: 'cutaway', l: 'Cutaway', I: window.IconLayers },
              { id: 'exploded', l: 'Exploded', I: window.IconGrid },
              { id: 'xray', l: 'X-Ray', I: window.IconZoom },
            ].map(o => {
              const I = o.I;
              const active = layer === o.id;
              return (
                <button key={o.id} onClick={() => setLayer(o.id)} style={{
                  display: 'flex', alignItems: 'center', gap: 8,
                  padding: '6px 10px', borderRadius: 4,
                  background: active ? 'var(--navy-800)' : 'transparent',
                  color: active ? 'white' : 'var(--ink-700)',
                  fontSize: 12, fontWeight: 500,
                  width: 130, textAlign: 'left',
                }}>
                  <I size={13}/> {o.l}
                </button>
              );
            })}
          </div>

          {/* Bottom control bar */}
          <div style={{
            position: 'absolute', bottom: 14, left: 14, right: 14,
            background: 'rgba(11,42,91,0.95)',
            borderRadius: 8, padding: '10px 14px',
            display: 'flex', alignItems: 'center', gap: 14,
            color: 'white',
          }}>
            <button onClick={() => setPlaying(p => !p)} style={{
              width: 36, height: 36, borderRadius: '50%', background: 'var(--saffron-500)', color: 'white',
              display: 'grid', placeItems: 'center',
            }}>
              {playing ? <window.IconPause size={14}/> : <window.IconPlay size={14}/>}
            </button>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11 }}>01:47 / 03:42</div>
            <div style={{ flex: 1, height: 4, background: 'rgba(255,255,255,0.15)', borderRadius: 999, position: 'relative' }}>
              <div style={{ width: '48%', height: '100%', background: 'var(--saffron-500)', borderRadius: 999 }} />
              {/* Chapter markers */}
              {[15, 30, 55, 72, 88].map(p => (
                <div key={p} style={{ position: 'absolute', top: -2, left: `${p}%`, width: 2, height: 8, background: 'rgba(255,255,255,0.4)' }} />
              ))}
            </div>
            <div style={{ display: 'flex', gap: 4 }}>
              {[{ I: window.IconRotate, l: 'Rotate model' }, { I: window.IconZoom, l: 'Zoom' }, { I: window.IconMic, l: 'Voice narration' }].map((o, i) => (
                <button key={i} onClick={() => window.toast(o.l)} style={{ width: 32, height: 32, borderRadius: 4, background: 'rgba(255,255,255,0.08)', color: 'white', display: 'grid', placeItems: 'center' }}>
                  <o.I size={13}/>
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* Transcript + concepts */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
          <div className="card">
            <div className="card-header">
              <div className="card-title">Live transcript</div>
              <span className="badge navy mono" style={{ marginLeft: 'auto' }}>EN · हिं · த</span>
            </div>
            <div style={{ padding: 20, maxHeight: 260, overflow: 'auto' }}>
              {[
                { t: '00:12', s: 'The stator is the stationary part of the motor. It carries the three-phase windings that produce the rotating magnetic field.' },
                { t: '00:34', s: 'Notice how the laminated silicon steel sheets reduce eddy current losses. Each sheet is 0.35 to 0.5 mm thick.', active: true },
                { t: '01:02', s: 'The windings are placed in slots around the inner circumference — typically 36 or 48 slots for a 4-pole machine.' },
                { t: '01:28', s: 'These leads terminate in the terminal box on top, where you make the star or delta connection.' },
              ].map((s, i) => (
                <div key={i} style={{ padding: '8px 0', borderBottom: '1px dashed var(--ink-200)', display: 'flex', gap: 12, background: s.active ? 'linear-gradient(90deg, rgba(230,117,20,0.06), transparent)' : 'transparent', margin: s.active ? '0 -20px' : 0, padding: s.active ? '8px 20px' : '8px 0' }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-500)', width: 44, flexShrink: 0 }}>{s.t}</div>
                  <div style={{ fontSize: 13, color: s.active ? 'var(--ink-900)' : 'var(--ink-700)', fontWeight: s.active ? 500 : 400, lineHeight: 1.5 }}>{s.s}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-header">
              <div className="card-title">Key concepts</div>
            </div>
            <div style={{ padding: 16 }}>
              {[
                { t: 'Rotating magnetic field', tag: 'Physics', d: 'Field rotates at synchronous speed Ns = 120f/P' },
                { t: 'Slip', tag: 'Dynamics', d: 'Difference between synchronous and rotor speed' },
                { t: 'Squirrel cage', tag: 'Rotor', d: 'Copper/aluminum bars short-circuited by end rings' },
                { t: 'Star-Delta start', tag: 'Control', d: 'Reduces starting current to ⅓ of DOL' },
              ].map(c => (
                <div key={c.t} style={{ padding: '10px 0', borderBottom: '1px dashed var(--ink-200)' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
                    <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-900)' }}>{c.t}</span>
                    <span className="badge navy mono" style={{ fontSize: 9 }}>{c.tag}</span>
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--ink-600)', lineHeight: 1.45 }}>{c.d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Chapter sidebar */}
      <aside style={{ background: 'white', borderLeft: '1px solid var(--ink-200)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <div style={{ padding: '18px 20px', borderBottom: '1px solid var(--ink-200)' }}>
          <div style={{ fontSize: 11, color: 'var(--ink-600)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>Chapters</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 }}>
            <div className="progress-track" style={{ flex: 1 }}>
              <div className="progress-fill saffron" style={{ width: '18%' }} />
            </div>
            <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-800)' }}>1/6</div>
          </div>
        </div>

        <div style={{ flex: 1, overflow: 'auto' }}>
          {chapters.map(c => (
            <button key={c.n} onClick={() => setChapter(c.n)} style={{
              width: '100%', textAlign: 'left',
              padding: '14px 20px',
              borderBottom: '1px solid var(--ink-100)',
              background: c.current ? 'var(--saffron-100)' : 'white',
              borderLeft: c.current ? '3px solid var(--saffron-500)' : '3px solid transparent',
              display: 'flex', gap: 12, alignItems: 'start',
            }}>
              <div style={{
                width: 26, height: 26, borderRadius: '50%',
                background: c.done ? 'var(--green-600)' : (c.current ? 'var(--saffron-500)' : 'var(--ink-200)'),
                color: c.done || c.current ? 'white' : 'var(--ink-600)',
                display: 'grid', placeItems: 'center',
                fontSize: 11, fontWeight: 700,
                flexShrink: 0,
              }}>
                {c.done ? <window.IconCheck size={13}/> : c.n}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: c.current ? 600 : 500, color: 'var(--ink-900)', lineHeight: 1.35 }}>{c.t}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-500)', marginTop: 4, letterSpacing: '0.06em' }}>{c.dur}</div>
              </div>
            </button>
          ))}
        </div>

        <div style={{ padding: 16, borderTop: '1px solid var(--ink-200)', display: 'flex', flexDirection: 'column', gap: 8 }}>
          <button className="btn btn-saffron" style={{ justifyContent: 'center' }} onClick={() => onNavigate('lab')}>
            Try in Virtual Lab <window.IconArrow size={13}/>
          </button>
          <button className="btn btn-ghost" style={{ justifyContent: 'center' }} onClick={() => onNavigate('assess')}>
            Take chapter quiz
          </button>
        </div>
      </aside>
    </div>
  );
}

window.LessonViewer = LessonViewer;