// site-global-oversight.jsx — Looped "Global Oversight" reel.
// World map with pulsing city nodes across 5 continents; one event cycles
// through 4 real-world incidents; a synced phone on the right shows the
// alert → NOT OK → dispatch → resolved arc per event.

const { useState: useStateGov, useEffect: useEffectGov } = React;

// City positions calibrated to assets/r24-world-map.png (Mercator).
// x,y are % of the map area.
const GOV_CITIES = [
  // North America
  { x: 18, y: 38, n: "Vancouver" },
  { x: 24, y: 37, n: "Chicago" },
  { x: 13, y: 39, n: "San Francisco" },
  { x: 15, y: 43, n: "Los Angeles" },
  { x: 26, y: 38, n: "New York" },
  { x: 25, y: 35, n: "Toronto" },
  { x: 22, y: 45, n: "Houston" },
  { x: 26, y: 47, n: "Miami" },
  { x: 21, y: 49, n: "Mexico City" },
  // South America
  { x: 28, y: 54, n: "Caracas" },
  { x: 26, y: 60, n: "Lima" },
  { x: 34, y: 65, n: "São Paulo" },
  { x: 32, y: 72, n: "Buenos Aires" },
  // Europe
  { x: 48, y: 31, n: "London" },
  { x: 50, y: 33, n: "Paris" },
  { x: 51, y: 30, n: "Berlin" },
  { x: 47, y: 36, n: "Madrid" },
  { x: 55, y: 28, n: "Moscow" },
  { x: 53, y: 35, n: "Rome" },
  // MENA & Africa
  { x: 55, y: 41, n: "Cairo" },
  { x: 49, y: 55, n: "Lagos" },
  { x: 57, y: 58, n: "Nairobi" },
  { x: 54, y: 67, n: "Johannesburg" },
  { x: 60, y: 43, n: "Dubai" },
  { x: 57, y: 46, n: "Riyadh" },
  // Asia
  { x: 65, y: 49, n: "Mumbai" },
  { x: 66, y: 43, n: "Delhi" },
  { x: 72, y: 52, n: "Bangkok" },
  { x: 73, y: 58, n: "Singapore" },
  { x: 76, y: 62, n: "Jakarta" },
  { x: 78, y: 36, n: "Beijing" },
  { x: 82, y: 38, n: "Seoul" },
  { x: 84, y: 40, n: "Tokyo" },
  // Oceania
  { x: 84, y: 72, n: "Sydney" },
  { x: 92, y: 78, n: "Auckland" },
];

// The 4 cycling events. cityIdx points into GOV_CITIES.
const GOV_EVENTS = [
  {
    cityIdx: 21, // Nairobi
    cat: "CIVIL UNREST",
    incident: "Civil unrest reported · Nairobi CBD",
    in_zone: 32,
    phases: [
      { label: "Alert · 32 personnel in geofence",   pill: "ALERT",      tone: "amber" },
      { label: "You: NOT OK · GSOC notified",         pill: "NOT OK",     tone: "coral" },
      { label: "Country Director paged · ETA 4 min",  pill: "DISPATCHED", tone: "gold"  },
      { label: "Resolved · all 32 confirmed safe",    pill: "RESOLVED",   tone: "teal"  },
    ],
  },
  {
    cityIdx: 25, // Mumbai
    cat: "MEDICAL",
    incident: "Cardiac event · Lower Parel office",
    in_zone: 1,
    phases: [
      { label: "Reverse panic from R. Patel",         pill: "DURESS",     tone: "coral" },
      { label: "Location confirmed · audio buffer ok", pill: "VERIFIED",   tone: "amber" },
      { label: "ER24 partner dispatched · 6 min",      pill: "AMBULANCE",  tone: "gold"  },
      { label: "Handover at Lilavati · case closed",   pill: "RESOLVED",   tone: "teal"  },
    ],
  },
  {
    cityIdx: 13, // London
    cat: "TRAVEL RISK",
    incident: "Severe weather · all UK flights",
    in_zone: 8,
    phases: [
      { label: "Storm advisory · 8 travellers in path", pill: "TRAVEL",    tone: "amber" },
      { label: "Re-routed via Manchester · auto",       pill: "RE-ROUTED", tone: "amber" },
      { label: "Hotels rebooked · costs auto-claimed",  pill: "CARED FOR", tone: "gold"  },
      { label: "All 8 checked in safe at destination",  pill: "RESOLVED",  tone: "teal"  },
    ],
  },
  {
    cityIdx: 29, // Jakarta
    cat: "SECURITY",
    incident: "Armed robbery · Sudirman corridor",
    in_zone: 14,
    phases: [
      { label: "Threat detected · 14 personnel close",  pill: "ALERT",     tone: "coral" },
      { label: "VRO escalated to L1 · armed dispatch",  pill: "ESCALATED", tone: "coral" },
      { label: "Local responder on scene · 4 min",      pill: "ON SCENE",  tone: "gold"  },
      { label: "Audit trail sealed · INC-2841",         pill: "SEALED",    tone: "teal"  },
    ],
  },
];

const PHASE_MS = 1800;     // each phase
const PHASES_PER_EVENT = 4;
const EVENT_MS = PHASE_MS * PHASES_PER_EVENT;

window.GOV_CITIES = GOV_CITIES;
window.GOV_EVENTS = GOV_EVENTS;
window.GOV_PHASE_MS = PHASE_MS;
