// Template detail page — TECHNICAL (engineering drawing)

const TK_DET = {
  bg:    '#fafaf6',
  ink:   '#0a0a0a',
  dim:   '#5a5a5a',
  faint: '#b8b6ab',
  grid:  'rgba(0,0,0,0.05)',
  fill:  'rgba(10,10,10,0.85)',
  sans:  'Helvetica Neue, Inter, Arial, sans-serif',
  mono:  'IBM Plex Mono, monospace',
};
const T = TK_DET;
const dim10 = { fontFamily: T.mono, fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: T.dim };

function TKC01_Shell() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: T.bg, fontFamily: T.sans, color: T.ink, backgroundImage: 'linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px)', backgroundSize: '14px 14px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '60px 1fr 100px', borderBottom: '2px solid ' + T.ink }}>
        <div style={{ padding: '5px 8px', borderRight: '1px solid ' + T.ink, fontFamily: T.mono, fontSize: 9, letterSpacing: '0.08em' }}>FILE Nº<br/><b style={{ fontSize: 10 }}>07</b></div>
        <div style={{ padding: '5px 8px', borderRight: '1px solid ' + T.ink }}>
          <div style={{ fontFamily: T.mono, fontSize: 8, letterSpacing: '0.08em', color: T.dim }}>CLIENT</div>
          <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: '-0.02em', textTransform: 'uppercase' }}>CORNERSTONE CAPITAL</div>
        </div>
        <div style={{ padding: '5px 8px', fontFamily: T.mono, fontSize: 9, letterSpacing: '0.08em' }}>ACTOR<br/><b>STERLING</b></div>
      </div>
      <div style={{ display: 'flex' }}>
        {['PORTFOLIO','DRAWS·08','APPROVALS','INSPECT','VARIANCE'].map((t, i) => (
          <div key={t} style={{ flex: 1, padding: '6px 8px', borderRight: i === 4 ? 0 : '1px solid ' + T.ink, borderBottom: '1px solid ' + T.ink, background: i === 0 ? T.ink : 'transparent', color: i === 0 ? T.bg : T.ink, fontFamily: T.mono, fontSize: 9, fontWeight: 700, letterSpacing: '0.04em' }}>{t}</div>
        ))}
      </div>
      <div style={{ position: 'absolute', bottom: 8, right: 10, fontFamily: T.mono, fontSize: 8, color: T.dim, letterSpacing: '0.1em' }}>SHEET A-01 / 14</div>
    </div>
  );
}
function TKC02_Signin() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: T.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: T.sans, color: T.ink, backgroundImage: 'linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px)', backgroundSize: '14px 14px' }}>
      <div style={{ width: 230, padding: 16, border: '2px solid ' + T.ink, background: T.bg, position: 'relative' }}>
        <div style={dim10}>SECURE ACCESS · DRAWING A-00</div>
        <div style={{ fontSize: 15, fontWeight: 700, marginTop: 4, letterSpacing: '-0.005em', textTransform: 'uppercase' }}>SIGN-IN</div>
        <div style={{ marginTop: 12, padding: '5px 8px', borderBottom: '1px solid ' + T.ink, fontFamily: T.mono, fontSize: 10 }}>marcus@cornerstone.cap</div>
        <div style={{ marginTop: 12, padding: '8px 10px', background: T.ink, color: T.bg, textAlign: 'center', fontFamily: T.mono, fontSize: 10, fontWeight: 700, letterSpacing: '0.1em' }}>REQUEST KEY →</div>
        {/* Dimension line decoration */}
        <svg style={{ position: 'absolute', top: -10, left: 0, right: 0, height: 8 }} viewBox="0 0 230 8" preserveAspectRatio="none">
          <line x1="0" y1="4" x2="230" y2="4" stroke={T.ink} strokeWidth="0.5" />
          <line x1="0" y1="0" x2="0" y2="8" stroke={T.ink} strokeWidth="0.5" /><line x1="230" y1="0" x2="230" y2="8" stroke={T.ink} strokeWidth="0.5" />
        </svg>
      </div>
    </div>
  );
}
function TKC03_Actors() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: T.bg, padding: 10, fontFamily: T.sans, color: T.ink }}>
      <div style={dim10}>// ROLES · 08 · DRAWING A-03</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6, marginTop: 6 }}>
        {TPL_SAMPLE.actors.map((a, i) => (
          <div key={i} style={{ padding: 6, border: '1px solid ' + T.ink, position: 'relative' }}>
            <div style={{ width: 22, height: 22, borderRadius: '50%', background: i === 0 ? T.ink : T.bg, border: '1px solid ' + T.ink, color: i === 0 ? T.bg : T.ink, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: T.mono, fontSize: 9, fontWeight: 700, margin: '0 auto' }}>{a[0]}</div>
            <div style={{ fontFamily: T.mono, fontSize: 9, textAlign: 'center', marginTop: 4, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{a[2].slice(0, 9)}</div>
            <div style={{ fontFamily: T.mono, fontSize: 7.5, color: T.dim, textAlign: 'center' }}>· REF {i + 1}</div>
            {i === 0 && <div style={{ position: 'absolute', top: -7, right: -7, width: 14, height: 14, borderRadius: '50%', background: T.ink, color: T.bg, fontFamily: T.mono, fontSize: 8, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>1</div>}
          </div>
        ))}
      </div>
    </div>
  );
}
function TKC04_Home() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: T.bg, fontFamily: T.sans, color: T.ink, backgroundImage: 'linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px)', backgroundSize: '14px 14px' }}>
      <svg viewBox="0 0 340 200" style={{ width: '100%', height: '100%' }}>
        <line x1="30" y1="40" x2="310" y2="40" stroke={T.ink} strokeWidth="0.5" />
        <line x1="30" y1="34" x2="30" y2="46" stroke={T.ink} strokeWidth="0.5" />
        <line x1="310" y1="34" x2="310" y2="46" stroke={T.ink} strokeWidth="0.5" />
        <text x="170" y="32" textAnchor="middle" fontFamily={T.mono} fontSize="9" fill={T.ink}>$ 62,600,000 · TOTAL EXPOSURE</text>
        {/* Four bars representing distribution */}
        {[[30, 80, 120, 90], [120, 80, 90, 70], [210, 80, 60, 50], [270, 80, 40, 30]].map((b, i) => (
          <g key={i}>
            <rect x={b[0]} y={b[1]} width={b[2]} height="50" fill={T.fill} stroke={T.ink} strokeWidth="0.6" />
            <text x={b[0] + b[2] / 2} y={b[1] + 70} textAnchor="middle" fontFamily={T.mono} fontSize="8" fill={T.ink}>${b[3]}K</text>
          </g>
        ))}
        <line x1="30" y1="155" x2="270" y2="155" stroke={T.ink} strokeWidth="0.5" />
        <line x1="30" y1="148" x2="30" y2="162" stroke={T.ink} strokeWidth="0.5" /><line x1="270" y1="148" x2="270" y2="162" stroke={T.ink} strokeWidth="0.5" />
        <text x="150" y="170" textAnchor="middle" fontFamily={T.mono} fontSize="9" fill={T.ink}>$127,800 RELEASED MTD</text>
      </svg>
      <div style={{ position: 'absolute', bottom: 8, right: 10, fontFamily: T.mono, fontSize: 8, color: T.dim, letterSpacing: '0.1em' }}>SCALE NTS</div>
    </div>
  );
}
function TKC05_List() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: T.bg, fontFamily: T.sans, color: T.ink }}>
      <div style={{ padding: '6px 12px', borderBottom: '2px solid ' + T.ink, fontFamily: T.mono, fontSize: 9, letterSpacing: '0.08em', textTransform: 'uppercase' }}>// PARTS LIST · 08 ITEMS</div>
      <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: T.mono, fontSize: 10 }}>
        <thead>
          <tr style={{ borderBottom: '1px solid ' + T.ink }}>
            {['#','PART NO.','DESCRIPTION','QTY','STATUS'].map((h, i) => (<th key={i} style={{ padding: '5px 10px', textAlign: i === 3 ? 'right' : 'left', fontSize: 8.5, fontWeight: 700, letterSpacing: '0.08em' }}>{h}</th>))}
          </tr>
        </thead>
        <tbody>
          {TPL_SAMPLE.draws.map((d, i) => (
            <tr key={d[0]} style={{ borderBottom: '1px solid ' + T.ink }}>
              <td style={{ padding: '4px 10px', color: T.dim }}>{String(i+1).padStart(2,'0')}</td>
              <td style={{ padding: '4px 10px' }}>{d[0]}</td>
              <td style={{ padding: '4px 10px' }}>{d[1].toUpperCase()}</td>
              <td style={{ padding: '4px 10px', textAlign: 'right' }}>{d[2]}</td>
              <td style={{ padding: '4px 10px', textTransform: 'uppercase', letterSpacing: '0.04em' }}>{d[3]}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
function TKC06_Detail() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: T.bg, fontFamily: T.sans, color: T.ink, backgroundImage: 'linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px)', backgroundSize: '14px 14px' }}>
      <svg viewBox="0 0 320 200" style={{ width: '100%', height: '100%' }}>
        {/* Isometric block */}
        <polygon points="100,80 200,80 200,140 100,140" fill="white" stroke={T.ink} strokeWidth="0.8" />
        <polygon points="100,80 130,60 230,60 200,80" fill="white" stroke={T.ink} strokeWidth="0.8" />
        <polygon points="200,80 230,60 230,120 200,140" fill="white" stroke={T.ink} strokeWidth="0.8" />
        {/* Dimensions */}
        <line x1="100" y1="160" x2="200" y2="160" stroke={T.ink} strokeWidth="0.5" />
        <line x1="100" y1="155" x2="100" y2="165" stroke={T.ink} strokeWidth="0.5" />
        <line x1="200" y1="155" x2="200" y2="165" stroke={T.ink} strokeWidth="0.5" />
        <text x="150" y="174" textAnchor="middle" fontFamily={T.mono} fontSize="8" fill={T.ink}>$142,000</text>
        <line x1="220" y1="80" x2="240" y2="80" stroke={T.ink} strokeWidth="0.5" /><line x1="220" y1="140" x2="240" y2="140" stroke={T.ink} strokeWidth="0.5" />
        <line x1="240" y1="80" x2="240" y2="140" stroke={T.ink} strokeWidth="0.5" />
        <text x="250" y="113" fontFamily={T.mono} fontSize="8" fill={T.ink}>76%</text>
        {/* Callouts */}
        <line x1="150" y1="80" x2="150" y2="40" stroke={T.ink} strokeWidth="0.4" />
        <circle cx="150" cy="34" r="9" fill="white" stroke={T.ink} strokeWidth="0.6" />
        <text x="150" y="37" textAnchor="middle" fontFamily={T.mono} fontSize="9" fontWeight="700" fill={T.ink}>1</text>
        <text x="165" y="32" fontFamily={T.mono} fontSize="8" fill={T.ink}>DRAW-2031 · APP 07</text>
      </svg>
      <div style={{ position: 'absolute', bottom: 8, right: 10, fontFamily: T.mono, fontSize: 8, color: T.dim }}>SCALE 1:1000 · NTS</div>
    </div>
  );
}
function TKC07_Form() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: T.bg, padding: 10, fontFamily: T.sans, color: T.ink }}>
      <div style={dim10}>// REVISION REQUEST · STAGE 03 / 05</div>
      <div style={{ marginTop: 8, display: 'flex' }}>
        {['PROJ','GC','SOV','WVR','SUB'].map((s, i, arr) => (
          <div key={s} style={{ flex: 1, padding: 4, border: '1px solid ' + T.ink, borderRight: i === arr.length - 1 ? '1px solid ' + T.ink : 'none', background: i === 2 ? T.ink : (i < 2 ? T.bg : T.bg), color: i === 2 ? T.bg : T.ink, fontFamily: T.mono, fontSize: 9, fontWeight: 700, textAlign: 'center', letterSpacing: '0.04em' }}>
            {i < 2 ? '✓ ' : ''}{s}
          </div>
        ))}
      </div>
      <div style={{ marginTop: 12, border: '1px solid ' + T.ink, padding: 0 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '40px 1fr 80px', borderBottom: '1px solid ' + T.ink, background: T.ink, color: T.bg, fontFamily: T.mono, fontSize: 8, padding: '3px 6px', letterSpacing: '0.08em' }}>
          <span>#</span><span>DESCRIPTION</span><span style={{ textAlign: 'right' }}>QTY · $</span>
        </div>
        {[['03','CONCRETE','$ 18,400'],['04','MASONRY','$ 22,800'],['05','STEEL','$ 31,200']].map((r, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '40px 1fr 80px', padding: '4px 6px', borderBottom: i === 2 ? 'none' : '1px solid ' + T.ink, fontFamily: T.mono, fontSize: 10 }}>
            <span>{r[0]}</span><span>{r[1]}</span><span style={{ textAlign: 'right' }}>{r[2]}</span>
          </div>
        ))}
      </div>
      <div style={{ position: 'absolute', bottom: 8, right: 12, padding: '4px 10px', background: T.ink, color: T.bg, fontFamily: T.mono, fontSize: 9.5, fontWeight: 700, letterSpacing: '0.08em' }}>NEXT →</div>
    </div>
  );
}
function TKC08_Workflow() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: T.bg, padding: 10, fontFamily: T.sans, color: T.ink }}>
      <div style={dim10}>// ASSEMBLY DIAGRAM · 5 NODES</div>
      <svg viewBox="0 0 320 140" style={{ width: '100%', height: '90%', marginTop: 4 }}>
        {['GC','INSP','LOAN','OWN','FIN'].map((s, i) => (
          <g key={i}>
            <rect x={20 + i * 60} y="55" width="40" height="32" fill={i < 2 ? T.ink : T.bg} stroke={T.ink} strokeWidth="0.8" />
            <text x={40 + i * 60} y="76" textAnchor="middle" fontFamily={T.mono} fontSize="10" fontWeight="700" fill={i < 2 ? T.bg : T.ink}>{s}</text>
            {i < 4 && <line x1={60 + i * 60} y1="71" x2={80 + i * 60} y2="71" stroke={T.ink} strokeWidth="0.8" markerEnd="url(#tk-a)" />}
            <circle cx={40 + i * 60} cy="40" r="9" fill="white" stroke={T.ink} strokeWidth="0.6" />
            <text x={40 + i * 60} y="44" textAnchor="middle" fontFamily={T.mono} fontSize="9" fontWeight="700" fill={T.ink}>{i + 1}</text>
          </g>
        ))}
        <defs><marker id="tk-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={T.ink} /></marker></defs>
        <line x1="20" y1="105" x2="300" y2="105" stroke={T.ink} strokeWidth="0.5" />
        <line x1="20" y1="100" x2="20" y2="110" stroke={T.ink} strokeWidth="0.5" /><line x1="300" y1="100" x2="300" y2="110" stroke={T.ink} strokeWidth="0.5" />
        <text x="160" y="118" textAnchor="middle" fontFamily={T.mono} fontSize="8" fill={T.ink}>5 STAGES · 04:22:18 SLA</text>
      </svg>
    </div>
  );
}
function TKC09_Audit() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: T.bg, padding: 10, fontFamily: T.sans, color: T.ink }}>
      <div style={dim10}>// REVISION HISTORY · 5</div>
      <div style={{ marginTop: 6, border: '1px solid ' + T.ink }}>
        <div style={{ display: 'grid', gridTemplateColumns: '50px 70px 1fr 80px', background: T.ink, color: T.bg, fontFamily: T.mono, fontSize: 8, padding: '3px 6px', letterSpacing: '0.06em' }}>
          <span>REV</span><span>DATE</span><span>CHANGE</span><span>BY</span>
        </div>
        {TPL_SAMPLE.audit.map((a, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '50px 70px 1fr 80px', padding: '3px 6px', borderTop: i === 0 ? 'none' : '1px solid ' + T.ink, fontFamily: T.mono, fontSize: 9 }}>
            <span style={{ fontWeight: 700 }}>R-0{5 - i}</span>
            <span style={{ color: T.dim }}>05·{15 - i}</span>
            <span>{a[1]}</span>
            <span style={{ color: T.dim, textAlign: 'right' }}>{a[2].split(' ')[1] || a[2]}</span>
          </div>
        ))}
      </div>
    </div>
  );
}
function TKC10_Output() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: T.bg, fontFamily: T.sans, color: T.ink, backgroundImage: 'linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px)', backgroundSize: '14px 14px', padding: 10 }}>
      <div style={dim10}>// DRAWING G-702 / RIVERLINE · SCALE NTS</div>
      <svg viewBox="0 0 340 130" style={{ width: '100%', marginTop: 4 }}>
        {[[20, 80, 100], [120, 92, 75], [195, 85, 65], [260, 78, 50]].map((b, i) => (
          <g key={i}>
            <rect x={b[0]} y={50} width={b[2]} height="34" fill="white" stroke={T.ink} strokeWidth="0.8" />
            <rect x={b[0]} y={50} width={b[2] * (b[1] / 100)} height="34" fill={T.fill} />
            <text x={b[0] + b[2] / 2} y="98" textAnchor="middle" fontFamily={T.mono} fontSize="8" fill={T.ink}>{b[1]}%</text>
          </g>
        ))}
        <line x1="20" y1="38" x2="310" y2="38" stroke={T.ink} strokeWidth="0.5" />
        <line x1="20" y1="32" x2="20" y2="44" stroke={T.ink} strokeWidth="0.5" /><line x1="310" y1="32" x2="310" y2="44" stroke={T.ink} strokeWidth="0.5" />
        <text x="165" y="30" textAnchor="middle" fontFamily={T.mono} fontSize="9" fill={T.ink}>$2,377,000 · CONTRACT</text>
      </svg>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', borderTop: '1px solid ' + T.ink, marginTop: 4 }}>
        {[['TITLE','G702 · APP 07'],['SCALE','NTS'],['SHEET','A-07 / 4']].map(([l, v], i) => (
          <div key={l} style={{ padding: '3px 6px', borderRight: i === 2 ? 'none' : '1px solid ' + T.ink, fontFamily: T.mono, fontSize: 8 }}>
            <div style={{ color: T.dim, letterSpacing: '0.06em' }}>{l}</div><div style={{ fontWeight: 700 }}>{v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}
function TKC11_Settings() {
  const roles = ['ADMIN','LOAN','GC','SUB','INSP','OWNER'];
  return (
    <div style={{ position: 'absolute', inset: 0, background: T.bg, padding: 10, fontFamily: T.sans, color: T.ink }}>
      <div style={dim10}>// TOLERANCE TABLE · PERMISSIONS</div>
      <div style={{ marginTop: 6, border: '1px solid ' + T.ink }}>
        <div style={{ display: 'grid', gridTemplateColumns: '80px repeat(4, 1fr)', background: T.ink, color: T.bg, fontFamily: T.mono, fontSize: 8, padding: '3px 6px', letterSpacing: '0.06em' }}>
          <span>ROLE</span><span style={{ textAlign: 'center' }}>READ</span><span style={{ textAlign: 'center' }}>SUBMIT</span><span style={{ textAlign: 'center' }}>APPROVE</span><span style={{ textAlign: 'center' }}>RELEASE</span>
        </div>
        {roles.map((r, i) => (
          <div key={r} style={{ display: 'grid', gridTemplateColumns: '80px repeat(4, 1fr)', padding: '3px 6px', borderTop: i === 0 ? 'none' : '1px solid ' + T.ink, fontFamily: T.mono, fontSize: 9, alignItems: 'center' }}>
            <span>{r}</span>
            {[0,1,2,3].map(j => {
              const g = (i === 0) || (j === 0) || (i < 3 && j < 3) || (i === 5 && j === 3);
              return <span key={j} style={{ textAlign: 'center', fontWeight: 700 }}>{g ? '✓' : '·'}</span>;
            })}
          </div>
        ))}
      </div>
    </div>
  );
}
function TKC12_Empty() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: T.bg, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 16, fontFamily: T.sans, color: T.ink, textAlign: 'center', backgroundImage: 'linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px)', backgroundSize: '14px 14px' }}>
      <div style={{ width: 130, height: 80, border: '1px dashed ' + T.ink, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: T.mono, fontSize: 8, color: T.dim }}>· NO DATA ·</div>
      <div style={{ fontSize: 14, fontWeight: 700, marginTop: 14, letterSpacing: '-0.005em', textTransform: 'uppercase' }}>Drawing blank.</div>
      <div style={{ fontFamily: T.mono, fontSize: 10, color: T.dim, marginTop: 4 }}>// PLACE FIRST PART REFERENCE</div>
      <span style={{ marginTop: 10, padding: '5px 14px', border: '2px solid ' + T.ink, background: T.ink, color: T.bg, fontFamily: T.mono, fontSize: 10, fontWeight: 700, letterSpacing: '0.1em' }}>+ INSERT PART</span>
    </div>
  );
}

function TemplateDetailTechnical() {
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: '#f6f4ef', overflow: 'auto', fontFamily: 'IBM Plex Sans, system-ui', color: '#1a1814' }}>
      <TplNav />
      <TplBreadcrumb tplId="technical" />

      <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: T.mono, fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#6b6557' }}>// 04 of 06 · template</span>
            <span style={{ padding: '2px 8px', borderRadius: 99, background: '#fbfaf7', border: '1px solid #d8d4c8', fontFamily: T.mono, fontSize: 10, color: T.ink, display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 6, height: 6, borderRadius: '50%', background: T.ink }} /> engineering play</span>
          </div>
          <h1 style={{ font: '500 64px "IBM Plex Serif", serif', letterSpacing: '-0.025em', lineHeight: 1, marginTop: 12 }}>Technical.</h1>
          <div style={{ font: '400 22px "IBM Plex Serif", serif', fontStyle: 'italic', color: '#6b6557', marginTop: 6, lineHeight: 1.2 }}>Engineering drawing. Dimensioned. Annotated. Confident.</div>
          <p style={{ marginTop: 16, fontSize: 14.5, lineHeight: 1.55, color: '#3a362d', maxWidth: 540 }}>
            Technical renders every uStack app as a piece of engineering documentation. Hairline grids, dimension lines with tick marks, numbered callouts in circled balloons, title blocks at the bottom right, ALL CAPS labels.
            No fills except black-on-white. Helvetica + IBM Plex Mono. Drafted, not designed.
            Speaks the native language of manufacturers, builders, inspectors, and anyone whose work product is a drawing.
          </p>
          <TplBestForPills items={['JobShop OS', 'PunchOps', 'DrawRequest (alt)', 'InspectKit (alt)']} />
        </div>
        <div style={{ padding: '18px', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#f0eee9' }}>
          <div style={{ width: '100%', height: 380, borderRadius: 6, overflow: 'hidden', background: T.bg, boxShadow: '0 16px 44px rgba(0,0,0,0.16)', position: 'relative', backgroundImage: 'linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px)', backgroundSize: '20px 20px', border: '1px solid ' + T.ink }}>
            <svg viewBox="0 0 600 340" style={{ width: '100%', height: '100%' }}>
              <line x1="40" y1="34" x2="560" y2="34" stroke={T.ink} strokeWidth="0.6" />
              <line x1="40" y1="28" x2="40" y2="40" stroke={T.ink} strokeWidth="0.6" /><line x1="560" y1="28" x2="560" y2="40" stroke={T.ink} strokeWidth="0.6" />
              <text x="300" y="26" textAnchor="middle" fontFamily={T.mono} fontSize="11" fill={T.ink}>$ 2,377,000 · TOTAL CONTRACT SUM</text>
              {/* Bars */}
              {(() => {
                const lines = [['01','GEN COND',100,84],['02','SITE WORK',100,220],['03','CONCRETE',92,410],['04','MASONRY',78,165],['05','STEEL',85,540],['06','DRYWALL',82,92],['07','MEP',64,380],['08','ROOFING',100,95],['09','GLAZING',55,145]];
                let acc = 0; const xS = 40, xE = 560; const total = lines.reduce((s,l)=>s+l[3],0); const sc = (xE-xS)/total;
                return lines.map((l, i) => {
                  const x = xS + acc * sc; const w = l[3] * sc; acc += l[3]; const y = 120; const h = 90; const cw = w * (l[2]/100);
                  return (
                    <g key={i}>
                      <rect x={x} y={y} width={w} height={h} fill="white" stroke={T.ink} strokeWidth="0.8" />
                      <rect x={x} y={y} width={cw} height={h} fill={T.fill} />
                      <text x={x + 4} y={y - 8} fontFamily={T.mono} fontSize="9" fill={T.ink}>{l[0]}</text>
                      <text x={x + w/2} y={y + h + 18} textAnchor="middle" fontFamily={T.mono} fontSize="9" fill={T.ink}>{l[2]}%</text>
                      <line x1={x + w/2} y1={y + h} x2={x + w/2} y2={y + h + 6} stroke={T.ink} strokeWidth="0.5" />
                    </g>
                  );
                });
              })()}
              <line x1="40" y1="240" x2="430" y2="240" stroke={T.ink} strokeWidth="0.5" />
              <line x1="40" y1="235" x2="40" y2="245" stroke={T.ink} strokeWidth="0.5" /><line x1="430" y1="235" x2="430" y2="245" stroke={T.ink} strokeWidth="0.5" />
              <text x="235" y="258" textAnchor="middle" fontFamily={T.mono} fontSize="11" fill={T.ink}>$1,761,690 COMPLETED · 76%</text>
              <line x1="430" y1="240" x2="560" y2="240" stroke={T.ink} strokeWidth="0.5" strokeDasharray="4 3" />
              <text x="495" y="258" textAnchor="middle" fontFamily={T.mono} fontSize="11" fill={T.ink}>+ $142,000 THIS DRAW</text>
              <line x1="260" y1="120" x2="260" y2="80" stroke={T.ink} strokeWidth="0.4" />
              <circle cx="260" cy="78" r="11" fill="white" stroke={T.ink} strokeWidth="0.8" />
              <text x="260" y="82" textAnchor="middle" fontFamily={T.mono} fontSize="10" fontWeight="700" fill={T.ink}>1</text>
              <text x="275" y="74" fontFamily={T.mono} fontSize="10" fill={T.ink}>CONCRETE · 92% · $18.4K</text>
            </svg>
            <div style={{ position: 'absolute', bottom: 0, right: 0, display: 'grid', gridTemplateColumns: '90px 1fr 90px 50px 80px', borderTop: '2px solid ' + T.ink, width: '100%' }}>
              {[['DRAWING','G702 · RIVERLINE'],['CLIENT','CORNERSTONE CAPITAL'],['DRAWN','M. STERLING'],['SCALE','NTS'],['SHEET','A-07 / 4']].map(([l, v], i, arr) => (
                <div key={l} style={{ padding: '6px 8px', borderRight: i === arr.length - 1 ? 0 : '1px solid ' + T.ink, fontFamily: T.mono, fontSize: 8, background: T.bg }}>
                  <div style={{ color: T.dim, letterSpacing: '0.08em' }}>{l}</div><div style={{ fontWeight: 700, marginTop: 1 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <TplWhy title="When the work product is a drawing, the app should look like one." reasons={[
        ['Manufacturers + builders trust drafted work.','Title blocks. Revision numbers. Sheet counts. Customers in trades have spent decades reading drawings — they read software the same way when given the chance.'],
        ['Dimensioned numbers carry semantic weight.', 'A tick-mark span between two values says "this is the gap" louder than any bar chart. Technical earns its tick marks.'],
        ['No color until necessary.',                  'Black on white. The only color you spend is when a variance escalates — and then it lands like a real exception.'],
      ]} />

      <TplInProduction items={[
        { name: 'JobShop OS', industry: 'Small manufacturing', url: 'jobshop.ustack.ai',   actors: 8, signature: 'Work-order routing · machine load · scrap rates · cycle time', accent: T.ink,
          preview: (
            <div style={{ position: 'absolute', inset: 0, background: T.bg, fontFamily: T.sans, color: T.ink, padding: 8, backgroundImage: 'linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px)', backgroundSize: '12px 12px' }}>
              <div style={{ fontFamily: T.mono, fontSize: 8, letterSpacing: '0.1em', color: T.dim }}>WO-208 · TRAVELER · SHEET 1 / 3</div>
              <svg viewBox="0 0 280 110" style={{ width: '100%', marginTop: 4 }}>
                {['MILL-1','LATHE-2','WELD-3','QA-4'].map((m, i) => (
                  <g key={m}>
                    <text x="10" y={26 + i*22} fontFamily={T.mono} fontSize="9" fill={T.ink}>{m}</text>
                    <rect x="80" y={18 + i*22} width="180" height="10" fill="white" stroke={T.ink} strokeWidth="0.6" />
                    <rect x="80" y={18 + i*22} width={180 * [0.82, 0.64, 1.0, 0.38][i]} height="10" fill={T.fill} />
                    <text x="266" y={26 + i*22} fontFamily={T.mono} fontSize="9" fill={T.ink}>{[82,64,100,38][i]}%</text>
                  </g>
                ))}
              </svg>
            </div>
          ) },
        { name: 'PunchOps',     industry: 'Punch list + QA',   url: 'punchops.ustack.ai',   actors: 7, signature: 'Unit-level checklists · trade callouts · reinspection ledger', accent: T.ink,
          preview: (
            <div style={{ position: 'absolute', inset: 0, background: T.bg, fontFamily: T.sans, color: T.ink, padding: 10 }}>
              <div style={{ fontFamily: T.mono, fontSize: 8, letterSpacing: '0.1em', color: T.dim }}>UNIT A-302 · PUNCH · 14 ITEMS</div>
              <table style={{ width: '100%', marginTop: 6, fontFamily: T.mono, fontSize: 9, borderCollapse: 'collapse' }}>
                <thead><tr style={{ borderBottom: '1px solid ' + T.ink }}><th style={{ textAlign: 'left', padding: 2, fontSize: 7 }}>#</th><th style={{ textAlign: 'left', padding: 2, fontSize: 7 }}>ITEM</th><th style={{ textAlign: 'left', padding: 2, fontSize: 7 }}>TRADE</th><th style={{ padding: 2 }}>ST</th></tr></thead>
                <tbody>
                  {[['01','Door swing · binds','CARP','✓'],['02','GFCI · kitchen','ELEC','·'],['03','Caulk · base','PAINT','·'],['04','Vanity · level','CARP','✓'],['05','Drain · stop','PLMB','·']].map(r => (
                    <tr key={r[0]} style={{ borderBottom: '1px solid ' + T.ink }}><td style={{ padding: 2 }}>{r[0]}</td><td style={{ padding: 2 }}>{r[1]}</td><td style={{ padding: 2 }}>{r[2]}</td><td style={{ padding: 2, textAlign: 'center', fontWeight: 700 }}>{r[3]}</td></tr>
                  ))}
                </tbody>
              </table>
            </div>
          ) },
        { name: 'DrawRequest', industry: 'Construction draws · alt', url: 'drawrequest.ustack.ai', actors: 8, signature: 'G702 as engineering drawing · SoV as dimensioned bars', accent: T.ink,
          preview: (
            <div style={{ position: 'absolute', inset: 0, background: T.bg, fontFamily: T.sans, color: T.ink, padding: 8, backgroundImage: 'linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px)', backgroundSize: '12px 12px' }}>
              <div style={{ fontFamily: T.mono, fontSize: 8, letterSpacing: '0.1em', color: T.dim }}>G702 · APP 07 · RIVERLINE</div>
              <svg viewBox="0 0 280 120" style={{ width: '100%', marginTop: 4 }}>
                <line x1="20" y1="20" x2="260" y2="20" stroke={T.ink} strokeWidth="0.5" />
                <line x1="20" y1="14" x2="20" y2="26" stroke={T.ink} strokeWidth="0.5" /><line x1="260" y1="14" x2="260" y2="26" stroke={T.ink} strokeWidth="0.5" />
                <text x="140" y="14" textAnchor="middle" fontFamily={T.mono} fontSize="8" fill={T.ink}>$2,377,000</text>
                {[[20,60,80],[100,72,68],[168,68,52],[220,55,40]].map((b, i) => (<g key={i}><rect x={b[0]} y={50} width={b[2]} height="40" fill="white" stroke={T.ink} strokeWidth="0.6" /><rect x={b[0]} y={50} width={b[2] * (b[1]/100)} height="40" fill={T.fill} /></g>))}
                <text x="140" y="110" textAnchor="middle" fontFamily={T.mono} fontSize="8" fill={T.ink}>76% · $1.76M COMPLETED</text>
              </svg>
            </div>
          ) },
      ]} />

      <TplComponentsGrid title="Twelve canonical components — every one dimensioned and annotated.">
        <TplCComp no="01" name="App shell"        sub="title block + tab strip">      <TKC01_Shell /></TplCComp>
        <TplCComp no="02" name="Sign-in"          sub="drawing A-00">                  <TKC02_Signin /></TplCComp>
        <TplCComp no="03" name="Persona switcher" sub="referenced parts">              <TKC03_Actors /></TplCComp>
        <TplCComp no="04" name="Home · dashboard" sub="exposure bar w/ dims">          <TKC04_Home /></TplCComp>
        <TplCComp no="05" name="Object list"      sub="parts list table">              <TKC05_List /></TplCComp>
        <TplCComp no="06" name="Object detail"    sub="isometric + callout">           <TKC06_Detail /></TplCComp>
        <TplCComp no="07" name="Form · multi-step"sub="revision request">              <TKC07_Form /></TplCComp>
        <TplCComp no="08" name="Workflow chain"   sub="assembly diagram">              <TKC08_Workflow /></TplCComp>
        <TplCComp no="09" name="Audit feed"       sub="revision history">              <TKC09_Audit /></TplCComp>
        <TplCComp no="10" name="Generated output" sub="drawing + title block">         <TKC10_Output /></TplCComp>
        <TplCComp no="11" name="Settings · admin" sub="tolerance table">               <TKC11_Settings /></TplCComp>
        <TplCComp no="12" name="Empty state"      sub="drawing blank">                 <TKC12_Empty /></TplCComp>
      </TplComponentsGrid>

      <TplTokens
        tokens={[
          { kind: 'TYPE',     v: 'Helvetica Neue + IBM Plex Mono', sub: 'ALL CAPS labels · mono for dims · sans for body' },
          { kind: 'COLOR',    v: '#fafaf6 paper + #0a0a0a ink',    sub: 'no fills · color reserved for escalation' },
          { kind: 'DENSITY',  v: 'Dimensioned · ruled · annotated', sub: 'tick marks · leader lines · grid background' },
          { kind: 'CHROME',   v: 'Title block · callouts · sheet refs', sub: 'every screen owns a sheet number' },
          { kind: 'TONE',     v: 'Drafted · precise · authoritative', sub: 'feels engineered, not designed' },
        ]}
        swatches={[
          ['paper',  T.bg],
          ['ink',    T.ink],
          ['fill',   T.fill],
          ['grid',   T.grid],
          ['dim',    T.dim],
        ]}
      />

      <TplCTA title="Build your app in Technical, or browse the other five." ctaColor={T.ink} ctaLabel="Build in Technical →" />
      <TplFooter text="© 2026 ustack · technical template · all 12 components live" />
    </div>
  );
}

window.TemplateDetailTechnical = TemplateDetailTechnical;