function Industry() {
  const packs = window.FOREMAN.industryPacks;
  const [active, setActive] = React.useState('saas');
  const p = packs.find((x) => x.id === active);
  return (
    <section id="industries" 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">/08 &nbsp; Industry packs</div>
          <div>
            <h2 style={{ fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 700, letterSpacing: '-0.035em', maxWidth: 900, textWrap: 'balance' }}>
              Same framework. Different math.
            </h2>
            <p style={{ marginTop: 20, fontSize: 18, color: 'var(--muted)', maxWidth: 720, lineHeight: 1.5 }}>
              A SaaS founder and a marketplace founder don&rsquo;t need the same advice. Pick a pack &mdash; benchmarks rewire.
            </p>
          </div>
        </header>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 28 }}>
          {packs.map((pp) => (
            <button key={pp.id} onClick={() => setActive(pp.id)} style={{
              padding: '8px 14px',
              background: active === pp.id ? 'var(--ink)' : 'var(--paper)',
              color: active === pp.id ? 'white' : 'var(--ink-2)',
              border: '1px solid ' + (active === pp.id ? 'var(--ink)' : 'var(--line)'),
              fontSize: 13, fontWeight: 500,
            }}>
              {pp.label}
            </button>
          ))}
        </div>

        <div style={{
          background: 'var(--paper)', border: '1px solid var(--line)',
          display: 'grid', gridTemplateColumns: '1fr 1.2fr',
        }}>
          <div style={{ padding: '32px 32px', borderRight: '1px solid var(--line)' }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Active pack</div>
            <div style={{ fontSize: 44, fontWeight: 700, letterSpacing: '-0.03em', marginBottom: 16 }}>{p.label}</div>
            <div style={{ fontSize: 16, color: 'var(--muted)', lineHeight: 1.5, maxWidth: 360 }}>{p.focus}</div>
            <div style={{ marginTop: 28 }}>
              <div className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>&gt; /sector {p.id}</div>
              <div className="mono" style={{ fontSize: 12, color: 'var(--muted-2)', marginTop: 4 }}>// benchmarks loaded</div>
            </div>
          </div>
          <div>
            <div style={{
              padding: '14px 24px', borderBottom: '1px solid var(--line)',
              background: 'var(--paper-2)',
            }}>
              <div className="eyebrow">Default benchmarks</div>
            </div>
            {p.benchmarks.map((b, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '1fr 1fr',
                padding: '18px 24px',
                borderBottom: i < p.benchmarks.length - 1 ? '1px solid var(--line-2)' : 'none',
                fontSize: 15,
              }}>
                <span style={{ color: 'var(--muted)' }}>{b.k}</span>
                <span className="mono" style={{ fontWeight: 500 }}>{b.v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Industry = Industry;