function WorkshopManual({ onNavigate }) {
  const [doc, setDoc] = React.useState('sop-lathe');

  const index = [
    { grp: 'Standard Operating Procedures', items: [
      { id: 'sop-lathe', t: 'Centre Lathe Operation', tag: 'SOP' },
      { id: 'sop-drill', t: 'Pillar Drilling Machine', tag: 'SOP' },
      { id: 'sop-weld', t: 'MIG Welding Setup', tag: 'SOP' },
    ]},
    { grp: 'Safety Instructions', items: [
      { id: 'saf-ppe', t: 'PPE Requirements', tag: 'SAFETY' },
      { id: 'saf-elec', t: 'Electrical Safety', tag: 'SAFETY' },
    ]},
    { grp: 'Maintenance', items: [
      { id: 'mnt-lathe', t: 'Lathe Lubrication Schedule', tag: 'CHECKLIST' },
      { id: 'mnt-tool', t: 'Cutting Tool Care', tag: 'GUIDE' },
    ]},
    { grp: 'Troubleshooting', items: [
      { id: 'tsg-finish', t: 'Poor Surface Finish', tag: 'FAULT' },
      { id: 'tsg-chatter', t: 'Tool Chatter & Vibration', tag: 'FAULT' },
    ]},
  ];

  const steps = [
    { t: 'Pre-start inspection', d: 'Check machine for damage, confirm guards are fitted, verify emergency stop is accessible.' },
    { t: 'Workpiece mounting', d: 'Mount workpiece securely in the chuck. Ensure concentricity and remove the chuck key immediately.' },
    { t: 'Tool selection & setting', d: 'Select correct tool for the operation. Set tool height to centre line using the tailstock centre as reference.' },
    { t: 'Speed & feed selection', d: 'Set spindle speed (N = 1000V / πD) and feed rate based on material and operation. Refer to the cutting chart.' },
    { t: 'Machining operation', d: 'Engage the guard, start the spindle, and apply cut gradually. Use coolant where specified.' },
    { t: 'Completion & shutdown', d: 'Stop spindle, retract tool, remove workpiece, clean the machine, and isolate power.' },
  ];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', height: 'calc(100vh - 60px)', overflow: 'hidden' }}>
      {/* Book index */}
      <aside style={{ background: 'white', borderRight: '1px solid var(--ink-200)', overflow: 'auto', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '18px 20px', borderBottom: '1px solid var(--ink-200)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 36, height: 36, borderRadius: 8, background: 'var(--navy-100)', color: 'var(--navy-700)', display: 'grid', placeItems: 'center' }}><window.IconFileText size={18}/></div>
            <div>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 16, fontWeight: 600, color: 'var(--ink-900)' }}>Workshop Manual</div>
              <div style={{ fontSize: 11, color: 'var(--ink-600)' }}>Fitter Trade · Rev. 2024-25</div>
            </div>
          </div>
          <div style={{ position: 'relative', marginTop: 14 }}>
            <window.IconSearch size={13} style={{ position: 'absolute', left: 10, top: 9, color: 'var(--ink-500)' }} />
            <input placeholder="Search SOPs, faults…" style={{ width: '100%', padding: '7px 10px 7px 30px', border: '1px solid var(--ink-200)', borderRadius: 6, fontSize: 12.5, background: 'var(--ink-50)', outline: 'none', fontFamily: 'inherit' }} />
          </div>
        </div>
        <div style={{ flex: 1, padding: '8px 0' }}>
          {index.map(g => (
            <div key={g.grp} style={{ marginBottom: 6 }}>
              <div style={{ padding: '8px 20px 4px', fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-500)', fontWeight: 600 }}>{g.grp}</div>
              {g.items.map(it => {
                const active = doc === it.id;
                return (
                  <button key={it.id} onClick={() => setDoc(it.id)} style={{ width: '100%', textAlign: 'left', padding: '9px 20px', display: 'flex', alignItems: 'center', gap: 8, background: active ? 'var(--saffron-100)' : 'transparent', borderLeft: active ? '3px solid var(--saffron-500)' : '3px solid transparent' }}>
                    <window.IconChevronRight size={12} style={{ color: active ? 'var(--saffron-600)' : 'var(--ink-400)', flexShrink: 0 }} />
                    <span style={{ flex: 1, fontSize: 13, fontWeight: active ? 600 : 500, color: 'var(--ink-900)' }}>{it.t}</span>
                    <span className="badge mono" style={{ fontSize: 8, background: 'var(--ink-100)', color: 'var(--ink-600)' }}>{it.tag}</span>
                  </button>
                );
              })}
            </div>
          ))}
        </div>
      </aside>

      {/* Document view */}
      <div style={{ overflow: 'auto', background: 'var(--canvas)' }}>
        <div style={{ maxWidth: 820, margin: '0 auto', padding: '28px 40px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14, flexWrap: 'wrap' }}>
            <span className="badge navy mono">SOP · FTR-L-001</span>
            <span className="badge green mono">APPROVED</span>
            <span style={{ fontSize: 12, color: 'var(--ink-600)' }}>Last revised: 12 Apr 2026</span>
            <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
              <button className="btn btn-ghost" onClick={() => window.toast('Downloading manual (PDF)…')}><window.IconDownload size={13}/> PDF</button>
              <button className="btn btn-ghost" onClick={() => window.toast('Saved to your bookmarks')}><window.IconBookmark size={13}/> Bookmark</button>
            </div>
          </div>

          <h1 style={{ fontFamily: 'var(--font-serif)', fontSize: 30, fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--ink-900)', margin: '0 0 6px' }}>Centre Lathe — Operating Procedure</h1>
          <p style={{ fontSize: 14, color: 'var(--ink-600)', lineHeight: 1.6, margin: '0 0 20px' }}>This standard operating procedure describes the safe and correct method for operating a centre lathe for turning operations, aligned to NCVT Fitter practical exercises.</p>

          {/* Objective & tools card */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 24 }}>
            <div className="card" style={{ padding: 18 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', color: 'var(--saffron-600)', marginBottom: 8 }}>OBJECTIVE</div>
              <div style={{ fontSize: 13, color: 'var(--ink-800)', lineHeight: 1.5 }}>Produce a plain cylindrical component to specified diameter and length within ±0.05 mm tolerance.</div>
            </div>
            <div className="card" style={{ padding: 18 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', color: 'var(--saffron-600)', marginBottom: 8 }}>TOOLS & EQUIPMENT</div>
              <div style={{ fontSize: 13, color: 'var(--ink-800)', lineHeight: 1.5 }}>Centre lathe · Turning tool (HSS) · Vernier caliper · Chuck key · Coolant</div>
            </div>
          </div>

          {/* Step-by-step */}
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', color: 'var(--ink-600)', textTransform: 'uppercase', fontWeight: 600, marginBottom: 12 }}>Step-by-step procedure</div>
          {steps.map((s, i) => (
            <div key={s.t} style={{ display: 'flex', gap: 16, padding: '14px 0', borderBottom: '1px solid var(--ink-200)' }}>
              <div style={{ width: 30, height: 30, borderRadius: '50%', background: 'var(--navy-800)', color: 'white', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 13, flexShrink: 0 }}>{i + 1}</div>
              <div>
                <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink-900)' }}>{s.t}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-700)', lineHeight: 1.55, marginTop: 3 }}>{s.d}</div>
              </div>
            </div>
          ))}

          {/* Dos & Donts */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 24 }}>
            <div className="card" style={{ padding: 18 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}><window.IconCheck size={16} style={{ color: 'var(--green-600)' }}/><span style={{ fontSize: 13, fontWeight: 700, color: 'var(--green-600)' }}>DO's</span></div>
              {['Remove chuck key before starting', 'Wear safety goggles at all times', 'Apply coolant during cutting', 'Keep hands clear of rotating parts'].map(x => (
                <div key={x} style={{ fontSize: 12.5, color: 'var(--ink-800)', padding: '5px 0', display: 'flex', gap: 8 }}><span style={{ color: 'var(--green-600)' }}>✓</span>{x}</div>
              ))}
            </div>
            <div className="card" style={{ padding: 18 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}><window.IconAlert size={16} style={{ color: 'var(--red-600)' }}/><span style={{ fontSize: 13, fontWeight: 700, color: 'var(--red-600)' }}>DON'Ts</span></div>
              {['Never measure while machine is running', 'Do not wear gloves near the spindle', 'Never leave the machine unattended', 'Do not remove swarf by hand'].map(x => (
                <div key={x} style={{ fontSize: 12.5, color: 'var(--ink-800)', padding: '5px 0', display: 'flex', gap: 8 }}><span style={{ color: 'var(--red-600)' }}>✕</span>{x}</div>
              ))}
            </div>
          </div>

          <div style={{ marginTop: 24, display: 'flex', gap: 10 }}>
            <button className="btn btn-saffron" onClick={() => onNavigate('lab')}><window.IconBeaker size={14}/> Practise this in Virtual Lab</button>
            <button className="btn btn-ghost" onClick={() => onNavigate('lesson')}>Watch 3D demonstration</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.WorkshopManual = WorkshopManual;