function ButtonsSection() {
  return (
    <section id="buttons" data-screen-label="05 Buttons">
      <div className="wrap">
        <div className="section-head">
          <div className="id"><b>05</b> &nbsp;/&nbsp; Buttons</div>
          <div>
            <h2 className="h1">Six variants.<br/>Three sizes.</h2>
            <p className="lede" style={{ marginTop: 16 }}>
              Buttons are the loudest objects in the UI — keep them quiet unless they have a job. One primary action per view. Secondary and tertiary for everything else.
            </p>
          </div>
        </div>

        {/* Variants */}
        <div className="showcase bd-root" style={{ fontSize: 16 }}>
          <div className="label">// variants</div>
          <div className="cmp-row">
            <button className="bd-btn primary">Primary action</button>
            <button className="bd-btn secondary">Secondary</button>
            <button className="bd-btn tertiary">Tertiary</button>
            <button className="bd-btn outline">Outline</button>
            <button className="bd-btn ghost">Ghost</button>
            <button className="bd-btn danger">Delete</button>
          </div>

          <div className="label" style={{ marginTop: 32 }}>// sizes</div>
          <div className="cmp-row">
            <button className="bd-btn primary sm">Small</button>
            <button className="bd-btn primary">Medium · default</button>
            <button className="bd-btn primary lg">Large</button>
          </div>

          <div className="label" style={{ marginTop: 32 }}>// states</div>
          <div className="cmp-row">
            <button className="bd-btn primary">Default</button>
            <button className="bd-btn primary" style={{ background: 'var(--bd-blue)' }}>Hover</button>
            <button className="bd-btn primary" style={{ background: 'var(--bd-ink-2)' }}>Pressed</button>
            <button className="bd-btn primary" disabled>Disabled</button>
            <button className="bd-btn primary">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><circle cx="12" cy="12" r="9" strokeDasharray="14 6" style={{ animation: 'spin 1s linear infinite', transformOrigin: 'center' }}/></svg>
              Loading
            </button>
          </div>

          <div className="label" style={{ marginTop: 32 }}>// with icon</div>
          <div className="cmp-row">
            <button className="bd-btn primary">
              Start a project
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </button>
            <button className="bd-btn outline">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
              Download brief
            </button>
            <button className="bd-btn ghost">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
              Back
            </button>
          </div>
        </div>

        {/* Specs */}
        <div className="g3" style={{ marginTop: 24 }}>
          <div className="spec">
            <b>// anatomy</b>{'\n'}
            padding-x: <b>1.125em</b><br/>
            padding-y: <b>0.625em</b><br/>
            radius: <b>--bd-r-full</b><br/>
            font-weight: <b>600</b><br/>
            font-size: <b>0.875rem</b> (M)
          </div>
          <div className="spec">
            <b>// sizes</b>{'\n'}
            sm → 0.8125rem · 0.875em px<br/>
            md → 0.875rem · 1.125em px<br/>
            lg → 1rem · 1.5em px<br/>
            All radii: pill ( <b>r-full</b> )
          </div>
          <div className="spec">
            <b>// touch target</b>{'\n'}
            Minimum hit area: <b>44 × 44 px</b><br/>
            on mobile. Use <b>size=lg</b> for any<br/>
            primary action on touch screens.
          </div>
        </div>
      </div>

      <style>{`@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }`}</style>
    </section>
  );
}

window.ButtonsSection = ButtonsSection;