// Icons + shared primitives
const Ico = ({name, size=24, stroke=1.5, style}) => {
  const common = {width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round', style};
  const paths = {
    whatsapp: <path d="M20.52 3.48A11.87 11.87 0 0 0 12 0C5.37 0 0 5.37 0 12c0 2.11.55 4.16 1.6 5.98L0 24l6.22-1.63A11.96 11.96 0 0 0 12 24c6.63 0 12-5.37 12-12 0-3.2-1.24-6.2-3.48-8.52zM12 22a9.9 9.9 0 0 1-5.05-1.39l-.36-.22-3.69.97.98-3.6-.23-.37A9.94 9.94 0 1 1 22 12c0 5.52-4.48 10-10 10z" fill="currentColor" stroke="none"/>,
    arrow: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18"/></>,
    check: <polyline points="5 12 10 17 19 8"/>,
    x: <><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></>,
    plus: <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>,
    chevron: <polyline points="9 6 15 12 9 18"/>,
    chevdown: <polyline points="6 9 12 15 18 9"/>,
    helmet: <><path d="M4 16v-2a8 8 0 0 1 16 0v2"/><rect x="2" y="16" width="20" height="3" rx="1"/><path d="M12 6v4"/></>,
    store: <><path d="M3 8l1-4h16l1 4"/><path d="M4 8v12h16V8"/><path d="M9 20v-6h6v6"/></>,
    factory: <><path d="M3 20V10l5 3V9l5 3V9l6 4v7z"/><path d="M3 20h18"/></>,
    blueprint: <><rect x="3" y="4" width="18" height="16" rx="1"/><path d="M3 9h18M8 4v16"/></>,
    chat: <><path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-4 4v-4H6a2 2 0 0 1-2-2z"/></>,
    doc: <><path d="M6 2h9l4 4v16H6z"/><polyline points="14 2 14 7 19 7"/><line x1="9" y1="12" x2="16" y2="12"/><line x1="9" y1="16" x2="16" y2="16"/></>,
    brain: <><path d="M9 4a3 3 0 0 0-3 3v1a3 3 0 0 0 0 6 3 3 0 0 0 3 3v1a3 3 0 0 0 3 3"/><path d="M15 4a3 3 0 0 1 3 3v1a3 3 0 0 1 0 6 3 3 0 0 1-3 3v1a3 3 0 0 1-3 3"/><path d="M12 4v16"/></>,
    database: <><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5"/><path d="M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/></>,
    handshake: <><path d="M3 12l4-4 4 4 2-2 4 4-4 4"/><path d="M13 10l3-3 5 5"/></>,
    spark: <><path d="M12 2v4M12 18v4M4 12H2M22 12h-2M5 5l3 3M16 16l3 3M5 19l3-3M16 8l3-3"/></>,
    lock: <><rect x="5" y="11" width="14" height="10" rx="1"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></>,
    cube: <><path d="M12 2l9 5v10l-9 5-9-5V7z"/><path d="M3 7l9 5 9-5M12 12v10"/></>,
    chart: <><path d="M3 3v18h18"/><polyline points="7 14 11 10 14 13 20 6"/></>,
    crown: <><path d="M3 18h18l-2-10-5 4-3-6-3 6-5-4z"/></>,
    shield: <><path d="M12 2l8 3v7c0 5-4 8-8 10-4-2-8-5-8-10V5z"/></>,
    money: <><rect x="3" y="6" width="18" height="12" rx="1"/><circle cx="12" cy="12" r="3"/></>,
    phone: <><rect x="7" y="2" width="10" height="20" rx="2"/><line x1="11" y1="18" x2="13" y2="18"/></>,
    cart: <><circle cx="9" cy="20" r="1.5"/><circle cx="17" cy="20" r="1.5"/><path d="M3 3h3l2.5 12h11l2-8H7"/></>,
    clock: <><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 14"/></>,
    globe: <><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></>,
    bolt: <polygon points="13 3 4 14 11 14 10 21 20 10 13 10"/>,
    upload: <><path d="M12 16V4M7 9l5-5 5 5"/><path d="M4 20h16"/></>,
    api: <><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M9 9l-3 3 3 3M15 9l3 3-3 3"/></>,
    send: <><polygon points="3 3 21 12 3 21 8 12 3 3"/></>,
    medal: <><circle cx="12" cy="14" r="6"/><polyline points="8 4 12 12 16 4"/></>,
  };
  return <svg {...common}>{paths[name] || paths.arrow}</svg>;
};

const Stamp = ({children, variant='default', className=''}) => {
  const cls = variant === 'yellow' ? 'stamp stamp-yellow' : variant === 'orange' ? 'stamp stamp-orange' : variant === 'navy' ? 'stamp stamp-navy' : 'stamp';
  return <span className={`${cls} ${className}`}>{children}</span>;
};

const SectionLabel = ({num, children}) => (
  <div className="section-label">
    {num && <span>{num}</span>}{num && '·'} {children}
  </div>
);

const Corners = () => (
  <>
    <span className="bc tl"></span><span className="bc tr"></span>
    <span className="bc bl"></span><span className="bc br"></span>
  </>
);

// Dimension line — a blueprint-style "————" with a tick at each end
const DimLine = ({label, style}) => (
  <div style={{position:'relative', display:'flex', alignItems:'center', color:'var(--muted)', fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.08em', ...style}}>
    <div style={{width:1, height:8, background:'currentColor'}}></div>
    <div style={{flex:1, height:1, background:'currentColor', margin:'0 6px'}}></div>
    <span>{label}</span>
    <div style={{flex:1, height:1, background:'currentColor', margin:'0 6px'}}></div>
    <div style={{width:1, height:8, background:'currentColor'}}></div>
  </div>
);

Object.assign(window, {Ico, Stamp, SectionLabel, Corners, DimLine});