// Template detail page — FLOORPLAN deep-dive
// Shows all 12 canonical components rendered in this template's style.
// This is the gold-standard format that the other 5 detail pages will follow.

const FP_TOKENS = {
  bg:        '#f6f1e8',
  ink:       '#1a1d20',
  dim:       '#5a5d62',
  line:      '#c8c3b5',
  z1:        'oklch(0.92 0.045 50)',
  z2:        'oklch(0.90 0.06 145)',
  z3:        'oklch(0.88 0.065 240)',
  z4:        'oklch(0.93 0.035 320)',
  accent:    'oklch(0.50 0.18 30)',
  active:    'oklch(0.55 0.15 250)',
};

// ─── tiny primitives in floorplan voice ──────────────────────
const FpUpper = ({ children, style }) => <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: FP_TOKENS.dim, ...style }}>{children}</div>;
const FpStation = ({ init, name, color, active, q, w = 100 }) => (
  <div style={{
    background: 'white', border: active ? `1.5px solid ${FP_TOKENS.accent}` : `1px solid ${FP_TOKENS.line}`,
    borderRadius: 10, padding: '6px 8px', minWidth: w,
    boxShadow: active ? `0 0 0 3px color-mix(in oklab, ${FP_TOKENS.accent} 14%, transparent), 0 8px 18px rgba(28,24,16,0.14)` : '0 1px 0 rgba(0,0,0,0.04), 0 6px 16px rgba(28,24,16,0.08)',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
      <span style={{ width: 24, height: 24, borderRadius: '50%', background: color, color: 'white', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', font: '700 9px IBM Plex Mono' }}>{init}</span>
      <div style={{ minWidth: 0 }}>
        <div style={{ font: '700 11px IBM Plex Sans' }}>{name}</div>
        {q != null && <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 9, color: FP_TOKENS.dim }}>queue {q}</div>}
      </div>
    </div>
  </div>
);
const FpToken = ({ label, hot }) => (
  <span style={{
    padding: '3px 7px', borderRadius: 14,
    background: hot ? FP_TOKENS.accent : 'rgba(26,29,32,0.85)',
    color: 'white', font: '600 9px IBM Plex Mono', letterSpacing: '0.02em',
    boxShadow: '0 4px 10px rgba(0,0,0,0.16)', display: 'inline-flex', alignItems: 'center', gap: 4,
  }}><span style={{ width: 4, height: 4, borderRadius: '50%', background: 'white' }} /> {label}</span>
);

// Card wrapper for each of the 12 components
function ComponentCard({ no, name, sub, children, big }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', borderRadius: 6, border: `1px solid ${FP_TOKENS.line}`, background: '#fbfaf7', overflow: 'hidden' }}>
      <div style={{ padding: '8px 12px', borderBottom: `1px solid ${FP_TOKENS.line}`, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', background: '#f0eee9' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
          <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 10, color: '#9a9382', letterSpacing: '0.06em' }}>{no}</span>
          <span style={{ font: '600 12.5px IBM Plex Sans', letterSpacing: '-0.005em' }}>{name}</span>
        </div>
        <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 9.5, color: '#9a9382' }}>{sub}</span>
      </div>
      <div style={{ height: big ? 280 : 200, position: 'relative', overflow: 'hidden', background: FP_TOKENS.bg }}>
        {children}
      </div>
    </div>
  );
}

// ─── the 12 components in FLOORPLAN style ───────────────────

// 01 · App shell
function FpC01_Shell() {
  return (
    <div style={{ position: 'absolute', inset: 0, padding: 10 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, paddingBottom: 8, borderBottom: `1px solid ${FP_TOKENS.line}` }}>
        <span style={{ font: '700 13px IBM Plex Sans' }}>DrawRequest</span>
        <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 9, color: FP_TOKENS.dim }}>· Cornerstone</span>
        <span style={{ flex: 1 }} />
        <span style={{ padding: '2px 8px', borderRadius: 99, background: FP_TOKENS.accent, color: 'white', font: '600 9.5px IBM Plex Mono' }}>1 flag</span>
        <span style={{ width: 22, height: 22, borderRadius: '50%', background: '#2a5a9c', color: 'white', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', font: '700 9.5px IBM Plex Mono' }}>MS</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 1, marginTop: 12, height: 100 }}>
        {[FP_TOKENS.z1, FP_TOKENS.z2, FP_TOKENS.z3, FP_TOKENS.z4].map((bg, i) => (
          <div key={i} style={{ background: bg, padding: 6 }}>
            <FpUpper style={{ fontSize: 8 }}>0{i + 1} · {['INTAKE','WORK','REVIEW','RELEASE'][i]}</FpUpper>
          </div>
        ))}
      </div>
      <div style={{ position: 'absolute', bottom: 8, left: 10, right: 10, display: 'flex', justifyContent: 'space-between' }}>
        <FpUpper style={{ fontSize: 8 }}>// header · 4-zone strip · persona pill</FpUpper>
        <FpUpper style={{ fontSize: 8 }}>⇧A · switch</FpUpper>
      </div>
    </div>
  );
}

// 02 · Sign-in
function FpC02_Signin() {
  return (
    <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 14 }}>
      <div style={{ width: 220, background: 'white', border: `1px solid ${FP_TOKENS.line}`, borderRadius: 14, padding: 16, boxShadow: '0 12px 30px rgba(28,24,16,0.08)' }}>
        <div style={{ width: 30, height: 30, borderRadius: '50%', background: FP_TOKENS.accent, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', font: '700 12px IBM Plex Mono' }}>D</div>
        <div style={{ font: '600 14px IBM Plex Sans', textAlign: 'center', marginTop: 8, letterSpacing: '-0.01em' }}>Sign in to DrawRequest</div>
        <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 9.5, color: FP_TOKENS.dim, textAlign: 'center', marginTop: 2 }}>magic link · no password</div>
        <div style={{ marginTop: 14, padding: '7px 10px', border: `1px solid ${FP_TOKENS.line}`, borderRadius: 8, fontFamily: 'IBM Plex Mono', fontSize: 10.5, color: FP_TOKENS.dim }}>marcus@cornerstone.cap</div>
        <div style={{ marginTop: 8, padding: '8px 10px', borderRadius: 8, background: FP_TOKENS.ink, color: 'white', textAlign: 'center', fontFamily: 'IBM Plex Mono', fontSize: 11 }}>send me a link →</div>
      </div>
    </div>
  );
}

// 03 · Persona switcher / actor rail (spatial)
function FpC03_Actors() {
  const A = [
    { x: 32,  y: 40,  init: 'DO', name: 'GC',  c: '#7a4ac4' },
    { x: 32,  y: 110, init: 'TR', name: 'Subs',c: '#3a8a55' },
    { x: 130, y: 75,  init: 'HM', name: 'Insp',c: '#a04030', active: true },
    { x: 228, y: 40,  init: 'AP', name: 'Loan',c: '#7a4ac4' },
    { x: 228, y: 110, init: 'SK', name: 'Owner',c:'#a05085' },
    { x: 290, y: 75,  init: 'PA', name: 'Fin', c: '#c05a40' },
  ];
  return (
    <div style={{ position: 'absolute', inset: 0, padding: 8 }}>
      <div style={{ position: 'absolute', inset: 8, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 1, opacity: 0.6 }}>
        <div style={{ background: FP_TOKENS.z1 }} />
        <div style={{ background: FP_TOKENS.z2 }} />
        <div style={{ background: FP_TOKENS.z3 }} />
        <div style={{ background: FP_TOKENS.z4 }} />
      </div>
      {A.map((a, i) => (
        <div key={i} style={{ position: 'absolute', left: a.x, top: a.y, transform: 'translate(-50%,-50%)' }}>
          <FpStation init={a.init} name={a.name} color={a.c} active={a.active} q={[2,1,4,3,2,1][i]} w={64} />
        </div>
      ))}
      <FpUpper style={{ position: 'absolute', bottom: 6, left: 10, fontSize: 8 }}>// 8 actors · spatial · click to enter station</FpUpper>
    </div>
  );
}

// 04 · Home / dashboard
function FpC04_Home() {
  return (
    <div style={{ position: 'absolute', inset: 0, padding: 10 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <FpUpper style={{ fontSize: 8 }}>// HOME · LENDER ADMIN</FpUpper>
        <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 9, color: FP_TOKENS.dim }}>Friday · 18:37</span>
      </div>
      <div style={{ marginTop: 4, font: '600 18px IBM Plex Sans', letterSpacing: '-0.01em' }}>Cornerstone · $62.6M</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, marginTop: 8 }}>
        {[['released','$127.8K'],['flags','01'],['open','08']].map(([l, v], i) => (
          <div key={i} style={{ padding: '6px 8px', background: 'white', border: `1px solid ${FP_TOKENS.line}`, borderRadius: 8 }}>
            <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 8.5, color: FP_TOKENS.dim, textTransform: 'uppercase', letterSpacing: '0.1em' }}>{l}</div>
            <div style={{ font: '600 16px IBM Plex Mono', letterSpacing: '-0.01em' }}>{v}</div>
          </div>
        ))}
      </div>
      {/* Mini floor */}
      <div style={{ position: 'relative', marginTop: 10, height: 96, borderRadius: 6, overflow: 'hidden', border: `1px solid ${FP_TOKENS.line}` }}>
        <div style={{ position: 'absolute', inset: 0, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr' }}>
          {[FP_TOKENS.z1, FP_TOKENS.z2, FP_TOKENS.z3, FP_TOKENS.z4].map((c, i) => (<div key={i} style={{ background: c }} />))}
        </div>
        <div style={{ position: 'absolute', left: 30, top: '50%', transform: 'translateY(-50%)' }}><FpToken label="DRAW-2031" hot /></div>
        <div style={{ position: 'absolute', left: 150, top: '50%', transform: 'translateY(-50%)' }}><FpToken label="DRAW-2055" /></div>
      </div>
    </div>
  );
}

// 05 · Object list — draws presented spatially by zone
function FpC05_List() {
  return (
    <div style={{ position: 'absolute', inset: 0, padding: 10 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <FpUpper style={{ fontSize: 8 }}>// DRAWS · 08 IN FLIGHT</FpUpper>
        <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 9, color: FP_TOKENS.dim }}>filter ▾</span>
      </div>
      <div style={{ marginTop: 8, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, height: 144 }}>
        {[
          { z: FP_TOKENS.z1, label: 'INTAKE', items: [['DRAW-2080','$165K']] },
          { z: FP_TOKENS.z2, label: 'WORK',   items: [['DRAW-2031','$142K', true],['DRAW-2055','$95K']] },
          { z: FP_TOKENS.z3, label: 'REVIEW', items: [['DRAW-2060','$620K'],['DRAW-2050','$88K', false, true]] },
          { z: FP_TOKENS.z4, label: 'RELEASE',items: [['DRAW-2088','$92K'],['DRAW-2070','$215K']] },
        ].map((col, i) => (
          <div key={i} style={{ background: col.z, padding: 6 }}>
            <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 8, color: FP_TOKENS.dim, letterSpacing: '0.1em', marginBottom: 4 }}>{col.label}</div>
            {col.items.map((it, j) => (
              <div key={j} style={{ background: 'white', border: `1px solid ${FP_TOKENS.line}`, borderRadius: 6, padding: '3px 5px', marginBottom: 4, boxShadow: '0 2px 6px rgba(0,0,0,0.05)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 9, color: it[2] ? FP_TOKENS.accent : FP_TOKENS.ink, fontWeight: it[2] ? 700 : 500 }}>{it[0]}</span>
                  {it[3] && <span style={{ width: 6, height: 6, borderRadius: '50%', background: FP_TOKENS.accent }} />}
                </div>
                <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 9, color: FP_TOKENS.dim }}>{it[1]}</span>
              </div>
            ))}
          </div>
        ))}
      </div>
      <FpUpper style={{ position: 'absolute', bottom: 6, left: 10, fontSize: 8 }}>// each draw is a token in its zone · drag to advance</FpUpper>
    </div>
  );
}

// 06 · Object detail — single draw
function FpC06_Detail() {
  return (
    <div style={{ position: 'absolute', inset: 0, padding: 10 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <div>
          <FpUpper style={{ fontSize: 8 }}>// DRAW-2031 · DETAIL</FpUpper>
          <div style={{ font: '600 14px IBM Plex Sans' }}>Riverline Plaza</div>
        </div>
        <span style={{ padding: '2px 7px', borderRadius: 99, background: FP_TOKENS.accent, color: 'white', font: '600 9px IBM Plex Mono' }}>at: Inspector</span>
      </div>
      <div style={{ marginTop: 6, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
        {[['requested','$142,000'],['net release','$127,800'],['waivers','5/5'],['variance','1 · flag']].map(([l, v], i) => (
          <div key={i} style={{ padding: '4px 6px', background: 'white', border: `1px solid ${FP_TOKENS.line}`, borderRadius: 6 }}>
            <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 8, color: FP_TOKENS.dim, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{l}</div>
            <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, color: l === 'variance' ? FP_TOKENS.accent : FP_TOKENS.ink }}>{v}</div>
          </div>
        ))}
      </div>
      {/* Mini handoff */}
      <div style={{ marginTop: 8, padding: 6, background: 'white', borderRadius: 6, border: `1px solid ${FP_TOKENS.line}` }}>
        <FpUpper style={{ fontSize: 8 }}>// handoff trail · 6 stops</FpUpper>
        <div style={{ display: 'flex', alignItems: 'center', gap: 2, marginTop: 4 }}>
          {['GC','Subs','Insp','Loan','Owner','Fin'].map((s, i) => (
            <React.Fragment key={i}>
              <span style={{
                padding: '1px 5px', borderRadius: 99,
                background: i < 3 ? FP_TOKENS.accent : '#e6dfcd',
                color: i < 3 ? 'white' : FP_TOKENS.dim,
                fontFamily: 'IBM Plex Mono', fontSize: 8, fontWeight: 600,
              }}>{s}</span>
              {i < 5 && <span style={{ color: FP_TOKENS.dim, fontFamily: 'IBM Plex Mono', fontSize: 7 }}>→</span>}
            </React.Fragment>
          ))}
        </div>
      </div>
      <FpUpper style={{ position: 'absolute', bottom: 6, left: 10, fontSize: 8 }}>// open station to act</FpUpper>
    </div>
  );
}

// 07 · Form — multi-step wizard rendered as walking through zones
function FpC07_Form() {
  return (
    <div style={{ position: 'absolute', inset: 0, padding: 10 }}>
      <FpUpper style={{ fontSize: 8 }}>// SUBMIT DRAW · STEP 03 / 05</FpUpper>
      <div style={{ font: '600 13px IBM Plex Sans', marginTop: 2 }}>Schedule of values · 12 lines</div>
      {/* Stepper as zone walk */}
      <div style={{ position: 'relative', marginTop: 8, height: 30 }}>
        <div style={{ position: 'absolute', top: 14, left: 8, right: 8, height: 1, background: FP_TOKENS.line, borderTop: `1px dashed ${FP_TOKENS.line}` }} />
        {['Project','GC info','SoV','Waivers','Submit'].map((s, i) => (
          <div key={s} style={{ position: 'absolute', top: 6, left: `${8 + i * 22}%`, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <span style={{ width: 16, height: 16, borderRadius: '50%', background: i <= 2 ? FP_TOKENS.accent : 'white', border: `1px solid ${i <= 2 ? FP_TOKENS.accent : FP_TOKENS.line}`, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', font: '600 8.5px IBM Plex Mono' }}>{i <= 2 ? '✓' : i + 1}</span>
            <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 7.5, color: i <= 2 ? FP_TOKENS.ink : FP_TOKENS.dim, marginTop: 2 }}>{s}</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 18, padding: 8, background: 'white', border: `1px solid ${FP_TOKENS.line}`, borderRadius: 8 }}>
        {[['line','description','sched'],['03','Concrete','410,000'],['04','Masonry','165,000'],['05','Steel','540,000']].map((r, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '40px 1fr 80px', gap: 4, padding: '3px 0', borderBottom: i === 3 ? 'none' : `1px dotted ${FP_TOKENS.line}`, fontFamily: 'IBM Plex Mono', fontSize: 9.5, color: i === 0 ? FP_TOKENS.dim : FP_TOKENS.ink }}>
            <span>{r[0]}</span><span>{r[1]}</span><span style={{ textAlign: 'right' }}>{r[2]}</span>
          </div>
        ))}
      </div>
      <div style={{ position: 'absolute', bottom: 8, right: 10, display: 'flex', gap: 4 }}>
        <span style={{ padding: '3px 8px', border: `1px solid ${FP_TOKENS.line}`, borderRadius: 8, fontFamily: 'IBM Plex Mono', fontSize: 9 }}>← back</span>
        <span style={{ padding: '3px 8px', background: FP_TOKENS.ink, color: 'white', borderRadius: 8, fontFamily: 'IBM Plex Mono', fontSize: 9 }}>next →</span>
      </div>
    </div>
  );
}

// 08 · Workflow / approval chain
function FpC08_Workflow() {
  return (
    <div style={{ position: 'absolute', inset: 0, padding: 10 }}>
      <FpUpper style={{ fontSize: 8 }}>// HANDOFF CHAIN · DRAW-2031</FpUpper>
      <div style={{ position: 'relative', marginTop: 14, height: 80 }}>
        <svg viewBox="0 0 320 80" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          <path d="M 30 50 C 70 30, 120 70, 160 50 C 200 30, 250 70, 290 50" fill="none" stroke={FP_TOKENS.accent} strokeWidth="1.5" strokeDasharray="3 3" />
        </svg>
        {['GC','Insp','Loan','Owner','Fin'].map((s, i) => (
          <div key={i} style={{
            position: 'absolute', top: i % 2 === 0 ? 12 : 56, left: 30 + i * 65,
            transform: 'translate(-50%,-50%)',
            width: 38, height: 38, borderRadius: '50%',
            background: i < 2 ? FP_TOKENS.accent : 'white',
            border: `2px solid ${FP_TOKENS.accent}`,
            color: i < 2 ? 'white' : FP_TOKENS.ink,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            font: '700 11px IBM Plex Mono',
            boxShadow: '0 4px 10px rgba(0,0,0,0.12)',
          }}>{s}</div>
        ))}
      </div>
      <div style={{ marginTop: 6, padding: 6, background: 'white', border: `1px solid ${FP_TOKENS.line}`, borderRadius: 6 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'IBM Plex Mono', fontSize: 9.5 }}>
          <span>at: <b style={{ color: FP_TOKENS.accent }}>Loan officer · Aisha</b></span>
          <span style={{ color: FP_TOKENS.dim }}>step 3 / 5</span>
        </div>
        <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 9, color: FP_TOKENS.dim, marginTop: 2 }}>next ▸ owner · sarah</div>
      </div>
    </div>
  );
}

// 09 · Audit feed
function FpC09_Audit() {
  return (
    <div style={{ position: 'absolute', inset: 0, padding: 10, overflow: 'hidden' }}>
      <FpUpper style={{ fontSize: 8 }}>// AUDIT · LIVE · 247 EVENTS THIS WEEK</FpUpper>
      <div style={{ marginTop: 6, position: 'relative', paddingLeft: 12 }}>
        <div style={{ position: 'absolute', left: 4, top: 4, bottom: 4, width: 1, background: FP_TOKENS.line }} />
        {[
          ['18:37', 'packet generated', 'M. Sterling', false, '#7a4ac4'],
          ['18:21', 'waiver expired',   'Northwind',   true,  '#a04030'],
          ['18:14', 'draw released',    'P. Alvarez',  false, '#c05a40'],
          ['17:58', 'inspection flag',  'H. Mendez',   true,  '#a04030'],
          ['17:42', 'submission',       'D. Ortega',   false, '#7a4ac4'],
        ].map((e, i) => (
          <div key={i} style={{ position: 'relative', padding: '3px 0', borderBottom: i === 4 ? 'none' : `1px dotted ${FP_TOKENS.line}` }}>
            <span style={{ position: 'absolute', left: -10, top: 7, width: 7, height: 7, borderRadius: '50%', background: e[4], border: '1.5px solid white' }} />
            <div style={{ display: 'grid', gridTemplateColumns: '36px 1fr auto', gap: 6, alignItems: 'center', fontFamily: 'IBM Plex Mono', fontSize: 9.5 }}>
              <span style={{ color: FP_TOKENS.dim }}>{e[0]}</span>
              <span style={{ color: e[3] ? FP_TOKENS.accent : FP_TOKENS.ink, fontWeight: e[3] ? 600 : 400 }}>{e[1]}</span>
              <span style={{ color: FP_TOKENS.dim, fontSize: 9 }}>{e[2]}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// 10 · Generated output (artifact)
function FpC10_Output() {
  return (
    <div style={{ position: 'absolute', inset: 0, padding: 10 }}>
      <FpUpper style={{ fontSize: 8 }}>// OUTPUT · G702 PACKET · GENERATED</FpUpper>
      <div style={{
        marginTop: 6, height: 158,
        background: 'white', border: `1px solid ${FP_TOKENS.line}`, borderRadius: 4,
        boxShadow: '0 8px 18px rgba(28,24,16,0.10)',
        padding: '8px 10px', position: 'relative',
        backgroundImage: 'linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px)',
        backgroundSize: '100% 8px',
      }}>
        <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 8, letterSpacing: '0.1em', color: FP_TOKENS.dim, textTransform: 'uppercase' }}>G702 · APP 07</div>
        <div style={{ font: '500 12px "IBM Plex Serif", serif', marginTop: 2 }}>Riverline Plaza</div>
        <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 14, color: FP_TOKENS.ink, marginTop: 4, fontWeight: 600 }}>$142,000</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 2, marginTop: 8 }}>
          {[100, 92, 78, 85, 64].map((p, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
              <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 8, color: FP_TOKENS.dim, width: 14 }}>{i + 1}</span>
              <div style={{ flex: 1, height: 4, background: '#ecebe5', borderRadius: 2 }}><div style={{ height: '100%', width: p + '%', background: p === 100 ? '#9a9382' : FP_TOKENS.accent, borderRadius: 2 }} /></div>
              <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 8, color: FP_TOKENS.dim, width: 24, textAlign: 'right' }}>{p}%</span>
            </div>
          ))}
        </div>
        <div style={{ position: 'absolute', bottom: 6, left: 10, right: 10, display: 'flex', justifyContent: 'space-between', fontFamily: 'IBM Plex Mono', fontSize: 7.5, color: FP_TOKENS.dim }}>
          <span>autobuild™ · REQ-13</span>
          <span>page 1 of 4</span>
        </div>
      </div>
    </div>
  );
}

// 11 · Settings · admin (role matrix)
function FpC11_Settings() {
  const roles = ['Admin','Loan','GC','Sub','Insp','Owner','Fin','Aud'];
  const perms = ['read','submit','approve','release'];
  return (
    <div style={{ position: 'absolute', inset: 0, padding: 10 }}>
      <FpUpper style={{ fontSize: 8 }}>// SETTINGS · APPROVAL MATRIX</FpUpper>
      <div style={{ marginTop: 6, background: 'white', border: `1px solid ${FP_TOKENS.line}`, borderRadius: 6, overflow: 'hidden' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '90px repeat(4, 1fr)', borderBottom: `1px solid ${FP_TOKENS.line}`, background: '#f0eee9', padding: '4px 6px', fontFamily: 'IBM Plex Mono', fontSize: 8.5, color: FP_TOKENS.dim, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
          <span>role</span>
          {perms.map(p => <span key={p} style={{ textAlign: 'center' }}>{p}</span>)}
        </div>
        {roles.slice(0, 6).map((r, i) => (
          <div key={r} style={{ display: 'grid', gridTemplateColumns: '90px repeat(4, 1fr)', padding: '4px 6px', borderBottom: i === 5 ? 'none' : `1px solid ${FP_TOKENS.line}`, alignItems: 'center', fontFamily: 'IBM Plex Mono', fontSize: 9 }}>
            <span>{r}</span>
            {perms.map((p, j) => {
              const granted = (i === 0 || j === 0 || (i < 3 && j < 3) || (i === 5 && j === 3));
              return <span key={p} style={{ textAlign: 'center', color: granted ? FP_TOKENS.accent : '#c8c3b5' }}>{granted ? '●' : '○'}</span>;
            })}
          </div>
        ))}
      </div>
    </div>
  );
}

// 12 · Empty state
function FpC12_Empty() {
  return (
    <div style={{ position: 'absolute', inset: 0, padding: 12, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center' }}>
      {/* Mini empty floor */}
      <div style={{ position: 'relative', width: 200, height: 80, borderRadius: 6, overflow: 'hidden', border: `1px dashed ${FP_TOKENS.line}` }}>
        <div style={{ position: 'absolute', inset: 0, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', opacity: 0.5 }}>
          {[FP_TOKENS.z1, FP_TOKENS.z2, FP_TOKENS.z3, FP_TOKENS.z4].map((c, i) => (<div key={i} style={{ background: c }} />))}
        </div>
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'IBM Plex Mono', fontSize: 9, color: FP_TOKENS.dim }}>empty floor</div>
      </div>
      <div style={{ font: '600 14px IBM Plex Sans', marginTop: 12, letterSpacing: '-0.005em' }}>No draws yet.</div>
      <div style={{ fontSize: 11.5, color: FP_TOKENS.dim, marginTop: 2, maxWidth: 240 }}>Place your first GC in the intake zone, and a draw token will appear when they submit.</div>
      <span style={{ marginTop: 10, padding: '5px 12px', background: FP_TOKENS.accent, color: 'white', borderRadius: 99, fontFamily: 'IBM Plex Mono', fontSize: 10.5 }}>+ invite a contractor</span>
    </div>
  );
}

// === The detail page ===
function TemplateDetailFloorplan() {
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: '#f6f4ef', overflow: 'auto', fontFamily: 'IBM Plex Sans, system-ui', color: '#1a1814' }}>
      {/* Nav */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 36px', borderBottom: '1px solid #d8d4c8' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 26 }}>
          <div style={{ font: '600 16px IBM Plex Mono' }}>·stack.ai</div>
          <div style={{ display: 'flex', gap: 18, fontFamily: 'IBM Plex Mono', fontSize: 12, color: '#3a362d' }}>
            {['Examples','How it works','Architecture','Templates','Pricing','Trust'].map(n => (
              <span key={n} style={{ color: n === 'Templates' ? '#1a1814' : '#6b6557', fontWeight: n === 'Templates' ? 600 : 400, borderBottom: n === 'Templates' ? '1.5px solid #1a1814' : 'none', paddingBottom: 4 }}>{n}</span>
            ))}
          </div>
        </div>
      </div>

      {/* Breadcrumb */}
      <div style={{ padding: '14px 36px', fontFamily: 'IBM Plex Mono', fontSize: 10.5, color: '#6b6557', letterSpacing: '0.04em' }}>
        ustack / templates / <span style={{ color: '#1a1814' }}>floorplan</span>
      </div>

      {/* HERO */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', borderBottom: '1px solid #d8d4c8' }}>
        <div style={{ padding: '20px 36px 32px', borderRight: '1px solid #d8d4c8' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#6b6557' }}>// 01 of 06 · template</span>
            <span style={{ padding: '2px 8px', borderRadius: 99, background: '#fbfaf7', border: '1px solid #d8d4c8', fontFamily: 'IBM Plex Mono', fontSize: 10, color: 'oklch(0.50 0.18 30)', display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 6, height: 6, borderRadius: '50%', background: 'oklch(0.50 0.18 30)' }} /> flagship</span>
          </div>
          <h1 style={{ font: '500 64px "IBM Plex Serif", "DM Serif Display", serif', letterSpacing: '-0.025em', lineHeight: 1, marginTop: 12 }}>Floorplan.</h1>
          <div style={{ font: '400 22px "IBM Plex Serif", serif', fontStyle: 'italic', color: '#6b6557', marginTop: 6, lineHeight: 1.2 }}>The workflow is the home. Actors are stations. The artifact moves visibly.</div>
          <p style={{ marginTop: 16, fontSize: 14.5, lineHeight: 1.55, color: '#3a362d', maxWidth: 540 }}>
            Floorplan turns the four canonical phases of any uStack workflow — <b>intake → work → review → release</b> — into colored zones on a single canvas.
            Each actor sits in their zone as a station. Each active artifact (a draw, an inspection, a job) is a pulsing token traveling between them.
            Click a station to enter that actor's console. The actors mode explains itself in three seconds.
          </p>
          <div style={{ marginTop: 18, display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {['DrawRequest', 'InspectKit', 'AuditField', 'PunchOps (alt)', 'DispatchHQ (alt)'].map(t => (
              <span key={t} style={{ padding: '4px 10px', borderRadius: 4, background: '#fbfaf7', border: '1px solid #d8d4c8', fontFamily: 'IBM Plex Mono', fontSize: 11, color: '#1a1814' }}>{t}</span>
            ))}
          </div>
        </div>
        <div style={{ padding: '18px', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#f0eee9' }}>
          <div style={{ width: '100%', height: 380, borderRadius: 10, overflow: 'hidden', boxShadow: '0 16px 44px rgba(28,24,16,0.20), 0 0 0 1px rgba(28,24,16,0.10)', position: 'relative', background: FP_TOKENS.bg }}>
            {/* Full-scale hero preview — a richer floorplan than the card thumbnail */}
            <div style={{ position: 'absolute', inset: 0, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr' }}>
              {[FP_TOKENS.z1, FP_TOKENS.z2, FP_TOKENS.z3, FP_TOKENS.z4].map((c, i) => (<div key={i} style={{ background: c }} />))}
            </div>
            <div style={{ position: 'absolute', inset: 0, padding: '18px 22px', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', alignItems: 'start', pointerEvents: 'none' }}>
              {[['01 · INTAKE','submit · waiver'],['02 · WORK','field validate'],['03 · REVIEW','loan + owner'],['04 · RELEASE','finance · audit']].map(([t, s], i) => (
                <div key={i}>
                  <FpUpper>{t}</FpUpper>
                  <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 10, color: 'rgba(26,29,32,0.5)', marginTop: 2 }}>{s}</div>
                </div>
              ))}
            </div>
            <svg viewBox="0 0 560 380" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
              <defs><marker id="hero-a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0,0 L10,5 L0,10 Z" fill="rgba(26,29,32,0.45)" /></marker></defs>
              {[[70, 150, 220, 200],[70, 250, 220, 200],[220, 200, 360, 150],[220, 200, 360, 250],[360, 150, 490, 200],[360, 250, 490, 200]].map(([x1,y1,x2,y2], i) => (
                <path key={i} d={`M ${x1} ${y1} C ${(x1+x2)/2} ${y1}, ${(x1+x2)/2} ${y2}, ${x2} ${y2}`} fill="none" stroke="rgba(26,29,32,0.4)" strokeWidth="1.4" strokeDasharray="4 4" markerEnd="url(#hero-a)" />
              ))}
            </svg>
            {[
              { x: 70,  y: 150, init: 'DO', name: 'GC',        c: '#7a4ac4', q: 2 },
              { x: 70,  y: 250, init: 'TR', name: 'Subs',      c: '#3a8a55', q: 1 },
              { x: 220, y: 200, init: 'HM', name: 'Inspector', c: '#a04030', q: 4, active: true },
              { x: 360, y: 150, init: 'AP', name: 'Loan',      c: '#7a4ac4', q: 3 },
              { x: 360, y: 250, init: 'SK', name: 'Owner',     c: '#a05085', q: 2 },
              { x: 490, y: 200, init: 'PA', name: 'Finance',   c: '#c05a40', q: 1 },
            ].map((s, i) => (
              <div key={i} style={{ position: 'absolute', left: `${(s.x/560)*100}%`, top: `${(s.y/380)*100}%`, transform: 'translate(-50%, -50%)' }}>
                <FpStation init={s.init} name={s.name} color={s.c} active={s.active} q={s.q} w={108} />
              </div>
            ))}
            {[
              { x: 145, y: 175, label: 'DRAW-2031', hot: true },
              { x: 290, y: 200, label: 'DRAW-2055' },
              { x: 425, y: 200, label: 'DRAW-2088' },
            ].map((t, i) => (
              <div key={i} style={{ position: 'absolute', left: `${(t.x/560)*100}%`, top: `${(t.y/380)*100}%`, transform: 'translate(-50%, -50%)' }}>
                <FpToken label={t.label} hot={t.hot} />
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* WHY THIS WORKS */}
      <div style={{ padding: '24px 36px', borderBottom: '1px solid #d8d4c8' }}>
        <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#6b6557', marginBottom: 12 }}>// why this template wins</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }}>
          {[
            ['Multi-actor is the message','Eight roles laid out spatially. A first-time visitor sees the whole organization on one screen — no learning curve.'],
            ['Handoffs are visible',     'Tokens travel between stations as state changes. You see the draw moving, not just a status word changing.'],
            ['Click-through to console', "Every station is a door. Click and you're in that actor's shoes — same workflow, their view."],
          ].map(([h, b], i) => (
            <div key={i}>
              <div style={{ font: '600 15px IBM Plex Sans', letterSpacing: '-0.005em' }}>{h}</div>
              <div style={{ fontSize: 13, color: '#3a362d', marginTop: 4, lineHeight: 1.5 }}>{b}</div>
            </div>
          ))}
        </div>
      </div>

      {/* IN PRODUCTION */}
      <div style={{ padding: '28px 36px', borderBottom: '1px solid #d8d4c8' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 16 }}>
          <div>
            <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#6b6557' }}>// in production · today</div>
            <h2 style={{ font: '500 26px "IBM Plex Serif", serif', letterSpacing: '-0.015em', marginTop: 2 }}>Three live demos run on Floorplan.</h2>
          </div>
          <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, color: '#6b6557' }}>open each ↗</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {[
            { name: 'DrawRequest', industry: 'Construction draws',    url: 'drawrequest.ustack.ai', actors: 8, signature: 'AIA G702 packet · 6-stage handoff · variance flags',
              tokens: [['DRAW-2031', true], ['DRAW-2055'], ['DRAW-2050', true]] },
            { name: 'InspectKit',  industry: 'Field inspections',     url: 'inspectkit.ustack.ai',  actors: 7, signature: 'Deficiency pins · severity scoring · regulator export',
              tokens: [['CYCLE-18', true], ['EAST-WING'], ['F-22']] },
            { name: 'AuditField',  industry: 'Audit fieldwork',       url: 'auditfield.ustack.ai',  actors: 7, signature: 'PBC requests · workpapers · partner sign-off',
              tokens: [['ENG-2031', true], ['SAMPLES'], ['SIGN-OFF']] },
          ].map((d, i) => (
            <a key={i} style={{ display: 'block', textDecoration: 'none', color: 'inherit', cursor: 'pointer', background: '#fbfaf7', border: '1px solid #d8d4c8', borderRadius: 6, overflow: 'hidden' }}>
              {/* Mini live preview */}
              <div style={{ position: 'relative', height: 180, background: FP_TOKENS.bg, overflow: 'hidden' }}>
                <div style={{ position: 'absolute', inset: 0, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr' }}>
                  {[FP_TOKENS.z1, FP_TOKENS.z2, FP_TOKENS.z3, FP_TOKENS.z4].map((c, j) => (<div key={j} style={{ background: c }} />))}
                </div>
                <svg viewBox="0 0 300 180" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
                  <path d="M 40 90 C 90 100, 150 70, 210 100 S 280 90, 280 90" fill="none" stroke="rgba(26,29,32,0.4)" strokeWidth="1.2" strokeDasharray="3 3" />
                </svg>
                {[
                  { x: 40,  y: 60,  c: '#7a4ac4', init: 'A' },
                  { x: 40,  y: 120, c: '#3a8a55', init: 'B' },
                  { x: 140, y: 90,  c: '#a04030', init: 'C', active: true },
                  { x: 240, y: 60,  c: '#7a4ac4', init: 'D' },
                  { x: 240, y: 120, c: '#a05085', init: 'E' },
                ].map((s, k) => (
                  <div key={k} style={{ position: 'absolute', left: s.x, top: s.y, transform: 'translate(-50%, -50%)' }}>
                    <span style={{
                      width: 24, height: 24, borderRadius: '50%',
                      background: s.c, color: 'white',
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      font: '700 9px IBM Plex Mono',
                      border: s.active ? `2px solid ${FP_TOKENS.accent}` : '2px solid white',
                      boxShadow: s.active ? `0 0 0 3px color-mix(in oklab, ${FP_TOKENS.accent} 14%, transparent), 0 4px 10px rgba(0,0,0,0.15)` : '0 4px 10px rgba(0,0,0,0.15)',
                    }}>{s.init}</span>
                  </div>
                ))}
                {d.tokens.map((tok, k) => (
                  <div key={k} style={{ position: 'absolute', left: 65 + k * 70, top: 90, transform: 'translate(-50%, -50%)' }}>
                    <FpToken label={tok[0]} hot={tok[1]} />
                  </div>
                ))}
                <div style={{ position: 'absolute', top: 8, left: 12, fontFamily: 'IBM Plex Mono', fontSize: 9, color: 'rgba(26,29,32,0.55)', letterSpacing: '0.06em' }}>● live</div>
              </div>
              <div style={{ padding: '14px 16px' }}>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
                  <span style={{ font: '700 15px IBM Plex Sans', letterSpacing: '-0.005em' }}>{d.name}</span>
                  <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 10, color: '#9a9382' }}>· {d.actors} actors</span>
                </div>
                <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 10, color: '#6b6557', letterSpacing: '0.04em', marginTop: 2, textTransform: 'uppercase' }}>{d.industry}</div>
                <div style={{ fontSize: 12, color: '#3a362d', marginTop: 6, lineHeight: 1.45 }}>{d.signature}</div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 10, paddingTop: 8, borderTop: '1px solid #ecebe5' }}>
                  <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 10, color: '#6b6557' }}>{d.url}</span>
                  <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, color: 'oklch(0.50 0.18 30)', fontWeight: 600 }}>open ↗</span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>

      {/* THE 12 COMPONENTS */}
      <div style={{ padding: '28px 36px', background: '#f0eee9', borderBottom: '1px solid #d8d4c8' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 16 }}>
          <div>
            <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#6b6557' }}>// design elements · the 12 components</div>
            <h2 style={{ font: '500 26px "IBM Plex Serif", serif', letterSpacing: '-0.015em', marginTop: 2 }}>Every uStack app ships with these twelve. Floorplan paints them all.</h2>
          </div>
          <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, color: '#6b6557' }}>autobuild™ generates each one from your spec</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          <ComponentCard no="01" name="App shell"            sub="header · nav · persona">      <FpC01_Shell /></ComponentCard>
          <ComponentCard no="02" name="Sign-in"              sub="magic link · brand">           <FpC02_Signin /></ComponentCard>
          <ComponentCard no="03" name="Persona switcher"     sub="8 actors · spatial">           <FpC03_Actors /></ComponentCard>
          <ComponentCard no="04" name="Home · dashboard"     sub="KPIs + marquee + queue">       <FpC04_Home /></ComponentCard>
          <ComponentCard no="05" name="Object list"          sub="entities · grouped by zone">    <FpC05_List /></ComponentCard>
          <ComponentCard no="06" name="Object detail"        sub="single entity · all fields">    <FpC06_Detail /></ComponentCard>
          <ComponentCard no="07" name="Form · multi-step"    sub="create · edit · validation">    <FpC07_Form /></ComponentCard>
          <ComponentCard no="08" name="Workflow chain"       sub="handoffs · signatures · state"> <FpC08_Workflow /></ComponentCard>
          <ComponentCard no="09" name="Audit feed"           sub="every change · queryable">      <FpC09_Audit /></ComponentCard>
          <ComponentCard no="10" name="Generated output"     sub="PDF · packet · the artifact">   <FpC10_Output /></ComponentCard>
          <ComponentCard no="11" name="Settings · admin"     sub="role matrix · approval rules">  <FpC11_Settings /></ComponentCard>
          <ComponentCard no="12" name="Empty state"          sub="pre-data · first-action prompt"><FpC12_Empty /></ComponentCard>
        </div>
      </div>

      {/* DESIGN TOKENS */}
      <div style={{ padding: '28px 36px', borderBottom: '1px solid #d8d4c8' }}>
        <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#6b6557', marginBottom: 12 }}>// design tokens · what makes it a system, not a one-off</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }}>
          {[
            { kind: 'TYPE',     v: 'IBM Plex Sans · 700', sub: 'station labels · 12.5/13px' },
            { kind: 'COLOR',    v: '4 zone tints + signal red', sub: 'intake · work · review · release · accent' },
            { kind: 'DENSITY',  v: 'Spatial · sparse', sub: 'stations float; whitespace carries the structure' },
            { kind: 'CHROME',   v: 'Stations + flow lines + tokens', sub: 'no sidebars · no tabs · the map IS the nav' },
            { kind: 'TONE',     v: 'Diagrammatic · place-like', sub: 'feels operated, not browsed' },
          ].map((t, i) => (
            <div key={i} style={{ padding: 12, background: '#fbfaf7', border: '1px solid #d8d4c8', borderRadius: 6 }}>
              <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#9a9382' }}>{t.kind}</div>
              <div style={{ font: '600 13px IBM Plex Sans', marginTop: 4 }}>{t.v}</div>
              <div style={{ fontSize: 11, color: '#6b6557', marginTop: 3 }}>{t.sub}</div>
            </div>
          ))}
        </div>
        {/* Color swatches */}
        <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 4 }}>
          {[
            ['intake',  FP_TOKENS.z1],
            ['work',    FP_TOKENS.z2],
            ['review',  FP_TOKENS.z3],
            ['release', FP_TOKENS.z4],
            ['accent',  FP_TOKENS.accent],
          ].map(([l, c]) => (
            <div key={l}>
              <div style={{ height: 36, background: c, border: '1px solid #d8d4c8' }} />
              <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 9.5, color: '#6b6557', marginTop: 4, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{l}</div>
              <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 9, color: '#9a9382' }}>{c.startsWith('#') ? c : 'oklch(…)'}</div>
            </div>
          ))}
        </div>
      </div>

      {/* CTA + other templates */}
      <div style={{ padding: '24px 36px', borderBottom: '1px solid #d8d4c8', display: 'grid', gridTemplateColumns: '1fr 320px', gap: 24, alignItems: 'center' }}>
        <div>
          <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#6b6557' }}>// next</div>
          <div style={{ font: '500 22px "IBM Plex Serif", serif', letterSpacing: '-0.01em', marginTop: 4 }}>Build your app in Floorplan, or browse the other five.</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <span style={{ padding: '10px 14px', background: 'oklch(0.50 0.18 30)', color: '#fff', textAlign: 'center', fontFamily: 'IBM Plex Mono', fontSize: 12, borderRadius: 4 }}>Build in Floorplan →</span>
          <span style={{ padding: '10px 14px', border: '1px solid #d8d4c8', textAlign: 'center', fontFamily: 'IBM Plex Mono', fontSize: 12, borderRadius: 4 }}>← back to all templates</span>
        </div>
      </div>

      {/* Footer */}
      <div style={{ padding: '14px 36px', display: 'flex', justifyContent: 'space-between', fontFamily: 'IBM Plex Mono', fontSize: 10.5, color: '#6b6557' }}>
        <span>© 2026 ustack · floorplan template · all 12 components live</span>
        <span>terms · privacy · trust</span>
      </div>
    </div>
  );
}

window.TemplateDetailFloorplan = TemplateDetailFloorplan;