function ProcessAnimation({ onNavigate }) {
  const [cat, setCat] = React.useState('All');
  const [playing, setPlaying] = React.useState(false);

  const categories = ['All', 'Manufacturing', 'Assembly', 'Machining', 'Automation', 'Quality & Safety'];

  const stages = [
    { n: 1, t: 'Raw material loading', done: true },
    { n: 2, t: 'Facing & centering', done: true },
    { n: 3, t: 'Rough turning pass', current: true },
    { n: 4, t: 'Finish turning', done: false },
    { n: 5, t: 'Parting off', done: false },
    { n: 6, t: 'Inspection & gauging', done: false },
  ];

  const library = [
    { t: 'CNC Turning — full cycle', trade: 'Machinist', cat: 'Machining', dur: '6:20', views: '48K', hot: true },
    { t: 'Sand casting process', trade: 'Foundryman', cat: 'Manufacturing', dur: '4:48', views: '22K' },
    { t: 'Sheet metal press line', trade: 'Fitter', cat: 'Manufacturing', dur: '3:30', views: '31K' },
    { t: 'Robotic arm pick & place', trade: 'Mechatronics', cat: 'Automation', dur: '5:12', views: '19K', hot: true },
    { t: 'Engine block assembly', trade: 'Mechanic Diesel', cat: 'Assembly', dur: '7:05', views: '27K' },
    { t: 'Injection moulding', trade: 'Machinist', cat: 'Manufacturing', dur: '4:02', views: '15K' },
    { t: 'PCB pick & place (SMT)', trade: 'Electronics Mechanic', cat: 'Automation', dur: '3:55', views: '24K' },
    { t: 'Gear hobbing operation', trade: 'Turner', cat: 'Machining', dur: '5:40', views: '12K' },
    { t: 'Quality inspection — CMM', trade: 'Draughtsman', cat: 'Quality & Safety', dur: '3:18', views: '9K' },
    { t: 'Conveyor material handling', trade: 'Mechatronics', cat: 'Automation', dur: '2:52', views: '11K' },
    { t: 'Arc welding automation', trade: 'Welder', cat: 'Manufacturing', dur: '4:26', views: '33K', hot: true },
    { t: 'Packaging & palletising', trade: 'ICTSM', cat: 'Automation', dur: '3:07', views: '8K' },
  ];

  const filtered = cat === 'All' ? library : library.filter(x => x.cat === cat);

  return (
    <div className="content">
      <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', marginBottom: 20, gap: 24, flexWrap: 'wrap' }}>
        <div>
          <div className="section-eyebrow">Industrial Process Animation</div>
          <h1 className="section-title" style={{ fontSize: 30 }}>The shop floor, animated.</h1>
          <p className="section-sub" style={{ maxWidth: 620 }}>High-fidelity 2D/3D animations of real manufacturing, assembly and automation processes — narrated in English, हिंदी, தமிழ் & తెలుగు.</p>
        </div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-600)', letterSpacing: '0.08em', display: 'flex', gap: 20 }}>
          <div><strong style={{ color: 'var(--ink-900)', fontSize: 18, fontFamily: 'var(--font-serif)', fontWeight: 500 }}>380+</strong> animations</div>
          <div><strong style={{ color: 'var(--ink-900)', fontSize: 18, fontFamily: 'var(--font-serif)', fontWeight: 500 }}>20</strong> trades</div>
          <div><strong style={{ color: 'var(--ink-900)', fontSize: 18, fontFamily: 'var(--font-serif)', fontWeight: 500 }}>4K</strong> quality</div>
        </div>
      </div>

      {/* Featured player */}
      <div className="card" style={{ overflow: 'hidden', marginBottom: 20 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.7fr 1fr' }}>
          <div style={{ position: 'relative', aspectRatio: '16/9', background: 'var(--navy-900)' }}>
            <img src="assets/hero-cnc.jpg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: 0.92 }} />
            <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' }}>● FEATURED · PROCESS ANIMATION</span>
              <span className="badge mono" style={{ background: 'rgba(255,255,255,0.9)', color: 'var(--navy-800)' }}>MACHINIST · 4K</span>
            </div>
            <button onClick={() => setPlaying(p => !p)} style={{
              position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)',
              width: 64, height: 64, borderRadius: '50%', background: 'rgba(255,255,255,0.95)',
              color: 'var(--navy-800)', display: 'grid', placeItems: 'center', boxShadow: '0 8px 26px rgba(0,0,0,0.35)',
            }}>{playing ? <window.IconPause size={24}/> : <window.IconPlay size={24}/>}</button>

            {/* Bottom timeline with process stages */}
            <div style={{ position: 'absolute', bottom: 14, left: 14, right: 14, background: 'rgba(11,42,91,0.95)', borderRadius: 8, padding: '10px 14px', color: 'white' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11 }}>02:41 / 06:20</span>
                <div style={{ flex: 1, height: 4, background: 'rgba(255,255,255,0.15)', borderRadius: 999, position: 'relative' }}>
                  <div style={{ width: '42%', height: '100%', background: 'var(--saffron-500)', borderRadius: 999 }} />
                  {[16, 33, 50, 66, 83].map(p => <div key={p} style={{ position: 'absolute', top: -2, left: `${p}%`, width: 2, height: 8, background: 'rgba(255,255,255,0.4)' }} />)}
                </div>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--saffron-400)' }}>STAGE 3/6</span>
              </div>
            </div>
          </div>

          <div style={{ padding: 22, display: 'flex', flexDirection: 'column' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--saffron-600)', letterSpacing: '0.12em' }}>NOW PLAYING</div>
            <div style={{ fontFamily: 'var(--font-serif)', fontSize: 20, fontWeight: 600, color: 'var(--ink-900)', margin: '4px 0 6px', letterSpacing: '-0.01em' }}>CNC Turning — Full Machining Cycle</div>
            <p style={{ fontSize: 13, color: 'var(--ink-600)', lineHeight: 1.5, margin: 0 }}>Follow the complete turning operation from bar loading to parting-off, with tool paths, speeds and feeds annotated at each stage.</p>

            <div style={{ marginTop: 16, flex: 1 }}>
              <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--ink-600)', fontWeight: 600, marginBottom: 8 }}>Process stages</div>
              {stages.map(s => (
                <div key={s.n} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0' }}>
                  <div style={{
                    width: 20, height: 20, borderRadius: '50%', flexShrink: 0,
                    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: 10, fontWeight: 700,
                  }}>{s.done ? <window.IconCheck size={11}/> : s.n}</div>
                  <span style={{ fontSize: 12.5, color: 'var(--ink-800)', fontWeight: s.current ? 600 : 400 }}>{s.t}</span>
                </div>
              ))}
            </div>

            <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
              <button className="btn btn-saffron" style={{ flex: 1, justifyContent: 'center' }} onClick={() => onNavigate('lesson')}><window.IconCube size={13}/> Open 3D lesson</button>
              <button className="btn btn-ghost" onClick={() => window.toast('Downloading animation…')}><window.IconDownload size={13}/></button>
            </div>
          </div>
        </div>
      </div>

      {/* Category filter */}
      <div style={{ display: 'flex', gap: 6, marginBottom: 20, borderBottom: '1px solid var(--ink-200)' }}>
        {categories.map(c => (
          <button key={c} onClick={() => setCat(c)} style={{
            padding: '10px 16px', fontSize: 13, fontWeight: 600,
            color: cat === c ? 'var(--navy-800)' : 'var(--ink-600)',
            borderBottom: cat === c ? '2px solid var(--saffron-500)' : '2px solid transparent',
            marginBottom: -1,
          }}>{c}</button>
        ))}
      </div>

      {/* Grid */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {filtered.map(a => (
          <div key={a.t} className="card" onClick={() => onNavigate('lesson')} style={{ overflow: 'hidden', cursor: 'pointer', transition: 'all 0.15s' }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = 'var(--shadow-2)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; }}>
            <div style={{ position: 'relative', aspectRatio: '16/9', background: 'var(--navy-900)' }}>
              <img src="assets/hero-cnc.jpg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: 0.85 }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.6))' }} />
              <div style={{ position: 'absolute', top: 8, left: 8, display: 'flex', gap: 4 }}>
                {a.hot && <span className="badge saffron" style={{ fontSize: 9 }}>POPULAR</span>}
              </div>
              <div style={{ position: 'absolute', bottom: 8, right: 8, fontFamily: 'var(--font-mono)', fontSize: 10, background: 'rgba(0,0,0,0.7)', color: 'white', padding: '2px 6px', borderRadius: 4 }}>{a.dur}</div>
              <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 40, height: 40, borderRadius: '50%', background: 'rgba(255,255,255,0.92)', color: 'var(--navy-800)', display: 'grid', placeItems: 'center' }}>
                <window.IconPlay size={16}/>
              </div>
            </div>
            <div style={{ padding: 14 }}>
              <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink-900)', lineHeight: 1.3 }}>{a.t}</div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8 }}>
                <span className="badge navy" style={{ fontSize: 9 }}>{a.trade}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-500)' }}><window.IconEye size={11} style={{ verticalAlign: 'middle' }}/> {a.views}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.ProcessAnimation = ProcessAnimation;