/* Thumbnail SVG generators - inline minimal abstract art for each post */

window.Thumbs = {
  "thumb-nanite": (
    <svg viewBox="0 0 88 64" xmlns="http://www.w3.org/2000/svg">
      <rect width="88" height="64" fill="#1a1c21"/>
      <g stroke="#4f7cff" strokeWidth="0.6" fill="none" opacity="0.85">
        <polygon points="20,12 44,8 64,18 56,38 28,42 12,28"/>
        <polygon points="44,8 64,18 56,38 44,30"/>
        <polygon points="20,12 12,28 28,42 44,30"/>
        <polygon points="44,30 56,38 28,42"/>
        <polygon points="56,38 76,32 70,52 56,52"/>
        <polygon points="56,52 70,52 64,60 50,58"/>
      </g>
      <circle cx="20" cy="12" r="1.4" fill="#76e3a6"/>
      <circle cx="64" cy="18" r="1.4" fill="#76e3a6"/>
      <circle cx="44" cy="30" r="1.4" fill="#76e3a6"/>
      <circle cx="56" cy="52" r="1.4" fill="#76e3a6"/>
    </svg>
  ),
  "thumb-cluster": (
    <svg viewBox="0 0 88 64" xmlns="http://www.w3.org/2000/svg">
      <rect width="88" height="64" fill="#0e1018"/>
      <g opacity="0.9">
        {Array.from({length: 7}).map((_,i) => Array.from({length: 5}).map((_,j) => (
          <rect key={`${i}-${j}`} x={6 + i*11} y={6 + j*11} width="10" height="10" fill="none" stroke="#2c5cff" strokeWidth="0.4"/>
        )))}
      </g>
      <circle cx="28" cy="18" r="6" fill="#f97316" opacity="0.85"/>
      <circle cx="56" cy="40" r="8" fill="#fbbf24" opacity="0.7"/>
      <circle cx="68" cy="20" r="4" fill="#ec4899" opacity="0.8"/>
      <circle cx="20" cy="46" r="5" fill="#76e3a6" opacity="0.7"/>
    </svg>
  ),
  "thumb-vulkan": (
    <svg viewBox="0 0 88 64" xmlns="http://www.w3.org/2000/svg">
      <rect width="88" height="64" fill="#1a1c21"/>
      <g fontFamily="JetBrains Mono, monospace" fontSize="6" fill="#dc2626" opacity="0.95">
        <text x="6" y="14">vkCmdPipelineBarrier2</text>
        <text x="6" y="26" fill="#7c8290">┌─ srcStageMask</text>
        <text x="6" y="36" fill="#7c8290">├─ dstStageMask</text>
        <text x="6" y="46" fill="#76e3a6">└─ COMPUTE → FRAG</text>
        <text x="6" y="58" fill="#f59e0b">P0 ━ P2  -17% temp</text>
      </g>
    </svg>
  ),
  "thumb-shader": (
    <svg viewBox="0 0 88 64" xmlns="http://www.w3.org/2000/svg">
      <rect width="88" height="64" fill="#14161a"/>
      <g fontFamily="JetBrains Mono, monospace" fontSize="5" fill="#7c8290">
        <text x="4" y="10">14,000</text>
        <text x="58" y="10" fill="#76e3a6">380</text>
      </g>
      <g opacity="0.9">
        <rect x="4" y="14" width="36" height="46" fill="none" stroke="#ef4444" strokeWidth="0.5"/>
        {Array.from({length: 30}).map((_,i) => (
          <rect key={i} x={5 + (i%6)*6} y={16 + Math.floor(i/6)*8} width="4" height="6" fill="#ef4444" opacity={0.3 + (i%5)*0.15}/>
        ))}
        <rect x="48" y="36" width="36" height="24" fill="none" stroke="#76e3a6" strokeWidth="0.5"/>
        {Array.from({length: 6}).map((_,i) => (
          <rect key={i} x={49 + (i%3)*12} y={38 + Math.floor(i/3)*10} width="10" height="8" fill="#76e3a6" opacity="0.7"/>
        ))}
        <path d="M40 30 L48 40" stroke="#fbbf24" strokeWidth="0.6" markerEnd="url(#arr)"/>
      </g>
    </svg>
  ),
  "thumb-ntc": (
    <svg viewBox="0 0 88 64" xmlns="http://www.w3.org/2000/svg">
      <rect width="88" height="64" fill="#1a1c21"/>
      <g>
        <rect x="6" y="10" width="34" height="44" fill="#76b900" opacity="0.7"/>
        <text x="8" y="22" fontFamily="JetBrains Mono" fontSize="6" fill="#0e0f12" fontWeight="700">BC7</text>
        <text x="8" y="50" fontFamily="JetBrains Mono" fontSize="5" fill="#0e0f12">100%</text>
        <rect x="48" y="34" width="34" height="20" fill="#6366f1" opacity="0.85"/>
        <text x="50" y="46" fontFamily="JetBrains Mono" fontSize="6" fill="white" fontWeight="700">NTC</text>
        <text x="50" y="62" fontFamily="JetBrains Mono" fontSize="5" fill="#76e3a6">25%</text>
        <line x1="40" y1="32" x2="48" y2="42" stroke="#76e3a6" strokeWidth="0.6"/>
      </g>
    </svg>
  ),
  "thumb-fsr4": (
    <svg viewBox="0 0 88 64" xmlns="http://www.w3.org/2000/svg">
      <rect width="88" height="64" fill="#0f1014"/>
      <g>
        <rect x="6" y="14" width="20" height="36" fill="#ed1c24" opacity="0.5"/>
        <text x="8" y="58" fontFamily="JetBrains Mono" fontSize="5" fill="#7c8290">1080p</text>
        <path d="M30 32 L42 32" stroke="#76e3a6" strokeWidth="1"/>
        <polygon points="42,29 46,32 42,35" fill="#76e3a6"/>
        <rect x="50" y="6" width="32" height="52" fill="#ed1c24" opacity="0.85"/>
        <text x="52" y="62" fontFamily="JetBrains Mono" fontSize="5" fill="#fff" fontWeight="700">4K · ViT-S</text>
        <text x="52" y="14" fontFamily="JetBrains Mono" fontSize="5" fill="#fff" fontWeight="700">1.8ms</text>
      </g>
    </svg>
  ),
  "thumb-thermal": (
    <svg viewBox="0 0 88 64" xmlns="http://www.w3.org/2000/svg">
      <rect width="88" height="64" fill="#1a1c21"/>
      <defs>
        <linearGradient id="hot" x1="0" x2="0" y1="1" y2="0">
          <stop offset="0%" stopColor="#76e3a6"/>
          <stop offset="50%" stopColor="#fbbf24"/>
          <stop offset="100%" stopColor="#ef4444"/>
        </linearGradient>
      </defs>
      <path d="M6 50 Q 16 48 26 36 T 46 16 L 50 14 L 50 50 Z" fill="#ef4444" opacity="0.4"/>
      <path d="M6 50 Q 16 48 26 36 T 46 16 L 50 14" stroke="#ef4444" strokeWidth="1.2" fill="none"/>
      <path d="M50 50 Q 56 46 62 40 T 82 36 L 82 50 Z" fill="#76e3a6" opacity="0.4"/>
      <path d="M50 14 L 50 50 M 50 50 Q 56 46 62 40 T 82 36" stroke="#76e3a6" strokeWidth="1.2" fill="none" strokeDasharray="2 2"/>
      <text x="6" y="10" fontFamily="JetBrains Mono" fontSize="5" fill="#ef4444">47°C</text>
      <text x="62" y="32" fontFamily="JetBrains Mono" fontSize="5" fill="#76e3a6">41°C</text>
    </svg>
  ),
  "thumb-lumen": (
    <svg viewBox="0 0 88 64" xmlns="http://www.w3.org/2000/svg">
      <rect width="88" height="64" fill="#1a1c21"/>
      <defs>
        <radialGradient id="glow" cx="50%" cy="40%" r="60%">
          <stop offset="0%" stopColor="#fbbf24" stopOpacity="0.7"/>
          <stop offset="60%" stopColor="#0e7490" stopOpacity="0.3"/>
          <stop offset="100%" stopColor="#0e1014" stopOpacity="0"/>
        </radialGradient>
      </defs>
      <rect x="0" y="0" width="88" height="64" fill="url(#glow)"/>
      <polygon points="14,50 30,30 46,50" fill="#0e7490" opacity="0.85"/>
      <polygon points="42,52 54,32 70,52" fill="#0e7490" opacity="0.7"/>
      <polygon points="60,52 74,38 84,52" fill="#0e7490" opacity="0.6"/>
      <circle cx="44" cy="22" r="3" fill="#fbbf24"/>
      <line x1="44" y1="22" x2="32" y2="34" stroke="#fbbf24" strokeWidth="0.4" opacity="0.6"/>
      <line x1="44" y1="22" x2="58" y2="36" stroke="#fbbf24" strokeWidth="0.4" opacity="0.6"/>
    </svg>
  ),
  "thumb-rendergraph": (
    <svg viewBox="0 0 88 64" xmlns="http://www.w3.org/2000/svg">
      <rect width="88" height="64" fill="#14161a"/>
      <g stroke="#a855f7" fill="#1a1c21" strokeWidth="0.5">
        <rect x="6" y="8" width="14" height="8" rx="1"/>
        <rect x="6" y="20" width="14" height="8" rx="1"/>
        <rect x="6" y="32" width="14" height="8" rx="1"/>
        <rect x="6" y="44" width="14" height="8" rx="1"/>
        <rect x="34" y="14" width="14" height="8" rx="1"/>
        <rect x="34" y="32" width="14" height="8" rx="1"/>
        <rect x="62" y="20" width="20" height="8" rx="1" fill="#a855f7"/>
        <rect x="62" y="36" width="20" height="8" rx="1" fill="#a855f7" opacity="0.6"/>
      </g>
      <g stroke="#a855f7" strokeWidth="0.5" fill="none" opacity="0.8">
        <path d="M20 12 L34 18"/>
        <path d="M20 24 L34 18"/>
        <path d="M20 36 L34 36"/>
        <path d="M20 48 L34 36"/>
        <path d="M48 18 L62 24"/>
        <path d="M48 36 L62 24"/>
        <path d="M48 36 L62 40"/>
      </g>
    </svg>
  ),
  "thumb-godot": (
    <svg viewBox="0 0 88 64" xmlns="http://www.w3.org/2000/svg">
      <rect width="88" height="64" fill="#0e1014"/>
      <g fontFamily="JetBrains Mono" fontSize="5">
        <text x="6" y="12" fill="#3b82f6">Godot 4.5</text>
        <text x="6" y="22" fill="#525b6b">Unity URP</text>
      </g>
      <rect x="6" y="14" width="58" height="4" fill="#3b82f6"/>
      <rect x="6" y="24" width="74" height="4" fill="#525b6b"/>
      <text x="68" y="18" fontFamily="JetBrains Mono" fontSize="5" fill="#3b82f6">9.4ms</text>
      <text x="6" y="40" fontFamily="JetBrains Mono" fontSize="5" fill="#7c8290">DESCRIPTOR CACHE</text>
      <g fill="#3b82f6">
        {Array.from({length: 20}).map((_, i) => (
          <rect key={i} x={6 + i*4} y={44} width="3" height={3 + (i%5)*2}/>
        ))}
      </g>
    </svg>
  ),
  "thumb-ssr": (
    <svg viewBox="0 0 88 64" xmlns="http://www.w3.org/2000/svg">
      <rect width="88" height="64" fill="#0e1014"/>
      <rect x="0" y="32" width="88" height="32" fill="#22252b"/>
      <g opacity="0.9">
        <circle cx="20" cy="22" r="6" fill="#ef4444"/>
        <ellipse cx="20" cy="42" rx="6" ry="2" fill="#ef4444" opacity="0.5"/>
        <circle cx="44" cy="18" r="4" fill="#76e3a6"/>
        <ellipse cx="44" cy="46" rx="4" ry="1.5" fill="#76e3a6" opacity="0.5"/>
        <rect x="62" y="14" width="14" height="12" fill="#fbbf24"/>
        <rect x="62" y="38" width="14" height="6" fill="#fbbf24" opacity="0.4"/>
      </g>
      {Array.from({length: 60}).map((_, i) => (
        <rect key={i} x={(i*1.5) % 88} y={32 + (i % 30)} width="0.5" height="0.5" fill="#fff" opacity="0.3"/>
      ))}
    </svg>
  ),
  "thumb-meshshader": (
    <svg viewBox="0 0 88 64" xmlns="http://www.w3.org/2000/svg">
      <rect width="88" height="64" fill="#1a1c21"/>
      <g stroke="#16a34a" fill="none" strokeWidth="0.4">
        {Array.from({length: 8}).map((_, i) => Array.from({length: 6}).map((_, j) => (
          <polygon key={`${i}-${j}`} points={`${4 + i*10},${4 + j*10} ${10 + i*10},${4 + j*10} ${7 + i*10},${10 + j*10}`} opacity={0.3 + (i+j) % 4 * 0.2}/>
        )))}
      </g>
      <line x1="44" y1="0" x2="44" y2="64" stroke="#ef4444" strokeWidth="0.5" strokeDasharray="2 2"/>
      <text x="6" y="60" fontFamily="JetBrains Mono" fontSize="5" fill="#ef4444">DISABLED</text>
    </svg>
  ),
  "thumb-volumetric": (
    <svg viewBox="0 0 88 64" xmlns="http://www.w3.org/2000/svg">
      <rect width="88" height="64" fill="#0e1014"/>
      <defs>
        <radialGradient id="fog" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#d946ef" stopOpacity="0.6"/>
          <stop offset="100%" stopColor="#0e1014" stopOpacity="0"/>
        </radialGradient>
      </defs>
      <ellipse cx="20" cy="32" rx="22" ry="14" fill="url(#fog)"/>
      <ellipse cx="56" cy="40" rx="26" ry="18" fill="url(#fog)" opacity="0.7"/>
      <ellipse cx="72" cy="22" rx="14" ry="10" fill="url(#fog)" opacity="0.8"/>
      <g stroke="#fff" strokeWidth="0.3" opacity="0.4">
        {Array.from({length: 12}).map((_, i) => (
          <line key={i} x1={4 + i*7} y1="60" x2={4 + i*7 + 6} y2="0"/>
        ))}
      </g>
    </svg>
  ),
  "thumb-skinning": (
    <svg viewBox="0 0 88 64" xmlns="http://www.w3.org/2000/svg">
      <rect width="88" height="64" fill="#14161a"/>
      <g fill="#10b981">
        {Array.from({length: 32}).map((_, i) => {
          const x = 4 + (i%8) * 10.5;
          const y = 8 + Math.floor(i/8) * 14;
          return (
            <g key={i} opacity={0.5 + (i%4)*0.15}>
              <circle cx={x} cy={y} r="1.5"/>
              <line x1={x} y1={y+2} x2={x} y2={y+8} stroke="#10b981" strokeWidth="0.6"/>
              <line x1={x-2} y1={y+9} x2={x+2} y2={y+9} stroke="#10b981" strokeWidth="0.6"/>
            </g>
          );
        })}
      </g>
      <text x="58" y="60" fontFamily="JetBrains Mono" fontSize="5" fill="#76e3a6">×6 faster</text>
    </svg>
  ),
  "thumb-hair": (
    <svg viewBox="0 0 88 64" xmlns="http://www.w3.org/2000/svg">
      <rect width="88" height="64" fill="#0e1014"/>
      <g stroke="#7c3aed" fill="none" strokeWidth="0.4" opacity="0.8">
        {Array.from({length: 40}).map((_, i) => {
          const x = 4 + i*2;
          const curl = (i%3) * 4 - 4;
          return <path key={i} d={`M ${x} 8 Q ${x + curl} 32, ${x + curl*1.5} 56`}/>;
        })}
      </g>
      <circle cx="44" cy="32" r="22" fill="none" stroke="#fbbf24" strokeWidth="0.4" strokeDasharray="2 2" opacity="0.5"/>
      <text x="32" y="36" fontFamily="JetBrains Mono" fontSize="5" fill="#fbbf24">RT-PT</text>
    </svg>
  ),
  "thumb-toon": (
    <svg viewBox="0 0 88 64" xmlns="http://www.w3.org/2000/svg">
      <rect width="88" height="64" fill="#1a1c21"/>
      <circle cx="44" cy="32" r="22" fill="#fbbf24"/>
      <path d="M 44 10 A 22 22 0 0 1 66 32 L 44 32 Z" fill="#f97316"/>
      <path d="M 44 10 A 22 22 0 0 0 22 32 L 44 32 Z" fill="#fef3c7"/>
      <circle cx="44" cy="32" r="22" fill="none" stroke="#0e0f12" strokeWidth="2"/>
      <ellipse cx="36" cy="28" rx="2" ry="3" fill="#0e0f12"/>
      <ellipse cx="52" cy="28" rx="2" ry="3" fill="#0e0f12"/>
    </svg>
  ),
  "thumb-particles": (
    <svg viewBox="0 0 88 64" xmlns="http://www.w3.org/2000/svg">
      <rect width="88" height="64" fill="#0e1014"/>
      {Array.from({length: 80}).map((_, i) => {
        const x = (i * 17.3) % 88;
        const y = (i * 23.7) % 64;
        const r = 0.5 + (i % 4) * 0.4;
        const colors = ["#ec4899", "#fbbf24", "#76e3a6", "#4f7cff"];
        return <circle key={i} cx={x} cy={y} r={r} fill={colors[i%4]} opacity={0.4 + (i%5)*0.12}/>;
      })}
      <circle cx="44" cy="32" r="8" fill="none" stroke="#fff" strokeWidth="0.5" opacity="0.4"/>
      <text x="36" y="60" fontFamily="JetBrains Mono" fontSize="5" fill="#7c8290">1M GPU</text>
    </svg>
  ),
  "thumb-cedec": (
    <svg viewBox="0 0 88 64" xmlns="http://www.w3.org/2000/svg">
      <rect width="88" height="64" fill="#0ea5e9" opacity="0.15"/>
      <rect width="88" height="64" fill="none" stroke="#0ea5e9" strokeWidth="0.5"/>
      <text x="6" y="14" fontFamily="JetBrains Mono" fontSize="7" fill="#0ea5e9" fontWeight="700">CEDEC</text>
      <text x="46" y="14" fontFamily="JetBrains Mono" fontSize="7" fill="#fff" fontWeight="700">2026</text>
      <line x1="6" y1="18" x2="82" y2="18" stroke="#0ea5e9" strokeWidth="0.4"/>
      <text x="6" y="30" fontFamily="JetBrains Mono" fontSize="5" fill="#7c8290">SEGA</text>
      <text x="6" y="40" fontFamily="JetBrains Mono" fontSize="5" fill="#7c8290">CAPCOM</text>
      <text x="6" y="50" fontFamily="JetBrains Mono" fontSize="5" fill="#7c8290">KONAMI</text>
      <text x="6" y="60" fontFamily="JetBrains Mono" fontSize="5" fill="#76e3a6">⚠ THERMAL</text>
    </svg>
  ),
  "thumb-naraka": (
    <svg viewBox="0 0 88 64" xmlns="http://www.w3.org/2000/svg">
      <rect width="88" height="64" fill="#14161a"/>
      <g fill="none" stroke="#a855f7" strokeWidth="0.3">
        {Array.from({length: 60}).map((_, i) => {
          const x = 10 + (i % 10) * 7;
          const top = 4 + Math.floor(i / 10) * 2;
          return <path key={i} d={`M ${x} ${top} Q ${x + ((i%3)-1)*4} ${30 + (i%2)*5}, ${x + ((i%5)-2)*5} 60`}/>;
        })}
      </g>
      <text x="6" y="60" fontFamily="JetBrains Mono" fontSize="5" fill="#76e3a6">12K strands · &lt;1ms</text>
    </svg>
  ),
  "thumb-apv": (
    <svg viewBox="0 0 88 64" xmlns="http://www.w3.org/2000/svg">
      <rect width="88" height="64" fill="#0e1014"/>
      <g stroke="#525b6b" fill="none" strokeWidth="0.3">
        {Array.from({length: 11}).map((_, i) => <line key={`v${i}`} x1={i*8} y1="0" x2={i*8} y2="64"/>)}
        {Array.from({length: 9}).map((_, i) => <line key={`h${i}`} x1="0" y1={i*8} x2="88" y2={i*8}/>)}
      </g>
      <g fill="#fbbf24">
        {Array.from({length: 99}).map((_, i) => {
          const x = (i % 11) * 8;
          const y = Math.floor(i / 11) * 8;
          const r = (i*7) % 5 === 0 ? 1.5 : 0.8;
          return <circle key={i} cx={x} cy={y} r={r} opacity={0.5 + ((i*3)%4)*0.15}/>;
        })}
      </g>
      <rect x="20" y="20" width="32" height="24" fill="none" stroke="#76e3a6" strokeWidth="0.5"/>
      <text x="22" y="28" fontFamily="JetBrains Mono" fontSize="5" fill="#76e3a6">SUBDIV 4</text>
    </svg>
  ),
};
