// Forge Website — site.jsx
// React 18 (CDN) · Babel standalone · Content from window.FORGE (content.js)
//
// Structure:
//   Atoms → Nav → MeterStrip → Hero → Rarity → SelectedWork
//   → Featured → Approach → Capability → About → Brief → Footer

const { useState } = React;
const C = window.FORGE;

// ── Design token shorthands ───────────────────────────────────────────
const ML  = { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase' };
const IT  = { color: 'var(--forge-iron-soft)' };
const IB  = { color: 'var(--forge-iron-bright)' };
const EM  = { color: 'var(--forge-ember)' };

// ── Atoms ─────────────────────────────────────────────────────────────

const Pip = ({ size = 6 }) => (
  <span aria-hidden style={{
    display: 'inline-block', width: size, height: size,
    background: 'var(--forge-ember)', verticalAlign: 'middle',
    flexShrink: 0,
  }}/>
);

const Stamp = ({ code, active = false }) => (
  <span style={{
    ...ML, fontWeight: 500, fontSize: 13,
    color: active ? 'var(--forge-ember)' : 'var(--forge-iron-soft)',
    border: `1px solid ${active ? 'var(--forge-ember)' : 'var(--forge-rule-mid)'}`,
    padding: '7px 11px', display: 'inline-block', whiteSpace: 'nowrap',
  }}>{code}</span>
);

const Eyebrow = ({ children, style = {} }) => (
  <div style={{ ...ML, ...EM, display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14, ...style }}>
    <Pip size={6}/>{children}
  </div>
);

// XLBS compass mark — four wedges + ember center dot
const ForgeMark = ({ size = 26 }) => (
  <svg width={size} height={size} viewBox="0 0 200 200" aria-hidden="true"
       style={{ display: 'block', flexShrink: 0 }}>
    <path d="M 10 10 L 90 90 L 95 100 L 90 110 L 10 10 Z"   fill="#d8dde3" opacity="0.92"/>
    <path d="M 190 10 L 110 90 L 105 100 L 110 110 L 190 10 Z" fill="#d8dde3" opacity="0.92"/>
    <path d="M 10 190 L 90 110 L 100 105 L 110 110 L 10 190 Z" fill="#d8dde3" opacity="0.45"/>
    <path d="M 190 190 L 110 110 L 100 105 L 90 110 L 190 190 Z" fill="#d8dde3" opacity="0.45"/>
    <g stroke="#d8dde3" strokeWidth="0.8" opacity="0.32" fill="none">
      <line x1="10"  y1="30"  x2="85"  y2="95"/>
      <line x1="190" y1="30"  x2="115" y2="95"/>
      <line x1="30"  y1="10"  x2="95"  y2="85"/>
      <line x1="170" y1="10"  x2="105" y2="85"/>
    </g>
    <circle cx="100" cy="100" r="6" fill="#e8623a"/>
  </svg>
);

// ── Navigation ────────────────────────────────────────────────────────

const NAV_LINKS = [
  { label: 'Work',      href: '#work'     },
  { label: 'Approach',  href: '#approach' },
  { label: 'Stack',     href: '#stack'    },
  { label: 'About',     href: '#about'    },
  { label: 'Brief',     href: '#brief'    },
];

const Nav = () => {
  const [open, setOpen] = useState(false);
  const linkStyle = { ...ML, ...IT, textDecoration: 'none' };

  return (
    <header style={{ position: 'relative' }}>
      <nav className="ws-nav" aria-label="Main navigation">
        <ForgeMark size={26}/>
        <span style={{ ...ML, ...IB }}>XLBS / FORGE</span>
        <span className="ws-nav-subtitle" style={{ ...ML, color: 'var(--forge-iron)' }}>· SPATIAL DATA PLATFORM ARCHITECT</span>

        {/* Desktop links */}
        <div className="ws-nav-links">
          {NAV_LINKS.map((l) => (
            <a key={l.href} href={l.href} style={linkStyle}>{l.label}</a>
          ))}
          <span style={{ ...ML, ...EM, display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 6, height: 6, background: 'var(--forge-ember)', display: 'inline-block' }}/>
            {C.status}
          </span>
        </div>

        {/* Mobile hamburger */}
        <button
          className="ws-hamburger"
          aria-label="Toggle navigation"
          aria-expanded={open}
          onClick={() => setOpen(!open)}
        >
          <span/><span/><span/>
        </button>
      </nav>

      {/* Mobile dropdown */}
      <div className={`ws-nav-mobile${open ? ' open' : ''}`}>
        {NAV_LINKS.map((l) => (
          <a key={l.href} href={l.href} style={linkStyle} onClick={() => setOpen(false)}>{l.label}</a>
        ))}
        <span style={{ ...ML, ...EM, display: 'flex', alignItems: 'center', gap: 8 }}>
          <Pip size={6}/>{C.status}
        </span>
      </div>
    </header>
  );
};

// ── Meter strip ───────────────────────────────────────────────────────

const MeterStrip = () => (
  <div className="ws-meter" aria-hidden="true">
    <div style={{ display: 'flex', alignItems: 'flex-end', marginRight: 24, flexShrink: 0 }}>
      {Array.from({ length: 28 }).map((_, i) => (
        <div key={i} style={{
          width: 1, marginRight: 8,
          height: i % 5 === 0 ? 14 : 7,
          background: i % 5 === 0 ? 'var(--forge-iron-soft)' : 'var(--forge-iron)',
        }}/>
      ))}
    </div>
    <span>SHEET {C.sheet}</span>
    <span style={{ margin: '0 14px', opacity: 0.4 }}>·</span>
    <span>{C.rev}</span>
    <span style={{ margin: '0 14px', opacity: 0.4 }}>·</span>
    <span>{C.location}</span>
    <span style={{ marginLeft: 'auto' }}>FORGED FOR PRODUCTION</span>
  </div>
);

// ── Hero ──────────────────────────────────────────────────────────────

const Hero = () => (
  <section className="ws-hero-section">
    {/* Grid backdrop — fades from centre */}
    <div aria-hidden style={{
      position: 'absolute', inset: 0, opacity: 0.5,
      backgroundImage: `
        linear-gradient(to right, var(--forge-rule-dark) 1px, transparent 1px),
        linear-gradient(to bottom, var(--forge-rule-dark) 1px, transparent 1px)`,
      backgroundSize: '48px 48px',
      maskImage: 'radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%)',
      WebkitMaskImage: 'radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%)',
    }}/>

    <div className="ws-col" style={{ position: 'relative' }}>
      {/* Identity row */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 40 }}>
        <span style={{ ...ML, ...EM, display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ display: 'inline-block', width: 8, height: 8, background: 'var(--forge-ember)' }}/>
          FORGE · A LAB OF XLBS
        </span>
        <span style={{ flex: 1, height: 1, background: 'var(--forge-rule-dark)' }}/>
        <span style={{ ...ML, ...IT }}>SPATIAL DATA PLATFORM · ARCH &amp; ENG</span>
      </div>

      {/* Wordmark */}
      <h1 className="ws-hero-wordmark">
        Forge<span style={{ color: 'var(--forge-ember)' }}>.</span>
      </h1>

      {/* Lead + sub */}
      <div className="ws-hero-cols" style={{ marginTop: 48 }}>
        <p style={{
          fontSize: 'clamp(20px, 2.5vw, 30px)', lineHeight: 1.3,
          color: 'var(--forge-iron-bright)',
          fontFamily: 'var(--font-serif)', fontStyle: 'italic',
          fontWeight: 400, margin: 0,
        }}>
          Spatial data platforms,<br/>
          designed and built for production.
        </p>
        <div style={{
          paddingLeft: 28, borderLeft: '1px solid var(--forge-rule-mid)',
          fontFamily: 'var(--font-serif)', fontSize: 17, lineHeight: 1.55,
          color: 'var(--forge-iron-soft)',
        }}>
          A senior architect's eye across the whole spine: data, services, clients.
        </div>
      </div>

      {/* CTAs — "See the work" is primary */}
      <div style={{
        marginTop: 56, display: 'flex', alignItems: 'center', gap: 14,
        paddingTop: 24, borderTop: '1px solid var(--forge-rule-dark)',
        flexWrap: 'wrap',
      }}>
        <a href="#work" className="forge-btn"
           style={{ background: 'var(--forge-ember)', color: 'var(--forge-anthracite)', textDecoration: 'none' }}>
          See the work
        </a>
        <a href="#brief" className="forge-btn forge-btn--ghost"
           style={{ color: 'var(--forge-iron-bright)', borderColor: 'var(--forge-rule-mid)', textDecoration: 'none' }}>
          Open a brief
        </a>
        <span style={{ marginLeft: 'auto', ...ML, ...IT }}>NEXT WINDOW · {C.nextWindow}</span>
      </div>
    </div>
  </section>
);

// ── Rarity — the three pillars ────────────────────────────────────────

const PILLARS = [
  {
    n: '01', kicker: 'DATA ENGINEERING',
    title: 'Modern depth.',
    body: 'dbt, Airflow, observability stacks, cloud infrastructure, distributed compute. The boring infrastructure that keeps a platform alive at 03:00.',
  },
  {
    n: '02', kicker: 'SPATIAL LITERACY',
    title: 'Deep, not borrowed.',
    body: 'Geometry, projections, topology, sensor data, domain knowledge. I know why your tile pyramid is bleeding cost and where your CRS chain breaks.',
  },
  {
    n: '03', kicker: 'FULL-STACK DELIVERY',
    title: 'Data → service → app.',
    body: 'Pipelines through APIs through web and field clients. One brain across the whole spine, so the seams hold.',
  },
];

const Rarity = () => (
  <section className="ws-s" style={{
    background: 'var(--forge-anthracite-2)',
    borderTop: '1px solid var(--forge-rule-dark)',
  }}>
    <div className="ws-col">
      <Eyebrow>THE COMBINATION</Eyebrow>
      <h2 style={{
        margin: '0 0 48px', fontFamily: 'var(--font-serif)', fontWeight: 400,
        fontSize: 'clamp(28px, 4vw, 44px)', lineHeight: 1.15, color: 'var(--forge-iron-bright)',
      }}>
        Each piece exists in the market.<br/>
        The combination, at senior level, doesn't.
      </h2>

      <div className="ws-rarity-grid">
        {PILLARS.map((p) => (
          <div key={p.n} className="ws-rarity-col">
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 18 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 28, color: 'var(--forge-ember)', fontWeight: 500 }}>{p.n}</span>
              <span style={{ ...ML, ...IT }}>{p.kicker}</span>
            </div>
            <h3 style={{ margin: '0 0 14px', fontFamily: 'var(--font-serif)', fontSize: 26, lineHeight: 1.25, color: 'var(--forge-iron-bright)' }}>{p.title}</h3>
            <p style={{ margin: 0, fontFamily: 'var(--font-serif)', fontSize: 16, lineHeight: 1.6, color: 'var(--forge-iron-soft)' }}>{p.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ── Project card SVG thumbnails ───────────────────────────────────────

const ThumbFrame = ({ children }) => (
  <svg viewBox="0 0 360 220" width="100%" height="100%"
       preserveAspectRatio="xMidYMid meet" style={{ display: 'block' }}>
    <rect width="360" height="220" fill="#1c1f24"/>
    <g stroke="rgba(255,255,255,0.05)" strokeWidth="0.5">
      {Array.from({ length: 11 }).map((_, i) => <line key={'v'+i} x1={i*36} y1="0"   x2={i*36} y2="220"/>)}
      {Array.from({ length:  7 }).map((_, i) => <line key={'h'+i} x1="0"   y1={i*36+2} x2="360" y2={i*36+2}/>)}
    </g>
    {[[10,10],[350,10],[10,210],[350,210]].map(([x,y], i) => (
      <g key={i} stroke="#6e7681" strokeWidth="1">
        <line x1={x-4} y1={y}   x2={x+4} y2={y}/>
        <line x1={x}   y1={y-4} x2={x}   y2={y+4}/>
      </g>
    ))}
    {children}
  </svg>
);

const THUMBS = {
  canopy: () => (
    <ThumbFrame>
      <g stroke="#a4abb5" strokeWidth="0.8" fill="none" opacity="0.7">
        <path d="M 0 180 Q 90 140 180 165 T 360 130"/>
        <path d="M 0 150 Q 80 110 180 130 T 360 100"/>
        <path d="M 0 120 Q 70 80  180 100 T 360 70"/>
        <path d="M 0 90  Q 80 50  180 70  T 360 40"/>
      </g>
      <path d="M 0 60 Q 80 20 180 40 T 360 10" stroke="#e8623a" strokeWidth="1" fill="none"/>
      {[[40,170],[110,142],[180,130],[240,118],[300,90]].map(([x,y], i) => (
        <circle key={i} cx={x} cy={y} r="2" fill="#e8623a"/>
      ))}
    </ThumbFrame>
  ),
  tiles: () => (
    <ThumbFrame>
      {Array.from({ length: 5 }).map((_, lvl) => {
        const count = lvl + 1, sz = 16, gap = 4;
        const startX = 180 - (count * sz + (count - 1) * gap) / 2;
        const y = 40 + lvl * 28;
        return Array.from({ length: count }).map((_, i) => (
          <rect key={`${lvl}-${i}`}
            x={startX + i * (sz + gap)} y={y} width={sz} height={sz}
            fill={lvl === 2 && i === 1 ? '#e8623a' : '#262a31'}
            stroke="rgba(255,255,255,0.18)" strokeWidth="0.7"/>
        ));
      })}
      <g fontFamily="JetBrains Mono, monospace" fontSize="8" fill="#a4abb5" letterSpacing="1">
        <text x="40"  y="200">Z=0</text>
        <text x="40"  y="55">Z=4</text>
        <text x="320" y="200" textAnchor="end">−42% INFRA</text>
      </g>
    </ThumbFrame>
  ),
  roads: () => (
    <ThumbFrame>
      <g stroke="#6e7681" strokeWidth="0.9" fill="none" opacity="0.55">
        <path d="M 20 50 C 80 60 110 90 160 100 C 210 110 240 80 300 90 L 340 95"/>
        <path d="M 60 200 C 80 160 130 150 170 140 C 200 130 220 150 250 160 L 320 175"/>
        <path d="M 90 30 C 100 70 140 90 160 100"/>
        <path d="M 250 30 C 240 60 220 80 200 95"/>
        <path d="M 160 100 L 170 140"/>
        <path d="M 250 160 L 280 200"/>
        <path d="M 100 200 C 110 170 130 160 152 148"/>
      </g>
      <g stroke="#e8623a" strokeWidth="1.4" fill="none">
        <path d="M 20 50 C 80 60 110 90 160 100"/>
        <path d="M 170 140 C 200 130 220 150 250 160"/>
      </g>
      {[[60,55],[120,80],[160,100],[210,134],[250,160]].map(([x,y], i) => (
        <rect key={i} x={x-2.5} y={y-2.5} width="5" height="5" fill="#1c1f24" stroke="#e8623a" strokeWidth="1"/>
      ))}
      <g fontFamily="JetBrains Mono, monospace" fontSize="8" fill="#a4abb5" letterSpacing="1">
        <text x="40"  y="200">~28,060 KM LABELS</text>
        <text x="320" y="200" textAnchor="end">+14 % F1</text>
      </g>
    </ThumbFrame>
  ),
  field: () => (
    <ThumbFrame>
      <path d="M 50 38 L 282 30 L 322 78 L 312 158 L 252 196 L 100 188 L 40 138 Z"
            fill="none" stroke="#6e7681" strokeWidth="1" strokeDasharray="3 3"/>
      <path d="M 80 78 C 110 92 132 112 162 116 C 196 124 222 100 242 120 C 262 142 230 168 200 172 C 168 176 150 160 132 154"
            fill="none" stroke="#d8dde3" strokeWidth="1.3"/>
      {[[80,78],[162,116],[242,120],[200,172],[132,154]].map(([x,y], i) => (
        <rect key={i} x={x-3} y={y-3} width="6" height="6" fill="#1c1f24" stroke="#e8623a" strokeWidth="1.2"/>
      ))}
      <g transform="translate(298, 54)" stroke="#a4abb5" strokeWidth="0.8" fill="none">
        <line x1="0" y1="-10" x2="0" y2="8"/>
        <polygon points="0,-10 -3,-4 3,-4" fill="#a4abb5" stroke="none"/>
      </g>
      <text x="294" y="72" fontFamily="JetBrains Mono, monospace" fontSize="7" fill="#a4abb5">N</text>
      <g fontFamily="JetBrains Mono, monospace" fontSize="8" fill="#a4abb5" letterSpacing="1">
        <text x="20"  y="200">PATROL · 3–10 D</text>
        <text x="320" y="200" textAnchor="end">OFFLINE</text>
      </g>
    </ThumbFrame>
  ),
  hydro: () => (
    <ThumbFrame>
      <path d="M 0 100 C 60 105 110 130 180 122 S 320 142 360 128" stroke="#6e7681" strokeWidth="2.2" fill="none" opacity="0.6"/>
      <path d="M 40 6 C 60 50 80 70 108 116" stroke="#6e7681" strokeWidth="1.4" fill="none" opacity="0.45"/>
      <path d="M 130 0 C 140 40 158 80 172 122" stroke="#6e7681" strokeWidth="1.4" fill="none" opacity="0.45"/>
      <path d="M 240 0 C 230 40 218 70 208 118" stroke="#6e7681" strokeWidth="1.3" fill="none" opacity="0.4"/>
      <path d="M 310 8 C 290 40 270 70 252 128" stroke="#6e7681" strokeWidth="1.3" fill="none" opacity="0.4"/>
      <path d="M 80 220 C 92 188 110 158 122 132" stroke="#6e7681" strokeWidth="1.2" fill="none" opacity="0.35"/>
      <path d="M 286 220 C 290 188 286 158 276 138" stroke="#6e7681" strokeWidth="1.2" fill="none" opacity="0.35"/>
      {[[60,107],[112,116],[176,122],[208,118],[252,128],[300,128]].map(([x,y], i) => (
        <rect key={i} x={x-3} y={y-3} width="6" height="6" fill="#e8623a"/>
      ))}
      <g fontFamily="JetBrains Mono, monospace" fontSize="8" fill="#a4abb5" letterSpacing="1">
        <text x="40"  y="200">QC HYDRO NETWORK</text>
        <text x="320" y="200" textAnchor="end">DISCHARGE EVENTS</text>
      </g>
    </ThumbFrame>
  ),
  network: () => (
    <ThumbFrame>
      {[[80,78,42],[180,108,52],[270,72,38],[140,158,46],[262,164,40]].map(([x,y,r], i) => (
        <circle key={i} cx={x} cy={y} r={r} fill="none" stroke="#6e7681" strokeWidth="0.7" strokeDasharray="2 2" opacity="0.55"/>
      ))}
      <g stroke="#a4abb5" strokeWidth="0.9" fill="none" opacity="0.65">
        <line x1="80" y1="78" x2="180" y2="108"/>
        <line x1="180" y1="108" x2="270" y2="72"/>
        <line x1="180" y1="108" x2="140" y2="158"/>
        <line x1="180" y1="108" x2="262" y2="164"/>
      </g>
      {[[80,78],[180,108],[270,72],[140,158],[262,164]].map(([x,y], i) => (
        <g key={i}>
          <rect x={x-4} y={y-4} width="8" height="8" fill="#1c1f24" stroke="#e8623a" strokeWidth="1.2"/>
          {i === 1 && <line x1={x} y1={y-12} x2={x} y2={y-4} stroke="#e8623a" strokeWidth="0.8"/>}
        </g>
      ))}
      <g fontFamily="JetBrains Mono, monospace" fontSize="8" fill="#a4abb5" letterSpacing="1">
        <text x="40"  y="200">5 AP · BACKBONE</text>
        <text x="320" y="200" textAnchor="end">2016 → 19</text>
      </g>
    </ThumbFrame>
  ),
};

// ── Selected work ─────────────────────────────────────────────────────

const ProjectCard = ({ p }) => {
  const Thumb = THUMBS[p.thumb] || (() => <ThumbFrame/>);
  return (
    <article style={{
      background: 'var(--forge-anthracite-2)',
      border: '1px solid var(--forge-rule-dark)',
      display: 'flex', flexDirection: 'column',
    }}>
      {/* Header strip */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        padding: '14px 18px', borderBottom: '1px solid var(--forge-rule-dark)',
      }}>
        <span style={{ ...ML, ...EM }}>{p.code}</span>
        <span style={{ ...ML, ...IT }}>
          {p.year}
          {p.lab && p.lab !== 'Forge' && (
            <span style={{ color: 'var(--forge-iron)' }}> · VIA {p.lab.toUpperCase()}</span>
          )}
          <span> · {p.scope}</span>
        </span>
      </div>

      {/* Schematic thumbnail */}
      <div style={{ aspectRatio: '360 / 220' }}><Thumb/></div>

      {/* Body */}
      <div style={{
        padding: '20px 22px 22px',
        borderTop: '1px solid var(--forge-rule-dark)',
        flex: 1, display: 'flex', flexDirection: 'column',
      }}>
        <h3 style={{ margin: 0, fontFamily: 'var(--font-serif)', fontSize: 22, lineHeight: 1.2 }}>
          <a href={`dossier.html#${p.slug}`}             style={{ color: 'var(--forge-iron-bright)', textDecoration: 'none' }}
             onMouseEnter={e => e.currentTarget.style.color = 'var(--forge-ember)'}
             onMouseLeave={e => e.currentTarget.style.color = 'var(--forge-iron-bright)'}>
            {p.title}
          </a>
        </h3>
        <div style={{ marginTop: 6, fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 14, color: 'var(--forge-iron-soft)' }}>{p.client}</div>
        <p style={{ margin: '14px 0 0', fontFamily: 'var(--font-serif)', fontSize: 14.5, lineHeight: 1.55, color: 'var(--forge-iron-soft)', flex: 1 }}>{p.summary}</p>
        <div style={{
          marginTop: 16, paddingTop: 12,
          borderTop: '1px solid var(--forge-rule-dark)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, ...EM, letterSpacing: '0.06em' }}>● {p.metric}</span>
          <a href={`dossier.html#${p.slug}`}             style={{ ...ML, ...IT, textDecoration: 'none', display: 'inline-flex', gap: 6 }}>
            DOSSIER <span style={{ ...EM }}>→</span>
          </a>
        </div>
      </div>
    </article>
  );
};

const SelectedWork = () => (
  <section id="work" className="ws-s" style={{
    background: 'var(--forge-anthracite)',
    borderTop: '1px solid var(--forge-rule-dark)',
  }}>
    <div className="ws-col">
      <div className="ws-work-header" style={{ marginBottom: 48 }}>
        <div>
          <Eyebrow>SELECTED WORK · 2016 → 2026</Eyebrow>
          <h2 style={{
            margin: 0, fontFamily: 'var(--font-serif)', fontWeight: 400,
            fontSize: 'clamp(28px, 5vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.01em',
            color: 'var(--forge-iron-bright)',
          }}>
            What gets forged,<br/>
            <span style={{ color: 'var(--forge-iron-soft)', fontStyle: 'italic' }}>and what it does in production.</span>
          </h2>
        </div>
        <div className="wh-aside" style={{ ...ML, ...IT, paddingLeft: 24, borderLeft: '1px solid var(--forge-rule-mid)', maxWidth: 280, lineHeight: 1.7 }}>
          SIX ENGAGEMENTS ·<br/>
          UNDER FORGE AND<br/>
          EARLIER PARTNERSHIPS<br/>
          (KODA · COLAB).
        </div>
      </div>

      <div className="ws-grid-3">
        {C.projects.filter(p => p.staged !== false).map((p) => <ProjectCard key={p.code} p={p}/>)}
      </div>

      <div style={{
        marginTop: 36, paddingTop: 20,
        borderTop: '1px solid var(--forge-rule-mid)',
      }}>
        <span style={{ ...ML, ...IT }}>EACH CASE HAS A DOSSIER ON FILE</span>
      </div>
    </div>
  </section>
);

// ── Featured case — K-010 tile pipeline ───────────────────────────────

const Featured = () => (
  <section className="ws-featured-section">
    <div className="ws-col">
      <div style={{display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 48}}>
        <span style={{...ML, ...EM}}>● FEATURED CASE</span>
        <span style={{flex: 1, height: 1, background: 'var(--forge-rule-mid)'}}/>
        <span style={{...ML, ...IT}}>K-010 · 2021 · F-01 + F-02</span>
      </div>

      <div className="ws-featured-grid">
        {/* left: narrative */}
        <div>
          <h2 className="forge-h2" style={{
            margin: 0, color: 'var(--forge-iron-bright)',
            fontSize: 'clamp(32px, 3.5vw, 48px)', lineHeight: 1.1, letterSpacing: '-0.01em',
          }}>
            A tile pipeline <em style={{fontStyle: 'italic', color: 'var(--forge-ember)'}}>replanned</em><br/>
            from the database up.
          </h2>
          <p style={{
            margin: '24px 0 0',
            fontFamily: 'var(--font-serif)', fontSize: 18, lineHeight: 1.6,
            color: 'var(--forge-iron-soft)', maxWidth: 540,
          }}>
            A mapping platform served vector data via a legacy WFS-style API returning full
            GeoJSON payloads for massive datasets and no caching, every request expensive. Koda
            audited the stack, then rebuilt: a purpose-built ASP.NET Core MVT
            server generating true vector tiles, Azure Blob as the tile cache.
          </p>

          <div style={{marginTop: 36, borderTop: '1px solid var(--forge-rule-dark)'}}>
            {[
              ['SHAPE',    'Diagnosis (F-01) into build (F-02), fixed scope and fixed price across both'],
              ['STACK',    'ASP.NET Core · PostGIS · Azure Blob · App Service · NetTopologySuite · MapLibre'],
              ['SERVING',  'Vector tiles z 1–20 · per-layer cache invalidation · Blob-cached MVT'],
              ['LATENCY',  '< 30 ms p95 (post-cutover)'],
              ['DURATION', '10 weeks (10-day F-01 + 8-week F-02)'],
              ['OUTCOME',  'Java VM decommissioned · −42 % infra cost · platform team manages it via the API'],
            ].map(([k, v]) => (
              <div key={k} className="ws-featured-detail">
                <div style={{...ML, ...IT}}>{k}</div>
                <div style={{
                  fontFamily: 'var(--font-serif)', fontSize: 16, lineHeight: 1.5,
                  color: 'var(--forge-iron-bright)',
                }}>{v}</div>
              </div>
            ))}
          </div>

          <div style={{marginTop: 28}}>
            <a href="dossier.html#tile-pipeline-rebuild"               className="forge-btn"
               style={{background: 'var(--forge-ember)', color: 'var(--forge-anthracite)', textDecoration: 'none'}}>
              Read the dossier
            </a>
          </div>
        </div>

        {/* right: MVT pyramid + data flow schematic */}
        <div className="ws-featured-sticky" style={{position: 'sticky', top: 80}}>
          <div style={{
            background: 'var(--forge-anthracite)',
            border: '1px solid var(--forge-rule-mid)',
            padding: 24,
          }}>
            <svg viewBox="0 0 480 360" width="100%" height="auto" style={{display: 'block'}}>
              <rect width="480" height="360" fill="#14161a"/>
              <g stroke="rgba(255,255,255,0.05)" strokeWidth="0.5">
                {Array.from({length: 13}).map((_, i) => <line key={'v'+i} x1={i*40} y1="0" x2={i*40} y2="360"/>)}
                {Array.from({length: 10}).map((_, i) => <line key={'h'+i} x1="0" y1={i*40} x2="480" y2={i*40}/>)}
              </g>
              {(() => {
                const out = [];
                for (let lvl = 0; lvl < 6; lvl++) {
                  const count = lvl + 1, size = 26, gap = 6;
                  const totalW = count * size + (count - 1) * gap;
                  const startX = 240 - totalW / 2;
                  const y = 56 + lvl * 32;
                  for (let i = 0; i < count; i++) {
                    const isHot = lvl === 2 && i === 1;
                    out.push(
                      <rect key={`${lvl}-${i}`}
                            x={startX + i * (size + gap)} y={y}
                            width={size} height={size}
                            fill={isHot ? '#e8623a' : '#262a31'}
                            stroke="rgba(255,255,255,0.20)" strokeWidth="0.8"/>
                    );
                  }
                }
                return out;
              })()}
              <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#a4abb5" letterSpacing="1">
                {[0,1,2,3,4,5].map((lvl) => (
                  <text key={lvl} x="30" y={72 + lvl * 32}>Z = {4 + lvl}</text>
                ))}
              </g>
              <g stroke="#e8623a" strokeWidth="0.9" fill="none" opacity="0.85">
                <line x1="266" y1="116" x2="370" y2="116"/>
                <line x1="370" y1="116" x2="370" y2="76"/>
                <line x1="366" y1="76" x2="374" y2="76"/>
              </g>
              <text x="370" y="68" fontFamily="JetBrains Mono, monospace" fontSize="10"
                    fill="#e8623a" textAnchor="middle" letterSpacing="1">CACHED</text>
              <g transform="translate(0, 290)">
                <line x1="40" y1="0" x2="440" y2="0" stroke="rgba(255,255,255,0.12)" strokeWidth="0.6"/>
                {[
                  [60,  'POSTGIS'],
                  [180, 'ST_AsMVT'],
                  [300, 'BLOB'],
                  [420, 'MAPLIBRE'],
                ].map(([x, label], i, arr) => (
                  <g key={label}>
                    <rect x={x-4} y={-4} width="8" height="8"
                          fill={i === 2 ? '#e8623a' : '#14161a'}
                          stroke={i === 2 ? '#e8623a' : '#6e7681'} strokeWidth="1"/>
                    <text x={x} y={22} fontFamily="JetBrains Mono, monospace" fontSize="9"
                          fill="#a4abb5" textAnchor="middle" letterSpacing="1.5">{label}</text>
                    {i < arr.length - 1 && (
                      <line x1={x + 10} y1="0" x2={arr[i+1][0] - 10} y2="0" stroke="#6e7681" strokeWidth="0.8"/>
                    )}
                  </g>
                ))}
              </g>
              {[[14,14],[466,14],[14,346],[466,346]].map(([x,y], i) => (
                <g key={i} stroke="#e8623a" strokeWidth="1">
                  <line x1={x-6} y1={y} x2={x+6} y2={y}/>
                  <line x1={x} y1={y-6} x2={x} y2={y+6}/>
                </g>
              ))}
              <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#a4abb5" letterSpacing="1.5">
                <text x="20" y="22">MVT PYRAMID · Z 4–16</text>
                <text x="460" y="22" textAnchor="end">30 MS P95</text>
              </g>
            </svg>
            <div style={{
              marginTop: 14, display: 'flex', justifyContent: 'space-between',
              ...ML, ...IT,
            }}>
              <span>MVT · POSTGIS · BLOB-CACHED</span>
              <span style={{color: 'var(--forge-ember)'}}>● DECOMMISSIONED</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ── Approach — offer schedule ─────────────────────────────────────────

const OFFERS = [
  { code: 'F-00', verb: 'Think',    title: 'Architecture & system design',         dur: 'Week',    shape: 'Fixed-scope · fixed-price' },
  { code: 'F-01', verb: 'Diagnose', title: 'Platform health assessment',            dur: 'Week',    shape: 'Fixed-scope · fixed-price' },
  { code: 'F-02', verb: 'Execute',  title: 'Platform build',                        dur: 'Month',   shape: 'Fixed-scope project'        },
  { code: 'F-03', verb: 'Steward',  title: 'Fractional spatial platform engineer',  dur: 'Ongoing', shape: 'Days / week · monthly'      },
];

const Approach = () => (
  <section id="approach" className="ws-s" style={{
    background: 'var(--forge-anthracite)',
    borderTop: '1px solid var(--forge-rule-dark)',
  }}>
    <div className="ws-col">
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 40, flexWrap: 'wrap', gap: 24 }}>
        <div>
          <Eyebrow>SCHEDULE OF SERVICES</Eyebrow>
          <h2 style={{
            margin: 0, fontFamily: 'var(--font-serif)', fontWeight: 400,
            fontSize: 'clamp(28px, 4vw, 40px)', lineHeight: 1.15, color: 'var(--forge-iron-bright)',
          }}>
            Four engagements.<br/>
            <span style={{ color: 'var(--forge-iron-soft)', fontStyle: 'italic' }}>Pick the one your problem needs.</span>
          </h2>
        </div>
        <div style={{ ...ML, ...IT, lineHeight: 1.7, maxWidth: 240, paddingLeft: 24, borderLeft: '1px solid var(--forge-rule-mid)' }}>
          A FLYWHEEL,<br/>NOT A GRAB-BAG.
        </div>
      </div>

      <div style={{ borderTop: '1px solid var(--forge-rule-mid)' }}>
        {OFFERS.map((o) => (
          <div key={o.code} className="ws-approach-row">
            <Stamp code={o.code} active={o.code === 'F-00'}/>
            <span className="ar-verb" style={{
              fontFamily: 'var(--font-serif)', fontStyle: 'italic',
              fontSize: 30, lineHeight: 1, color: 'var(--forge-iron-bright)',
            }}>{o.verb}.</span>
            <span style={{ fontFamily: 'var(--font-serif)', fontSize: 21, color: 'var(--forge-iron-bright)', lineHeight: 1.3 }}>{o.title}</span>
            <span className="ar-dur" style={{ ...ML, ...IT, letterSpacing: '0.04em', fontSize: 12.5 }}>{o.dur}</span>
            <span className="ar-shape" style={{ ...ML, ...IT, letterSpacing: '0.04em', fontSize: 12, textAlign: 'right' }}>{o.shape}</span>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 28, ...ML, ...IT,
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', flexWrap: 'wrap', gap: 16,
      }}>
        <span>F-00 → F-02 → F-03 IS THE NATURAL PATH. NONE OF IT IS A SEQUENCE.</span>
        <a href="#brief" style={{ ...EM, textDecoration: 'none', display: 'inline-flex', gap: 6, ...ML }}>
          OPEN A BRIEF <span>→</span>
        </a>
      </div>
    </div>
  </section>
);

// ── Capability matrix ─────────────────────────────────────────────────

const CAPABILITY = [
  {
    layer: 'DATA', code: 'L-04', title: 'The store',
    items: ['PostGIS at tens of millions of features', 'TB-scale raster pipelines', 'Cloud-native spatial storage (COG, STAC, GeoParquet)', 'Distributed spatial compute at the frontier'],
  },
  {
    layer: 'PROCESSING', code: 'L-03', title: 'The shop floor',
    items: ['Python + GDAL pipelines', 'dbt / Airflow orchestration', 'Databricks spatial · Apache Sedona', 'GPU-accelerated geoprocessing on HPC'],
  },
  {
    layer: 'SERVICES', code: 'L-02', title: 'The interfaces',
    items: ['Tile servers (vector and raster)', 'OGC APIs', 'Custom spatial APIs', 'Geospatial service architectures'],
  },
  {
    layer: 'APPLICATIONS', code: 'L-01', title: 'The clients',
    items: ['Web mapping: MapLibre, Leaflet, Cesium', 'Mobile field apps: QField', 'Desktop GIS integration'],
  },
];

const Capability = () => (
  <section id="stack" className="ws-s" style={{
    background: 'var(--forge-anthracite-2)',
    borderTop: '1px solid var(--forge-rule-dark)',
  }}>
    <div className="ws-col">
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 48, flexWrap: 'wrap', gap: 24 }}>
        <div>
          <Eyebrow>CAPABILITY MATRIX</Eyebrow>
          <h2 style={{
            margin: 0, fontFamily: 'var(--font-serif)', fontWeight: 400,
            fontSize: 'clamp(28px, 4vw, 44px)', lineHeight: 1.1, color: 'var(--forge-iron-bright)',
          }}>
            One spine.<br/>
            <span style={{ color: 'var(--forge-iron-soft)', fontStyle: 'italic' }}>Four layers.</span>
          </h2>
        </div>
        <div style={{ ...ML, ...IT }}>FROM STORE TO CLIENT</div>
      </div>

      <div className="ws-grid-4" style={{ borderTop: '1px solid var(--forge-rule-mid)' }}>
        {CAPABILITY.map((c, i) => (
          <div key={c.code} style={{
            padding: '32px 28px',
            borderRight: i < 3 ? '1px solid var(--forge-rule-dark)' : 'none',
            borderBottom: '1px solid var(--forge-rule-mid)',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 16 }}>
              <span style={{ ...ML, ...EM }}>{c.code}</span>
              <span style={{ ...ML, ...IT }}>{c.layer}</span>
            </div>
            <h3 style={{ margin: '0 0 18px', fontFamily: 'var(--font-serif)', fontSize: 20, fontStyle: 'italic', color: 'var(--forge-iron-bright)' }}>{c.title}</h3>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
              {c.items.map((it) => (
                <li key={it} style={{
                  fontFamily: 'var(--font-mono)', fontSize: 12.5, lineHeight: 1.55,
                  color: 'var(--forge-iron-soft)', letterSpacing: '0.02em',
                  paddingLeft: 14, position: 'relative',
                }}>
                  <span style={{ position: 'absolute', left: 0, top: 8, width: 6, height: 1, background: 'var(--forge-ember)' }}/>
                  {it}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ── About ─────────────────────────────────────────────────────────────

const About = () => (
  <section id="about" className="ws-s" style={{
    background: 'var(--forge-anthracite)',
    borderTop: '1px solid var(--forge-rule-dark)',
  }}>
    <div className="ws-col ws-about-grid">
      <div>
        <Eyebrow>ABOUT</Eyebrow>
        <h2 style={{
          margin: 0, fontFamily: 'var(--font-serif)', fontWeight: 400,
          fontSize: 'clamp(28px, 4vw, 40px)', lineHeight: 1.15, color: 'var(--forge-iron-bright)',
        }}>
          {C.about.headline.map((line, i, arr) => (
            <span key={i}>{line}{i < arr.length - 1 && <br/>}</span>
          ))}
        </h2>
      </div>
      <div>
        <p style={{ margin: 0, fontFamily: 'var(--font-serif)', fontSize: 20, lineHeight: 1.55, color: 'var(--forge-iron-bright)', whiteSpace: 'pre-line' }}>
          {C.about.body}
        </p>
        <p style={{ margin: '20px 0 0', fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 17, lineHeight: 1.6, color: 'var(--forge-iron-soft)' }}>
          {C.about.pull}
        </p>
      </div>
    </div>
  </section>
);

// ── Brief / CTA ───────────────────────────────────────────────────────

const Brief = () => (
  <section id="brief" className="ws-s" style={{
    background: 'var(--forge-ember)',
    color: 'var(--forge-anthracite)',
  }}>
    <div className="ws-col ws-brief-grid">
      {/* Left: headline */}
      <div>
        <div style={{ ...ML, color: 'rgba(20,22,26,0.65)', marginBottom: 18, display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ display: 'inline-block', width: 6, height: 6, background: 'var(--forge-anthracite)', opacity: 0.5 }}/>
          OPEN A BRIEF
        </div>
        <h2 className="ws-brief-headline">
          Tell me what's<br/>
          <span style={{ fontStyle: 'italic' }}>broken,</span> and what<br/>
          it has to do.
        </h2>
        <p style={{
          marginTop: 32, fontFamily: 'var(--font-serif)', fontSize: 21,
          lineHeight: 1.45, color: 'rgba(20,22,26,0.78)', maxWidth: 540,
        }}>
          No retainers. No discovery decks. A short brief, a real conversation,
          and a fixed scope inside a week.
        </p>
      </div>

      {/* Right: spec block */}
      <div style={{
        background: 'var(--forge-anthracite)', color: 'var(--forge-iron-bright)',
        padding: '36px 36px 32px',
      }}>
        <Eyebrow>THE FIRST CALL</Eyebrow>
        {[
          { label: 'FORMAT',     value: '30 minutes. No deck.' },
          { label: 'COST',       value: 'Free. I\'ll tell you if it\'s not me.' },
          { label: 'REPLY TIME', value: 'Two business days.' },
        ].map(({ label, value }, i, arr) => (
          <div key={label} style={{ padding: '14px 0', borderBottom: i < arr.length - 1 ? '1px solid var(--forge-rule-dark)' : 'none' }}>
            <div style={{ ...ML, ...IT }}>{label}</div>
            <div style={{ marginTop: 6, fontFamily: 'var(--font-serif)', fontSize: 17, color: 'var(--forge-iron-bright)' }}>{value}</div>
          </div>
        ))}

        <div style={{ marginTop: 22, display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
          <a href={`mailto:${C.email}`} className="forge-btn"
             style={{ background: 'var(--forge-ember)', color: 'var(--forge-anthracite)', textDecoration: 'none', flex: 1, textAlign: 'center' }}>
            Send a brief
          </a>
          <a href={`mailto:${C.email}`}
             style={{ ...ML, color: 'var(--forge-iron-soft)', textDecoration: 'none', whiteSpace: 'nowrap' }}>
            {C.email.toUpperCase()} →
          </a>
        </div>
      </div>
    </div>
  </section>
);

// ── Footer ────────────────────────────────────────────────────────────

const Footer = () => (
  <footer className="ws-s-sm" style={{
    background: 'var(--forge-anthracite)',
    borderTop: '1px solid var(--forge-rule-mid)',
  }}>
    <div className="ws-col">
      <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginBottom: 32, flexWrap: 'wrap' }}>
        <ForgeMark size={36}/>
        <div>
          <div style={{ ...ML, ...IB }}>XLBS / FORGE</div>
          <div style={{ ...ML, ...IT, marginTop: 4 }}>A LAB OF XLBS · ONE LIFE, MANY LABORATORIES</div>
        </div>
        <nav className="ws-footer-nav" style={{ marginLeft: 'auto', display: 'flex', gap: 28, flexWrap: 'wrap' }} aria-label="Footer navigation">
          {NAV_LINKS.map((l) => (
            <a key={l.href} href={l.href} style={{ ...ML, ...IT, textDecoration: 'none' }}>{l.label}</a>
          ))}
        </nav>
      </div>
      <div style={{
        display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12,
        paddingTop: 20, borderTop: '1px solid var(--forge-rule-dark)',
        ...ML, color: 'var(--forge-iron)',
      }}>
        <span>SHEET {C.sheet} · {C.rev}</span>
        <span>{C.location}</span>
        <span>FORGED FOR PRODUCTION</span>
      </div>
    </div>
  </footer>
);

// ── Root ──────────────────────────────────────────────────────────────

const ForgeWebsite = () => (
  <div style={{
    position: 'relative', minHeight: '100vh',
    background: 'var(--forge-anthracite)',
    color: 'var(--forge-iron-bright)',
    fontFamily: 'var(--font-serif)',
  }}>
    <Nav/>
    <MeterStrip/>
    <main>
      <Hero/>
      <Rarity/>
      <SelectedWork/>
      <Featured/>
      <Approach/>
      <Capability/>
      <About/>
    </main>
    <Brief/>
    <Footer/>
  </div>
);

ReactDOM.createRoot(document.getElementById('root')).render(<ForgeWebsite/>);