// map.jsx — editorial nearshore arc map (Monterrey → North America)
// Globals: NearshoreMap

const RN_CITIES = [
  // [name, lon, lat]
  { name: "Vancouver",   lon: -123.1, lat: 49.3, side: "left" },
  { name: "Seattle",     lon: -122.3, lat: 47.6, side: "left" },
  { name: "San Francisco", lon: -122.4, lat: 37.8, side: "left" },
  { name: "Denver",      lon: -104.9, lat: 39.7, side: "left" },
  { name: "Toronto",     lon:  -79.4, lat: 43.7, side: "right" },
  { name: "New York",    lon:  -74.0, lat: 40.7, side: "right" },
  { name: "Chicago",     lon:  -87.6, lat: 41.9, side: "right" },
  { name: "Austin",      lon:  -97.7, lat: 30.3, side: "right" },
  { name: "Miami",       lon:  -80.2, lat: 25.8, side: "right" },
];

const RN_ORIGIN = { name: "Monterrey", lon: -100.3, lat: 25.7 };

// project lon/lat → svg coords (viewBox 0 0 800 540)
function proj(lon, lat) {
  // lon range -135 .. -65  (width 70)
  // lat range 15 .. 56     (height 41)
  const x = (lon - -135) * (800 / 70);
  const y = (56 - lat) * (540 / 41);
  return [x, y];
}

function makeArcPath(x1, y1, x2, y2, bowFactor = 0.32) {
  const dx = x2 - x1;
  const dy = y2 - y1;
  const dist = Math.sqrt(dx * dx + dy * dy);
  // arc apex offset perpendicular to line, biased upward (toward smaller y, "north")
  const mx = (x1 + x2) / 2;
  const my = (y1 + y2) / 2;
  // unit perpendicular
  let px = -dy / dist;
  let py = dx / dist;
  // force the bow to lift north (negative y)
  if (py > 0) { px = -px; py = -py; }
  const bow = dist * bowFactor;
  const cx = mx + px * bow;
  const cy = my + py * bow;
  return `M ${x1.toFixed(1)} ${y1.toFixed(1)} Q ${cx.toFixed(1)} ${cy.toFixed(1)} ${x2.toFixed(1)} ${y2.toFixed(1)}`;
}

function NearshoreMap() {
  const [ox, oy] = proj(RN_ORIGIN.lon, RN_ORIGIN.lat);

  const arcs = RN_CITIES.map((c, i) => {
    const [x, y] = proj(c.lon, c.lat);
    const d = makeArcPath(ox, oy, x, y, 0.28 + (i % 3) * 0.04);
    return { ...c, x, y, d };
  });

  // Approximate latitude lines we want as labeled graticules
  const lats = [50, 40, 30];
  const lons = [-120, -100, -80];

  return (
    <svg
      viewBox="0 0 800 540"
      width="100%"
      height="auto"
      preserveAspectRatio="xMidYMid meet"
      style={{ display: "block" }}
    >
      <defs>
        <pattern id="rn-dots" x="0" y="0" width="14" height="14" patternUnits="userSpaceOnUse">
          <circle cx="1" cy="1" r="0.7" fill="var(--ink)" opacity="0.18"/>
        </pattern>
      </defs>

      {/* dotted "ocean" background */}
      <rect x="0" y="0" width="800" height="540" fill="url(#rn-dots)"/>

      {/* Simplified continental land mass — abstract, editorial */}
      <g fill="var(--bg-alt)" stroke="var(--line)" strokeWidth="0.8" opacity="1">
        {/* North America blob */}
        <path d="
          M 30 30
          L 200 25
          L 280 60
          L 360 50
          L 440 40
          L 520 50
          L 600 70
          L 680 110
          L 740 160
          L 770 230
          L 760 290
          L 700 320
          L 660 370
          L 620 420
          L 560 430
          L 500 410
          L 450 380
          L 410 400
          L 380 440
          L 360 470
          L 330 460
          L 300 420
          L 250 370
          L 210 340
          L 160 320
          L 120 290
          L 80 250
          L 50 180
          L 30 110
          Z
        "/>
      </g>

      {/* graticule */}
      <g stroke="var(--line)" strokeWidth="0.4" opacity="0.55">
        {lats.map((lat) => {
          const [, y] = proj(-100, lat);
          return <line key={`lat${lat}`} x1="0" y1={y} x2="800" y2={y}/>;
        })}
        {lons.map((lon) => {
          const [x] = proj(lon, 30);
          return <line key={`lon${lon}`} x1={x} y1="0" x2={x} y2="540"/>;
        })}
      </g>
      {/* graticule labels */}
      <g style={{ fontFamily: 'var(--mono)', fontSize: 9 }} fill="var(--muted)">
        {lats.map((lat) => {
          const [, y] = proj(-100, lat);
          return <text key={`latL${lat}`} x="8" y={y - 4}>{lat}°N</text>;
        })}
        {lons.map((lon) => {
          const [x] = proj(lon, 30);
          return <text key={`lonL${lon}`} x={x + 5} y="14">{Math.abs(lon)}°W</text>;
        })}
      </g>

      {/* US/Mexico border (approximate, decorative) */}
      <path
        d="M 165 286 Q 230 300 300 300 Q 360 305 410 320 Q 460 330 510 326 Q 555 320 600 318"
        fill="none" stroke="var(--line)" strokeWidth="1" strokeDasharray="3 4" opacity="0.7"
      />

      {/* arcs */}
      {arcs.map((c, i) => (
        <g key={c.name}>
          <path
            d={c.d}
            fill="none"
            stroke="var(--ink)"
            strokeWidth="1.1"
            opacity="0.65"
            className="arc"
            style={{ "--len": 900, "--delay": `${300 + i * 130}ms` }}
          />
        </g>
      ))}

      {/* destination dots + labels */}
      {arcs.map((c, i) => (
        <g key={`d-${c.name}`} className="arc-dot" style={{ "--delay": `${300 + i * 130 + 1900}ms` }}>
          <circle cx={c.x} cy={c.y} r="3.5" fill="var(--ink)"/>
          <circle cx={c.x} cy={c.y} r="6" fill="none" stroke="var(--ink)" strokeWidth="0.5" opacity="0.4"/>
          <text
            x={c.side === "right" ? c.x + 10 : c.x - 10}
            y={c.y + 3.5}
            textAnchor={c.side === "right" ? "start" : "end"}
            fill="var(--ink)"
            style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.06em' }}
          >
            {c.name.toUpperCase()}
          </text>
        </g>
      ))}

      {/* Monterrey origin (red, pulsing) */}
      <g>
        <circle cx={ox} cy={oy} r="6" fill="var(--red)" opacity="0.35" className="arc-origin"/>
        <circle cx={ox} cy={oy} r="6" fill="var(--red)"/>
        <circle cx={ox} cy={oy} r="2.4" fill="var(--bg)"/>
        <line x1={ox} y1={oy} x2={ox} y2={oy - 22} stroke="var(--red)" strokeWidth="1"/>
        <path
          d={`M ${ox} ${oy - 26} L ${ox - 3} ${oy - 20} L ${ox + 3} ${oy - 20} Z`}
          fill="var(--red)"
        />
        <text
          x={ox - 8} y={oy + 16}
          textAnchor="end"
          fill="var(--red)"
          style={{ fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 600, letterSpacing: '0.1em' }}
        >MONTERREY</text>
        <text
          x={ox - 8} y={oy + 28}
          textAnchor="end"
          fill="var(--red)"
          opacity="0.65"
          style={{ fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.1em' }}
        >25.6866° N · 100.3161° W</text>
      </g>

      {/* compass rose mini in corner */}
      <g transform="translate(740 480)" opacity="0.6">
        <circle r="22" fill="none" stroke="var(--ink)" strokeWidth="0.6"/>
        <line x1="0" y1="-22" x2="0" y2="22" stroke="var(--ink)" strokeWidth="0.4"/>
        <line x1="-22" y1="0" x2="22" y2="0" stroke="var(--ink)" strokeWidth="0.4"/>
        <path d="M 0 -22 L 3 -3 L 0 -8 L -3 -3 Z" fill="var(--red)"/>
        <text y="-26" textAnchor="middle" fill="var(--red)" style={{ fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.16em' }}>N</text>
      </g>
    </svg>
  );
}

Object.assign(window, { NearshoreMap });