// World map – stylized dotted continents, programmatically rendered
// Equirectangular projection on 1000×500 viewBox

const CONTINENT_BLOBS = [
  // North America
  { cx: 180, cy: 130, rx: 95, ry: 55, w: 1 },
  { cx: 220, cy: 175, rx: 32, ry: 28, w: .8 }, // Central America
  { cx: 130, cy: 95,  rx: 60, ry: 30, w: .6 }, // Canada north
  // South America
  { cx: 275, cy: 285, rx: 48, ry: 85, w: 1 },
  // Greenland
  { cx: 360, cy: 70,  rx: 30, ry: 32, w: .6 },
  // Europe
  { cx: 500, cy: 125, rx: 55, ry: 35, w: 1 },
  // Africa
  { cx: 525, cy: 260, rx: 65, ry: 95, w: 1 },
  // Middle East / Arabia
  { cx: 605, cy: 200, rx: 40, ry: 38, w: .9 },
  // Asia bulk
  { cx: 700, cy: 145, rx: 130, ry: 80, w: 1 },
  // India
  { cx: 690, cy: 215, rx: 28, ry: 38, w: .9 },
  // SE Asia / Indonesia
  { cx: 800, cy: 250, rx: 55, ry: 22, w: .9 },
  // Japan
  { cx: 855, cy: 165, rx: 18, ry: 28, w: .8 },
  // Australia
  { cx: 850, cy: 335, rx: 55, ry: 32, w: 1 },
  // NZ
  { cx: 920, cy: 380, rx: 14, ry: 18, w: .7 },
];

function continentMask(x, y) {
  let v = 0;
  for (const b of CONTINENT_BLOBS) {
    const dx = (x - b.cx) / b.rx;
    const dy = (y - b.cy) / b.ry;
    const d = dx * dx + dy * dy;
    if (d < 1) v = Math.max(v, b.w * (1 - d));
  }
  return v;
}

// Pre-generate dot grid
const DOTS = (() => {
  const dots = [];
  const step = 8;
  for (let y = 30; y < 460; y += step) {
    const odd = (y / step) % 2 === 0 ? 0 : step / 2;
    for (let x = 10 + odd; x < 1000; x += step) {
      const v = continentMask(x, y);
      if (v > 0.08) {
        const jitter = (Math.sin(x * 12.9898 + y * 78.233) * 43758.5) % 1;
        dots.push({ x: x + (jitter - .5) * 2, y, r: 1.1 + v * 1.0, o: 0.18 + v * 0.5 });
      }
    }
  }
  return dots;
})();

// Pins at equirectangular (lon, lat) → x = (lon+180)/360*1000, y = (90-lat)/180*500
function lonLat(lon, lat) {
  return { x: (lon + 180) / 360 * 1000, y: (90 - lat) / 180 * 500 };
}

const PIN_COORDS = {
  grenada:         lonLat(-61.7, 12.1),
  "saint-kitts":   lonLat(-62.7, 17.3),
  antigua:         lonLat(-61.8, 17.1),
  dominica:        lonLat(-61.4, 15.4),
  "saint-lucia":   lonLat(-60.9, 13.9),
  turkey:          lonLat( 35.0, 39.0),
  "sao-tome":      lonLat(  6.6,  0.3),
  "portugal-golden": lonLat( -8.2, 39.4),
  "portugal-hqa":  lonLat( -8.6, 41.1),
  spain:           lonLat( -3.7, 40.4),
  greece:          lonLat( 22.0, 39.0),
  cyprus:          lonLat( 33.0, 35.0),
  "usa-eb5":       lonLat(-95.0, 38.0),
  "usa-e2":        lonLat(-77.0, 39.0),
  "costa-rica":    lonLat(-84.0,  9.7),
};

function WorldMap({ programs, activeId, onHover, onSelect, compact = false }) {
  // Group close-by caribbean pins
  return (
    <svg viewBox="0 0 1000 500" preserveAspectRatio="xMidYMid meet"
         style={{ width: '100%', height: '100%', display: 'block' }}>
      <defs>
        <radialGradient id="pin-glow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.5" />
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
        </radialGradient>
        <filter id="soft" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="0.6" />
        </filter>
      </defs>

      {/* Continent dots */}
      <g filter="url(#soft)">
        {DOTS.map((d, i) => (
          <circle key={i} cx={d.x} cy={d.y} r={d.r}
                  fill="var(--fg)" opacity={d.o * 0.55} />
        ))}
      </g>

      {/* Subtle equator + tropics – abstract latitude lines */}
      <g stroke="var(--fg)" strokeOpacity="0.06" strokeWidth="0.5" fill="none">
        <line x1="0" y1="250" x2="1000" y2="250" strokeDasharray="2 6" />
        <line x1="0" y1="185" x2="1000" y2="185" strokeDasharray="1 8" />
        <line x1="0" y1="315" x2="1000" y2="315" strokeDasharray="1 8" />
      </g>

      {/* Pins */}
      {programs.map((p) => {
        const c = PIN_COORDS[p.id];
        if (!c) return null;
        const isActive = activeId === p.id;
        return (
          <g key={p.id} transform={`translate(${c.x} ${c.y})`}
             style={{ cursor: 'pointer' }}
             onMouseEnter={() => onHover?.(p.id)}
             onMouseLeave={() => onHover?.(null)}
             onClick={() => onSelect?.(p)}>
            {isActive && (
              <circle r="3" fill="var(--accent)" opacity="0.5">
                <animate attributeName="r" from="3" to="14" dur="1.6s" repeatCount="indefinite" />
                <animate attributeName="opacity" from="0.5" to="0" dur="1.6s" repeatCount="indefinite" />
              </circle>
            )}
            <circle r="6" fill="url(#pin-glow)" opacity={isActive ? 1 : 0.7} />
            <circle r={isActive ? 3.2 : 2.4} fill="var(--accent)" />
            <circle r={isActive ? 1.4 : 1.0} fill="#fff" opacity="0.9" />
            {!compact && isActive && (
              <g transform="translate(8 -10)">
                <rect x="0" y="-9" rx="3" ry="3" width={p.country.length * 5.4 + 16} height="18"
                      fill="var(--bg-elev)" stroke="var(--border-strong)" />
                <text x="8" y="3" fill="var(--fg)" fontSize="9"
                      fontFamily="var(--f-sans)" fontWeight="500">
                  {p.country}
                </text>
              </g>
            )}
          </g>
        );
      })}
    </svg>
  );
}

window.WorldMap = WorldMap;
window.PIN_COORDS = PIN_COORDS;