Function WorldMapInner

src/components/WorldMap.tsx:224–2088

({
  markets,
  activeCategories,
  flyToTarget,
  timeRange,
  onTimeRangeChange,
  onToggleCategory,
  onToggleFullscreen,
  isFullscreen,
  onMarketClick,
  onCountryClick,
  selectedCountry,
  selectedMarketId,
  colorMode = "category",
  onColorModeChange,
  region,
  onRegionChange,
  isWatched,
  onToggleWatch,
  newMarkets,
  whaleTrades,
  activeLayers,
  onToggleLayer,
  onTrade,
  onMapTap,
}: WorldMapProps)

}

function WorldMapInner({
  markets,
  activeCategories,
  flyToTarget,
  timeRange,
  onTimeRangeChange,
  onToggleCategory,
  onToggleFullscreen,
  isFullscreen,
  onMarketClick,
  onCountryClick,
  selectedCountry,
  selectedMarketId,
  colorMode = "category",
  onColorModeChange,
  region,
  onRegionChange,
  isWatched,
  onToggleWatch,
  newMarkets,
  whaleTrades,
  activeLayers,
  onToggleLayer,
  onTrade,
  onMapTap,
}: WorldMapProps) {
  const { locale, t } = useI18n();
  const mapContainer = useRef<HTMLDivElement>(null);
  const mapRef = useRef<maplibregl.Map | null>(null);

  const [mapReady, setMapReady] = useState(false);
  const [currentTier, setCurrentTier] = useState(() => zoomToTier(1.2));
  const marketsLookup = useRef<Map<string, ProcessedMarket>>(new Map());
  const countryLayersAdded = useRef(false);
  const pulseRef = useRef<number>(0);

  const newMarketAnimRef = useRef<Map<string, { startTime: number; lng: number; lat: number }>>(new Map());

  const tradeFlashesRef = useRef<{ key: string; lng: number; lat: number; startTime: number; side: "BUY" | "SELL"; isSmart: boolean }[]>([]);
  const seenTradeKeysRef = useRef<Set<string>>(new Set());
  const prevMarketIdsRef = useRef<Map<string, { lng: number; lat: number; color: string }>>(new Map());
  const prevTierRef = useRef<number>(0);
  const closedAnimsRef = useRef<Map<string, { startTime: number; lng: number; lat: number; color: string }>>(new Map());
  const reducedMotionCleanup = useRef<(() => void) | null>(null);
  const overlayFetched = useRef<Set<OverlayLayer>>(new Set());
  const overlayBurstRef = useRef<{ lng: number; lat: number; startTime: number; color: string }[]>([]);
  const [layerAlert, setLayerAlert] = useState<{ emoji: string; label: string; count: number; color: string } | null>(null);
  const layerAlertTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const OVERLAY_META: Partial<Record<OverlayLayer, { emoji: string; label: string; color: string }>> = {
    conflicts:  { emoji: "💥", label: "conflict zones",   color: "#ef4444" },
    intel:      { emoji: "🔍", label: "intel hotspots",   color: "#a855f7" },
    military:   { emoji: "✈️",  label: "military flights", color: "#22d3ee" },
    weather:    { emoji: "🌩️", label: "weather alerts",   color: "#f59e0b" },
    natural:    { emoji: "🌍", label: "natural events",   color: "#f97316" },
    fires:      { emoji: "🔥", label: "fires",            color: "#ff6b35" },
    elections:  { emoji: "🗳️", label: "elections",        color: "#fbbf24" },
    outages:    { emoji: "📡", label: "internet outages", color: "#e879f9" },