function ARVRLearning({ onNavigate }) {
  const [mode, setMode] = React.useState('vr');

  const vrModules = [
    { t: 'VR Welding Booth', trade: 'Welder', dur: '20 min', level: 'Immersive', ready: true },
    { t: 'VR Machine Shop Walkthrough', trade: 'Machinist', dur: '15 min', level: 'Immersive', ready: true },
    { t: 'VR Electrical Panel Wiring', trade: 'Electrician', dur: '25 min', level: 'Immersive', ready: true },
    { t: 'VR Engine Overhaul Bay', trade: 'Mechanic Diesel', dur: '30 min', level: 'Advanced', ready: false },
    { t: 'VR Height & Confined-Space Safety', trade: 'All trades', dur: '12 min', level: 'Safety', ready: true },
    { t: 'VR CNC Setup & Operation', trade: 'CNC Operator', dur: '22 min', level: 'Advanced', ready: false },
  ];

  const arModules = [
    { t: 'AR Motor Component Scan', trade: 'Electrician', dur: 'Live', level: 'Mobile AR', ready: true },
    { t: 'AR Lathe Parts Overlay', trade: 'Turner', dur: 'Live', level: 'Mobile AR', ready: true },
    { t: 'AR Tool Recognition', trade: 'Fitter', dur: 'Live', level: 'Mobile AR', ready: true },
    { t: 'AR Hydraulic Circuit', trade: 'Mechatronics', dur: 'Live', level: 'Mobile AR', ready: true },
    { t: 'AR PCB Fault Finder', trade: 'Electronics Mechanic', dur: 'Live', level: 'Mobile AR', ready: false },
    { t: 'AR Safety Signage Trainer', trade: 'All trades', dur: 'Live', level: 'Mobile AR', ready: true },
  ];

  const modules = mode === 'vr' ? vrModules : arModules;

  return (
    <div className="content">
      <div style={{ marginBottom: 20 }}>
        <div className="section-eyebrow">AR & VR Learning</div>
        <h1 className="section-title" style={{ fontSize: 30 }}>Step inside the machine.</h1>
        <p className="section-sub" style={{ maxWidth: 640 }}>Optional immersive training with VR headsets and mobile augmented reality — for muscle-memory practice and equipment familiarisation.</p>
      </div>

      {/* Immersive hero */}
      <div style={{ position: 'relative', borderRadius: 16, overflow: 'hidden', background: 'var(--navy-900)', color: 'white', marginBottom: 20 }}>
        <div className="blueprint-bg" style={{ position: 'absolute', inset: 0, opacity: 0.5 }} />
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 30, padding: 32, alignItems: 'center' }}>
          <div>
            <span className="badge mono" style={{ background: 'rgba(230,117,20,0.18)', color: 'var(--saffron-400)', border: '1px solid rgba(230,117,20,0.4)' }}>WEBXR · HEADSET + MOBILE AR</span>
            <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: 30, fontWeight: 500, letterSpacing: '-0.02em', margin: '14px 0 10px', lineHeight: 1.15 }}>
              Immersive practice, unlimited repetitions, zero material cost.
            </h2>
            <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.72)', lineHeight: 1.55, maxWidth: 460 }}>
              Pair any WebXR headset or scan with an Android/iOS phone. Practise dangerous or expensive procedures safely, as many times as you need.
            </p>
            <div style={{ display: 'flex', gap: 20, marginTop: 22 }}>
              {[
                { k: '24', v: 'VR modules' },
                { k: '40+', v: 'AR overlays' },
                { k: '6', v: 'Headsets supported' },
              ].map(s => (
                <div key={s.v}>
                  <div style={{ fontFamily: 'var(--font-serif)', fontSize: 26, fontWeight: 500 }}>{s.k}</div>
                  <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'rgba(255,255,255,0.5)', marginTop: 2 }}>{s.v}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Device pairing panel */}
          <div style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 14, padding: 22 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.12em', color: 'rgba(255,255,255,0.55)', marginBottom: 14 }}>DEVICE STATUS</div>
            {[
              { d: 'Meta Quest 3', s: 'Connected', ok: true, ic: window.IconHeadset },
              { d: 'Classroom projector', s: 'Casting', ok: true, ic: window.IconVideo },
              { d: 'Student phone (AR)', s: 'Scan QR to pair', ok: false, ic: window.IconScan },
            ].map(x => {
              const I = x.ic;
              return (
                <div key={x.d} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
                  <div style={{ width: 34, height: 34, borderRadius: 8, background: 'rgba(255,255,255,0.06)', display: 'grid', placeItems: 'center', color: 'white' }}><I size={16}/></div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{x.d}</div>
                    <div style={{ fontSize: 11, color: x.ok ? 'var(--green-600)' : 'var(--saffron-400)', display: 'flex', alignItems: 'center', gap: 5 }}>
                      <span style={{ width: 6, height: 6, borderRadius: '50%', background: x.ok ? 'var(--green-600)' : 'var(--saffron-400)' }}/>{x.s}
                    </div>
                  </div>
                  {!x.ok && <button onClick={() => window.toast('Scan the QR code on your phone to pair for AR')} style={{ padding: '5px 10px', fontSize: 11, background: 'var(--saffron-500)', color: 'white', borderRadius: 6, fontWeight: 600, cursor: 'pointer', border: 'none' }}>Pair</button>}
                </div>
              );
            })}
            <button className="btn btn-saffron" style={{ width: '100%', justifyContent: 'center', marginTop: 16 }} onClick={() => window.toast('Launching immersive session on Meta Quest 3…')}><window.IconHeadset size={14}/> Launch immersive session</button>
          </div>
        </div>
      </div>

      {/* Mode toggle */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
        <div style={{ display: 'inline-flex', background: 'var(--ink-100)', borderRadius: 999, padding: 4 }}>
          {[{ id: 'vr', l: 'VR Modules', ic: window.IconHeadset }, { id: 'ar', l: 'AR Experiences', ic: window.IconScan }].map(m => {
            const I = m.ic;
            const active = mode === m.id;
            return (
              <button key={m.id} onClick={() => setMode(m.id)} style={{
                display: 'flex', alignItems: 'center', gap: 8, padding: '8px 18px', borderRadius: 999,
                background: active ? 'white' : 'transparent', color: active ? 'var(--navy-800)' : 'var(--ink-600)',
                fontSize: 13, fontWeight: 600, boxShadow: active ? 'var(--shadow-1)' : 'none',
              }}><I size={15}/> {m.l}</button>
            );
          })}
        </div>
        <span style={{ fontSize: 12, color: 'var(--ink-600)' }}>{modules.length} experiences available</span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {modules.map(m => (
          <div key={m.t} className="card" style={{ overflow: 'hidden', opacity: m.ready ? 1 : 0.72 }}>
            <div style={{ position: 'relative', aspectRatio: '16/9', background: mode === 'vr' ? 'linear-gradient(135deg, #071a3d, #133c7a)' : 'linear-gradient(135deg, #0b2a5b, #d16712)' }}>
              <div className="blueprint-bg" style={{ position: 'absolute', inset: 0, opacity: 0.4 }} />
              <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', color: 'white', opacity: 0.9 }}>
                {mode === 'vr' ? <window.IconHeadset size={40}/> : <window.IconScan size={40}/>}
              </div>
              <div style={{ position: 'absolute', top: 10, left: 10 }}>
                <span className="badge mono" style={{ background: 'rgba(255,255,255,0.9)', color: 'var(--navy-800)', fontSize: 9 }}>{m.level}</span>
              </div>
              {!m.ready && <div style={{ position: 'absolute', top: 10, right: 10 }}><span className="badge mono" style={{ background: 'rgba(0,0,0,0.6)', color: 'white', fontSize: 9 }}><window.IconLock size={10}/> SOON</span></div>}
            </div>
            <div style={{ padding: 16 }}>
              <div style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--ink-900)', lineHeight: 1.3 }}>{m.t}</div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 }}>
                <span className="badge navy" style={{ fontSize: 9 }}>{m.trade}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-500)' }}><window.IconClock size={11} style={{ verticalAlign: 'middle' }}/> {m.dur}</span>
              </div>
              <button className={m.ready ? 'btn btn-primary' : 'btn btn-ghost'} disabled={!m.ready} onClick={() => window.toast((mode === 'vr' ? 'Launching VR: ' : 'Opening AR: ') + m.t)} style={{ width: '100%', justifyContent: 'center', marginTop: 14, opacity: m.ready ? 1 : 0.6 }}>
                {m.ready ? (mode === 'vr' ? 'Launch VR' : 'Open AR camera') : 'Coming soon'}
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.ARVRLearning = ARVRLearning;