function LogoSection() {
  return (
    <section id="logo" data-screen-label="02 Logo">
      <div className="wrap">
        <div className="section-head">
          <div className="id"><b>02</b> &nbsp;/&nbsp; Logo</div>
          <div>
            <h2 className="h1">The mark.</h2>
            <p className="lede" style={{ marginTop: 16 }}>
              The Boolland mark is a rounded square framing three carved-out forms — a vertical bar and two opposing chevrons. Read it as code in motion: a pipe and two arrows of logic flowing in and out. The cutouts let the surface beneath show through, so the mark always sits naturally on whatever it's placed on.
            </p>
          </div>
        </div>

        {/* Form & Meaning diagram */}
        <div className="form-meaning">
          <div className="fm-eyebrow">// form & meaning</div>

          <div className="fm-diagram">
            <div className="fm-col">
              <div className="fm-letter">b</div>
              <div className="fm-connector"/>
              <div className="fm-tag">letter b</div>
            </div>
            <div className="fm-col">
              <div className="fm-letter fm-letter--thin">l</div>
              <div className="fm-connector"/>
              <div className="fm-tag">letter l</div>
            </div>
            <div className="fm-col">
              <div className="fm-letter fm-letter--code" aria-label="coding">{'</>'}</div>
              <div className="fm-connector"/>
              <div className="fm-tag">coding</div>
            </div>
          </div>

          <div className="fm-mark-row">
            <div className="fm-spine"/>
            <div className="fm-mark-wrap">
              <Mark size={140} color="#fafaf7"/>
            </div>
          </div>

          <div className="fm-captions">
            <div className="fm-cap">
              <div className="fm-cap-eyebrow">b · for bool</div>
              <p>Boolean — the atom of every program ever written. <span className="mono">true</span> or <span className="mono">false</span>, on or off, 1 or 0.</p>
            </div>
            <div className="fm-cap">
              <div className="fm-cap-eyebrow">l · for land</div>
              <p>A place. A territory. Somewhere you arrive, build, and stay. The "world" we code in.</p>
            </div>
            <div className="fm-cap">
              <div className="fm-cap-eyebrow">{'</>'} · for coding</div>
              <p>The angle brackets and slash — the universal shorthand for code. The craft itself, baked into the mark.</p>
            </div>
          </div>
        </div>

        {/* Primary lockup */}
        <div style={{ marginBottom: 24 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>// primary lockup</div>
          <div className="logo-stage" style={{ aspectRatio: '16/6' }}>
            <div className="corner-tag">primary · on paper</div>
            <Lockup height={88} color="#000945"/>
            <div className="corner-tag right">v3.0</div>
          </div>
        </div>

        {/* Clear space + minimum size */}
        <div className="grid-2" style={{ marginBottom: 24 }}>
          <div className="construction" style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>// clear space</div>
              <p className="body" style={{ margin: 0 }}>Reserve a margin equal to <b>1/4 of the mark's height</b> on every side. Nothing crops it, nothing crowds it.</p>
            </div>
            <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 14, padding: 32, display: 'grid', placeItems: 'center', flex: 1 }}>
              <div style={{ position: 'relative', padding: 30 }}>
                <div style={{ position: 'absolute', inset: 0, border: '1px dashed rgba(54,69,211,0.4)', borderRadius: 8 }}/>
                <Mark size={120}/>
              </div>
            </div>
          </div>

          <div className="construction" style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>// minimum size</div>
              <p className="body" style={{ margin: 0 }}>Don't render the icon below <b>24 px</b> on screen or <b>8 mm</b> in print. Below that, the cutouts lose definition.</p>
            </div>
            <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 14, padding: 32, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-around', flex: 1 }}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                <Mark size={24}/>
                <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>24 px min</span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                <Mark size={48}/>
                <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>48 px</span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                <Mark size={96}/>
                <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>96 px</span>
              </div>
            </div>
          </div>
        </div>

        {/* The mark on different backgrounds */}
        <div className="section-head" style={{ marginTop: 96, marginBottom: 24 }}>
          <div className="id"><b>02.1</b> &nbsp;/&nbsp; Color usage</div>
          <div>
            <h2 className="h2">Where it lives.</h2>
            <p className="lede" style={{ marginTop: 12 }}>The mark adapts. Dark on light, light on dark, and a blue-on-blue treatment for the moment you want to whisper rather than shout.</p>
          </div>
        </div>

        <div className="grid-4">
          <div className="logo-stage" style={{ aspectRatio: '1/1' }}>
            <div className="corner-tag">on paper</div>
            <Mark size={120} color="#000945"/>
            <div className="corner-tag right">A</div>
          </div>
          <div className="logo-stage dark" style={{ aspectRatio: '1/1' }}>
            <div className="corner-tag">on ink</div>
            <Mark size={120} color="#fafaf7"/>
            <div className="corner-tag right">B</div>
          </div>
          <div className="logo-stage" style={{ aspectRatio: '1/1', background: '#3645d3' }}>
            <div className="corner-tag" style={{ color: 'rgba(250,250,247,0.6)' }}>on signal</div>
            <Mark size={120} color="#fafaf7"/>
            <div className="corner-tag right" style={{ color: 'rgba(250,250,247,0.6)' }}>C</div>
          </div>
          <div className="logo-stage" style={{ aspectRatio: '1/1', background: '#d8d8d8' }}>
            <div className="corner-tag">on stone</div>
            <Mark size={120} color="#000945"/>
            <div className="corner-tag right">D</div>
          </div>
        </div>

        {/* Lockup variations */}
        <div className="section-head" style={{ marginTop: 96, marginBottom: 24 }}>
          <div className="id"><b>02.2</b> &nbsp;/&nbsp; Lockups</div>
          <div>
            <h2 className="h2">Full · icon · wordmark.</h2>
            <p className="lede" style={{ marginTop: 12 }}>Three ways to sign. Use the full lockup whenever there's room. The icon alone is for tight spaces — favicons, app icons, avatars. The wordmark alone is for headers where the icon would feel redundant.</p>
          </div>
        </div>

        <div className="lockup-row">
          <div className="lockup-cell">
            <Lockup height={36} color="#000945"/>
          </div>
          <div className="lockup-cell dark">
            <Lockup height={36} color="#fafaf7"/>
          </div>
          <div className="lockup-cell blue">
            <Lockup height={36} color="#fafaf7"/>
          </div>
        </div>

        <div className="lockup-row" style={{ marginTop: 16 }}>
          <div className="lockup-cell">
            <Mark size={56} color="#000945"/>
          </div>
          <div className="lockup-cell dark">
            <Mark size={56} color="#fafaf7"/>
          </div>
          <div className="lockup-cell">
            <Wordmark height={32} color="#000945"/>
          </div>
          <div className="lockup-cell dark">
            <Wordmark height={32} color="#fafaf7"/>
          </div>
        </div>

        {/* 02.3 On Glass — new for v3.0 */}
        <div className="section-head" style={{ marginTop: 96, marginBottom: 24 }}>
          <div className="id"><b>02.3</b> &nbsp;/&nbsp; On Glass &nbsp;<span style={{ background: 'var(--blue)', color: 'var(--paper)', padding: '2px 8px', borderRadius: 999, fontSize: 9, marginLeft: 6, letterSpacing: '0.1em' }}>NEW · V3</span></div>
          <div>
            <h2 className="h2">The mark, on glass.</h2>
            <p className="lede" style={{ marginTop: 12 }}>How the brand expresses itself in modern, glass-forward UI surfaces. The mark stays sharp; the surface behind it does the work. See the Digital UI Guideline for full rules on backdrop blur and translucency.</p>
          </div>
        </div>

        <div className="grid-3">
          {/* App tile */}
          <div className="glass-showcase glass-bg--cobalt">
            <div className="g-faux-grid">
              {Array.from({ length: 12 }).map((_, i) => <div key={i}/>)}
            </div>
            <div className="g-card">
              <Mark size={48} color="#000945"/>
              <div>
                <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: '-0.02em', color: '#000945' }}>boolland</div>
                <div className="mono" style={{ fontSize: 10, color: 'rgba(0,9,69,0.65)', letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 2 }}>3 projects · live</div>
              </div>
              <div className="g-card-foot"><span className="g-dot g-dot--live"/> sync ok</div>
            </div>
            <div className="g-tag">app tile · home screen widget</div>
          </div>

          {/* Notification toast */}
          <div className="glass-showcase glass-bg--mesh">
            <div className="g-toast">
              <div className="g-toast-mark">
                <Mark size={28} color="#fafaf7"/>
              </div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 600, color: '#fafaf7' }}>Deployment complete</div>
                <div className="mono" style={{ fontSize: 10, color: 'rgba(250,250,247,0.7)', marginTop: 2, letterSpacing: '0.06em' }}>boolland.com · 240ms</div>
              </div>
              <div className="g-pulse"/>
            </div>
            <div className="g-tag light">notification · dark glass</div>
          </div>

          {/* Floating status dock */}
          <div className="glass-showcase glass-bg--ocean">
            <div className="g-dock">
              <div className="g-dock-item active">
                <Mark size={20} color="#fafaf7"/>
              </div>
              <div className="g-dock-item"><span className="g-icon-dot"/></div>
              <div className="g-dock-item"><span className="g-icon-bar"/></div>
              <div className="g-dock-item"><span className="g-icon-square"/></div>
              <div className="g-dock-divider"/>
              <div className="g-dock-item g-dock-cta">Start</div>
            </div>
            <div className="g-tag light">floating dock · island nav</div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.LogoSection = LogoSection;