function VirtualLab({ onNavigate }) {
  const [current, setCurrent] = React.useState(2);
  const steps = [
    { n: 1, t: 'PPE check & safety briefing', done: true },
    { n: 2, t: 'Machine setup — voltage, wire, gas', done: false, current: true },
    { n: 3, t: 'Workpiece positioning', done: false },
    { n: 4, t: 'Tack weld both ends', done: false },
    { n: 5, t: 'Root pass', done: false },
    { n: 6, t: 'Filler & capping pass', done: false },
    { n: 7, t: 'Post-weld inspection', done: false },
  ];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '260px 1fr 300px', height: 'calc(100vh - 60px)', overflow: 'hidden' }}>
      {/* Left — Tool tray */}
      <aside style={{ background: '#0d1220', color: 'white', padding: 18, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.14em', marginBottom: 4 }}>SIMULATOR</div>
          <div style={{ fontFamily: 'var(--font-serif)', fontSize: 18, fontWeight: 600 }}>MIG Welding · Butt Joint</div>
          <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', marginTop: 4 }}>Welder Trade · Sem 2 · Ex.14</div>
        </div>

        <div>
          <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.14em', color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', marginBottom: 8 }}>PPE Equipped</div>
          {['Welding helmet · Auto-dark','Leather gloves','Apron & spats','Safety goggles','Fire-retardant sleeves'].map(x => (
            <div key={x} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 0', fontSize: 12 }}>
              <span style={{ color: 'var(--green-600)' }}><window.IconCheck size={13}/></span>
              <span style={{ color: 'rgba(255,255,255,0.8)' }}>{x}</span>
            </div>
          ))}
        </div>

        <div>
          <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.14em', color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', marginBottom: 8 }}>Tools</div>
          {[
            { n: 'MIG Torch', st: 'in-use' },
            { n: 'Wire brush', st: 'ready' },
            { n: 'Chipping hammer', st: 'ready' },
            { n: 'Angle grinder', st: 'ready' },
            { n: 'C-clamp', st: 'ready' },
          ].map(t => (
            <div key={t.n} style={{
              padding: '8px 10px',
              margin: '2px 0',
              background: t.st === 'in-use' ? 'rgba(230,117,20,0.15)' : 'rgba(255,255,255,0.04)',
              border: t.st === 'in-use' ? '1px solid var(--saffron-500)' : '1px solid rgba(255,255,255,0.08)',
              borderRadius: 6,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              fontSize: 12,
            }}>
              <span>{t.n}</span>
              {t.st === 'in-use' && <span className="badge saffron mono" style={{ fontSize: 9 }}>IN USE</span>}
            </div>
          ))}
        </div>

        <div>
          <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.14em', color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', marginBottom: 8 }}>Materials</div>
          <div style={{ padding: '10px 12px', background: 'rgba(255,255,255,0.04)', borderRadius: 6, fontSize: 12 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{color:'rgba(255,255,255,0.6)'}}>MS Plate</span><span className="mono">6mm × 150 × 100</span></div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4 }}><span style={{color:'rgba(255,255,255,0.6)'}}>Filler wire</span><span className="mono">ER70S-6 · 0.8mm</span></div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4 }}><span style={{color:'rgba(255,255,255,0.6)'}}>Shielding gas</span><span className="mono">Ar 82% + CO₂ 18%</span></div>
          </div>
        </div>
      </aside>

      {/* Center — Sim viewport */}
      <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 12, background: '#0a1428', overflow: 'auto' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: 'white', flexWrap: 'wrap' }}>
          <span className="badge mono" style={{ background: 'var(--red-100)', color: 'var(--red-600)' }}>● LIVE SIMULATION</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'rgba(255,255,255,0.7)' }}>ATTEMPT 3 · 00:04:22</span>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 8, flexShrink: 0 }}>
            <button className="btn btn-ghost" style={{ background: 'rgba(255,255,255,0.08)', borderColor: 'rgba(255,255,255,0.15)', color: 'white', whiteSpace: 'nowrap' }} onClick={() => window.toast('Simulation paused')}>
              Pause
            </button>
            <button className="btn btn-ghost" style={{ background: 'rgba(255,255,255,0.08)', borderColor: 'rgba(255,255,255,0.15)', color: 'white', whiteSpace: 'nowrap' }} onClick={() => window.toast('Attempt reset — starting over')}>
              Reset
            </button>
            <button className="btn btn-saffron" style={{ whiteSpace: 'nowrap' }} onClick={() => window.toast('Submitted for evaluation — score 82/100')}>Submit for evaluation</button>
          </div>
        </div>

        <div style={{ position: 'relative', flex: 1, borderRadius: 12, overflow: 'hidden', minHeight: 380, border: '1px solid rgba(255,255,255,0.1)' }}>
          <img src="assets/lab-welding.jpg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />

          {/* Crosshair / target */}
          <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', pointerEvents: 'none' }}>
            <svg width="60" height="60" viewBox="0 0 60 60" fill="none">
              <circle cx="30" cy="30" r="24" stroke="rgba(255,255,255,0.4)" strokeWidth="1" strokeDasharray="4 4"/>
              <line x1="30" y1="10" x2="30" y2="22" stroke="var(--saffron-500)" strokeWidth="2"/>
              <line x1="30" y1="38" x2="30" y2="50" stroke="var(--saffron-500)" strokeWidth="2"/>
              <line x1="10" y1="30" x2="22" y2="30" stroke="var(--saffron-500)" strokeWidth="2"/>
              <line x1="38" y1="30" x2="50" y2="30" stroke="var(--saffron-500)" strokeWidth="2"/>
            </svg>
          </div>

          {/* Bottom HUD readouts */}
          <div style={{ position: 'absolute', bottom: 14, left: 14, right: 14, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10 }}>
            {[
              { l: 'ARC VOLTAGE', v: '22.4', u: 'V', ok: true },
              { l: 'WIRE FEED', v: '4.8', u: 'm/min', ok: true },
              { l: 'TRAVEL SPEED', v: '285', u: 'mm/min', warn: true },
              { l: 'TORCH ANGLE', v: '72°', u: '', ok: true },
              { l: 'STICK-OUT', v: '14', u: 'mm', ok: true },
            ].map(r => (
              <div key={r.l} style={{
                background: 'rgba(11,42,91,0.85)',
                borderTop: `2px solid ${r.warn ? 'var(--saffron-500)' : r.ok ? 'var(--green-600)' : 'var(--red-600)'}`,
                padding: '8px 12px',
                borderRadius: 6,
              }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'rgba(255,255,255,0.6)', letterSpacing: '0.1em' }}>{r.l}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 20, color: 'white', fontWeight: 500, marginTop: 2 }}>
                  {r.v}<span style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', marginLeft: 3 }}>{r.u}</span>
                </div>
              </div>
            ))}
          </div>

          <div style={{ position: 'absolute', top: 14, left: 14, background: 'rgba(230,117,20,0.9)', color: 'white', padding: '6px 12px', borderRadius: 6, fontSize: 12, fontWeight: 600, display: 'flex', gap: 8 }}>
            <window.IconTarget size={14}/>
            Slow down: travel speed is 12% high
          </div>
        </div>

        {/* Attempt score bar */}
        <div style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 10, padding: 14, color: 'white' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.1em' }}>LIVE SCORE</div>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 32, fontWeight: 500, letterSpacing: '-0.02em', color: 'white' }}>82<span style={{ fontSize: 16, color: 'rgba(255,255,255,0.5)' }}>/100</span></div>
            </div>
            <div style={{ flex: 1, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
              {[
                { l: 'Bead uniformity', v: 88 },
                { l: 'Penetration', v: 76 },
                { l: 'Speed control', v: 71 },
                { l: 'Safety compliance', v: 100 },
              ].map(m => (
                <div key={m.l}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginBottom: 4 }}>
                    <span style={{ color: 'rgba(255,255,255,0.6)' }}>{m.l}</span>
                    <span style={{ fontFamily: 'var(--font-mono)', color: 'white', fontWeight: 500 }}>{m.v}</span>
                  </div>
                  <div style={{ height: 4, background: 'rgba(255,255,255,0.1)', borderRadius: 999 }}>
                    <div style={{ width: `${m.v}%`, height: '100%', background: m.v >= 85 ? 'var(--green-600)' : m.v >= 70 ? 'var(--saffron-500)' : 'var(--red-600)', borderRadius: 999 }} />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Right — Exercise steps */}
      <aside style={{ background: 'white', borderLeft: '1px solid var(--ink-200)', overflow: 'auto', display: 'flex', flexDirection: 'column' }}>
        <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 }}>Exercise sequence</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: '28%' }} />
            </div>
            <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-800)' }}>2/7</div>
          </div>
        </div>

        <div style={{ flex: 1, padding: '8px 0' }}>
          {steps.map(s => (
            <div key={s.n} style={{
              padding: '12px 20px',
              borderBottom: '1px solid var(--ink-100)',
              background: s.current ? 'rgba(230,117,20,0.05)' : 'white',
              borderLeft: s.current ? '3px solid var(--saffron-500)' : '3px solid transparent',
              display: 'flex', gap: 12,
              opacity: s.done || s.current ? 1 : 0.7,
            }}>
              <div style={{
                width: 24, height: 24, borderRadius: '50%',
                background: s.done ? 'var(--green-600)' : s.current ? 'var(--saffron-500)' : 'var(--ink-200)',
                color: s.done || s.current ? 'white' : 'var(--ink-600)',
                display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700,
                flexShrink: 0,
              }}>
                {s.done ? <window.IconCheck size={12}/> : s.n}
              </div>
              <div style={{ fontSize: 13, color: 'var(--ink-900)', fontWeight: s.current ? 600 : 500, lineHeight: 1.4 }}>{s.t}</div>
            </div>
          ))}
        </div>

        <div style={{ padding: 16, borderTop: '1px solid var(--ink-200)', background: 'var(--ink-50)' }}>
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--ink-600)', fontWeight: 600, marginBottom: 6 }}>Instructor note</div>
          <div style={{ fontSize: 12.5, color: 'var(--ink-800)', lineHeight: 1.5 }}>
            Aim for a steady 250mm/min travel. Watch the sound — a clean sizzle means good arc length.
          </div>
          <div style={{ fontSize: 11, color: 'var(--ink-600)', marginTop: 8, fontStyle: 'italic' }}>— Kavita Sharma, Sr. Welding Inst.</div>
        </div>
      </aside>
    </div>
  );
}

window.VirtualLab = VirtualLab;