function TypeSection() {
  return (
    <section id="type" data-screen-label="04 Type">
      <div className="wrap">
        <div className="section-head">
          <div className="id"><b>04</b> &nbsp;/&nbsp; Type</div>
          <div>
            <h2 className="h1">Two voices.<br/>One system.</h2>
            <p className="lede" style={{ marginTop: 16 }}>
              <b>Plus Jakarta Sans</b> is the speaking voice — confident, warm, modern. <b>Roboto Mono</b> is the technical voice — labels, code, metadata, fine print. Use them deliberately; never decoratively.
            </p>
          </div>
        </div>

        {/* Jakarta spec */}
        <div className="grid-2" style={{ marginBottom: 24 }}>
          <div className="type-spec">
            <div className="eyebrow">// primary · sans</div>
            <div className="name" style={{ marginTop: 16 }}>Plus Jakarta<br/>Sans</div>
            <div className="meta-row">
              <div>Designer<b>Tokotype</b></div>
              <div>License<b>OFL · Free</b></div>
              <div>Use<b>Headlines, body, UI</b></div>
            </div>

            <div style={{ marginTop: 32 }}>
              <div className="weight-row">
                <span className="w-label">300 · Light</span>
                <span className="w-sample" style={{ fontWeight: 300 }}>Boolland</span>
              </div>
              <div className="weight-row">
                <span className="w-label">400 · Regular</span>
                <span className="w-sample" style={{ fontWeight: 400 }}>Boolland</span>
              </div>
              <div className="weight-row">
                <span className="w-label">500 · Medium</span>
                <span className="w-sample" style={{ fontWeight: 500 }}>Boolland</span>
              </div>
              <div className="weight-row">
                <span className="w-label">700 · Bold</span>
                <span className="w-sample" style={{ fontWeight: 700 }}>Boolland</span>
              </div>
              <div className="weight-row">
                <span className="w-label">800 · Extra</span>
                <span className="w-sample" style={{ fontWeight: 800, letterSpacing: '-0.03em' }}>Boolland</span>
              </div>
            </div>
          </div>

          <div className="type-spec">
            <div className="eyebrow">// secondary · mono</div>
            <div className="name mono" style={{ marginTop: 16, fontWeight: 500, letterSpacing: '-0.03em' }}>Roboto<br/>Mono</div>
            <div className="meta-row">
              <div>Designer<b>Christian Robertson</b></div>
              <div>License<b>Apache 2.0</b></div>
              <div>Use<b>Code, labels, meta</b></div>
            </div>

            <div style={{ marginTop: 32 }}>
              <div className="weight-row">
                <span className="w-label">300 · Light</span>
                <span className="w-sample mono" style={{ fontWeight: 300 }}>boolland()</span>
              </div>
              <div className="weight-row">
                <span className="w-label">400 · Regular</span>
                <span className="w-sample mono" style={{ fontWeight: 400 }}>boolland()</span>
              </div>
              <div className="weight-row">
                <span className="w-label">500 · Medium</span>
                <span className="w-sample mono" style={{ fontWeight: 500 }}>boolland()</span>
              </div>
              <div className="weight-row">
                <span className="w-label">600 · Bold</span>
                <span className="w-sample mono" style={{ fontWeight: 600 }}>boolland()</span>
              </div>
            </div>
          </div>
        </div>

        {/* Scale */}
        <div className="type-spec">
          <div className="eyebrow" style={{ marginBottom: 24 }}>// type scale</div>
          <div className="scale-row">
            <span className="label">Display</span>
            <span style={{ fontSize: 64, fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1 }}>Where logic lives.</span>
            <span className="size">64 / 0.92 / 800</span>
          </div>
          <div className="scale-row">
            <span className="label">H1</span>
            <span style={{ fontSize: 44, fontWeight: 700, letterSpacing: '-0.035em', lineHeight: 1 }}>A name that means something.</span>
            <span className="size">44 / 0.98 / 700</span>
          </div>
          <div className="scale-row">
            <span className="label">H2</span>
            <span style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-0.025em' }}>The mark.</span>
            <span className="size">32 / 1.05 / 700</span>
          </div>
          <div className="scale-row">
            <span className="label">H3</span>
            <span style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.015em' }}>Pragmatic, not precious.</span>
            <span className="size">22 / 1.2 / 600</span>
          </div>
          <div className="scale-row">
            <span className="label">Body</span>
            <span style={{ fontSize: 16, lineHeight: 1.55, opacity: 0.85 }}>We're a software house, not a template factory. We sweat the hover state, the empty state, the migration script.</span>
            <span className="size">16 / 1.55 / 400</span>
          </div>
          <div className="scale-row">
            <span className="label">Mono</span>
            <span className="mono" style={{ fontSize: 13, letterSpacing: '0.02em', opacity: 0.85 }}>// boolland.com · est. 2020 · we code your vision</span>
            <span className="size">13 / 1.5 / 400</span>
          </div>
          <div className="scale-row">
            <span className="label">Eyebrow</span>
            <span className="mono" style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.55 }}>SECTION · SUBLABEL · 02.1</span>
            <span className="size">12 / 1.5 / 500</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.TypeSection = TypeSection;