// US map — real state outlines from Wikimedia Blank_US_Map.svg
// Source paths: data/us-state-paths.js (window.usMap keyed by 2-letter state)
// Paths live in 959×593 coord space; we crop to continental US.
window.UsMap = function UsMap({ cities, activeId, onSelect }) {
  const statePaths = window.usMap || {};
  // Continental states only (no HI/AK/PR/etc.)
  const CONTINENTAL = [
    "wa","or","ca","nv","id","mt","wy","ut","co","az","nm","nd","sd","ne",
    "ks","ok","tx","mn","ia","mo","ar","la","wi","il","mi","in","oh","ky",
    "tn","ms","al","ga","fl","sc","nc","va","wv","dc","md","de","pa","nj",
    "ny","ct","ri","ma","vt","nh","me"
  ];

  return (
    <svg viewBox="0 0 959 593" xmlns="http://www.w3.org/2000/svg"
         aria-label="US host cities map"
         style={{ width: "100%", height: "100%", display: "block" }}>
      <defs>
        <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="6" result="blur" />
          <feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
        </filter>
        <pattern id="dotGrid" x="0" y="0" width="22" height="22" patternUnits="userSpaceOnUse">
          <circle cx="1" cy="1" r="0.6" fill="rgba(255,255,255,0.06)" />
        </pattern>
      </defs>

      {/* Dot-grid backdrop */}
      <rect width="959" height="593" fill="url(#dotGrid)" opacity="0.5" />

      {/* State fills */}
      <g fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.22)" strokeWidth="0.8" strokeLinejoin="round">
        {CONTINENTAL.map((s) => (
          statePaths[s] ? <path key={s} d={statePaths[s]} /> : null
        ))}
      </g>

      {/* City markers */}
      {cities.map((city) => {
        const active = city.id === activeId;
        const shortName = city.name.split(" / ")[0].split(" Bay")[0];
        return (
          <g key={city.id}
             onClick={() => onSelect(city.id)}
             style={{ cursor: "pointer" }}
             transform={`translate(${city.x}, ${city.y})`}>
            {active && (
              <circle r="28" fill="rgba(255,111,0,0.18)">
                <animate attributeName="r" values="16;32;16" dur="2.4s" repeatCount="indefinite" />
                <animate attributeName="opacity" values="0.7;0;0.7" dur="2.4s" repeatCount="indefinite" />
              </circle>
            )}
            <circle r={active ? 9 : 5}
              fill={active ? "#FF6F00" : "rgba(255,255,255,0.92)"}
              stroke={active ? "#fff" : "rgba(255,111,0,0.7)"}
              strokeWidth={active ? 2.5 : 1.4}
              filter={active ? "url(#glow)" : ""}
              style={{ transition: "r 200ms ease, fill 200ms ease" }} />
            <text
              y={active ? -18 : -12}
              textAnchor="middle"
              fill={active ? "#fff" : "rgba(255,255,255,0.8)"}
              fontSize={active ? "14" : "12"}
              fontWeight={active ? "700" : "500"}
              style={{ letterSpacing: "-0.01em", transition: "all 200ms ease", pointerEvents: "none",
                       paintOrder: "stroke", stroke: "rgba(11,20,38,0.85)", strokeWidth: "3" }}>
              {shortName}
            </text>
          </g>
        );
      })}
    </svg>
  );
};