function TradeLibrary({ onNavigate }) {
  const [filter, setFilter] = React.useState('All');
  const categories = ['All', 'Engineering', 'Electrical & Electronics', 'Automotive', 'Construction', 'IT & New-Age'];

  const trades = [
    { name: 'Electrician', hi: 'इलेक्ट्रीशियन', ta: 'மின்சாரம்', te: 'విద్యుత్', cat: 'Electrical & Electronics', sem: 4, students: 4120, lessons: 128, sims: 22 },
    { name: 'Fitter', hi: 'फिटर', ta: 'பொருத்துனர்', te: 'ఫిట్టర్', cat: 'Engineering', sem: 4, students: 3880, lessons: 156, sims: 18 },
    { name: 'Welder', hi: 'वेल्डर', ta: 'பற்றுவேலை', te: 'వెల్డర్', cat: 'Engineering', sem: 2, students: 2940, lessons: 74, sims: 12 },
    { name: 'COPA', hi: 'सीओपीए', ta: 'கணினி', te: 'కంప్యూటర్', cat: 'IT & New-Age', sem: 2, students: 5210, lessons: 96, sims: 8, popular: true },
    { name: 'Machinist', hi: 'मशीनिस्ट', ta: 'இயந்திரவாதி', te: 'యంత్రవాది', cat: 'Engineering', sem: 4, students: 1760, lessons: 142, sims: 24 },
    { name: 'Turner', hi: 'टर्नर', ta: 'திருகுநர்', te: 'టర్నర్', cat: 'Engineering', sem: 4, students: 1410, lessons: 118, sims: 16 },
    { name: 'Mechanic Diesel', hi: 'डीज़ल मैकेनिक', ta: 'டீசல் மெக்கானிக்', te: 'డీజిల్ మెక్', cat: 'Automotive', sem: 4, students: 2110, lessons: 134, sims: 20 },
    { name: 'Electronics Mechanic', hi: 'इलेक्ट्रॉनिक्स', ta: 'எலெக்ட்ரானிக்ஸ்', te: 'ఎలక్ట్రానిక్స్', cat: 'Electrical & Electronics', sem: 4, students: 2880, lessons: 122, sims: 26 },
    { name: 'Refrigeration & AC', hi: 'रेफ्रिजरेशन', ta: 'குளிர்சாதனம்', te: 'రెఫ్రిజిరేషన్', cat: 'Electrical & Electronics', sem: 4, students: 1540, lessons: 102, sims: 14 },
    { name: 'Wireman', hi: 'वायरमैन', ta: 'கம்பியாள்', te: 'వైర్ మేన్', cat: 'Electrical & Electronics', sem: 2, students: 910, lessons: 68, sims: 10 },
    { name: 'Plumber', hi: 'प्लंबर', ta: 'குழாய்', te: 'ప్లంబర్', cat: 'Construction', sem: 2, students: 820, lessons: 54, sims: 8 },
    { name: 'ICTSM', hi: 'आईसीटीएसएम', ta: 'ICT', te: 'ICT', cat: 'IT & New-Age', sem: 4, students: 3120, lessons: 108, sims: 12, popular: true },
    { name: 'Solar Technician', hi: 'सौर तकनीशियन', ta: 'சூரிய', te: 'సౌర', cat: 'IT & New-Age', sem: 2, students: 1240, lessons: 62, sims: 12, hot: true },
    { name: 'Electric Vehicle Technician', hi: 'ईवी तकनीशियन', ta: 'மின் வாகனம்', te: 'ఎలక్ట్రిక్ వెహికల్', cat: 'Automotive', sem: 2, students: 860, lessons: 48, sims: 10, hot: true },
    { name: 'Mechatronics', hi: 'मेकाट्रॉनिक्स', ta: 'மெக்கட்ரானிக்ஸ்', te: 'మెకట్రానిక్స్', cat: 'IT & New-Age', sem: 4, students: 640, lessons: 88, sims: 16, hot: true },
    { name: 'CNC Operator', hi: 'सीएनसी', ta: 'CNC இயக்கம்', te: 'CNC ఆపరేటర్', cat: 'Engineering', sem: 2, students: 1190, lessons: 42, sims: 8, hot: true },
    { name: 'Tool & Die Maker', hi: 'टूल एंड डाई', ta: 'கருவி', te: 'టూల్ డై', cat: 'Engineering', sem: 4, students: 540, lessons: 116, sims: 18 },
    { name: 'Draughtsman (Mech)', hi: 'ड्राफ्ट्समैन', ta: 'வரைபடம்', te: 'డ్రాఫ్ట్స్ మెన్', cat: 'Engineering', sem: 4, students: 710, lessons: 78, sims: 6 },
    { name: 'Surveyor', hi: 'सर्वेयर', ta: 'கணக்கீடு', te: 'సర్వేయర్', cat: 'Construction', sem: 4, students: 380, lessons: 64, sims: 8 },
    { name: 'Foundryman', hi: 'फाउंड्री', ta: 'உலோகம்', te: 'ఫౌండ్రి', cat: 'Engineering', sem: 2, students: 260, lessons: 42, sims: 6 },
  ];

  const filtered = filter === 'All' ? trades : trades.filter(t => t.cat === filter);

  return (
    <div className="content">
      <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', marginBottom: 24 }}>
        <div>
          <div className="section-eyebrow">Trade Library</div>
          <h1 className="section-title" style={{ fontSize: 30 }}>20 NCVT trades, fully covered.</h1>
          <p className="section-sub" style={{ maxWidth: 640 }}>Semester-wise 3D lessons, virtual practicals and assessments — mapped to the latest DGT syllabus revision.</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 }}>1,762</strong> lessons</div>
          <div><strong style={{ color: 'var(--ink-900)', fontSize: 18, fontFamily: 'var(--font-serif)', fontWeight: 500 }}>272</strong> simulators</div>
          <div><strong style={{ color: 'var(--ink-900)', fontSize: 18, fontFamily: 'var(--font-serif)', fontWeight: 500 }}>8</strong> languages</div>
        </div>
      </div>

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

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {filtered.map(t => (
          <div key={t.name} className="card" style={{ padding: 20, cursor: 'pointer', transition: 'all 0.15s', position: 'relative' }}
            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 = ''; }}
            onClick={() => onNavigate('lesson')}
          >
            <div style={{ position: 'absolute', top: 12, right: 12, display: 'flex', gap: 4 }}>
              {t.hot && <span className="badge saffron" style={{ fontSize: 9 }}>NEW</span>}
              {t.popular && <span className="badge navy" style={{ fontSize: 9 }}>POPULAR</span>}
            </div>
            <div style={{ color: 'var(--navy-700)', marginBottom: 12, display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 42, height: 42, background: 'var(--navy-100)', borderRadius: 8, display: 'grid', placeItems: 'center' }}>
                <window.TradeIcon trade={t.name} size={22}/>
              </div>
            </div>
            <div style={{ fontFamily: 'var(--font-serif)', fontSize: 17, fontWeight: 600, color: 'var(--ink-900)', letterSpacing: '-0.01em' }}>{t.name}</div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 4, fontSize: 11 }}>
              <span className="hi" style={{ color: 'var(--ink-600)' }}>{t.hi}</span>
              <span style={{ color: 'var(--ink-300)' }}>·</span>
              <span className="ta" style={{ color: 'var(--ink-500)' }}>{t.ta}</span>
              <span style={{ color: 'var(--ink-300)' }}>·</span>
              <span className="te" style={{ color: 'var(--ink-500)' }}>{t.te}</span>
            </div>

            <div style={{ marginTop: 14, paddingTop: 12, borderTop: '1px dashed var(--ink-200)', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-600)', letterSpacing: '0.05em' }}>
              <span>{t.sem} SEM</span>
              <span>{t.lessons} LESSONS</span>
              <span>{t.sims} SIMS</span>
            </div>
            <div style={{ marginTop: 10, fontSize: 11, color: 'var(--ink-500)' }}>
              <strong style={{ color: 'var(--ink-800)' }}>{t.students.toLocaleString('en-IN')}</strong> students enrolled
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.TradeLibrary = TradeLibrary;