function ComponentsSection() {
  return (
    <section id="components" data-screen-label="07 Components">
      <div className="wrap">
        <div className="section-head">
          <div className="id"><b>07</b> &nbsp;/&nbsp; Components</div>
          <div>
            <h2 className="h1">Cards. Badges.<br/>Alerts. Nav.</h2>
            <p className="lede" style={{ marginTop: 16 }}>
              The everyday building blocks. Compose them — don't reinvent them.
            </p>
          </div>
        </div>

        {/* Cards */}
        <div className="showcase bd-root" style={{ fontSize: 16, marginBottom: 24 }}>
          <div className="label">// cards</div>
          <div className="g3" style={{ gap: 16 }}>
            <article className="bd-card">
              <div className="bd-card-meta">case study · 07</div>
              <div className="bd-card-title">Headless Shopify rebuild</div>
              <div className="bd-card-body">Rebuilt a fashion brand's storefront on Hydrogen + Sanity. Page load 1.1s → 240ms.</div>
              <div style={{ marginTop: 'auto', paddingTop: '0.75em' }}>
                <button className="bd-btn ghost sm">Read more →</button>
              </div>
            </article>
            <article className="bd-card elevated">
              <div className="bd-card-meta">case study · 11</div>
              <div className="bd-card-title">Logistics ops dashboard</div>
              <div className="bd-card-body">A bespoke ops cockpit for a regional 3PL. Replaced 4 spreadsheets and a Telegram channel.</div>
              <div style={{ marginTop: 'auto', paddingTop: '0.75em' }}>
                <button className="bd-btn primary sm">Read more →</button>
              </div>
            </article>
            <article className="bd-card dark">
              <div className="bd-card-meta" style={{ color: 'rgba(250,250,247,0.5)' }}>tagline</div>
              <div className="bd-card-title">We code your <span style={{ color: '#5b6cff' }}>vision.</span></div>
              <div className="bd-card-body">Tell us what you want built and we'll bring back a plan within 48 hours.</div>
              <div style={{ marginTop: 'auto', paddingTop: '0.75em' }}>
                <button className="bd-btn secondary sm">Start a project →</button>
              </div>
            </article>
          </div>
        </div>

        {/* Badges */}
        <div className="showcase bd-root" style={{ fontSize: 16, marginBottom: 24 }}>
          <div className="label">// badges</div>
          <div className="cmp-row">
            <span className="bd-badge">Default</span>
            <span className="bd-badge info">Info</span>
            <span className="bd-badge success">Shipped</span>
            <span className="bd-badge warning">In review</span>
            <span className="bd-badge danger">Blocked</span>
            <span className="bd-badge success dot">Live</span>
            <span className="bd-badge danger dot">Down</span>
            <span className="bd-badge info dot">Beta</span>
          </div>
        </div>

        {/* Alerts */}
        <div className="showcase bd-root" style={{ fontSize: 16, marginBottom: 24 }}>
          <div className="label">// alerts</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div className="bd-alert info">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9"/><line x1="12" y1="8" x2="12" y2="13"/><circle cx="12" cy="16" r="0.5" fill="currentColor"/></svg>
              <div><b>Heads up.</b> We moved billing into a separate dashboard. <a href="#" style={{ color: 'inherit' }}>See where →</a></div>
            </div>
            <div className="bd-alert success">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12l5 5L20 7"/></svg>
              <div>Your project brief was saved. We'll reply within 48 hours.</div>
            </div>
            <div className="bd-alert warning">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 3L2 21h20L12 3z"/><line x1="12" y1="10" x2="12" y2="14"/><circle cx="12" cy="17" r="0.5" fill="currentColor"/></svg>
              <div>You're approaching your monthly request limit. <a href="#" style={{ color: 'inherit' }}>Upgrade →</a></div>
            </div>
            <div className="bd-alert danger">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9"/><line x1="9" y1="9" x2="15" y2="15"/><line x1="15" y1="9" x2="9" y2="15"/></svg>
              <div><b>Couldn't save.</b> The connection dropped — check your network and try again.</div>
            </div>
          </div>
        </div>

        {/* Navigation */}
        <div className="showcase bd-root" style={{ fontSize: 16 }}>
          <div className="label">// navigation · desktop</div>
          <nav className="bd-nav" style={{ marginBottom: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.625em' }}>
              <SampleMark/>
              <span style={{ fontWeight: 800, letterSpacing: '-0.02em', fontSize: '1.125rem' }}>boolland</span>
            </div>
            <div className="links">
              <a href="#">Work</a>
              <a href="#">Services</a>
              <a href="#">About</a>
              <a href="#">Journal</a>
            </div>
            <div className="actions">
              <button className="bd-btn ghost sm">Sign in</button>
              <button className="bd-btn primary sm">Start a project</button>
            </div>
          </nav>

          <div className="label">// navigation · mobile</div>
          <nav className="bd-nav" style={{ maxWidth: 380, padding: '0.75em 1em' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5em' }}>
              <SampleMark/>
              <span style={{ fontWeight: 800, letterSpacing: '-0.02em', fontSize: '1rem' }}>boolland</span>
            </div>
            <div className="bd-burger">
              <span/><span/><span/>
            </div>
          </nav>
        </div>
      </div>
    </section>
  );
}

window.ComponentsSection = ComponentsSection;