function IndustryReadiness({ onNavigate }) {
  const pillars = [
    { t: 'Interview Preparation', desc: 'Mock HR & technical interviews with AI feedback', ic: window.IconChat, prog: 60, lessons: 12 },
    { t: 'Resume Builder', desc: 'ITI-specific resume templates & auto-fill', ic: window.IconFileText, prog: 100, lessons: 4 },
    { t: 'Soft Skills & Communication', desc: 'Workplace English, teamwork, etiquette', ic: window.IconUsers, prog: 45, lessons: 16 },
    { t: 'Workplace Ethics', desc: 'Discipline, punctuality, responsibility', ic: window.IconShield, prog: 80, lessons: 8 },
  ];

  const lean = [
    { t: '5S Methodology', hi: 'सॉर्ट · सेट · शाइन · स्टैंडर्डाइज़ · सस्टेन', done: true },
    { t: 'Kaizen — Continuous Improvement', hi: 'निरंतर सुधार', done: true },
    { t: 'TPM Basics', hi: 'कुल उत्पादक रखरखाव', done: false },
    { t: 'Lean Manufacturing', hi: 'लीन विनिर्माण', done: false },
    { t: 'Industrial Documentation', hi: 'औद्योगिक दस्तावेज़ीकरण', done: false },
  ];

  return (
    <div className="content">
      <div style={{ marginBottom: 20 }}>
        <div className="section-eyebrow">Industry Readiness</div>
        <h1 className="section-title" style={{ fontSize: 30 }}>From trade test to shop floor.</h1>
        <p className="section-sub" style={{ maxWidth: 640 }}>Everything beyond the syllabus that makes you employable — interviews, resume, soft skills and industry practices.</p>
      </div>

      {/* Placement readiness index hero */}
      <div className="card" style={{ padding: 0, overflow: 'hidden', marginBottom: 20 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr' }}>
          <div style={{ padding: 28, background: 'linear-gradient(135deg, #0b2a5b, #133c7a)', color: 'white', position: 'relative' }}>
            <div className="blueprint-bg" style={{ position: 'absolute', inset: 0, opacity: 0.3 }} />
            <div style={{ position: 'relative' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.12em', color: 'rgba(255,255,255,0.6)' }}>PLACEMENT READINESS INDEX</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 8 }}>
                <span style={{ fontFamily: 'var(--font-serif)', fontSize: 56, fontWeight: 500, letterSpacing: '-0.03em' }}>72</span>
                <span style={{ fontSize: 20, color: 'rgba(255,255,255,0.5)' }}>/100</span>
              </div>
              <span className="badge saffron" style={{ fontSize: 11, marginTop: 6 }}>Grade B2 · Job-ready soon</span>
              <p style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.7)', marginTop: 14, lineHeight: 1.5 }}>
                Complete Soft Skills and TPM Basics to reach A-grade placement readiness.
              </p>
            </div>
          </div>
          <div style={{ padding: 24, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            {[
              { k: 'Trade skills', v: 84 },
              { k: 'Soft skills', v: 58 },
              { k: 'Interview readiness', v: 62 },
              { k: 'Documentation', v: 71 },
            ].map(x => (
              <div key={x.k} style={{ padding: 16, background: 'var(--ink-50)', borderRadius: 10 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontSize: 12.5, color: 'var(--ink-700)', fontWeight: 500 }}>{x.k}</span>
                  <span style={{ fontFamily: 'var(--font-serif)', fontSize: 20, fontWeight: 500, color: 'var(--ink-900)' }}>{x.v}</span>
                </div>
                <div className="progress-track" style={{ marginTop: 8 }}><div className="progress-fill" style={{ width: `${x.v}%`, background: x.v >= 80 ? 'var(--green-600)' : x.v >= 60 ? 'var(--saffron-500)' : 'var(--red-600)' }} /></div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Pillars */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, marginBottom: 20 }}>
        {pillars.map(p => {
          const I = p.ic;
          return (
            <div key={p.t} className="card" style={{ padding: 22, display: 'flex', gap: 16 }}>
              <div style={{ width: 48, height: 48, borderRadius: 10, background: 'var(--navy-100)', color: 'var(--navy-700)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><I size={22}/></div>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                  <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--ink-900)' }}>{p.t}</div>
                  {p.prog === 100 ? <span className="badge green" style={{ fontSize: 10 }}>✓ Done</span> : <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-500)' }}>{p.lessons} lessons</span>}
                </div>
                <div style={{ fontSize: 12.5, color: 'var(--ink-600)', marginTop: 4, lineHeight: 1.4 }}>{p.desc}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 12 }}>
                  <div className="progress-track" style={{ flex: 1 }}><div className="progress-fill" style={{ width: `${p.prog}%`, background: p.prog === 100 ? 'var(--green-600)' : 'var(--saffron-500)' }} /></div>
                  <button className="btn btn-ghost" style={{ padding: '6px 12px', fontSize: 12 }} onClick={() => window.toast((p.prog === 100 ? 'Reviewing: ' : 'Continuing: ') + p.t)}>{p.prog === 100 ? 'Review' : 'Continue'}</button>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {/* Lean & industry practices */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 20 }}>
        <div className="card">
          <div className="card-header"><div className="card-title" style={{ display: 'flex', gap: 8, alignItems: 'center' }}><window.IconCompass size={16} style={{ color: 'var(--navy-700)' }}/> Industry practices & standards</div></div>
          <div style={{ padding: '10px 20px' }}>
            {lean.map(l => (
              <div key={l.t} style={{ padding: '12px 0', borderBottom: '1px dashed var(--ink-200)', display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 24, height: 24, borderRadius: '50%', background: l.done ? 'var(--green-600)' : 'var(--ink-100)', color: l.done ? 'white' : 'var(--ink-400)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>{l.done ? <window.IconCheck size={13}/> : <window.IconLock size={12}/>}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink-900)' }}>{l.t}</div>
                  <div className="hi" style={{ fontSize: 11.5, color: 'var(--ink-600)', marginTop: 1 }}>{l.hi}</div>
                </div>
                {!l.done && <button className="btn btn-ghost" style={{ padding: '5px 10px', fontSize: 11 }} onClick={() => window.toast('Starting module: ' + l.t)}>Start</button>}
              </div>
            ))}
          </div>
        </div>

        {/* Job matches */}
        <div className="card">
          <div className="card-header" style={{ justifyContent: 'space-between' }}>
            <div className="card-title" style={{ display: 'flex', gap: 8, alignItems: 'center' }}><window.IconBriefcase size={16} style={{ color: 'var(--saffron-600)' }}/> Matched openings</div>
            <span className="badge saffron" style={{ fontSize: 10 }}>New</span>
          </div>
          <div style={{ padding: '6px 0' }}>
            {[
              { r: 'Junior Fitter', co: 'Tata Motors · Pune', m: '92%' },
              { r: 'Machine Operator', co: 'Bosch · Bengaluru', m: '85%' },
              { r: 'Maintenance Trainee', co: 'L&T · Mumbai', m: '78%' },
              { r: 'Apprentice Fitter', co: 'NTPC · Odisha', m: '74%' },
            ].map(j => (
              <div key={j.r} style={{ padding: '12px 20px', borderTop: '1px solid var(--ink-100)', display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink-900)' }}>{j.r}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-600)', marginTop: 1 }}>{j.co}</div>
                </div>
                <span className="badge green" style={{ fontSize: 10 }}>{j.m} match</span>
              </div>
            ))}
          </div>
          <div style={{ padding: 14 }}>
            <button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }} onClick={() => window.toast('Opening the ITI resume builder…')}>Build resume <window.IconArrow size={13}/></button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.IndustryReadiness = IndustryReadiness;