// Procedural, native-feeling art for CS2 maps. No external images.
// Each map name gets a distinct palette + layout, blended into the card
// surface so it reads as ambient background, not a stamped picture.

type Palette = { a: string; b: string; c: string };

const PALETTE: Record<string, Palette> = {
  de_mirage:   { a: "#c98a3c", b: "#5b3a1e", c: "#f2c079" },
  de_dust2:    { a: "#d1a35a", b: "#6b4a1f", c: "#f4d18a" },
  de_inferno:  { a: "#8b3a1f", b: "#3c1710", c: "#c9612e" },
  de_nuke:     { a: "#5b7a8a", b: "#22323a", c: "#9fb7c2" },
  de_ancient:  { a: "#3f7a4a", b: "#1a3524", c: "#7fbf8d" },
  de_anubis:   { a: "#c0913c", b: "#3d2f14", c: "#e6c46a" },
  de_vertigo:  { a: "#6f7683", b: "#2c3038", c: "#a9b0bd" },
  de_overpass: { a: "#7a7d54", b: "#2f3221", c: "#b7bb85" },
};

function paletteFor(map: string): Palette {
  return PALETTE[map] ?? { a: "#6a4a92", b: "#241734", c: "#a685cf" };
}

// A soft, painterly SVG background — silhouettes suggestive of map layouts
// (mid, T spawn, bombsites) without pretending to be photographic.
export function MapArt({ map, className }: { map: string; className?: string }) {
  const p = paletteFor(map);
  const id = map.replace(/[^a-z0-9]/gi, "");
  return (
    <svg
      viewBox="0 0 400 240"
      preserveAspectRatio="xMidYMid slice"
      className={className}
      aria-hidden
    >
      <defs>
        <radialGradient id={`g1-${id}`} cx="30%" cy="30%" r="80%">
          <stop offset="0%" stopColor={p.c} stopOpacity="0.7" />
          <stop offset="60%" stopColor={p.a} stopOpacity="0.35" />
          <stop offset="100%" stopColor={p.b} stopOpacity="0.9" />
        </radialGradient>
        <linearGradient id={`g2-${id}`} x1="0" x2="1" y1="0" y2="1">
          <stop offset="0%" stopColor={p.a} stopOpacity="0.35" />
          <stop offset="100%" stopColor={p.b} stopOpacity="0" />
        </linearGradient>
      </defs>
      <rect width="400" height="240" fill={`url(#g1-${id})`} />
      <g fill={`url(#g2-${id})`} opacity="0.85">
        <polygon points="0,180 90,120 200,150 260,90 400,140 400,240 0,240" />
      </g>
      <g fill={p.b} opacity="0.55">
        <rect x="40"  y="60"  width="60" height="40" rx="4" />
        <rect x="130" y="90"  width="80" height="30" rx="4" />
        <rect x="240" y="55"  width="50" height="55" rx="4" />
        <rect x="310" y="105" width="70" height="35" rx="4" />
      </g>
      <g stroke={p.c} strokeOpacity="0.35" strokeWidth="1.2" fill="none">
        <path d="M20 210 L110 155 L200 180 L285 130 L390 175" />
        <path d="M60 100 L160 130 L250 115 L340 150" strokeDasharray="3 5" />
      </g>
      <g fill={p.c} opacity="0.9">
        <circle cx="110" cy="155" r="3.5" />
        <circle cx="285" cy="130" r="3.5" />
      </g>
    </svg>
  );
}