function SmartClassroom({ onNavigate }) {
  const [live, setLive] = React.useState(true);
  const [recording, setRecording] = React.useState(true);

  const students = [
    { n: 'Rahul Kumar', on: true }, { n: 'Pooja Devi', on: true }, { n: 'Amit Verma', on: true },
    { n: 'Suresh Naik', on: false }, { n: 'Priya Behera', on: true }, { n: 'Manoj Sahu', on: true },
    { n: 'Ritika Panda', on: true }, { n: 'Deepak Meher', on: false }, { n: 'Sunil Das', on: true },
    { n: 'Anita Rout', on: true }, { n: 'Vikram Jena', on: true }, { n: 'Neha Sahoo', on: false },
  ];
  const present = students.filter(s => s.on).length;

  const poll = [
    { opt: 'Star connection', pct: 24 },
    { opt: 'Delta connection', pct: 58 },
    { opt: 'Star-Delta starter', pct: 14 },
    { opt: 'Auto-transformer', pct: 4 },
  ];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', height: 'calc(100vh - 60px)', overflow: 'hidden' }}>
      {/* Main stage */}
      <div style={{ display: 'flex', flexDirection: 'column', overflow: 'auto', padding: 20, gap: 16, background: 'var(--canvas)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
          <span className="badge mono" style={{ background: live ? 'var(--red-100)' : 'var(--ink-100)', color: live ? 'var(--red-600)' : 'var(--ink-600)' }}>● {live ? 'LIVE' : 'IDLE'}</span>
          <div>
            <div style={{ fontFamily: 'var(--font-serif)', fontSize: 18, fontWeight: 600, color: 'var(--ink-900)' }}>Electrical Machines — Star vs Delta</div>
            <div style={{ fontSize: 12, color: 'var(--ink-600)' }}>Fitter · Batch F-2024-A · Room CR-3 · Smart Panel</div>
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
            <button className="btn btn-ghost" onClick={() => setLive(l => !l)}>{live ? 'End session' : 'Go live'}</button>
            <button className="btn btn-primary" onClick={() => onNavigate('lesson')}><window.IconBoard size={13}/> Open 3D on board</button>
          </div>
        </div>

        {/* Smart board preview */}
        <div style={{ position: 'relative', borderRadius: 14, overflow: 'hidden', border: '1px solid var(--ink-200)', background: 'var(--navy-900)', aspectRatio: '16/9' }}>
          <img src="assets/hero-motor.jpg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: 0.9 }} />
          <div style={{ position: 'absolute', top: 14, left: 14, display: 'flex', gap: 8 }}>
            <span className="badge mono navy" style={{ background: 'rgba(11,42,91,0.9)', color: 'white' }}>SMART BOARD · CASTING</span>
            {recording && <span className="badge mono" style={{ background: 'var(--red-600)', color: 'white' }}>● REC 24:18</span>}
          </div>
          {/* Annotation tool overlay */}
          <div style={{ position: 'absolute', top: 14, right: 14, display: 'flex', flexDirection: 'column', gap: 6, background: 'rgba(255,255,255,0.95)', borderRadius: 8, padding: 6 }}>
            {[{ I: window.IconEdit, l: 'Pen / annotate' }, { I: window.IconTarget, l: 'Pointer' }, { I: window.IconLayers, l: 'Layers' }, { I: window.IconZoom, l: 'Zoom' }].map((o, i) => (
              <button key={i} onClick={() => window.toast(o.l)} style={{ width: 34, height: 34, borderRadius: 6, background: i === 0 ? 'var(--saffron-500)' : 'var(--ink-100)', color: i === 0 ? 'white' : 'var(--ink-700)', display: 'grid', placeItems: 'center' }}><o.I size={15}/></button>
            ))}
          </div>
          {/* Freehand annotation marks (CSS — valid across sizes) */}
          <div style={{ position: 'absolute', top: '40%', left: '50%', width: 74, height: 68, border: '3px solid var(--saffron-500)', borderRadius: '52% 48% 47% 53%', opacity: 0.9, transform: 'rotate(-7deg)', pointerEvents: 'none' }} />
          <div style={{ position: 'absolute', top: '35%', left: '60%', width: 96, height: 3, background: 'var(--saffron-500)', borderRadius: 3, opacity: 0.85, transform: 'rotate(-13deg)', transformOrigin: 'left center', pointerEvents: 'none' }} />
          {/* 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: 12, color: 'white' }}>
            <button onClick={() => setRecording(r => !r)} style={{ width: 36, height: 36, borderRadius: '50%', background: recording ? 'var(--red-600)' : 'var(--saffron-500)', color: 'white', display: 'grid', placeItems: 'center' }}>
              {recording ? <window.IconPause size={14}/> : <window.IconVideo size={14}/>}
            </button>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11 }}>{recording ? 'Recording lecture' : 'Recording paused'}</span>
            <div style={{ flex: 1 }} />
            <div style={{ display: 'flex', gap: 6 }}>
              {[{ I: window.IconMic, l: 'Microphone' }, { I: window.IconLayers, l: 'Layers' }, { I: window.IconGrid, l: 'Grid view' }].map((o, i) => (
                <button key={i} onClick={() => window.toast(o.l)} style={{ width: 32, height: 32, borderRadius: 6, background: 'rgba(255,255,255,0.1)', color: 'white', display: 'grid', placeItems: 'center' }}><o.I size={14}/></button>
              ))}
            </div>
          </div>
        </div>

        {/* Live poll + tools */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 16 }}>
          <div className="card">
            <div className="card-header" style={{ justifyContent: 'space-between' }}>
              <div className="card-title">Live poll — instant feedback</div>
              <span className="badge saffron" style={{ fontSize: 10 }}>{present} responses</span>
            </div>
            <div style={{ padding: 18 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink-900)', marginBottom: 12 }}>Which connection reduces starting current?</div>
              {poll.map((p, i) => (
                <div key={p.opt} style={{ marginBottom: 10 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, marginBottom: 4 }}>
                    <span style={{ color: 'var(--ink-800)', fontWeight: i === 0 ? 700 : 500 }}>{i === 0 && '✓ '}{p.opt}</span>
                    <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--ink-600)' }}>{p.pct}%</span>
                  </div>
                  <div className="progress-track" style={{ height: 8 }}>
                    <div className="progress-fill" style={{ width: `${p.pct}%`, background: i === 0 ? 'var(--green-600)' : 'var(--navy-600)' }} />
                  </div>
                </div>
              ))}
              <button className="btn btn-ghost" style={{ width: '100%', justifyContent: 'center', marginTop: 8 }} onClick={() => window.toast('Next poll pushed to students')}>Push next poll <window.IconArrow size={13}/></button>
            </div>
          </div>

          <div className="card" style={{ padding: 18 }}>
            <div className="card-title" style={{ marginBottom: 12 }}>Session tools</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {[
                { l: 'Share screen', ic: window.IconGrid, cb: () => window.toast('Sharing your screen to the class') },
                { l: 'Send quiz', ic: window.IconClipboard, cb: () => onNavigate('assess') },
                { l: 'Assign lesson', ic: window.IconCube, cb: () => onNavigate('lesson') },
                { l: 'Remote access', ic: window.IconGlobe, cb: () => window.toast('Remote classroom link copied') },
              ].map(t => {
                const I = t.ic;
                return (
                  <button key={t.l} onClick={t.cb} style={{ padding: 14, background: 'var(--ink-50)', border: '1px solid var(--ink-200)', borderRadius: 10, display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'start' }}>
                    <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--navy-100)', color: 'var(--navy-700)', display: 'grid', placeItems: 'center' }}><I size={16}/></div>
                    <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--ink-900)' }}>{t.l}</span>
                  </button>
                );
              })}
            </div>
          </div>
        </div>
      </div>

      {/* Right — attendance / roster */}
      <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={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div style={{ fontSize: 11, color: 'var(--ink-600)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>Live attendance</div>
            <span className="badge green" style={{ fontSize: 10 }}>{present}/{students.length} present</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
            <div className="progress-track" style={{ flex: 1 }}><div className="progress-fill green" style={{ width: `${(present / students.length) * 100}%` }} /></div>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-700)', fontWeight: 600 }}>{Math.round((present / students.length) * 100)}%</span>
          </div>
        </div>
        <div style={{ flex: 1, overflow: 'auto', padding: '6px 0' }}>
          {students.map(s => (
            <div key={s.n} style={{ padding: '10px 20px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid var(--ink-100)' }}>
              <div className="avatar" style={{ background: s.on ? 'var(--navy-700)' : 'var(--ink-300)', fontSize: 10 }}>{s.n.split(' ').map(w => w[0]).slice(0, 2).join('')}</div>
              <span style={{ flex: 1, fontSize: 13, color: s.on ? 'var(--ink-900)' : 'var(--ink-500)', fontWeight: 500 }}>{s.n}</span>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: s.on ? 'var(--green-600)' : 'var(--ink-300)' }} />
            </div>
          ))}
        </div>
        <div style={{ padding: 16, borderTop: '1px solid var(--ink-200)', display: 'flex', flexDirection: 'column', gap: 8 }}>
          <button className="btn btn-primary" style={{ justifyContent: 'center' }} onClick={() => window.toast('Attendance saved — ' + present + '/' + students.length + ' present')}><window.IconCheck size={13}/> Save attendance</button>
          <button className="btn btn-ghost" style={{ justifyContent: 'center' }} onClick={() => window.toast('Exporting lecture recording…')}><window.IconDownload size={13}/> Export recording</button>
        </div>
      </aside>
    </div>
  );
}

window.SmartClassroom = SmartClassroom;