function Certificates({ onNavigate }) {
  const [tab, setTab] = React.useState('Certificates');
  const tabs = ['Certificates', 'Badges', 'Skill Credentials'];

  const certs = [
    { t: 'Bench Work & Fitting — Module 1', trade: 'Fitter', date: '12 May 2026', score: 88, id: 'ST-FTR-M1-8841', done: true },
    { t: 'Marking & Measuring Instruments', trade: 'Fitter', date: '02 Jun 2026', score: 92, id: 'ST-FTR-M2-9012', done: true },
    { t: 'Sheet Metal & Basic Welding', trade: 'Fitter', date: 'In progress', score: 78, id: '—', done: false },
    { t: 'Workplace Safety & 5S', trade: 'All trades', date: '18 Apr 2026', score: 95, id: 'ST-GEN-5S-4420', done: true },
  ];

  const badges = [
    { t: '12-Day Streak', desc: 'Learned every day for 12 days', ic: window.IconFlame, got: true },
    { t: 'Lab Master', desc: 'Cleared 10 virtual practicals', ic: window.IconBeaker, got: true },
    { t: 'Sharp Shooter', desc: '90%+ on 5 assessments', ic: window.IconTarget, got: true },
    { t: 'Safety First', desc: '100% safety compliance', ic: window.IconShield, got: true },
    { t: 'Night Owl', desc: 'Studied 20 hrs after 8 PM', ic: window.IconClock, got: false },
    { t: 'Trade Champion', desc: 'Top 5% of your batch', ic: window.IconTrophy, got: false },
  ];

  const skills = [
    { t: 'Precision Measurement', level: 'Advanced', v: 88 },
    { t: 'Metal Cutting & Filing', level: 'Proficient', v: 76 },
    { t: 'MIG/MMA Welding', level: 'Intermediate', v: 64 },
    { t: 'Engineering Drawing', level: 'Intermediate', v: 58 },
    { t: 'Machine Safety', level: 'Advanced', v: 95 },
  ];

  return (
    <div className="content">
      <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', marginBottom: 20, gap: 20, flexWrap: 'wrap' }}>
        <div>
          <div className="section-eyebrow">Certificates & Achievements</div>
          <h1 className="section-title" style={{ fontSize: 30 }}>Proof of every skill you've earned.</h1>
          <p className="section-sub">NCVT-aligned, verifiable, shareable — with QR verification for employers.</p>
        </div>
        <div style={{ display: 'flex', gap: 20, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-600)' }}>
          <div><strong style={{ color: 'var(--ink-900)', fontSize: 20, fontFamily: 'var(--font-serif)', fontWeight: 500 }}>3</strong> certificates</div>
          <div><strong style={{ color: 'var(--ink-900)', fontSize: 20, fontFamily: 'var(--font-serif)', fontWeight: 500 }}>4</strong> badges</div>
          <div><strong style={{ color: 'var(--ink-900)', fontSize: 20, fontFamily: 'var(--font-serif)', fontWeight: 500 }}>B2</strong> readiness</div>
        </div>
      </div>

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

      {tab === 'Certificates' && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
          {certs.map(c => (
            <div key={c.t} className="card" style={{ overflow: 'hidden', opacity: c.done ? 1 : 0.82 }}>
              {/* Certificate visual */}
              <div style={{ position: 'relative', padding: 24, background: c.done ? 'linear-gradient(135deg, #071a3d, #133c7a)' : 'var(--ink-100)', color: c.done ? 'white' : 'var(--ink-500)' }}>
                {c.done && <div className="blueprint-bg" style={{ position: 'absolute', inset: 0, opacity: 0.3 }} />}
                <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                  <div>
                    <window.ShikshaTriLogo size={30} mono={c.done} />
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', marginTop: 10, opacity: 0.7 }}>CERTIFICATE OF COMPLETION</div>
                    <div style={{ fontFamily: 'var(--font-serif)', fontSize: 18, fontWeight: 600, marginTop: 6, maxWidth: 260, lineHeight: 1.2 }}>{c.t}</div>
                    <div style={{ fontSize: 12, marginTop: 8, opacity: 0.8 }}>Rahul Kumar · {c.trade}</div>
                  </div>
                  {c.done ? (
                    <div style={{ width: 54, height: 54, borderRadius: '50%', background: 'var(--saffron-500)', display: 'grid', placeItems: 'center', border: '3px solid rgba(255,255,255,0.3)' }}><window.IconAward size={26} style={{ color: 'white' }}/></div>
                  ) : (
                    <span className="badge saffron" style={{ fontSize: 10 }}>{c.score}% · finishing</span>
                  )}
                </div>
              </div>
              <div style={{ padding: '14px 20px', display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{ fontSize: 12, color: 'var(--ink-600)' }}>
                  <div><strong style={{ color: 'var(--ink-900)' }}>Issued:</strong> {c.date}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, marginTop: 2 }}>{c.id}</div>
                </div>
                <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
                  {c.done ? (
                    <>
                      <button className="btn btn-ghost" style={{ padding: '7px 10px' }} onClick={() => window.toast('Shareable verification link copied')}><window.IconExternal size={13}/></button>
                      <button className="btn btn-primary" style={{ padding: '7px 12px' }} onClick={() => window.toast('Downloading certificate ' + c.id + ' (PDF)…')}><window.IconDownload size={13}/> PDF</button>
                    </>
                  ) : (
                    <button className="btn btn-saffron" onClick={() => onNavigate('lesson')}>Continue module</button>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      {tab === 'Badges' && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {badges.map(b => {
            const I = b.ic;
            return (
              <div key={b.t} className="card" style={{ padding: 24, textAlign: 'center', opacity: b.got ? 1 : 0.55 }}>
                <div style={{ width: 64, height: 64, margin: '0 auto 14px', borderRadius: '50%', background: b.got ? 'linear-gradient(135deg, var(--saffron-400), var(--saffron-600))' : 'var(--ink-100)', color: b.got ? 'white' : 'var(--ink-400)', display: 'grid', placeItems: 'center', boxShadow: b.got ? '0 6px 18px rgba(230,117,20,0.35)' : 'none' }}>
                  {b.got ? <I size={28}/> : <window.IconLock size={24}/>}
                </div>
                <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink-900)' }}>{b.t}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-600)', marginTop: 4 }}>{b.desc}</div>
                {b.got && <span className="badge green" style={{ fontSize: 10, marginTop: 10 }}>● Earned</span>}
              </div>
            );
          })}
        </div>
      )}

      {tab === 'Skill Credentials' && (
        <div className="card" style={{ padding: 24, maxWidth: 720 }}>
          <div className="card-title" style={{ marginBottom: 4 }}>Verified skill profile</div>
          <div style={{ fontSize: 12, color: 'var(--ink-600)', marginBottom: 18 }}>Auto-generated from your assessment & practical performance. Employers can verify via QR.</div>
          {skills.map(s => (
            <div key={s.t} style={{ padding: '12px 0', borderBottom: '1px dashed var(--ink-200)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink-900)' }}>{s.t}</span>
                <span className="badge navy" style={{ fontSize: 10 }}>{s.level}</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div className="progress-track" style={{ flex: 1, height: 8 }}><div className="progress-fill" style={{ width: `${s.v}%`, background: s.v >= 80 ? 'var(--green-600)' : s.v >= 60 ? 'var(--saffron-500)' : 'var(--navy-600)' }} /></div>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600, color: 'var(--ink-700)', width: 34 }}>{s.v}%</span>
              </div>
            </div>
          ))}
          <button className="btn btn-primary" style={{ marginTop: 18 }} onClick={() => window.toast('Downloading your verified skill passport…')}><window.IconDownload size={13}/> Download skill passport</button>
        </div>
      )}
    </div>
  );
}

window.Certificates = Certificates;