function Skills() {
  const cats = window.FOREMAN.skillCategories;
  const [active, setActive] = React.useState('frameworks');
  const cat = cats.find((c) => c.id === active);
  return (
    <section id="skills" style={{ paddingTop: 96, paddingBottom: 96, borderTop: '1px solid var(--line)', background: 'var(--paper-2)' }}>
      <div className="container">
        <header style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 48, marginBottom: 48 }}>
          <div className="eyebrow">/06 &nbsp; Skills</div>
          <div>
            <h2 style={{ fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 700, letterSpacing: '-0.035em', maxWidth: 900, textWrap: 'balance' }}>
              158 skills. Filter by what you need today.
            </h2>
            <p style={{ marginTop: 20, fontSize: 18, color: 'var(--muted)', maxWidth: 720, lineHeight: 1.5 }}>
              Tap a category. The right framework lives in here, somewhere.
            </p>
          </div>
        </header>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 28 }}>
          {cats.map((c) => (
            <button key={c.id} onClick={() => setActive(c.id)} style={{
              padding: '8px 14px',
              background: active === c.id ? 'var(--ink)' : 'var(--paper)',
              color: active === c.id ? 'white' : 'var(--ink-2)',
              border: '1px solid ' + (active === c.id ? 'var(--ink)' : 'var(--line)'),
              fontSize: 13, fontWeight: 500,
              display: 'inline-flex', alignItems: 'baseline', gap: 8,
            }}>
              <span>{c.label}</span>
              <span className="mono" style={{ fontSize: 11, opacity: 0.6 }}>{c.count}</span>
            </button>
          ))}
        </div>

        <div style={{
          background: 'var(--paper)', border: '1px solid var(--line)',
          padding: '32px 32px',
        }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 20 }}>
            <div>
              <div className="eyebrow">Category</div>
              <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-0.025em', marginTop: 6 }}>{cat.label}</div>
            </div>
            <div className="mono" style={{ fontSize: 13, color: 'var(--muted)' }}>{cat.count} skills</div>
          </div>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 0,
            borderTop: '1px solid var(--line)',
          }}>
            {cat.sample.map((s, i) => (
              <div key={i} style={{
                padding: '14px 18px',
                borderBottom: '1px solid var(--line)',
                borderRight: '1px solid var(--line)',
                fontSize: 14, fontWeight: 500,
                display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--muted-2)' }}>{String(i + 1).padStart(2, '0')}</span>
                <span>{s}</span>
              </div>
            ))}
            <div style={{
              padding: '14px 18px',
              borderBottom: '1px solid var(--line)',
              fontSize: 14, color: 'var(--muted)',
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <span className="mono" style={{ fontSize: 11, color: 'var(--muted-2)' }}>&hellip;</span>
              <span>+ {Math.max(0, cat.count - cat.sample.length)} more</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Skills = Skills;