function TypeSection() {
  // Each row: name, rem, sample
  const rows = [
    { name: 'Display', rem: '4rem',     style: { fontSize: '4rem', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 0.95 }, sample: 'Build the digital world.' },
    { name: 'H1',      rem: '3rem',     style: { fontSize: '3rem', fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1.05 }, sample: 'A heading that anchors a page' },
    { name: 'H2',      rem: '2.25rem',  style: { fontSize: '2.25rem', fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.1 }, sample: 'A section title' },
    { name: 'H3',      rem: '1.75rem',  style: { fontSize: '1.75rem', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.15 }, sample: 'A subsection' },
    { name: 'H4',      rem: '1.375rem', style: { fontSize: '1.375rem', fontWeight: 700, letterSpacing: '-0.015em', lineHeight: 1.25 }, sample: 'A card title' },
    { name: 'H5',      rem: '1.125rem', style: { fontSize: '1.125rem', fontWeight: 600, letterSpacing: '-0.01em', lineHeight: 1.35 }, sample: 'A small heading or label' },
    { name: 'Body',    rem: '1rem',     style: { fontSize: '1rem', fontWeight: 400, lineHeight: 1.55 }, sample: 'The default paragraph — readable on any device, comfortable for blocks of running text.' },
    { name: 'Small',   rem: '0.875rem', style: { fontSize: '0.875rem', fontWeight: 400, lineHeight: 1.5, color: 'var(--muted)' }, sample: 'Captions, helper text, meta information.' },
    { name: 'Eyebrow', rem: '0.75rem',  style: { fontSize: '0.75rem', fontFamily: 'Roboto Mono, monospace', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--muted)' }, sample: 'SECTION · SUBLABEL · 02.1' },
  ];

  return (
    <section id="type" data-screen-label="02 Type">
      <div className="wrap">
        <div className="section-head">
          <div className="id"><b>02</b> &nbsp;/&nbsp; Type scale</div>
          <div>
            <h2 className="h1">A scale<br/>in <i style={{ fontStyle: 'normal', color: 'var(--blue)' }}>rem</i>.</h2>
            <p className="lede" style={{ marginTop: 16 }}>
              Every text style is anchored to the root. The sample below renders at this document's current root size — but in your product, the actual pixel value at each breakpoint follows the formula above.
            </p>
          </div>
        </div>

        <div className="type-scale">
          {rows.map(r => (
            <div className="row" key={r.name}>
              <div className="name">{r.name}</div>
              <div style={r.style}>{r.sample}</div>
              <div className="rem">{r.rem}</div>
              <div className="px">{toPxRange(r.rem)}</div>
            </div>
          ))}
        </div>

        <div className="g3" style={{ marginTop: 32 }}>
          <div className="spec">
            <b>// usage</b>{'\n'}
            Display reserved for hero<br/>moments only.<br/>
            H1 = one per page.<br/>
            H2 = section openers.<br/>
            H3 – H5 = nest as needed.
          </div>
          <div className="spec">
            <b>// line-height</b>{'\n'}
            Headlines tighten as size grows<br/>
            (1.05 at H1 → 1.55 at body).<br/>
            Keeps the visual rhythm even.
          </div>
          <div className="spec">
            <b>// fonts</b>{'\n'}
            Plus Jakarta Sans — body & headlines.<br/>
            Roboto Mono — labels, code, eyebrows.<br/>
            Never substitute either.
          </div>
        </div>
      </div>
    </section>
  );
}

// Translate "Xrem" to a px range across breakpoints (informational)
function toPxRange(rem) {
  const n = parseFloat(rem);
  const desktop = (n * 14.4).toFixed(1);
  const tablet  = (n * 16.4).toFixed(1);
  const mobile  = (n * 15.0).toFixed(1);
  return `${desktop} · ${tablet} · ${mobile} px`;
}

window.TypeSection = TypeSection;