function ApplicationsSection() {
  return (
    <section id="applications" data-screen-label="06 Applications">
      <div className="wrap">
        <div className="section-head">
          <div className="id"><b>06</b> &nbsp;/&nbsp; Applications</div>
          <div>
            <h2 className="h1">In the wild.</h2>
            <p className="lede" style={{ marginTop: 16 }}>How the system shows up across web, print, social, and merch. These are starting points, not templates — the rules carry, the layouts flex.</p>
          </div>
        </div>

        <div className="app-grid">
          {/* Website hero */}
          <div className="app-frame" style={{ gridColumn: 'span 2' }}>
            <div className="label">// 06.1 — website hero · boolland.com</div>
            <div className="browser">
              <div className="chrome">
                <div className="dot"/>
                <div className="dot"/>
                <div className="dot"/>
                <div className="url">boolland.com</div>
              </div>
              <div className="b-body">
                <div className="island-nav">
                  {/* Brand island */}
                  <div className="island brand">
                    <Lockup height={20} color="#fafaf7"/>
                  </div>
                  {/* Links island */}
                  <div className="island links">
                    <span>work</span>
                    <span>services</span>
                    <span>about</span>
                    <span>journal</span>
                  </div>
                  {/* Action island */}
                  <button className="island-cta">
                    Start
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: 4 }}><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                  </button>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 11, opacity: 0.5, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 20 }}>software house · est. 2020 · KL</div>
                  <h2>Where logic becomes a <i>place.</i></h2>
                  <div style={{ marginTop: 28, display: 'flex', gap: 12, alignItems: 'center' }}>
                    <div style={{ background: '#5b6cff', color: '#000945', padding: '12px 22px', borderRadius: 999, fontSize: 13, fontFamily: 'Roboto Mono', fontWeight: 500, letterSpacing: '0.04em' }}>start a project →</div>
                    <div style={{ color: 'rgba(250,250,247,0.7)', fontSize: 13, fontFamily: 'Roboto Mono' }}>or see our work</div>
                  </div>
                </div>
                <div className="meta">
                  <span>// ecommerce · websites · mobile apps · bespoke systems</span>
                  <span>scroll ↓</span>
                </div>
              </div>
            </div>
          </div>

          {/* Business cards */}
          <div className="app-frame">
            <div className="label">// 06.2 — business card · front</div>
            <div style={{ padding: 56, background: 'var(--paper-2)', display: 'grid', placeItems: 'center', minHeight: 320 }}>
              <div className="card-mock front" style={{ width: '85%', maxWidth: 360, boxShadow: '0 30px 60px -20px rgba(0,9,69,0.4)' }}>
                <div className="top">
                  <Mark size={36} color="#fafaf7"/>
                  <div className="mono" style={{ fontSize: 10, opacity: 0.5, letterSpacing: '0.14em', textTransform: 'uppercase' }}>v3.0</div>
                </div>
                <div>
                  <div className="name">Woo Weng Han</div>
                  <div className="role">Founder · Software</div>
                </div>
              </div>
            </div>
          </div>

          <div className="app-frame">
            <div className="label">// 06.3 — business card · back</div>
            <div style={{ padding: 56, background: 'var(--paper-2)', display: 'grid', placeItems: 'center', minHeight: 320 }}>
              <div className="card-mock front" style={{ width: '85%', maxWidth: 360, boxShadow: '0 30px 60px -20px rgba(0,9,69,0.4)' }}>
                <div>
                  <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.05 }}>We code<br/>your <span style={{ color: '#5b6cff' }}>vision.</span></div>
                </div>
                <div className="contact">
                  engage@boolland.com<br/>
                  boolland.com
                </div>
              </div>
            </div>
          </div>

          {/* Social posts */}
          <div className="app-frame">
            <div className="label">// 06.4 — social · square</div>
            <div className="social">
              <div className="head">
                <Lockup height={20} color="#fafaf7"/>
                <span>// 01 / 03</span>
              </div>
              <h3>Built a <span style={{ color: '#5b6cff' }}>headless Shopify</span> for a brand doing 8-figures. <br/>Page load: <span className="mono" style={{ fontSize: '0.7em', background: 'rgba(250,250,247,0.1)', padding: '2px 8px', borderRadius: 4 }}>1.1s → 240ms</span></h3>
              <div className="foot">case study #07 · ecommerce · 2026</div>
            </div>
          </div>

          <div className="app-frame">
            <div className="label">// 06.5 — social · principle</div>
            <div className="social" style={{ background: 'var(--paper)', color: 'var(--ink)' }}>
              <div className="head" style={{ opacity: 1 }}>
                <Lockup height={20} color="#000945"/>
                <span style={{ color: 'var(--muted)' }}>// principle · 02</span>
              </div>
              <h3>Crafted, <br/>not assembled.</h3>
              <div className="foot" style={{ color: 'var(--muted)' }}>boolland.com</div>
            </div>
          </div>

          {/* App tile / home screen widget — glass treatment */}
          <div className="app-frame" style={{ gridColumn: 'span 2' }}>
            <div className="label">// 06.6 — app tile · home screen widget</div>
            <div className="bg-wallpaper" style={{ display: 'grid', placeItems: 'center', minHeight: 380, padding: 56 }}>
              {/* Faux home screen grid behind */}
              <div style={{ position: 'absolute', top: '15%', left: '10%', right: '10%', bottom: '15%', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16, opacity: 0.18, pointerEvents: 'none' }}>
                {Array.from({ length: 18 }).map((_, i) => (
                  <div key={i} style={{ borderRadius: 12, background: 'rgba(255,255,255,0.6)', aspectRatio: '1/1' }}/>
                ))}
              </div>
              <div className="glass-tile">
                <Mark size={56} color="#000945"/>
                <div>
                  <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: '-0.02em', color: '#000945' }}>boolland</div>
                  <div className="mono" style={{ fontSize: 11, color: 'rgba(0,9,69,0.65)', letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 2 }}>3 projects active</div>
                </div>
                <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
                  <span className="g-badge live">● live</span>
                  <span className="g-badge qa">● in QA</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.ApplicationsSection = ApplicationsSection;