// usmap.jsx — Geographic US map (raster) with pin markers
// Background image: assets/us-map.png (3000×2118 → fits a 1000×720 viewBox)

// State pin coordinates in the 1000×720 viewBox.
// Image aspect 1000×706, top-aligned (legend strip below).
// Coords derived from reading state centers on the grid overlay.
// State pin coordinates in the 1000×720 viewBox.
// y = stem-tip / anchor location. The pin head visually sits 26 units above.
// Centers derived from the grid overlay on assets/us-map.png.
const PIN_COORDS = {
  MT: { x: 290, y: 115, name:'Montana' },
  CA: { x: 70,  y: 296, name:'California' },
  OR: { x: 115, y: 155, name:'Oregon' },
  NV: { x: 130, y: 260, name:'Nevada' },
  AZ: { x: 215, y: 395, name:'Arizona' },
  OH: { x: 745, y: 235, name:'Ohio' },
  MD: { x: 855, y: 250, name:'Maryland' },
  FL: { x: 830, y: 560, name:'Florida' },
  AK: { x: 270, y: 586, name:'Alaska' },
  HI: { x: 90,  y: 458, name:'Hawaii' },
  PR: { x: 940, y: 625, name:'Puerto Rico' },
};

function MapPin({ state, coord, onClick }) {
  const isLive = state.status === 'live';
  const status = state.status;
  return (
    <g
      className={`map-pin map-pin-${status}`}
      transform={`translate(${coord.x}, ${coord.y})`}
      onClick={() => onClick(state)}
      tabIndex={0}
      role="button"
      aria-label={`${state.name} — ${state.statusLabel}`}
    >
      {isLive && (
        <>
          <circle className="pin-ring" r="22"/>
          <circle className="pin-ring pin-ring-2" r="22"/>
        </>
      )}
      <line className="pin-stem" x1="0" y1="0" x2="0" y2="-26"/>
      <circle className="pin-head" cx="0" cy="-26" r="9"/>
      <circle className="pin-dot" cx="0" cy="-26" r="3"/>
      <g className="pin-tooltip" transform="translate(0, -42)">
        <rect x="-60" y="-22" width="120" height="32" rx="16" className="pin-tooltip-bg"/>
        <text x="0" y="-7" textAnchor="middle" className="pin-tooltip-state">{state.code}</text>
        <text x="0" y="4" textAnchor="middle" className="pin-tooltip-name">{state.statusLabel}</text>
      </g>
    </g>
  );
}

function USPinMap({ states, onPick }) {
  const byCode = Object.fromEntries(states.map(s => [s.code, s]));
  const pinned = Object.keys(PIN_COORDS).filter(code => byCode[code]);

  return (
    <div className="pinmap-frame">
      <div className="pinmap-bg-wrap">
        <img className="pinmap-bg" src="assets/us-map.png" alt="US territory map" draggable="false"/>
        <svg className="pinmap" viewBox="0 0 1000 720" preserveAspectRatio="xMidYMin meet" aria-label="Partnered US states">
        <defs>
          <filter id="pin-glow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur stdDeviation="3" result="blur"/>
            <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
          </filter>
        </defs>

        {/* Puerto Rico — hand-drawn outline */}
        <g className="pr-island" transform="translate(940, 625)">
          <path
            className="pr-shape"
            d="M -32,-2
               Q -28,-8 -20,-9
               Q -10,-11 -2,-10
               Q 8,-12 18,-10
               Q 26,-11 30,-7
               Q 33,-4 32,0
               Q 31,4 26,5
               Q 18,7 8,6
               Q -2,8 -12,6
               Q -22,7 -28,4
               Q -33,2 -32,-2 Z"
          />
          <text x="0" y="22" textAnchor="middle" className="inset-label">PR</text>
        </g>

        {/* Pins */}
        <g className="pins">
          {pinned.map(code => (
            <MapPin
              key={code}
              state={byCode[code]}
              coord={PIN_COORDS[code]}
              onClick={onPick}
            />
          ))}
        </g>

        {/* Compass rose top-right */}
        <g transform="translate(950, 40)" className="compass">
          <circle r="14" fill="none" stroke="rgba(60,38,18,0.45)" strokeWidth="1"/>
          <line x1="0" y1="-14" x2="0" y2="14" stroke="rgba(60,38,18,0.55)" strokeWidth="0.8"/>
          <line x1="-14" y1="0" x2="14" y2="0" stroke="rgba(60,38,18,0.55)" strokeWidth="0.8"/>
          <polygon points="0,-14 -3,0 0,-10 3,0" fill="rgba(170,30,30,0.85)"/>
          <text x="0" y="-18" textAnchor="middle" className="compass-label">N</text>
        </g>

        {/* Legend */}
        <g transform="translate(20, 712)" className="map-legend">
          <circle cx="6" cy="0" r="4" fill="#c8201f"/>
          <text x="16" y="4" className="legend-text">Live</text>
          <circle cx="74" cy="0" r="4" fill="#c8a14a"/>
          <text x="84" y="4" className="legend-text">Coming online</text>
          <circle cx="230" cy="0" r="4" fill="rgba(60,38,18,0.5)"/>
          <text x="240" y="4" className="legend-text">Waitlist</text>
        </g>
      </svg>
      </div>
    </div>
  );
}

// State silhouettes — rough hand outlines in 100x100 viewBox.
const STATE_SHAPES = {
  MT: 'M5,30 L95,30 L95,32 L96,72 L80,75 L62,72 L48,75 L30,72 L10,75 L5,72 Z',
  CA: 'M40,8 L70,8 L72,18 L80,30 L88,52 L92,68 L80,82 L70,92 L52,92 L48,80 L42,72 L38,60 L34,46 L36,32 L40,20 Z',
  // Oregon — wide rectangle with rounded SW corner & coast taper
  OR: 'M8,30 L92,30 L92,40 L93,58 L88,72 L74,76 L40,76 L20,72 L10,64 L7,50 L7,38 Z',
  NV: 'M22,18 L58,18 L82,72 L48,82 L30,68 Z',
  AZ: 'M18,22 L88,22 L88,42 L86,78 L20,78 L18,52 Z',
  // Ohio — squarish with panhandle / Lake Erie north edge
  OH: 'M22,28 L46,22 L70,24 L82,30 L82,46 L80,62 L74,76 L60,82 L38,80 L26,72 L20,58 L20,42 Z',
  // Maryland — narrow east-west sliver with skinny "panhandle" on the west
  MD: 'M8,52 L26,46 L40,48 L48,40 L62,40 L68,46 L84,44 L92,48 L92,58 L80,60 L70,56 L58,58 L46,62 L36,58 L22,62 L10,60 Z',
  // Florida — boot/peninsula
  FL: 'M14,28 L82,28 L86,34 L92,46 L92,62 L86,80 L74,90 L62,88 L58,76 L50,62 L42,52 L34,46 L24,44 L14,40 Z',
};

function StateSilhouette({ code, accent, label }) {
  return (
    <img
      className="state-shape"
      src={`assets/states/${code}.png`}
      alt={label}
      draggable="false"
      style={{ filter: accent ? `drop-shadow(0 0 14px ${accent}55)` : undefined }}
    />
  );
}

Object.assign(window, { USPinMap, StateSilhouette });