// Abstract publication thumbnails — generated SVGs as placeholders.
// Each "kind" produces a distinct visual signature; user can later replace with real teaser figures.

const PubThumb = ({ kind, palette }) => {
  const [a, b, c] = palette;
  const w = 320, h = 200;

  if (kind === "segmentation") {
    return (
      <svg viewBox={`0 0 ${w} ${h}`} xmlns="http://www.w3.org/2000/svg" className="thumb-svg">
        <rect width={w} height={h} fill={b} />
        <g opacity="0.9">
          <path d="M 60 120 Q 100 70 160 80 Q 220 90 240 140 Q 250 170 200 175 Q 130 178 80 165 Q 50 155 60 120 Z" fill={a} />
          <path d="M 60 120 Q 100 70 160 80 Q 220 90 240 140 Q 250 170 200 175 Q 130 178 80 165 Q 50 155 60 120 Z" fill="none" stroke={c} strokeWidth="1.5" strokeDasharray="3 3" />
        </g>
        <g stroke={c} strokeWidth="1" opacity="0.5">
          {[...Array(8)].map((_, i) => <line key={i} x1={20 + i * 36} y1="20" x2={20 + i * 36} y2={h - 20} />)}
        </g>
        <circle cx="160" cy="125" r="3" fill={c} />
        <text x="14" y={h - 10} fontFamily="JetBrains Mono, monospace" fontSize="9" fill={c} opacity="0.6">prompt → mask</text>
      </svg>
    );
  }

  if (kind === "heat") {
    return (
      <svg viewBox={`0 0 ${w} ${h}`} xmlns="http://www.w3.org/2000/svg" className="thumb-svg">
        <defs>
          <radialGradient id={`heat-${a}`} cx="0.3" cy="0.4">
            <stop offset="0%" stopColor={b} />
            <stop offset="60%" stopColor={a} />
            <stop offset="100%" stopColor={c} />
          </radialGradient>
        </defs>
        <rect width={w} height={h} fill={c} />
        <rect width={w} height={h} fill={`url(#heat-${a})`} opacity="0.85" />
        {[...Array(7)].map((_, i) => (
          <ellipse key={i} cx={100} cy={100} rx={20 + i * 14} ry={14 + i * 10} fill="none" stroke={b} strokeWidth="0.7" opacity={0.5 - i * 0.05} />
        ))}
        <text x="14" y={h - 10} fontFamily="JetBrains Mono, monospace" fontSize="9" fill={b} opacity="0.7">IR · t+Δt</text>
      </svg>
    );
  }

  if (kind === "attention") {
    return (
      <svg viewBox={`0 0 ${w} ${h}`} xmlns="http://www.w3.org/2000/svg" className="thumb-svg">
        <rect width={w} height={h} fill={b} />
        <g>
          {[...Array(10)].map((_, i) =>
            [...Array(6)].map((_, j) => {
              const intensity = Math.exp(-((i - 5) ** 2 + (j - 3) ** 2) / 6);
              return (
                <rect
                  key={`${i}-${j}`}
                  x={20 + i * 28}
                  y={20 + j * 26}
                  width="24"
                  height="22"
                  fill={a}
                  opacity={intensity * 0.85}
                />
              );
            })
          )}
        </g>
        <rect x="20" y="20" width={280} height={156} fill="none" stroke={c} strokeWidth="1" />
        <text x="14" y={h - 6} fontFamily="JetBrains Mono, monospace" fontSize="9" fill={c} opacity="0.7">attn(local → global)</text>
      </svg>
    );
  }

  if (kind === "modality") {
    return (
      <svg viewBox={`0 0 ${w} ${h}`} xmlns="http://www.w3.org/2000/svg" className="thumb-svg">
        <rect width={w} height={h} fill={b} />
        <circle cx="100" cy="100" r="55" fill={a} opacity="0.7" />
        <circle cx="220" cy="100" r="55" fill={c} opacity="0.7" />
        <circle cx="160" cy="100" r="30" fill={a} opacity="0.4" />
        <text x="100" y="105" textAnchor="middle" fontFamily="Newsreader, serif" fontSize="14" fill={c} fontStyle="italic">A</text>
        <text x="220" y="105" textAnchor="middle" fontFamily="Newsreader, serif" fontSize="14" fill={a} fontStyle="italic">B</text>
        <text x="14" y={h - 10} fontFamily="JetBrains Mono, monospace" fontSize="9" fill={c} opacity="0.7">Δ(A, B)</text>
      </svg>
    );
  }

  if (kind === "gradient") {
    return (
      <svg viewBox={`0 0 ${w} ${h}`} xmlns="http://www.w3.org/2000/svg" className="thumb-svg">
        <defs>
          <linearGradient id={`grad-${a.replace("#", "")}`} x1="0" x2="1">
            <stop offset="0%" stopColor={a} />
            <stop offset="50%" stopColor={b} />
            <stop offset="100%" stopColor={c} />
          </linearGradient>
        </defs>
        <rect width={w} height={h} fill="#f5efe4" />
        <rect x="20" y="60" width={280} height="80" fill={`url(#grad-${a.replace("#", "")})`} />
        {[...Array(8)].map((_, i) => (
          <line key={i} x1={20 + i * 40} y1="55" x2={20 + i * 40} y2="145" stroke="#1f1611" strokeWidth="0.5" opacity="0.3" />
        ))}
        <text x="14" y={h - 10} fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#1f1611" opacity="0.7">A → mid → B</text>
      </svg>
    );
  }

  if (kind === "xray") {
    return (
      <svg viewBox={`0 0 ${w} ${h}`} xmlns="http://www.w3.org/2000/svg" className="thumb-svg">
        <rect width={w} height={h} fill={a} />
        <g stroke={c} strokeWidth="1.2" fill="none" opacity="0.85">
          <path d="M 160 30 Q 130 60 130 100 Q 130 140 160 170" />
          <path d="M 160 30 Q 190 60 190 100 Q 190 140 160 170" />
          <line x1="160" y1="30" x2="160" y2="170" />
          {[...Array(6)].map((_, i) => (
            <path key={i} d={`M ${130 - i * 4} ${50 + i * 20} Q 160 ${55 + i * 20} ${190 + i * 4} ${50 + i * 20}`} opacity={0.7 - i * 0.08} />
          ))}
        </g>
        <line x1="60" y1="100" x2="120" y2="100" stroke={b} strokeWidth="0.6" />
        <line x1="200" y1="100" x2="260" y2="100" stroke={b} strokeWidth="0.6" />
        <text x="14" y={h - 10} fontFamily="JetBrains Mono, monospace" fontSize="9" fill={b} opacity="0.7">sim → x-ray</text>
      </svg>
    );
  }

  if (kind === "graph") {
    const nodes = [
      [80, 60], [160, 50], [240, 70], [60, 130], [140, 130], [230, 140], [100, 170], [200, 170],
    ];
    const edges = [[0,1],[1,2],[0,3],[1,4],[2,5],[3,4],[4,5],[3,6],[4,6],[4,7],[5,7]];
    return (
      <svg viewBox={`0 0 ${w} ${h}`} xmlns="http://www.w3.org/2000/svg" className="thumb-svg">
        <rect width={w} height={h} fill={b} />
        <g stroke={c} strokeWidth="0.8" opacity="0.5">
          {edges.map(([i,j], k) => <line key={k} x1={nodes[i][0]} y1={nodes[i][1]} x2={nodes[j][0]} y2={nodes[j][1]} />)}
        </g>
        {nodes.map(([x, y], i) => (
          <circle key={i} cx={x} cy={y} r={i % 3 === 0 ? 8 : 5} fill={a} stroke={c} strokeWidth="1" />
        ))}
        <text x="14" y={h - 10} fontFamily="JetBrains Mono, monospace" fontSize="9" fill={c} opacity="0.7">semantic graph</text>
      </svg>
    );
  }

  if (kind === "transfer") {
    return (
      <svg viewBox={`0 0 ${w} ${h}`} xmlns="http://www.w3.org/2000/svg" className="thumb-svg">
        <rect width={w} height={h} fill={b} />
        <rect x="30" y="50" width="80" height="100" fill={a} opacity="0.85" />
        <rect x="210" y="50" width="80" height="100" fill={c} opacity="0.85" />
        <path d="M 110 100 Q 160 70 210 100" stroke={c} strokeWidth="1.5" fill="none" markerEnd="url(#arr-t)" />
        <defs>
          <marker id="arr-t" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M 0 0 L 10 5 L 0 10 z" fill={c} />
          </marker>
        </defs>
        <text x="70" y="105" textAnchor="middle" fontFamily="Newsreader, serif" fontSize="16" fill={b} fontStyle="italic">LM</text>
        <text x="250" y="105" textAnchor="middle" fontFamily="Newsreader, serif" fontSize="16" fill={b} fontStyle="italic">V</text>
        <text x="14" y={h - 10} fontFamily="JetBrains Mono, monospace" fontSize="9" fill={c} opacity="0.7">LM → V</text>
      </svg>
    );
  }

  if (kind === "style") {
    return (
      <svg viewBox={`0 0 ${w} ${h}`} xmlns="http://www.w3.org/2000/svg" className="thumb-svg">
        <rect width={w/2} height={h} fill={b} />
        <rect x={w/2} width={w/2} height={h} fill={c} />
        {[...Array(8)].map((_, i) => (
          <rect key={i} x={0} y={i * 25} width={w} height={2} fill={a} opacity={0.4 + (i % 3) * 0.2} />
        ))}
        <circle cx={w/2} cy={h/2} r="40" fill="none" stroke={a} strokeWidth="2" strokeDasharray="4 4" />
        <text x="14" y={h - 10} fontFamily="JetBrains Mono, monospace" fontSize="9" fill={a} opacity="0.85">IR ↔ RGB</text>
      </svg>
    );
  }

  // fallback
  return (
    <svg viewBox={`0 0 ${w} ${h}`} xmlns="http://www.w3.org/2000/svg" className="thumb-svg">
      <rect width={w} height={h} fill={b} />
      <rect x="20" y="20" width={w - 40} height={h - 40} fill="none" stroke={a} strokeWidth="2" strokeDasharray="6 4" />
    </svg>
  );
};

window.PubThumb = PubThumb;