// Decorative imagery — abstract editorial visuals as placeholders.
// Each is a self-contained SVG. Pink palette only. Pull-quotes & shapes that feel intentional.

window.GalleryStrip = function GalleryStrip() {
  return (
    <div className="gallery-strip">
      <div className="tile tall">
        <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice">
          <defs>
            <linearGradient id="gs1" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor="#1a1c20"/>
              <stop offset="100%" stopColor="#0d0e10"/>
            </linearGradient>
            <radialGradient id="gs1r" cx="0.3" cy="0.3" r="0.7">
              <stop offset="0%" stopColor="rgba(245,168,200,0.45)"/>
              <stop offset="100%" stopColor="rgba(236,94,148,0)"/>
            </radialGradient>
          </defs>
          <rect width="400" height="500" fill="url(#gs1)"/>
          <rect width="400" height="500" fill="url(#gs1r)"/>
          {/* abstract typewriter / keyboard suggestion */}
          <rect x="60" y="290" width="280" height="160" rx="8" fill="#1f2126" stroke="#2a2c33"/>
          {Array.from({length: 28}).map((_, i) => {
            const r = Math.floor(i / 7), c = i % 7;
            return <rect key={i} x={76 + c*38} y={306 + r*36} width="30" height="28" rx="4" fill="#15171b" stroke="#2a2c33"/>;
          })}
          <rect x="76" y="414" width="220" height="22" rx="4" fill="#15171b" stroke="#2a2c33"/>
          <text x="200" y="430" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#5a584f">SPACE</text>
          {/* light beam */}
          <path d="M 0 0 L 240 0 L 80 500 L 0 500 Z" fill="rgba(245,168,200,0.06)"/>
        </svg>
        <span className="meta">studio · keys</span>
        <span className="corner">01 / 04</span>
      </div>

      <div className="tile">
        <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice">
          <defs>
            <linearGradient id="gs2" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor="#15171b"/>
              <stop offset="100%" stopColor="#0d0e10"/>
            </linearGradient>
          </defs>
          <rect width="400" height="500" fill="url(#gs2)"/>
          {/* pull quote on a "page" */}
          <rect x="40" y="60" width="320" height="380" rx="6" fill="#f4efe4"/>
          <text x="64" y="120" fontFamily="Newsreader, serif" fontSize="34" fontStyle="italic" fill="#161616">"</text>
          <text x="64" y="170" fontFamily="Newsreader, serif" fontSize="22" fontStyle="italic" fill="#161616">Build small,</text>
          <text x="64" y="200" fontFamily="Newsreader, serif" fontSize="22" fontStyle="italic" fill="#161616">ship often,</text>
          <text x="64" y="230" fontFamily="Newsreader, serif" fontSize="22" fontStyle="italic" fill="#ec5e94">name things</text>
          <text x="64" y="260" fontFamily="Newsreader, serif" fontSize="22" fontStyle="italic" fill="#ec5e94">well.</text>
          <line x1="64" y1="300" x2="160" y2="300" stroke="#807a6e" strokeWidth="1"/>
          <text x="64" y="324" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#807a6e">— PERSONAL MOTTO</text>
          {/* page corner shadow */}
          <path d="M 360 60 L 360 100 L 320 60 Z" fill="#e0d8c5"/>
          <line x1="64" y1="380" x2="336" y2="380" stroke="#d8d3c5" strokeWidth="0.5"/>
          <line x1="64" y1="395" x2="280" y2="395" stroke="#d8d3c5" strokeWidth="0.5"/>
          <line x1="64" y1="410" x2="310" y2="410" stroke="#d8d3c5" strokeWidth="0.5"/>
        </svg>
        <span className="meta">manifesto</span>
        <span className="corner">02 / 04</span>
      </div>

      <div className="tile">
        <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice">
          <defs>
            <linearGradient id="gs3" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#1f1419"/>
              <stop offset="100%" stopColor="#0d0e10"/>
            </linearGradient>
          </defs>
          <rect width="400" height="500" fill="url(#gs3)"/>
          {/* terminal mock */}
          <rect x="36" y="60" width="328" height="380" rx="10" fill="#0a0a0c" stroke="#2a2c33"/>
          <rect x="36" y="60" width="328" height="26" rx="10" fill="#15171b"/>
          <circle cx="54" cy="73" r="4" fill="#ed6a5e"/>
          <circle cx="68" cy="73" r="4" fill="#f5bf4f"/>
          <circle cx="82" cy="73" r="4" fill="#62c554"/>
          {[
            ['$ git commit -m', '#ec5e94', 56, 116],
            ['  "ship the small thing"', '#c8c5be', 56, 138],
            ['', '', 56, 156],
            ['→ 4 files changed', '#8a8780', 56, 176],
            ['→ +127 −62', '#f5a8c8', 56, 196],
            ['', '', 56, 214],
            ['$ git push origin main', '#ec5e94', 56, 234],
            ['  ✓ pushed', '#62c554', 56, 256],
            ['', '', 56, 274],
            ['$ _', '#ec5e94', 56, 296],
          ].map(([t, c, x, y], i) => (
            <text key={i} x={x} y={y} fontFamily="JetBrains Mono, monospace" fontSize="11" fill={c}>{t}</text>
          ))}
          {/* blinking cursor block */}
          <rect x="74" y="287" width="8" height="13" fill="#ec5e94"/>
        </svg>
        <span className="meta">commit · log</span>
        <span className="corner">03 / 04</span>
      </div>

      <div className="tile wide">
        <svg viewBox="0 0 500 400" preserveAspectRatio="xMidYMid slice">
          <defs>
            <linearGradient id="gs4" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor="#2a1820"/>
              <stop offset="100%" stopColor="#0d0e10"/>
            </linearGradient>
          </defs>
          <rect width="500" height="400" fill="url(#gs4)"/>
          {/* sticky-note grid */}
          {[
            { x: 50, y: 60, c: '#f5a8c8', r: -3, t: 'queue' },
            { x: 200, y: 50, c: '#fce4cc', r: 2, t: 'eval' },
            { x: 350, y: 70, c: '#ec5e94', r: -1, t: 'memory' },
            { x: 80, y: 200, c: '#fbe7d8', r: 4, t: 'agents' },
            { x: 240, y: 210, c: '#f5a8c8', r: -2, t: 'specs' },
            { x: 380, y: 220, c: '#fce4cc', r: 1, t: 'queue' },
          ].map((n, i) => (
            <g key={i} transform={`translate(${n.x} ${n.y}) rotate(${n.r})`}>
              <rect width="100" height="100" fill={n.c}/>
              <rect width="100" height="20" fill="rgba(0,0,0,0.06)"/>
              <text x="50" y="58" textAnchor="middle" fontFamily="Newsreader, serif" fontStyle="italic" fontSize="16" fill="#1a1614">{n.t}</text>
              <line x1="20" y1="72" x2="80" y2="72" stroke="rgba(0,0,0,0.15)" strokeWidth="0.5"/>
              <line x1="20" y1="82" x2="70" y2="82" stroke="rgba(0,0,0,0.15)" strokeWidth="0.5"/>
            </g>
          ))}
          {/* desk shadow */}
          <ellipse cx="250" cy="380" rx="220" ry="14" fill="rgba(0,0,0,0.4)"/>
        </svg>
        <span className="meta">backlog · stickies</span>
        <span className="corner">04 / 04</span>
      </div>
    </div>
  );
};

window.ProcessBand = function ProcessBand() {
  return (
    <div className="process-band">
      <div className="lead">
        <div>
          <span className="eyebrow">Process · 03 captures</span>
          <h3>Sketch, build, <span className="ital">name</span> well.</h3>
          <p style={{marginTop: 14}}>How a project goes from a real operations problem to a tool people actually use.</p>
        </div>
        <div style={{fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.14em'}}>
          ↘ scroll for case studies
        </div>
      </div>

      <div className="tile">
        <svg viewBox="0 0 300 400" preserveAspectRatio="xMidYMid slice">
          <rect width="300" height="400" fill="#15171b"/>
          {/* notebook page */}
          <rect x="30" y="30" width="240" height="340" rx="3" fill="#f4efe4"/>
          {/* ruled lines */}
          {Array.from({length: 14}).map((_, i) => (
            <line key={i} x1="50" y1={70 + i*22} x2="250" y2={70 + i*22} stroke="#d8d3c5" strokeWidth="0.5"/>
          ))}
          {/* hand-drawn flowchart */}
          <rect x="68" y="80" width="80" height="32" rx="3" fill="none" stroke="#1a1614" strokeWidth="1.5"/>
          <text x="108" y="100" textAnchor="middle" fontFamily="Caveat, cursive" fontSize="14" fill="#1a1614">user</text>
          <path d="M 148 96 L 180 96" stroke="#1a1614" strokeWidth="1.5" markerEnd="url(#ah)"/>
          <rect x="180" y="80" width="80" height="32" rx="3" fill="#f5a8c8" stroke="#1a1614" strokeWidth="1.5"/>
          <text x="220" y="100" textAnchor="middle" fontFamily="Caveat, cursive" fontSize="14" fill="#1a1614">queue</text>
          <path d="M 220 112 L 220 150" stroke="#1a1614" strokeWidth="1.5" markerEnd="url(#ah)"/>
          <rect x="180" y="150" width="80" height="32" rx="3" fill="none" stroke="#1a1614" strokeWidth="1.5"/>
          <text x="220" y="170" textAnchor="middle" fontFamily="Caveat, cursive" fontSize="14" fill="#1a1614">worker</text>
          <path d="M 180 166 L 110 196" stroke="#1a1614" strokeWidth="1.5" markerEnd="url(#ah)"/>
          <rect x="68" y="196" width="80" height="32" rx="3" fill="#ec5e94" stroke="#1a1614" strokeWidth="1.5"/>
          <text x="108" y="216" textAnchor="middle" fontFamily="Caveat, cursive" fontSize="14" fill="#fff">store</text>

          <text x="68" y="270" fontFamily="Caveat, cursive" fontSize="18" fill="#1a1614" fontStyle="italic">"keep it boring"</text>
          <text x="68" y="296" fontFamily="Caveat, cursive" fontSize="16" fill="#807a6e">— sprint 14, fri</text>

          <defs>
            <marker id="ah" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
              <path d="M 0 0 L 10 5 L 0 10 z" fill="#1a1614"/>
            </marker>
          </defs>
        </svg>
        <div className="cap"><span className="num">/ 01</span><span>SKETCH</span></div>
      </div>

      <div className="tile">
        <svg viewBox="0 0 300 400" preserveAspectRatio="xMidYMid slice">
          <rect width="300" height="400" fill="#0d0e10"/>
          {/* IDE-style screenshot */}
          <rect x="20" y="20" width="260" height="360" rx="6" fill="#0a0a0c" stroke="#2a2c33"/>
          <rect x="20" y="20" width="260" height="22" rx="6" fill="#15171b"/>
          <circle cx="32" cy="31" r="3" fill="#ed6a5e"/>
          <circle cx="44" cy="31" r="3" fill="#f5bf4f"/>
          <circle cx="56" cy="31" r="3" fill="#62c554"/>
          {/* sidebar */}
          <rect x="20" y="42" width="60" height="338" fill="#0f1115"/>
          {['src/','  app/','  ▸ agents/','  ▸ memory/','  utils.ts','tests/','README.md'].map((f, i) => (
            <text key={i} x="28" y={62 + i*16} fontFamily="JetBrains Mono, monospace" fontSize="9" fill={i===2 ? '#ec5e94' : '#5a584f'}>{f}</text>
          ))}
          {/* code area */}
          {[
            ['function', '#a5c4ff', 92, 64],
            [' run(', '#f4f1ea', 158, 64],
            ['agents', '#f5a8c8', 188, 64],
            [') {', '#f4f1ea', 220, 64],
            ['  // for each agent,', '#5a584f', 92, 80],
            ['  // step until done', '#5a584f', 92, 96],
            ['  for (', '#a5c4ff', 92, 112],
            ['const ', '#a5c4ff', 124, 112],
            ['a', '#f4f1ea', 156, 112],
            [' of agents) {', '#f4f1ea', 162, 112],
            ['    await ', '#a5c4ff', 92, 128],
            ['a.step()', '#ec5e94', 142, 128],
            [';', '#f4f1ea', 188, 128],
            ['  }', '#f4f1ea', 92, 144],
            ['}', '#f4f1ea', 92, 160],
          ].map((r, i) => (
            <text key={i} x={r[2]} y={r[3]} fontFamily="JetBrains Mono, monospace" fontSize="9" fill={r[1]}>{r[0]}</text>
          ))}
          {/* terminal panel */}
          <rect x="80" y="240" width="200" height="140" fill="#0a0a0c" stroke="#1f2126"/>
          <text x="92" y="258" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#5a584f">→ npm test</text>
          <text x="92" y="272" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#62c554">  ✓ 14 passing</text>
          <text x="92" y="286" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#62c554">  ✓ build OK</text>
          <text x="92" y="304" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#ec5e94">→ deploy.sh</text>
          <text x="92" y="318" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#c8c5be">  uploading...</text>
          <rect x="92" y="328" width="120" height="4" rx="2" fill="#1f2126"/>
          <rect x="92" y="328" width="86" height="4" rx="2" fill="#ec5e94"/>
          <text x="92" y="352" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#62c554">  ✓ shipped</text>
        </svg>
        <div className="cap"><span className="num">/ 02</span><span>BUILD</span></div>
      </div>

      <div className="tile">
        <svg viewBox="0 0 300 400" preserveAspectRatio="xMidYMid slice">
          <rect width="300" height="400" fill="#15171b"/>
          {/* polaroid-ish desk shot */}
          <rect x="30" y="30" width="240" height="340" fill="#1a1c20" stroke="#2a2c33"/>
          {/* desk surface */}
          <rect x="30" y="200" width="240" height="170" fill="#3a2a25"/>
          <rect x="30" y="200" width="240" height="3" fill="#5a3a32"/>
          {/* monitor */}
          <rect x="80" y="60" width="140" height="100" rx="4" fill="#0a0a0c" stroke="#2a2c33"/>
          <rect x="86" y="66" width="128" height="80" fill="#0d0e10"/>
          <rect x="92" y="74" width="40" height="3" fill="#ec5e94"/>
          {Array.from({length: 8}).map((_, i) => (
            <rect key={i} x="92" y={84 + i*7} width={Math.random()*60 + 30} height="2" fill="#3a3d45"/>
          ))}
          <rect x="140" y="160" width="20" height="14" fill="#1a1c20"/>
          <rect x="120" y="174" width="60" height="6" fill="#2a2c33"/>
          {/* coffee cup */}
          <ellipse cx="60" cy="240" rx="22" ry="8" fill="#1a1614"/>
          <path d="M 38 240 Q 38 280 60 286 Q 82 280 82 240 Z" fill="#5a3a32"/>
          <ellipse cx="60" cy="240" rx="20" ry="6" fill="#2a1814"/>
          {/* notebook */}
          <rect x="200" y="240" width="60" height="80" rx="2" fill="#f4efe4" transform="rotate(8 230 280)"/>
          <line x1="210" y1="262" x2="250" y2="252" stroke="#d8d3c5" strokeWidth="0.5"/>
          <line x1="212" y1="276" x2="252" y2="266" stroke="#d8d3c5" strokeWidth="0.5"/>
          <line x1="214" y1="290" x2="248" y2="280" stroke="#d8d3c5" strokeWidth="0.5"/>
          {/* light on top */}
          <ellipse cx="150" cy="50" rx="220" ry="14" fill="rgba(245,168,200,0.10)"/>
        </svg>
        <div className="cap"><span className="num">/ 03</span><span>SHIP</span></div>
      </div>
    </div>
  );
};

window.PolaroidCluster = function PolaroidCluster() {
  return (
    <div className="polaroid-cluster">
      <div className="pol">
        <div className="img-area">
          <svg viewBox="0 0 200 200">
            <rect width="200" height="200" fill="#1a1c20"/>
            <rect x="20" y="20" width="160" height="160" rx="4" fill="#0d0e10"/>
            <text x="100" y="95" textAnchor="middle" fontFamily="Space Grotesk" fontWeight="600" fontSize="44" fill="#ec5e94">EVA</text>
            <text x="100" y="120" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#5a584f">v0.4.0 — internal</text>
            <line x1="40" y1="140" x2="160" y2="140" stroke="#2a2c33"/>
            <text x="100" y="160" textAnchor="middle" fontFamily="Newsreader" fontStyle="italic" fontSize="14" fill="#c8c5be">"agents work."</text>
          </svg>
        </div>
        <div className="cap">first run, march '26</div>
      </div>
      <div className="pol">
        <div className="img-area">
          <svg viewBox="0 0 200 200">
            <defs>
              <linearGradient id="pc2" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stopColor="#2a1820"/>
                <stop offset="100%" stopColor="#0d0e10"/>
              </linearGradient>
            </defs>
            <rect width="200" height="200" fill="url(#pc2)"/>
            {/* dashboard cards */}
            <rect x="20" y="30" width="76" height="44" rx="4" fill="#15171b" stroke="#2a2c33"/>
            <text x="28" y="48" fontFamily="Space Grotesk" fontWeight="600" fontSize="18" fill="#ec5e94">94.2</text>
            <text x="28" y="62" fontFamily="JetBrains Mono" fontSize="7" fill="#5a584f">BLEU</text>
            <rect x="104" y="30" width="76" height="44" rx="4" fill="#15171b" stroke="#2a2c33"/>
            <polyline points="112,68 124,58 138,62 152,48 166,52 174,42" stroke="#f5a8c8" strokeWidth="1.5" fill="none"/>
            {/* big chart */}
            <rect x="20" y="84" width="160" height="96" rx="4" fill="#15171b" stroke="#2a2c33"/>
            {[30,55,42,68,52,78,60,85,72].map((h, i) => (
              <rect key={i} x={28 + i*18} y={172 - h} width="12" height={h} rx="1" fill={i % 2 ? '#3a3d45' : '#ec5e94'}/>
            ))}
          </svg>
        </div>
        <div className="cap">model dashboard — week 4</div>
      </div>
      <div className="pol">
        <div className="img-area">
          <svg viewBox="0 0 200 200">
            <rect width="200" height="200" fill="#15171b"/>
            {/* installer dialog */}
            <rect x="20" y="40" width="160" height="120" rx="4" fill="#1a1c20" stroke="#3a3d45"/>
            <rect x="20" y="40" width="160" height="22" rx="4" fill="#2a2c33"/>
            <text x="32" y="55" fontFamily="JetBrains Mono" fontSize="9" fill="#c8c5be">setup.exe</text>
            <text x="32" y="84" fontFamily="Newsreader" fontStyle="italic" fontSize="13" fill="#f4f1ea">Installing...</text>
            <rect x="32" y="100" width="136" height="6" rx="3" fill="#0d0e10"/>
            <rect x="32" y="100" width="98" height="6" rx="3" fill="#ec5e94"/>
            <text x="32" y="124" fontFamily="JetBrains Mono" fontSize="8" fill="#807a6e">copying tmt-runtime.dll</text>
            <text x="32" y="138" fontFamily="JetBrains Mono" fontSize="8" fill="#62c554">  ✓ signed</text>
            <rect x="120" y="148" width="44" height="20" rx="2" fill="#ec5e94"/>
            <text x="142" y="161" textAnchor="middle" fontFamily="Inter" fontSize="9" fontWeight="600" fill="#fff">Cancel</text>
          </svg>
        </div>
        <div className="cap">tmt — first signed build</div>
      </div>
    </div>
  );
};

window.SplitFeature = function SplitFeature() {
  return (
    <div className="split-feature">
      <div className="img">
        <svg viewBox="0 0 500 400" preserveAspectRatio="xMidYMid slice">
          <defs>
            <linearGradient id="sfbg" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor="#1a1c20"/>
              <stop offset="100%" stopColor="#0d0e10"/>
            </linearGradient>
            <radialGradient id="sfg" cx="0.7" cy="0.3" r="0.6">
              <stop offset="0%" stopColor="rgba(245,168,200,0.35)"/>
              <stop offset="100%" stopColor="rgba(236,94,148,0)"/>
            </radialGradient>
          </defs>
          <rect width="500" height="400" fill="url(#sfbg)"/>
          <rect width="500" height="400" fill="url(#sfg)"/>
          {/* layered windows */}
          <g transform="translate(60 80)">
            <rect width="240" height="160" rx="6" fill="#15171b" stroke="#2a2c33"/>
            <rect width="240" height="22" rx="6" fill="#22252b"/>
            <circle cx="14" cy="11" r="3" fill="#ed6a5e"/>
            <circle cx="26" cy="11" r="3" fill="#f5bf4f"/>
            <circle cx="38" cy="11" r="3" fill="#62c554"/>
            <text x="120" y="14" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="8" fill="#807a6e">eva.localhost</text>
            <rect x="14" y="36" width="80" height="110" fill="#0f1115"/>
            <rect x="22" y="48" width="60" height="6" rx="2" fill="#ec5e94"/>
            <rect x="22" y="62" width="48" height="4" rx="2" fill="#3a3d45"/>
            <rect x="22" y="74" width="55" height="4" rx="2" fill="#3a3d45"/>
            <rect x="106" y="44" width="118" height="14" rx="2" fill="#22252b"/>
            <rect x="106" y="64" width="118" height="56" rx="2" fill="#1a1c20" stroke="#2a2c33"/>
            <text x="116" y="80" fontFamily="JetBrains Mono" fontSize="7" fill="#c8c5be">→ agent.run("brief")</text>
            <text x="116" y="92" fontFamily="JetBrains Mono" fontSize="7" fill="#62c554">  thinking...</text>
            <text x="116" y="104" fontFamily="JetBrains Mono" fontSize="7" fill="#f5a8c8">  ↳ retrieved 14 docs</text>
          </g>
          <g transform="translate(220 180)">
            <rect width="240" height="160" rx="6" fill="#15171b" stroke="#2a2c33"/>
            <rect width="240" height="22" rx="6" fill="#22252b"/>
            <circle cx="14" cy="11" r="3" fill="#ed6a5e"/>
            <circle cx="26" cy="11" r="3" fill="#f5bf4f"/>
            <circle cx="38" cy="11" r="3" fill="#62c554"/>
            <text x="120" y="14" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="8" fill="#807a6e">tmt — queue</text>
            {Array.from({length: 6}).map((_, i) => (
              <g key={i} transform={`translate(0 ${36 + i*18})`}>
                <rect x="10" y="0" width="220" height="14" rx="2" fill={i === 1 ? '#1f1822' : '#1a1c20'}/>
                <rect x="14" y="3" width="8" height="8" rx="2" fill={i < 2 ? '#ec5e94' : '#3a3d45'}/>
                <rect x="28" y="5" width="60" height="4" rx="1" fill="#3a3d45"/>
                <rect x="200" y="5" width="22" height="4" rx="1" fill={i < 2 ? '#ec5e94' : '#3a3d45'}/>
              </g>
            ))}
          </g>
        </svg>
      </div>
      <div className="text">
        <span className="eyebrow">Selected · in flight</span>
        <h3>Tools that look like <span className="ital">tools</span>, not products.</h3>
        <p>Internal software gets to be useful first and pretty second. I lean into the <em>workshop aesthetic</em> — visible state, monospace where it matters, no precious chrome.</p>
        <p>What that buys: faster iteration, fewer translation layers between the user and the data, and tools that survive being used by real people in production.</p>
        <a href="#work" className="btn ghost" style={{marginTop: 8}}>See it in the work →</a>
      </div>
    </div>
  );
};

// SVG visuals for the service tiles
window.ServiceVisual = function ServiceVisual({ kind }) {
  if (kind === 'tooling') {
    return (
      <svg viewBox="0 0 400 140" preserveAspectRatio="xMidYMid slice">
        <rect width="400" height="140" fill="#15171b"/>
        <rect x="20" y="20" width="360" height="100" rx="6" fill="#0a0a0c" stroke="#2a2c33"/>
        <rect x="20" y="20" width="360" height="20" rx="6" fill="#22252b"/>
        <circle cx="32" cy="30" r="3" fill="#ed6a5e"/>
        <circle cx="44" cy="30" r="3" fill="#f5bf4f"/>
        <circle cx="56" cy="30" r="3" fill="#62c554"/>
        <text x="200" y="33" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="8" fill="#5a584f">~/tools/installer.py</text>
        <rect x="36" y="56" width="80" height="48" rx="3" fill="#1f2126"/>
        <text x="44" y="72" fontFamily="JetBrains Mono" fontSize="7" fill="#ec5e94">→ python</text>
        <text x="44" y="84" fontFamily="JetBrains Mono" fontSize="7" fill="#c8c5be">build.py</text>
        <text x="44" y="96" fontFamily="JetBrains Mono" fontSize="7" fill="#62c554">  ✓ ok</text>
        <rect x="128" y="56" width="80" height="48" rx="3" fill="#1f2126"/>
        <text x="136" y="72" fontFamily="JetBrains Mono" fontSize="7" fill="#f5a8c8">→ cython</text>
        <text x="136" y="84" fontFamily="JetBrains Mono" fontSize="7" fill="#c8c5be">compile</text>
        <text x="136" y="96" fontFamily="JetBrains Mono" fontSize="7" fill="#62c554">  ✓ .so</text>
        <rect x="220" y="56" width="80" height="48" rx="3" fill="#1f2126"/>
        <text x="228" y="72" fontFamily="JetBrains Mono" fontSize="7" fill="#ec5e94">→ sign</text>
        <text x="228" y="84" fontFamily="JetBrains Mono" fontSize="7" fill="#c8c5be">setup.exe</text>
        <text x="228" y="96" fontFamily="JetBrains Mono" fontSize="7" fill="#62c554">  ✓ trust</text>
        <rect x="312" y="56" width="56" height="48" rx="3" fill="#ec5e94"/>
        <text x="340" y="84" textAnchor="middle" fontFamily="Space Grotesk" fontSize="11" fontWeight="600" fill="#fff">SHIP</text>
      </svg>
    );
  }
  if (kind === 'ai') {
    return (
      <svg viewBox="0 0 400 140" preserveAspectRatio="xMidYMid slice">
        <rect width="400" height="140" fill="#15171b"/>
        {[
          { cx: 80, cy: 70, r: 18 },
          { cx: 200, cy: 40, r: 14 },
          { cx: 320, cy: 70, r: 18 },
          { cx: 200, cy: 100, r: 14 },
        ].map((n, i) => (
          <g key={i}>
            <circle cx={n.cx} cy={n.cy} r={n.r + 6} fill="rgba(236,94,148,0.10)"/>
            <circle cx={n.cx} cy={n.cy} r={n.r} fill="none" stroke="#ec5e94" strokeWidth="1.5"/>
            <circle cx={n.cx} cy={n.cy} r="4" fill="#ec5e94"/>
          </g>
        ))}
        <path d="M 80 70 Q 140 30 200 40" stroke="#ec5e94" strokeWidth="1" fill="none" strokeDasharray="3 3" opacity="0.6"/>
        <path d="M 200 40 Q 260 30 320 70" stroke="#ec5e94" strokeWidth="1" fill="none" strokeDasharray="3 3" opacity="0.6"/>
        <path d="M 320 70 Q 260 110 200 100" stroke="#ec5e94" strokeWidth="1" fill="none" strokeDasharray="3 3" opacity="0.6"/>
        <path d="M 200 100 Q 140 110 80 70" stroke="#ec5e94" strokeWidth="1" fill="none" strokeDasharray="3 3" opacity="0.6"/>
        <path d="M 80 70 Q 200 70 320 70" stroke="#f5a8c8" strokeWidth="0.8" fill="none" opacity="0.4"/>
        <text x="80" y="118" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="8" fill="#5a584f">planner</text>
        <text x="200" y="22" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="8" fill="#5a584f">retrieval</text>
        <text x="320" y="118" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="8" fill="#5a584f">writer</text>
        <text x="200" y="124" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="8" fill="#5a584f">memory</text>
      </svg>
    );
  }
  // translation
  return (
    <svg viewBox="0 0 400 140" preserveAspectRatio="xMidYMid slice">
      <rect width="400" height="140" fill="#15171b"/>
      {/* left column — source */}
      <rect x="20" y="20" width="160" height="100" rx="6" fill="#1a1c20" stroke="#2a2c33"/>
      <text x="32" y="40" fontFamily="JetBrains Mono" fontSize="8" fill="#5a584f">source · en</text>
      {[60, 76, 92].map((y, i) => (
        <rect key={i} x="32" y={y} width={120 - i*18} height="6" rx="1" fill="#3a3d45"/>
      ))}
      {/* arrow */}
      <path d="M 188 70 L 212 70" stroke="#ec5e94" strokeWidth="1.5"/>
      <path d="M 206 65 L 212 70 L 206 75" stroke="#ec5e94" strokeWidth="1.5" fill="none"/>
      {/* right column — target */}
      <rect x="220" y="20" width="160" height="100" rx="6" fill="#1f1822" stroke="#ec5e94"/>
      <text x="232" y="40" fontFamily="JetBrains Mono" fontSize="8" fill="#ec5e94">target · ja</text>
      {[60, 76, 92].map((y, i) => (
        <rect key={i} x="232" y={y} width={120 - i*18} height="6" rx="1" fill={i === 1 ? '#ec5e94' : '#f5a8c8'} opacity={i === 1 ? 1 : 0.7}/>
      ))}
      {/* check icon */}
      <circle cx="362" cy="36" r="8" fill="#62c554"/>
      <path d="M 358 36 L 361 39 L 366 33" stroke="#fff" strokeWidth="1.5" fill="none"/>
    </svg>
  );
};
