import * as React from "react";
import { cn } from "@/lib/utils";

/* ------------------------------------------------------------------------
   Spinza key art — original procedural artwork, rendered as inline SVG.
   Deterministic per slug (seeded PRNG, no Math.random at render).
   ------------------------------------------------------------------------ */

export type ArtVariant = "card" | "hero" | "banner" | "tile";

export interface ArtPalette {
  primary: string;
  secondary: string;
  glow: string;
  bg: string;
}

export interface GameArtProps {
  slug: string;
  name: string;
  palette: ArtPalette;
  backdrop?: string;
  particles?: string;
  variant?: ArtVariant;
  className?: string;
  /** Render the game name inside the artwork (default true). */
  showName?: boolean;
  /** Decorative by default; pass a label to expose the art to assistive tech. */
  label?: string;
}

/** Presentation hints per game (the public /api/games payload does not carry them). */
export const GAME_PRESENTATION: Record<string, { backdrop: string; particles: string }> = {
  "arctic-fortune": { backdrop: "aurora", particles: "snow" },
  "cosmic-collapse": { backdrop: "nebula", particles: "stars" },
  "deep-treasure": { backdrop: "abyss", particles: "bubbles" },
  "diamond-heist": { backdrop: "vault", particles: "diamonds" },
  "dragon-core": { backdrop: "core", particles: "fire" },
  "golden-emperor": { backdrop: "pillars", particles: "coins" },
  "inferno-reels": { backdrop: "lava", particles: "fire" },
  "lucky-circuit": { backdrop: "arcade", particles: "confetti" },
  "midnight-tokyo": { backdrop: "skyline", particles: "sparks" },
  "moonbase-77": { backdrop: "moon", particles: "stars" },
  "neon-vault": { backdrop: "vault", particles: "sparks" },
  obsidian: { backdrop: "minimal", particles: "dust" },
  "pharaoh-protocol": { backdrop: "pyramid", particles: "dust" },
  "quantum-jackpot": { backdrop: "circuit", particles: "energy" },
  "reel-reactor": { backdrop: "reactor", particles: "energy" },
  "royal-circuit": { backdrop: "track", particles: "sparks" },
  "spinza-original": { backdrop: "universe", particles: "energy" },
  "void-miner": { backdrop: "asteroids", particles: "dust" },
  "wild-temple": { backdrop: "temple", particles: "dust" },
  "zero-gravity": { backdrop: "gravity", particles: "stars" },
};

const BACKDROPS = ["vault", "nebula", "pillars", "aurora", "lava", "circuit", "skyline", "pyramid", "arcade", "asteroids", "track", "reactor", "abyss", "moon", "temple", "gravity", "core", "minimal", "universe", "grid"] as const;
type Backdrop = (typeof BACKDROPS)[number];

const DIMS: Record<ArtVariant, { w: number; h: number; pad: number; maxFont: number; oneLine: boolean }> = {
  card: { w: 360, h: 480, pad: 24, maxFont: 54, oneLine: false },
  tile: { w: 240, h: 240, pad: 16, maxFont: 30, oneLine: false },
  hero: { w: 1600, h: 900, pad: 72, maxFont: 132, oneLine: true },
  banner: { w: 1200, h: 400, pad: 48, maxFont: 84, oneLine: true },
};

/* ------------------------------------------------------------ seeded PRNG */

function hashString(s: string): number {
  let h = 0x811c9dc5;
  for (let i = 0; i < s.length; i++) {
    h ^= s.charCodeAt(i);
    h = Math.imul(h, 0x01000193);
  }
  return h >>> 0;
}

function mulberry32(seed: number): () => number {
  let a = seed >>> 0;
  return () => {
    a = (a + 0x6d2b79f5) >>> 0;
    let t = a;
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

interface Ctx {
  W: number;
  H: number;
  rnd: () => number;
  p: ArtPalette;
  id: string;
}

const r2 = (n: number) => Math.round(n * 100) / 100;
const between = (rnd: () => number, a: number, b: number) => a + (b - a) * rnd();

/* ------------------------------------------------------------------ motifs */

function Vault({ W, H, rnd, p, id }: Ctx) {
  const cx = W * 0.62;
  const cy = H * 0.42;
  const maxR = Math.max(W, H) * 0.55;
  const rings: React.ReactNode[] = [];
  for (let i = 1; i <= 7; i++) {
    const r = (maxR / 7) * i;
    rings.push(<circle key={`r${i}`} cx={cx} cy={cy} r={r2(r)} fill="none" stroke={i % 2 ? p.primary : p.secondary} strokeOpacity={r2(0.06 + (7 - i) * 0.035)} strokeWidth={i === 3 ? 6 : 1.5} />);
    if (i === 3 || i === 5) {
      for (let k = 0; k < 8; k++) {
        const a = (Math.PI * 2 * k) / 8 + rnd() * 0.2;
        rings.push(<circle key={`b${i}${k}`} cx={r2(cx + Math.cos(a) * r)} cy={r2(cy + Math.sin(a) * r)} r={i === 3 ? 4 : 2.5} fill={p.glow} fillOpacity={0.7} />);
      }
    }
  }
  const step = W / 8;
  const grid: React.ReactNode[] = [];
  for (let x = step / 2; x < W; x += step) grid.push(<line key={`gx${x}`} x1={r2(x)} y1={0} x2={r2(x)} y2={H} stroke={p.primary} strokeOpacity={0.05} />);
  for (let y = step / 2; y < H; y += step) grid.push(<line key={`gy${y}`} x1={0} y1={r2(y)} x2={W} y2={r2(y)} stroke={p.primary} strokeOpacity={0.05} />);
  return (
    <g>
      {grid}
      {rings}
      <circle cx={cx} cy={cy} r={r2(maxR / 14)} fill={`url(#${id}-glow)`} />
      <circle cx={cx} cy={cy} r={r2(maxR / 28)} fill={p.glow} fillOpacity={0.9} />
    </g>
  );
}

function Nebula({ W, H, rnd, p, id }: Ctx) {
  const blobs: React.ReactNode[] = [];
  for (let i = 0; i < 5; i++) {
    blobs.push(<ellipse key={i} cx={r2(between(rnd, W * 0.2, W * 0.8))} cy={r2(between(rnd, H * 0.15, H * 0.7))} rx={r2(between(rnd, W * 0.18, W * 0.42))} ry={r2(between(rnd, H * 0.1, H * 0.28))} fill={i % 2 ? p.primary : p.secondary} fillOpacity={r2(between(rnd, 0.18, 0.34))} transform={`rotate(${r2(between(rnd, -30, 30))} ${W / 2} ${H / 2})`} filter={`url(#${id}-blur)`} />);
  }
  const stars: React.ReactNode[] = [];
  for (let i = 0; i < 60; i++) {
    const big = rnd() > 0.85;
    stars.push(<circle key={i} cx={r2(rnd() * W)} cy={r2(rnd() * H)} r={big ? r2(between(rnd, 1.6, 2.6)) : r2(between(rnd, 0.5, 1.2))} fill={big ? p.glow : "#fff"} fillOpacity={r2(between(rnd, 0.35, 0.95))} />);
  }
  return (
    <g>
      {blobs}
      {stars}
    </g>
  );
}

function Pillars({ W, H, rnd, p, id }: Ctx) {
  const n = W > H ? 9 : 5;
  const gap = W / n;
  const cols: React.ReactNode[] = [];
  for (let i = 0; i < n; i++) {
    const cw = gap * 0.42;
    const x = gap * i + (gap - cw) / 2;
    const top = H * between(rnd, 0.12, 0.22);
    cols.push(
      <g key={i}>
        <rect x={r2(x)} y={r2(top)} width={r2(cw)} height={r2(H - top)} fill={`url(#${id}-col)`} />
        <rect x={r2(x - cw * 0.18)} y={r2(top - 10)} width={r2(cw * 1.36)} height={12} fill={p.primary} fillOpacity={0.5} />
        <rect x={r2(x + cw * 0.3)} y={r2(top)} width={2} height={r2(H - top)} fill={p.glow} fillOpacity={0.12} />
      </g>,
    );
  }
  return (
    <g>
      <circle cx={W * 0.5} cy={H * 0.3} r={Math.min(W, H) * 0.22} fill={`url(#${id}-glow)`} />
      {cols}
      <rect x={0} y={H * 0.88} width={W} height={H * 0.12} fill={p.secondary} fillOpacity={0.25} />
    </g>
  );
}

function Aurora({ W, H, rnd, p, id }: Ctx) {
  const bands: React.ReactNode[] = [];
  for (let i = 0; i < 4; i++) {
    const y = H * (0.2 + i * 0.14);
    const amp = H * between(rnd, 0.04, 0.1);
    const d = `M${-W * 0.1} ${r2(y)} C ${r2(W * 0.2)} ${r2(y - amp)}, ${r2(W * 0.35)} ${r2(y + amp)}, ${r2(W * 0.55)} ${r2(y)} S ${r2(W * 0.9)} ${r2(y - amp)}, ${r2(W * 1.1)} ${r2(y + amp * 0.5)}`;
    bands.push(<path key={i} d={d} fill="none" stroke={i % 2 ? p.primary : p.secondary} strokeOpacity={r2(0.55 - i * 0.08)} strokeWidth={r2(H * between(rnd, 0.05, 0.09))} strokeLinecap="round" filter={`url(#${id}-blur)`} />);
  }
  const stars: React.ReactNode[] = [];
  for (let i = 0; i < 30; i++) stars.push(<circle key={i} cx={r2(rnd() * W)} cy={r2(rnd() * H * 0.5)} r={r2(between(rnd, 0.6, 1.6))} fill="#fff" fillOpacity={r2(between(rnd, 0.3, 0.9))} />);
  const peaks: number[] = [];
  for (let x = 0; x <= W; x += W / 9) peaks.push(H * between(rnd, 0.72, 0.88));
  const ridge = `M0 ${H} ` + peaks.map((y, i) => `L${r2((i * W) / 9)} ${r2(y)}`).join(" ") + ` L${W} ${H} Z`;
  return (
    <g>
      {stars}
      {bands}
      <path d={ridge} fill={p.bg} fillOpacity={0.95} />
      <path d={ridge} fill={p.primary} fillOpacity={0.08} />
    </g>
  );
}

function Lava({ W, H, rnd, p, id }: Ctx) {
  const cracks: React.ReactNode[] = [];
  for (let i = 0; i < 6; i++) {
    let x = between(rnd, W * 0.05, W * 0.95);
    let y = H;
    const pts = [`M${r2(x)} ${r2(y)}`];
    while (y > H * 0.15) {
      x += between(rnd, -W * 0.08, W * 0.08);
      y -= between(rnd, H * 0.06, H * 0.14);
      pts.push(`L${r2(x)} ${r2(y)}`);
    }
    const d = pts.join(" ");
    cracks.push(<path key={`g${i}`} d={d} fill="none" stroke={p.glow} strokeOpacity={0.55} strokeWidth={8} strokeLinecap="round" strokeLinejoin="round" filter={`url(#${id}-blur)`} />);
    cracks.push(<path key={`c${i}`} d={d} fill="none" stroke={p.primary} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" />);
  }
  return (
    <g>
      <rect x={0} y={H * 0.6} width={W} height={H * 0.4} fill={`url(#${id}-heat)`} />
      {cracks}
    </g>
  );
}

function Circuit({ W, H, rnd, p }: Ctx) {
  const traces: React.ReactNode[] = [];
  const step = Math.min(W, H) / 10;
  for (let i = 0; i < 16; i++) {
    let x = Math.round(between(rnd, 0, W / step)) * step;
    let y = Math.round(between(rnd, 0, H / step)) * step;
    const pts = [`M${r2(x)} ${r2(y)}`];
    const segs = 2 + Math.floor(rnd() * 3);
    for (let s = 0; s < segs; s++) {
      const horiz = rnd() > 0.5;
      const len = step * (1 + Math.floor(rnd() * 3));
      if (horiz) x += rnd() > 0.5 ? len : -len;
      else y += rnd() > 0.5 ? len : -len;
      pts.push(`L${r2(x)} ${r2(y)}`);
    }
    const color = i % 3 === 0 ? p.secondary : p.primary;
    traces.push(<path key={`t${i}`} d={pts.join(" ")} fill="none" stroke={color} strokeOpacity={0.35} strokeWidth={2} strokeLinejoin="round" />);
    traces.push(<circle key={`p${i}`} cx={r2(x)} cy={r2(y)} r={4} fill={p.bg} stroke={color} strokeWidth={2} />);
  }
  return <g>{traces}</g>;
}

function Skyline({ W, H, rnd, p, id }: Ctx) {
  const buildings: React.ReactNode[] = [];
  let x = -10;
  let i = 0;
  while (x < W + 10) {
    const bw = between(rnd, W * 0.05, W * 0.14);
    const bh = H * between(rnd, 0.25, 0.7);
    const y = H - bh;
    buildings.push(<rect key={`b${i}`} x={r2(x)} y={r2(y)} width={r2(bw)} height={r2(bh)} fill={i % 2 ? "#0a0a12" : "#0e0d18"} stroke={p.primary} strokeOpacity={0.35} strokeWidth={1} />);
    const cols = Math.max(1, Math.floor(bw / 14));
    const rows = Math.floor(bh / 18);
    for (let c = 0; c < cols; c++) {
      for (let r = 0; r < rows; r++) {
        if (rnd() > 0.45) continue;
        buildings.push(<rect key={`w${i}-${c}-${r}`} x={r2(x + 5 + c * 14)} y={r2(y + 8 + r * 18)} width={5} height={7} fill={rnd() > 0.7 ? p.secondary : p.primary} fillOpacity={r2(between(rnd, 0.4, 0.95))} />);
      }
    }
    if (rnd() > 0.7) buildings.push(<line key={`a${i}`} x1={r2(x + bw / 2)} y1={r2(y)} x2={r2(x + bw / 2)} y2={r2(y - H * 0.08)} stroke={p.primary} strokeOpacity={0.7} strokeWidth={1.5} />);
    x += bw + between(rnd, 4, 14);
    i++;
  }
  return (
    <g>
      <circle cx={W * 0.72} cy={H * 0.28} r={Math.min(W, H) * 0.14} fill={`url(#${id}-glow)`} />
      <circle cx={W * 0.72} cy={H * 0.28} r={Math.min(W, H) * 0.07} fill={p.primary} fillOpacity={0.55} />
      {buildings}
      <rect x={0} y={H * 0.995} width={W} height={H * 0.005} fill={p.secondary} />
    </g>
  );
}

function Pyramid({ W, H, rnd, p, id }: Ctx) {
  const tri = (cx: number, base: number, h: number, key: string, fill: string, op: number) => <polygon key={key} points={`${r2(cx - base / 2)},${r2(H * 0.86)} ${r2(cx)},${r2(H * 0.86 - h)} ${r2(cx + base / 2)},${r2(H * 0.86)}`} fill={fill} fillOpacity={op} stroke={p.primary} strokeOpacity={0.4} />;
  const rays: React.ReactNode[] = [];
  for (let i = 0; i < 14; i++) {
    const a = -Math.PI * 0.95 + (i / 13) * Math.PI * 0.9;
    rays.push(<line key={i} x1={W * 0.5} y1={H * 0.36} x2={r2(W * 0.5 + Math.cos(a) * W)} y2={r2(H * 0.36 + Math.sin(a) * W)} stroke={p.primary} strokeOpacity={0.06 + (rnd() > 0.5 ? 0.05 : 0)} strokeWidth={1.5} />);
  }
  return (
    <g>
      {rays}
      <circle cx={W * 0.5} cy={H * 0.36} r={Math.min(W, H) * 0.22} fill={`url(#${id}-glow)`} />
      <circle cx={W * 0.5} cy={H * 0.36} r={Math.min(W, H) * 0.1} fill={p.primary} fillOpacity={0.9} />
      {tri(W * 0.2, W * 0.5, H * 0.34, "l", "#120c05", 1)}
      {tri(W * 0.82, W * 0.55, H * 0.4, "r", "#0f0a04", 1)}
      {tri(W * 0.5, W * 0.72, H * 0.56, "c", "#1a1208", 1)}
      <polygon points={`${r2(W * 0.5)},${r2(H * 0.3)} ${r2(W * 0.86)},${r2(H * 0.86)} ${r2(W * 0.5)},${r2(H * 0.86)}`} fill={p.primary} fillOpacity={0.12} />
      <rect x={0} y={H * 0.86} width={W} height={H * 0.14} fill={p.secondary} fillOpacity={0.1} />
    </g>
  );
}

function Arcade({ W, H, rnd, p }: Ctx) {
  const size = Math.min(W, H) / 12;
  const cells: React.ReactNode[] = [];
  const colors = [p.primary, p.secondary, p.glow];
  for (let y = 0; y < H; y += size) {
    for (let x = 0; x < W; x += size) {
      const r = rnd();
      if (r > 0.22) continue;
      cells.push(<rect key={`${x}-${y}`} x={r2(x + 2)} y={r2(y + 2)} width={r2(size - 4)} height={r2(size - 4)} rx={3} fill={colors[Math.floor(rnd() * 3)]} fillOpacity={r2(between(rnd, 0.25, 0.85))} />);
    }
  }
  return (
    <g>
      {cells}
      <rect x={W * 0.3} y={H * 0.36} width={W * 0.4} height={size * 0.6} rx={size * 0.3} fill={p.primary} fillOpacity={0.9} />
      <rect x={W * 0.3 + size * 0.3} y={H * 0.36 + size * 0.15} width={W * 0.4 - size * 0.6} height={size * 0.3} rx={size * 0.15} fill="#fff" fillOpacity={0.35} />
    </g>
  );
}

function Asteroids({ W, H, rnd, p, id }: Ctx) {
  const rocks: React.ReactNode[] = [];
  for (let i = 0; i < 9; i++) {
    const cx = between(rnd, 0, W);
    const cy = between(rnd, 0, H * 0.8);
    const rad = between(rnd, Math.min(W, H) * 0.03, Math.min(W, H) * 0.14);
    const n = 7 + Math.floor(rnd() * 4);
    const pts: string[] = [];
    for (let k = 0; k < n; k++) {
      const a = (k / n) * Math.PI * 2;
      const rr = rad * between(rnd, 0.72, 1.1);
      pts.push(`${r2(cx + Math.cos(a) * rr)},${r2(cy + Math.sin(a) * rr)}`);
    }
    rocks.push(<polygon key={i} points={pts.join(" ")} fill={i % 3 === 0 ? "#171226" : "#100c1c"} stroke={p.primary} strokeOpacity={0.45} strokeWidth={1.5} strokeLinejoin="round" />);
    if (rnd() > 0.5) rocks.push(<circle key={`v${i}`} cx={r2(cx + rad * 0.2)} cy={r2(cy - rad * 0.1)} r={r2(rad * 0.18)} fill={p.secondary} fillOpacity={0.8} />);
  }
  const stars: React.ReactNode[] = [];
  for (let i = 0; i < 40; i++) stars.push(<circle key={i} cx={r2(rnd() * W)} cy={r2(rnd() * H)} r={r2(between(rnd, 0.5, 1.3))} fill="#fff" fillOpacity={r2(between(rnd, 0.3, 0.8))} />);
  return (
    <g>
      {stars}
      <circle cx={W * 0.5} cy={H * 0.45} r={Math.min(W, H) * 0.2} fill={`url(#${id}-glow)`} />
      {rocks}
    </g>
  );
}

function Track({ W, H, p }: Ctx) {
  const lanes: React.ReactNode[] = [];
  const cx = W * 1.05;
  const cy = H * 0.55;
  for (let i = 0; i < 6; i++) {
    const r = Math.max(W, H) * (0.28 + i * 0.13);
    lanes.push(<circle key={`l${i}`} cx={cx} cy={cy} r={r2(r)} fill="none" stroke={i % 5 === 0 ? p.primary : "#ffffff"} strokeOpacity={i % 5 === 0 ? 0.5 : 0.12} strokeWidth={i % 5 === 0 ? 5 : 2} />);
    if (i > 0 && i < 5) lanes.push(<circle key={`d${i}`} cx={cx} cy={cy} r={r2(r - Math.max(W, H) * 0.065)} fill="none" stroke="#fff" strokeOpacity={0.18} strokeWidth={2} strokeDasharray="18 22" />);
  }
  const kerb: React.ReactNode[] = [];
  const kr = Math.max(W, H) * 0.28;
  for (let k = 0; k < 40; k++) {
    const a = Math.PI * 0.5 + (k / 40) * Math.PI;
    kerb.push(<circle key={k} cx={r2(cx + Math.cos(a) * kr)} cy={r2(cy + Math.sin(a) * kr)} r={4} fill={k % 2 ? p.secondary : "#f5f5f5"} fillOpacity={0.9} />);
  }
  return (
    <g>
      {lanes}
      {kerb}
      <line x1={W * 0.05} y1={H * 0.2} x2={W * 0.55} y2={H * 0.2} stroke={p.glow} strokeOpacity={0.5} strokeWidth={2} strokeDasharray="4 10" />
    </g>
  );
}

function hexPoints(cx: number, cy: number, r: number, rot = 0): string {
  const pts: string[] = [];
  for (let k = 0; k < 6; k++) {
    const a = rot + (k / 6) * Math.PI * 2;
    pts.push(`${r2(cx + Math.cos(a) * r)},${r2(cy + Math.sin(a) * r)}`);
  }
  return pts.join(" ");
}

function Reactor({ W, H, rnd, p, id }: Ctx) {
  const cx = W * 0.5;
  const cy = H * 0.42;
  const base = Math.min(W, H) * 0.12;
  const rings: React.ReactNode[] = [];
  for (let i = 1; i <= 4; i++) rings.push(<polygon key={i} points={hexPoints(cx, cy, base * i, Math.PI / 6)} fill="none" stroke={i % 2 ? p.primary : p.secondary} strokeOpacity={r2(0.5 - i * 0.09)} strokeWidth={i === 1 ? 3 : 1.5} />);
  const spokes: React.ReactNode[] = [];
  for (let k = 0; k < 12; k++) {
    const a = (k / 12) * Math.PI * 2;
    const len = base * between(rnd, 3.2, 5);
    spokes.push(<line key={k} x1={r2(cx + Math.cos(a) * base * 1.2)} y1={r2(cy + Math.sin(a) * base * 1.2)} x2={r2(cx + Math.cos(a) * len)} y2={r2(cy + Math.sin(a) * len)} stroke={p.primary} strokeOpacity={0.18} strokeWidth={1.5} />);
  }
  const cells: React.ReactNode[] = [];
  for (let i = 0; i < 14; i++) {
    const a = rnd() * Math.PI * 2;
    const d = base * between(rnd, 3.5, 6);
    cells.push(<polygon key={i} points={hexPoints(cx + Math.cos(a) * d, cy + Math.sin(a) * d, base * between(rnd, 0.25, 0.5), Math.PI / 6)} fill={p.primary} fillOpacity={r2(between(rnd, 0.08, 0.25))} />);
  }
  return (
    <g>
      {cells}
      {spokes}
      <circle cx={cx} cy={cy} r={base * 1.6} fill={`url(#${id}-glow)`} />
      {rings}
      <polygon points={hexPoints(cx, cy, base * 0.55, Math.PI / 6)} fill={p.glow} fillOpacity={0.9} />
    </g>
  );
}

function Abyss({ W, H, rnd, p, id }: Ctx) {
  const bubbles: React.ReactNode[] = [];
  for (let i = 0; i < 26; i++) {
    const r = between(rnd, 2, Math.min(W, H) * 0.035);
    const cx = rnd() * W;
    const cy = between(rnd, H * 0.2, H);
    bubbles.push(<circle key={`b${i}`} cx={r2(cx)} cy={r2(cy)} r={r2(r)} fill="none" stroke={p.primary} strokeOpacity={r2(between(rnd, 0.25, 0.6))} strokeWidth={1.2} />);
    bubbles.push(<circle key={`h${i}`} cx={r2(cx - r * 0.35)} cy={r2(cy - r * 0.35)} r={r2(r * 0.22)} fill="#fff" fillOpacity={0.5} />);
  }
  const rays: React.ReactNode[] = [];
  for (let i = 0; i < 5; i++) {
    const x = W * (0.2 + i * 0.15);
    rays.push(<polygon key={i} points={`${r2(x)},0 ${r2(x + W * 0.05)},0 ${r2(x + W * 0.2)},${H} ${r2(x - W * 0.02)},${H}`} fill={`url(#${id}-ray)`} />);
  }
  return (
    <g>
      {rays}
      <ellipse cx={W * 0.5} cy={H * 0.95} rx={W * 0.5} ry={H * 0.12} fill={p.secondary} fillOpacity={0.18} filter={`url(#${id}-blur)`} />
      {bubbles}
    </g>
  );
}

function Moon({ W, H, rnd, p, id }: Ctx) {
  const R = Math.min(W, H) * 0.42;
  const cx = W * 0.62;
  const cy = H * 0.5;
  const craters: React.ReactNode[] = [];
  for (let i = 0; i < 12; i++) {
    const a = rnd() * Math.PI * 2;
    const d = rnd() * R * 0.8;
    const r = between(rnd, R * 0.04, R * 0.16);
    const x = cx + Math.cos(a) * d;
    const y = cy + Math.sin(a) * d;
    craters.push(<circle key={`c${i}`} cx={r2(x)} cy={r2(y)} r={r2(r)} fill="#000" fillOpacity={0.35} />);
    craters.push(<circle key={`r${i}`} cx={r2(x)} cy={r2(y)} r={r2(r)} fill="none" stroke={p.glow} strokeOpacity={0.35} strokeWidth={1.5} />);
    craters.push(<circle key={`s${i}`} cx={r2(x + r * 0.3)} cy={r2(y + r * 0.3)} r={r2(r * 0.55)} fill="#000" fillOpacity={0.2} />);
  }
  const stars: React.ReactNode[] = [];
  for (let i = 0; i < 40; i++) stars.push(<circle key={i} cx={r2(rnd() * W)} cy={r2(rnd() * H)} r={r2(between(rnd, 0.5, 1.4))} fill="#fff" fillOpacity={r2(between(rnd, 0.3, 0.9))} />);
  return (
    <g>
      {stars}
      <circle cx={cx} cy={cy} r={R * 1.15} fill={`url(#${id}-glow)`} />
      <circle cx={cx} cy={cy} r={R} fill={`url(#${id}-moon)`} />
      {craters}
      <path d={`M${r2(cx - R)} ${r2(cy)} A ${r2(R)} ${r2(R)} 0 0 0 ${r2(cx + R)} ${r2(cy)} Z`} fill="#000" fillOpacity={0.18} transform={`rotate(-28 ${cx} ${cy})`} />
      <line x1={0} y1={H * 0.82} x2={W} y2={H * 0.82} stroke={p.primary} strokeOpacity={0.5} strokeWidth={1.5} />
      <rect x={W * 0.1} y={H * 0.72} width={W * 0.16} height={H * 0.1} fill={p.bg} stroke={p.primary} strokeOpacity={0.6} />
      <rect x={W * 0.13} y={H * 0.75} width={W * 0.04} height={H * 0.03} fill={p.primary} fillOpacity={0.9} />
    </g>
  );
}

function Temple({ W, H, rnd, p, id }: Ctx) {
  const steps: React.ReactNode[] = [];
  const n = 6;
  for (let i = 0; i < n; i++) {
    const wdt = W * (0.95 - i * 0.14);
    const h = H * 0.11;
    const y = H - h * (i + 1);
    steps.push(<rect key={i} x={r2((W - wdt) / 2)} y={r2(y)} width={r2(wdt)} height={r2(h)} fill={i % 2 ? "#08170f" : "#0a1c12"} stroke={p.primary} strokeOpacity={0.35} />);
    const blocks = Math.floor(wdt / (W * 0.08));
    for (let b = 0; b < blocks; b++) if (rnd() > 0.5) steps.push(<line key={`${i}-${b}`} x1={r2((W - wdt) / 2 + (b + 1) * (wdt / (blocks + 1)))} y1={r2(y)} x2={r2((W - wdt) / 2 + (b + 1) * (wdt / (blocks + 1)))} y2={r2(y + h)} stroke={p.primary} strokeOpacity={0.15} />);
  }
  const vines: React.ReactNode[] = [];
  for (let i = 0; i < 8; i++) {
    const x = between(rnd, W * 0.05, W * 0.95);
    vines.push(<path key={i} d={`M${r2(x)} ${H} q ${r2(between(rnd, -30, 30))} ${r2(-H * 0.2)} ${r2(between(rnd, -20, 20))} ${r2(-H * between(rnd, 0.3, 0.6))}`} fill="none" stroke={p.primary} strokeOpacity={0.35} strokeWidth={2} strokeLinecap="round" />);
  }
  return (
    <g>
      <circle cx={W * 0.5} cy={H * 0.3} r={Math.min(W, H) * 0.24} fill={`url(#${id}-glow)`} />
      <circle cx={W * 0.5} cy={H * 0.3} r={Math.min(W, H) * 0.08} fill={p.secondary} fillOpacity={0.85} />
      {steps}
      {vines}
    </g>
  );
}

function Gravity({ W, H, rnd, p, id }: Ctx) {
  const cx = W * 0.5;
  const cy = H * 0.45;
  const orbits: React.ReactNode[] = [];
  for (let i = 0; i < 5; i++) {
    const rx = Math.min(W, H) * (0.22 + i * 0.1);
    const ry = rx * between(rnd, 0.3, 0.5);
    const rot = between(rnd, -60, 60);
    orbits.push(<ellipse key={`o${i}`} cx={cx} cy={cy} rx={r2(rx)} ry={r2(ry)} fill="none" stroke={i % 2 ? p.primary : p.secondary} strokeOpacity={r2(0.55 - i * 0.08)} strokeWidth={1.5} transform={`rotate(${r2(rot)} ${cx} ${cy})`} />);
    const a = rnd() * Math.PI * 2;
    const px = cx + Math.cos(a) * rx;
    const py = cy + Math.sin(a) * ry;
    orbits.push(<circle key={`p${i}`} cx={r2(px)} cy={r2(py)} r={r2(between(rnd, 3, 8))} fill={i % 2 ? p.secondary : p.primary} transform={`rotate(${r2(rot)} ${cx} ${cy})`} />);
  }
  const stars: React.ReactNode[] = [];
  for (let i = 0; i < 40; i++) stars.push(<circle key={i} cx={r2(rnd() * W)} cy={r2(rnd() * H)} r={r2(between(rnd, 0.5, 1.3))} fill="#fff" fillOpacity={r2(between(rnd, 0.3, 0.8))} />);
  return (
    <g>
      {stars}
      <circle cx={cx} cy={cy} r={Math.min(W, H) * 0.16} fill={`url(#${id}-glow)`} />
      <circle cx={cx} cy={cy} r={Math.min(W, H) * 0.045} fill="#fff" fillOpacity={0.95} />
      {orbits}
    </g>
  );
}

function Core({ W, H, rnd, p, id }: Ctx) {
  const cx = W * 0.5;
  const cy = H * 0.44;
  const R = Math.min(W, H) * 0.22;
  const arcs: React.ReactNode[] = [];
  for (let i = 0; i < 3; i++) {
    const r = R * (1.5 + i * 0.35);
    arcs.push(<circle key={i} cx={cx} cy={cy} r={r2(r)} fill="none" stroke={i ? p.secondary : p.primary} strokeOpacity={0.35 - i * 0.08} strokeWidth={i ? 1.5 : 3} strokeDasharray={`${r2(r * 1.2)} ${r2(r * 0.9)}`} transform={`rotate(${r2(rnd() * 360)} ${cx} ${cy})`} />);
  }
  const embers: React.ReactNode[] = [];
  for (let i = 0; i < 30; i++) {
    const a = rnd() * Math.PI * 2;
    const d = R * between(rnd, 1.1, 3.2);
    embers.push(<circle key={i} cx={r2(cx + Math.cos(a) * d)} cy={r2(cy + Math.sin(a) * d * 0.8)} r={r2(between(rnd, 1, 3))} fill={rnd() > 0.5 ? p.secondary : p.primary} fillOpacity={r2(between(rnd, 0.3, 0.9))} />);
  }
  return (
    <g>
      {embers}
      <circle cx={cx} cy={cy} r={R * 2.2} fill={`url(#${id}-glow)`} />
      {arcs}
      <circle cx={cx} cy={cy} r={R} fill={`url(#${id}-sphere)`} />
      <circle cx={r2(cx - R * 0.3)} cy={r2(cy - R * 0.35)} r={R * 0.28} fill="#fff" fillOpacity={0.35} filter={`url(#${id}-blur)`} />
    </g>
  );
}

function Minimal({ W, H, p }: Ctx) {
  const y = H * 0.5;
  return (
    <g>
      <line x1={W * 0.1} y1={y} x2={W * 0.9} y2={y} stroke={p.secondary} strokeWidth={1.5} strokeOpacity={0.85} />
      <line x1={W * 0.1} y1={y} x2={W * 0.9} y2={y} stroke={p.secondary} strokeWidth={6} strokeOpacity={0.15} />
      <circle cx={W * 0.9} cy={y} r={3} fill={p.primary} />
      <circle cx={W * 0.1} cy={y} r={1.5} fill={p.secondary} />
      <line x1={W * 0.5} y1={H * 0.3} x2={W * 0.5} y2={H * 0.34} stroke={p.secondary} strokeOpacity={0.5} />
      <line x1={W * 0.5} y1={H * 0.66} x2={W * 0.5} y2={H * 0.7} stroke={p.secondary} strokeOpacity={0.5} />
    </g>
  );
}

function Universe({ W, H, rnd, p, id }: Ctx) {
  const cx = W * 0.5;
  const cy = H * 0.44;
  const R = Math.min(W, H) * 0.3;
  const rays: React.ReactNode[] = [];
  for (let i = 0; i < 48; i++) {
    const a = (i / 48) * Math.PI * 2;
    const len = R * between(rnd, 1.2, 2.6);
    rays.push(<line key={i} x1={r2(cx + Math.cos(a) * R * 0.5)} y1={r2(cy + Math.sin(a) * R * 0.5)} x2={r2(cx + Math.cos(a) * len)} y2={r2(cy + Math.sin(a) * len)} stroke={i % 4 === 0 ? p.secondary : p.primary} strokeOpacity={r2(between(rnd, 0.1, 0.45))} strokeWidth={i % 6 === 0 ? 2 : 1} strokeLinecap="round" />);
  }
  const stars: React.ReactNode[] = [];
  for (let i = 0; i < 50; i++) stars.push(<circle key={i} cx={r2(rnd() * W)} cy={r2(rnd() * H)} r={r2(between(rnd, 0.5, 1.5))} fill="#fff" fillOpacity={r2(between(rnd, 0.3, 0.9))} />);
  return (
    <g>
      {stars}
      <circle cx={cx} cy={cy} r={R * 2.4} fill={`url(#${id}-glow)`} />
      {rays}
      <circle cx={cx} cy={cy} r={R} fill="none" stroke={`url(#${id}-ring)`} strokeWidth={Math.max(3, R * 0.06)} />
      <circle cx={cx} cy={cy} r={R * 0.82} fill="none" stroke={p.secondary} strokeOpacity={0.35} strokeWidth={1.5} strokeDasharray="6 10" />
      <circle cx={cx} cy={cy} r={R * 0.12} fill="#fff" />
    </g>
  );
}

function PerspectiveGrid({ W, H, p }: Ctx) {
  const horizon = H * 0.42;
  const lines: React.ReactNode[] = [];
  for (let i = -8; i <= 8; i++) {
    lines.push(<line key={`v${i}`} x1={W * 0.5} y1={horizon} x2={r2(W * 0.5 + i * W * 0.28)} y2={H} stroke={p.primary} strokeOpacity={0.3} strokeWidth={1.2} />);
  }
  for (let k = 1; k <= 10; k++) {
    const t = k / 10;
    const y = horizon + (H - horizon) * t * t;
    lines.push(<line key={`h${k}`} x1={0} y1={r2(y)} x2={W} y2={r2(y)} stroke={p.primary} strokeOpacity={r2(0.15 + t * 0.35)} strokeWidth={1.2} />);
  }
  return (
    <g>
      <circle cx={W * 0.5} cy={horizon} r={Math.min(W, H) * 0.2} fill={p.secondary} fillOpacity={0.25} />
      <rect x={0} y={horizon} width={W} height={H - horizon} fill="#000" fillOpacity={0.35} />
      {lines}
      <line x1={0} y1={horizon} x2={W} y2={horizon} stroke={p.secondary} strokeOpacity={0.8} strokeWidth={2} />
    </g>
  );
}

const MOTIFS: Record<Backdrop, (c: Ctx) => React.ReactNode> = {
  vault: Vault,
  nebula: Nebula,
  pillars: Pillars,
  aurora: Aurora,
  lava: Lava,
  circuit: Circuit,
  skyline: Skyline,
  pyramid: Pyramid,
  arcade: Arcade,
  asteroids: Asteroids,
  track: Track,
  reactor: Reactor,
  abyss: Abyss,
  moon: Moon,
  temple: Temple,
  gravity: Gravity,
  core: Core,
  minimal: Minimal,
  universe: Universe,
  grid: PerspectiveGrid,
};

/* --------------------------------------------------------------- particles */

function Particles({ W, H, rnd, p, kind }: Ctx & { kind: string }) {
  const out: React.ReactNode[] = [];
  const n = 22;
  for (let i = 0; i < n; i++) {
    const x = r2(rnd() * W);
    const y = r2(rnd() * H);
    const op = r2(between(rnd, 0.25, 0.8));
    const s = between(rnd, 1.5, 4);
    switch (kind) {
      case "snow":
        out.push(<circle key={i} cx={x} cy={y} r={r2(s * 0.7)} fill="#fff" fillOpacity={op} />);
        break;
      case "coins":
        out.push(<ellipse key={i} cx={x} cy={y} rx={r2(s * 1.2)} ry={r2(s * 0.8)} fill={p.primary} fillOpacity={op} />);
        break;
      case "diamonds":
        out.push(<polygon key={i} points={`${x},${r2(y - s)} ${r2(x + s)},${y} ${x},${r2(y + s)} ${r2(x - s)},${y}`} fill={p.glow} fillOpacity={op} />);
        break;
      case "fire":
      case "sparks":
        out.push(<line key={i} x1={x} y1={y} x2={r2(x + between(rnd, -6, 6))} y2={r2(y - between(rnd, 4, 12))} stroke={rnd() > 0.5 ? p.primary : p.secondary} strokeOpacity={op} strokeWidth={1.5} strokeLinecap="round" />);
        break;
      case "confetti":
        out.push(<rect key={i} x={x} y={y} width={r2(s * 1.4)} height={r2(s * 0.7)} fill={[p.primary, p.secondary, p.glow][i % 3]} fillOpacity={op} transform={`rotate(${r2(rnd() * 90)} ${x} ${y})`} />);
        break;
      case "bubbles":
        out.push(<circle key={i} cx={x} cy={y} r={r2(s)} fill="none" stroke="#fff" strokeOpacity={op * 0.6} />);
        break;
      case "energy":
        out.push(<circle key={i} cx={x} cy={y} r={r2(s * 0.5)} fill={p.secondary} fillOpacity={op} />);
        break;
      case "dust":
        out.push(<circle key={i} cx={x} cy={y} r={r2(s * 0.35)} fill={p.primary} fillOpacity={op * 0.7} />);
        break;
      default:
        out.push(<circle key={i} cx={x} cy={y} r={r2(s * 0.4)} fill="#fff" fillOpacity={op} />);
    }
  }
  return <g>{out}</g>;
}

/* ------------------------------------------------------------------- title */

function splitName(name: string, oneLine: boolean): string[] {
  if (oneLine) return [name];
  const words = name.trim().split(/\s+/);
  if (words.length <= 1) return words;
  if (words.length === 2) return words;
  const mid = Math.ceil(words.length / 2);
  return [words.slice(0, mid).join(" "), words.slice(mid).join(" ")];
}

function Title({ name, W, H, pad, maxFont, oneLine, p }: { name: string; W: number; H: number; pad: number; maxFont: number; oneLine: boolean; p: ArtPalette }) {
  const lines = splitName(name.toUpperCase(), oneLine);
  const longest = Math.max(...lines.map((l) => l.length), 1);
  const size = Math.min(maxFont, ((W - pad * 2) / longest) * 1.55);
  const lineH = size * 0.92;
  const baseY = H - pad - (lines.length - 1) * lineH;
  return (
    <g fontFamily="var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif" fontWeight={700} style={{ letterSpacing: "-0.045em" }}>
      {lines.map((l, i) => (
        <text key={`s${i}`} x={pad} y={r2(baseY + i * lineH)} fontSize={r2(size)} fill={p.glow} fillOpacity={0.45} style={{ filter: "blur(10px)" }}>
          {l}
        </text>
      ))}
      {lines.map((l, i) => (
        <text key={i} x={pad} y={r2(baseY + i * lineH)} fontSize={r2(size)} fill="#ffffff">
          {l}
        </text>
      ))}
    </g>
  );
}

/* ----------------------------------------------------------------- GameArt */

export function GameArt({ slug, name, palette, backdrop, particles, variant = "card", className, showName = true, label }: GameArtProps) {
  const reactId = React.useId().replace(/[^a-zA-Z0-9]/g, "");
  const id = `ga${reactId}`;
  const preset = GAME_PRESENTATION[slug];
  const bd = (backdrop ?? preset?.backdrop ?? BACKDROPS[hashString(slug) % BACKDROPS.length]) as string;
  const motifKey: Backdrop = (BACKDROPS as readonly string[]).includes(bd) ? (bd as Backdrop) : "grid";
  const pt = particles ?? preset?.particles ?? "dust";
  const { w: W, h: H, pad, maxFont, oneLine } = DIMS[variant];
  const rnd = mulberry32(hashString(`${slug}:${variant}`));
  const ctx: Ctx = { W, H, rnd, p: palette, id };
  const motif = MOTIFS[motifKey];

  return (
    <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid slice" className={cn("block h-full w-full", className)} role={label ? "img" : undefined} aria-label={label} aria-hidden={label ? undefined : true}>
      <defs>
        <linearGradient id={`${id}-bg`} x1="0" y1="0" x2="0.4" y2="1">
          <stop offset="0" stopColor={palette.bg} />
          <stop offset="1" stopColor="#05060a" />
        </linearGradient>
        <radialGradient id={`${id}-glow`} cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" stopColor={palette.glow} stopOpacity="0.55" />
          <stop offset="0.5" stopColor={palette.primary} stopOpacity="0.18" />
          <stop offset="1" stopColor={palette.primary} stopOpacity="0" />
        </radialGradient>
        <linearGradient id={`${id}-vignette`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0.35" stopColor={palette.bg} stopOpacity="0" />
          <stop offset="1" stopColor="#03040a" stopOpacity="0.92" />
        </linearGradient>
        <linearGradient id={`${id}-col`} x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="#1c1410" />
          <stop offset="0.5" stopColor="#2a1d14" />
          <stop offset="1" stopColor="#120c08" />
        </linearGradient>
        <linearGradient id={`${id}-heat`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={palette.primary} stopOpacity="0" />
          <stop offset="1" stopColor={palette.primary} stopOpacity="0.45" />
        </linearGradient>
        <linearGradient id={`${id}-ray`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={palette.primary} stopOpacity="0.16" />
          <stop offset="1" stopColor={palette.primary} stopOpacity="0" />
        </linearGradient>
        <radialGradient id={`${id}-moon`} cx="0.35" cy="0.3" r="0.8">
          <stop offset="0" stopColor="#3a3d4a" />
          <stop offset="1" stopColor="#0d0e14" />
        </radialGradient>
        <radialGradient id={`${id}-sphere`} cx="0.4" cy="0.35" r="0.7">
          <stop offset="0" stopColor={palette.glow} />
          <stop offset="0.55" stopColor={palette.primary} />
          <stop offset="1" stopColor={palette.bg} />
        </radialGradient>
        <linearGradient id={`${id}-ring`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor={palette.primary} />
          <stop offset="1" stopColor={palette.secondary} />
        </linearGradient>
        <filter id={`${id}-blur`} x="-30%" y="-30%" width="160%" height="160%">
          <feGaussianBlur stdDeviation={Math.max(W, H) / 60} />
        </filter>
      </defs>
      <rect width={W} height={H} fill={`url(#${id}-bg)`} />
      {/* Called as plain functions (not components) so the seeded PRNG sequence is consumed exactly once per render — keeps SSR and client output identical even under StrictMode double-rendering. */}
      {motif(ctx)}
      {Particles({ ...ctx, kind: pt })}
      <rect width={W} height={H} fill={`url(#${id}-vignette)`} />
      <rect x="0.5" y="0.5" width={W - 1} height={H - 1} fill="none" stroke="#fff" strokeOpacity="0.06" />
      {showName ? <Title name={name} W={W} H={H} pad={pad} maxFont={maxFont} oneLine={oneLine} p={palette} /> : null}
    </svg>
  );
}