function VirtualWorkshop({ onNavigate }) {
  const [spot, setSpot] = React.useState('lathe');

  const stations = {
    lathe:  { label: 'Centre Lathe', x: '30%', y: '38%', trade: 'Turner', status: 'Guided tour ready' },
    bench:  { label: 'Fitting Bench', x: '62%', y: '30%', trade: 'Fitter', status: 'In use' },
    drill:  { label: 'Pillar Drill', x: '78%', y: '55%', trade: 'Fitter', status: 'Available' },
    weld:   { label: 'Welding Booth', x: '20%', y: '68%', trade: 'Welder', status: 'PPE required' },
    grind:  { label: 'Grinder', x: '48%', y: '72%', trade: 'Machinist', status: 'Available' },
    store:  { label: 'Tool Store', x: '86%', y: '22%', trade: 'All', status: 'Open' },
  };

  const cur = stations[spot];

  const tools = [
    { n: 'Vernier Caliper', use: 'Precision measurement (0.02mm)', tag: 'Measuring' },
    { n: 'Try Square', use: 'Checking 90° squareness', tag: 'Marking' },
    { n: 'Flat File — 2nd cut', use: 'Material removal & finishing', tag: 'Cutting' },
    { n: 'Ball-peen Hammer', use: 'Riveting, punch striking', tag: 'Striking' },
    { n: 'Scriber', use: 'Marking lines on metal', tag: 'Marking' },
  ];

  const safety = [
    { t: 'Wear safety goggles & apron', done: true },
    { t: 'Tie back loose clothing / hair', done: true },
    { t: 'Check machine guards in place', done: true },
    { t: 'Clear swarf from work area', done: false },
    { t: 'Confirm emergency stop location', done: false },
  ];

  const sequence = [
    { t: 'Isolate & inspect power supply', phase: 'startup' },
    { t: 'Check lubrication & coolant levels', phase: 'startup' },
    { t: 'Set spindle speed & feed', phase: 'startup' },
    { t: 'Engage guard, start spindle', phase: 'startup' },
    { t: 'Stop spindle, retract tool', phase: 'shutdown' },
    { t: 'Clean machine & isolate power', phase: 'shutdown' },
  ];

  return (
    <div className="content">
      <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', marginBottom: 20, gap: 24, flexWrap: 'wrap' }}>
        <div>
          <div className="section-eyebrow">Virtual Workshop</div>
          <h1 className="section-title" style={{ fontSize: 30 }}>Walk the shop floor before you enter it.</h1>
          <p className="section-sub" style={{ maxWidth: 640 }}>Familiarise yourself with layout, tools, safety zones and machine start-up sequences — all before your first physical practical.</p>
        </div>
        <button className="btn btn-saffron" style={{ padding: '11px 18px' }} onClick={() => onNavigate('arvr')}><window.IconHeadset size={14}/> Enter in VR</button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 20, marginBottom: 20 }}>
        {/* Interactive floor map */}
        <div className="card" style={{ overflow: 'hidden' }}>
          <div className="card-header" style={{ justifyContent: 'space-between' }}>
            <div>
              <div className="card-title">Fitting & Machining Shop — Bay 2</div>
              <div className="card-sub">Click a station to explore · 6 workstations</div>
            </div>
            <span className="badge navy mono">INTERACTIVE 3D</span>
          </div>
          <div className="blueprint-bg" style={{ position: 'relative', aspectRatio: '16/10', margin: 0 }}>
            {/* layout zones */}
            <div style={{ position: 'absolute', inset: 16, border: '1px dashed rgba(255,255,255,0.25)', borderRadius: 8 }} />
            <div style={{ position: 'absolute', top: 16, left: 16, fontFamily: 'var(--font-mono)', fontSize: 9, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.1em', padding: 6 }}>SHOP LAYOUT · 18m × 12m</div>
            {Object.entries(stations).map(([id, s]) => {
              const active = spot === id;
              return (
                <button key={id} onClick={() => setSpot(id)} style={{ position: 'absolute', top: s.y, left: s.x, transform: 'translate(-50%,-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
                  <div style={{
                    width: active ? 40 : 30, height: active ? 40 : 30, borderRadius: 8,
                    background: active ? 'var(--saffron-500)' : 'rgba(11,42,91,0.92)',
                    border: `2px solid ${active ? 'white' : 'rgba(255,255,255,0.35)'}`,
                    display: 'grid', placeItems: 'center', color: 'white',
                    boxShadow: active ? '0 6px 18px rgba(230,117,20,0.5)' : '0 2px 8px rgba(0,0,0,0.3)',
                    transition: 'all 0.15s',
                  }}>
                    <window.IconTool size={active ? 18 : 14}/>
                  </div>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, background: 'rgba(0,0,0,0.6)', color: 'white', padding: '2px 5px', borderRadius: 3, whiteSpace: 'nowrap' }}>{s.label}</span>
                </button>
              );
            })}
          </div>
        </div>

        {/* Selected station detail */}
        <div className="card" style={{ padding: 22, display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
            <div style={{ width: 46, height: 46, borderRadius: 10, background: 'var(--navy-100)', color: 'var(--navy-700)', display: 'grid', placeItems: 'center' }}><window.IconTool size={22}/></div>
            <div>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 19, fontWeight: 600, color: 'var(--ink-900)' }}>{cur.label}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-600)' }}>{cur.trade} trade · <span style={{ color: cur.status === 'Available' || cur.status === 'Open' || cur.status === 'Guided tour ready' ? 'var(--green-600)' : 'var(--saffron-600)', fontWeight: 600 }}>{cur.status}</span></div>
            </div>
          </div>
          <p style={{ fontSize: 13, color: 'var(--ink-700)', lineHeight: 1.55, margin: '0 0 14px' }}>
            The centre lathe is the most versatile machine in the shop — used for turning, facing, boring, threading and knurling. Master its controls and safe operation here.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 14 }}>
            {[
              { k: '8', v: 'Controls to learn' },
              { k: '12', v: 'Operations' },
              { k: '4.6★', v: 'Familiarity score' },
              { k: '18 min', v: 'Guided tour' },
            ].map(x => (
              <div key={x.v} style={{ padding: 12, background: 'var(--ink-50)', borderRadius: 8 }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 20, fontWeight: 500, color: 'var(--ink-900)' }}>{x.k}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-600)' }}>{x.v}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 8 }}>
            <button className="btn btn-primary" style={{ justifyContent: 'center' }} onClick={() => onNavigate('lesson')}><window.IconPlay size={13}/> Start guided tour</button>
            <button className="btn btn-ghost" style={{ justifyContent: 'center' }} onClick={() => onNavigate('lab')}>Practise in Virtual Lab</button>
          </div>
        </div>
      </div>

      {/* Three utility cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {/* Tool identification */}
        <div className="card">
          <div className="card-header"><div className="card-title" style={{ display: 'flex', gap: 8, alignItems: 'center' }}><window.IconTool size={16} style={{ color: 'var(--navy-700)' }}/> Tool identification</div></div>
          <div style={{ padding: '6px 0' }}>
            {tools.map(t => (
              <div key={t.n} style={{ padding: '11px 20px', borderTop: '1px solid var(--ink-100)', display: 'flex', gap: 12, alignItems: 'start' }}>
                <div style={{ width: 30, height: 30, borderRadius: 7, background: 'var(--navy-50)', color: 'var(--navy-700)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><window.IconTool size={15}/></div>
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-900)' }}>{t.n}</span>
                    <span className="badge navy mono" style={{ fontSize: 8 }}>{t.tag}</span>
                  </div>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-600)', marginTop: 2 }}>{t.use}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Safety walkthrough */}
        <div className="card">
          <div className="card-header" style={{ justifyContent: 'space-between' }}>
            <div className="card-title" style={{ display: 'flex', gap: 8, alignItems: 'center' }}><window.IconShield size={16} style={{ color: 'var(--green-600)' }}/> Safety walkthrough</div>
            <span className="badge green" style={{ fontSize: 10 }}>3/5</span>
          </div>
          <div style={{ padding: '10px 20px' }}>
            {safety.map(s => (
              <div key={s.t} style={{ padding: '9px 0', borderBottom: '1px dashed var(--ink-200)', display: 'flex', gap: 10, alignItems: 'center' }}>
                <div style={{ width: 20, height: 20, borderRadius: '50%', flexShrink: 0, background: s.done ? 'var(--green-600)' : 'var(--ink-100)', color: s.done ? 'white' : 'var(--ink-400)', display: 'grid', placeItems: 'center' }}>
                  {s.done ? <window.IconCheck size={12}/> : <window.IconLock size={11}/>}
                </div>
                <span style={{ fontSize: 12.5, color: s.done ? 'var(--ink-500)' : 'var(--ink-900)', textDecoration: s.done ? 'line-through' : 'none' }}>{s.t}</span>
              </div>
            ))}
            <div style={{ marginTop: 12, padding: 10, background: 'var(--saffron-100)', borderRadius: 8, display: 'flex', gap: 8, alignItems: 'start' }}>
              <window.IconAlert size={15} style={{ color: 'var(--saffron-600)', flexShrink: 0, marginTop: 1 }}/>
              <span style={{ fontSize: 11.5, color: 'var(--saffron-600)', lineHeight: 1.4 }}>Complete all 5 checks to unlock the welding booth simulation.</span>
            </div>
          </div>
        </div>

        {/* Machine start/stop sequence */}
        <div className="card">
          <div className="card-header"><div className="card-title" style={{ display: 'flex', gap: 8, alignItems: 'center' }}><window.IconRefresh size={16} style={{ color: 'var(--navy-700)' }}/> Start-up & shutdown</div></div>
          <div style={{ padding: '12px 20px' }}>
            {['startup', 'shutdown'].map(phase => (
              <div key={phase} style={{ marginBottom: 12 }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', color: phase === 'startup' ? 'var(--green-600)' : 'var(--red-600)', textTransform: 'uppercase', marginBottom: 6, fontWeight: 600 }}>
                  {phase === 'startup' ? '▲ Start-up' : '▼ Shutdown'}
                </div>
                {sequence.filter(s => s.phase === phase).map((s, i) => (
                  <div key={s.t} style={{ display: 'flex', gap: 10, padding: '6px 0', alignItems: 'center' }}>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-500)', width: 16 }}>{i + 1}</div>
                    <span style={{ fontSize: 12.5, color: 'var(--ink-800)' }}>{s.t}</span>
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.VirtualWorkshop = VirtualWorkshop;