solanapolis 1.0.0

package/src/components/CesiumGlobe.tsx

@@ -0,0 +1,616 @@
+"use client";
+
+import { useEffect, useRef, useState, useCallback } from "react";
+import type {
+  Viewer,
+  Cartesian2,
+  Cartesian3,
+  Cesium3DTileFeature,
+  Cesium3DTileset,
+} from "cesium";
+
+const CESIUM_CDN = "https://cesium.com/downloads/cesiumjs/releases/1.139/Build/Cesium/";
+
+type CesiumModule = typeof import("cesium");
+
+interface CesiumGlobeProps {
+  walletAddress: string | null;
+  onExit: () => void;
+  /** Transition to Cesium flight mode at given coordinates */
+  onFlyAt?: (lon: number, lat: number, alt: number, heading: number) => void;
+}
+
+// ── Featured locations ─────────────────────────────────────────────────────────
+const GLOBE_LOCATIONS = [
+  { name: "New York",       flag: "🇺🇸", lon: -74.006,   lat: 40.7128,  alt: 800,  pitch: -45 },
+  { name: "London",         flag: "🇬🇧", lon: -0.1278,   lat: 51.5074,  alt: 600,  pitch: -45 },
+  { name: "Tokyo",          flag: "🇯🇵", lon: 139.6917,  lat: 35.6895,  alt: 700,  pitch: -45 },
+  { name: "Dubai",          flag: "🇦🇪", lon: 55.2708,   lat: 25.2048,  alt: 900,  pitch: -45 },
+  { name: "Paris",          flag: "🇫🇷", lon: 2.3522,    lat: 48.8566,  alt: 600,  pitch: -45 },
+  { name: "San Francisco",  flag: "🇺🇸", lon: -122.4194, lat: 37.7749,  alt: 700,  pitch: -45 },
+  { name: "Sydney",         flag: "🇦🇺", lon: 151.2093,  lat: -33.8688, alt: 800,  pitch: -45 },
+  { name: "Giza",           flag: "🇪🇬", lon: 31.1342,   lat: 29.9792,  alt: 1200, pitch: -35 },
+  { name: "Solana Beach",   flag: "⚡",  lon: -117.2700, lat: 32.9915,  alt: 600,  pitch: -45 },
+];
+
+// ── Metadata keys to show in popover ─────────────────────────────────────────
+const METADATA_LABELS: Record<string, string> = {
+  "cesium#name":     "Name",
+  "name":            "Name",
+  "building":        "Type",
+  "addr:street":     "Street",
+  "addr:housenumber": "Number",
+  "addr:city":       "City",
+  "building:levels": "Floors",
+  "height":          "Height",
+  "roof:shape":      "Roof",
+  "source":          "Source",
+};
+
+interface MetadataInfo {
+  entries: Array<{ label: string; value: string }>;
+  screenX: number;
+  screenY: number;
+}
+
+interface StreetViewInfo {
+  lat: number;
+  lon: number;
+  url: string;
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+export default function CesiumGlobe({ walletAddress, onExit, onFlyAt }: CesiumGlobeProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const viewerRef = useRef<Viewer | null>(null);
+  const cesiumRef = useRef<CesiumModule | null>(null);
+  const buildingsRef = useRef<Cesium3DTileset | null>(null);
+
+  const [status, setStatus] = useState<"loading" | "ready" | "error">("loading");
+  const [initError, setInitError] = useState<string | null>(null);
+  const [metadata, setMetadata] = useState<MetadataInfo | null>(null);
+  const [showLocations, setShowLocations] = useState(false);
+  const [cameraInfo, setCameraInfo] = useState({ lat: 0, lon: 0, alt: 0 });
+  const [showBuildings, setShowBuildings] = useState(true);
+  const [streetView, setStreetView] = useState<StreetViewInfo | null>(null);
+  const [streetViewLoading, setStreetViewLoading] = useState(false);
+
+  const lastPickRef = useRef(0);
+
+  // ── Fly to location ──────────────────────────────────────────────────────
+  const flyTo = useCallback((lon: number, lat: number, alt: number, pitch: number) => {
+    const viewer = viewerRef.current;
+    const Cesium = cesiumRef.current;
+    if (!viewer || !Cesium) return;
+
+    viewer.camera.flyTo({
+      destination: Cesium.Cartesian3.fromDegrees(lon, lat, alt),
+      orientation: {
+        heading: Cesium.Math.toRadians(0),
+        pitch: Cesium.Math.toRadians(pitch),
+        roll: 0,
+      },
+      duration: 2.0,
+    });
+    setShowLocations(false);
+    setMetadata(null);
+  }, []);
+
+  // ── Initialize Cesium ──────────────────────────────────────────────────────
+  useEffect(() => {
+    if (!containerRef.current) return;
+    let mounted = true;
+
+    async function init() {
+      try {
+        (window as Window & { CESIUM_BASE_URL?: string }).CESIUM_BASE_URL = CESIUM_CDN;
+
+        if (!document.querySelector("#cesium-css")) {
+          const link = document.createElement("link");
+          link.id = "cesium-css";
+          link.rel = "stylesheet";
+          link.href = `${CESIUM_CDN}Widgets/widgets.css`;
+          document.head.appendChild(link);
+        }
+
+        const Cesium: CesiumModule = await import("cesium");
+        if (!mounted || !containerRef.current) return;
+        cesiumRef.current = Cesium;
+
+        const token = process.env.NEXT_PUBLIC_CESIUM_ION_TOKEN;
+        if (token) Cesium.Ion.defaultAccessToken = token;
+
+        const viewer = new Cesium.Viewer(containerRef.current, {
+          animation: false,
+          baseLayerPicker: false,
+          fullscreenButton: false,
+          geocoder: false,
+          homeButton: false,
+          infoBox: false,
+          sceneModePicker: false,
+          selectionIndicator: false,
+          timeline: false,
+          navigationHelpButton: false,
+          vrButton: false,
+          scene3DOnly: true,
+          requestRenderMode: false,
+        });
+        viewerRef.current = viewer;
+
+        // Hide credits
+        (viewer.cesiumWidget.creditContainer as HTMLElement).style.display = "none";
+
+        // ── Terrain ────────────────────────────────────────────────────
+        try {
+          viewer.terrainProvider = await Cesium.createWorldTerrainAsync();
+        } catch {
+          /* ellipsoid fallback */
+        }
+
+        // ── Atmosphere & sky ───────────────────────────────────────────
+        if (viewer.scene.skyAtmosphere) {
+          viewer.scene.skyAtmosphere.show = true;
+        }
+        viewer.scene.globe.enableLighting = true;
+        viewer.scene.globe.atmosphereLightIntensity = 8.0;
+
+        // ── OSM Buildings 3D Tiles ─────────────────────────────────────
+        try {
+          const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(96188);
+          viewer.scene.primitives.add(tileset);
+          buildingsRef.current = tileset;
+
+          // Style: height-based gradient
+          tileset.style = new Cesium.Cesium3DTileStyle({
+            color: {
+              conditions: [
+                ["${feature['cesium#estimatedHeight']} >= 200", "color('hsl(0, 80%, 65%)')"],
+                ["${feature['cesium#estimatedHeight']} >= 100", "color('hsl(30, 80%, 60%)')"],
+                ["${feature['cesium#estimatedHeight']} >= 50",  "color('hsl(50, 80%, 55%)')"],
+                ["${feature['cesium#estimatedHeight']} >= 20",  "color('hsl(180, 40%, 55%)')"],
+                ["true",                                        "color('hsl(210, 30%, 55%)')"],
+              ],
+            },
+          });
+        } catch (e) {
+          console.warn("Could not load OSM Buildings:", e);
+        }
+
+        // ── Initial camera: Earth from space ───────────────────────────
+        viewer.camera.setView({
+          destination: Cesium.Cartesian3.fromDegrees(-74.006, 40.7128, 15_000_000),
+          orientation: {
+            heading: 0,
+            pitch: Cesium.Math.toRadians(-90),
+            roll: 0,
+          },
+        });
+
+        // Smooth zoom to NYC after a beat
+        setTimeout(() => {
+          if (!mounted) return;
+          viewer.camera.flyTo({
+            destination: Cesium.Cartesian3.fromDegrees(-74.006, 40.7128, 2000),
+            orientation: {
+              heading: Cesium.Math.toRadians(10),
+              pitch: Cesium.Math.toRadians(-35),
+              roll: 0,
+            },
+            duration: 4.0,
+          });
+        }, 800);
+
+        // ── Camera change listener for HUD ─────────────────────────────
+        viewer.camera.changed.addEventListener(() => {
+          if (!mounted) return;
+          const carto = Cesium.Cartographic.fromCartesian(viewer.camera.positionWC);
+          setCameraInfo({
+            lat: +Cesium.Math.toDegrees(carto.latitude).toFixed(4),
+            lon: +Cesium.Math.toDegrees(carto.longitude).toFixed(4),
+            alt: Math.round(carto.height),
+          });
+        });
+        viewer.camera.percentageChanged = 0.01;
+
+        // ── Mouse move → metadata picking ──────────────────────────────
+        const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+
+        handler.setInputAction((movement: { endPosition: Cartesian2 }) => {
+          if (!mounted) return;
+          const now = performance.now();
+          if (now - lastPickRef.current < 80) return; // throttle
+          lastPickRef.current = now;
+
+          const picked = viewer.scene.pick(movement.endPosition);
+          if (picked && picked instanceof Cesium.Cesium3DTileFeature) {
+            const feature = picked as Cesium3DTileFeature;
+            const entries: MetadataInfo["entries"] = [];
+
+            // Gather metadata
+            const ids = feature.getPropertyIds();
+            for (const id of ids) {
+              const label = METADATA_LABELS[id];
+              if (label) {
+                const val = String(feature.getProperty(id));
+                if (val && val !== "undefined" && val !== "null" && val !== "0") {
+                  entries.push({ label, value: val });
+                }
+              }
+            }
+
+            // Add estimated height if available
+            try {
+              const estH = feature.getProperty("cesium#estimatedHeight");
+              if (estH && !entries.find(e => e.label === "Height")) {
+                entries.push({ label: "Height", value: `${Math.round(Number(estH))}m` });
+              }
+            } catch { /* ignore */ }
+
+            if (entries.length > 0) {
+              setMetadata({
+                entries,
+                screenX: movement.endPosition.x,
+                screenY: movement.endPosition.y,
+              });
+            } else {
+              setMetadata(null);
+            }
+          } else {
+            setMetadata(null);
+          }
+        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+        // ── Click → Fly here transition ────────────────────────────────
+        handler.setInputAction((click: { position: Cartesian2 }) => {
+          if (!onFlyAt) return;
+          const ray = viewer.camera.getPickRay(click.position);
+          if (!ray) return;
+          const cartesian = viewer.scene.globe.pick(ray, viewer.scene);
+          if (!cartesian) return;
+          const carto = Cesium.Cartographic.fromCartesian(cartesian);
+          const lon = Cesium.Math.toDegrees(carto.longitude);
+          const lat = Cesium.Math.toDegrees(carto.latitude);
+          // Get camera heading for flight direction
+          const heading = Cesium.Math.toDegrees(viewer.camera.heading);
+          onFlyAt(lon, lat, 500, heading);
+        }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
+
+        // ── Shift+click → Google Street View ──────────────────────────
+        handler.setInputAction((click: { position: Cartesian2 }) => {
+          const ray = viewer.camera.getPickRay(click.position);
+          if (!ray) return;
+          const cartesian = viewer.scene.globe.pick(ray, viewer.scene);
+          if (!cartesian) return;
+          const carto = Cesium.Cartographic.fromCartesian(cartesian);
+          const lat = Cesium.Math.toDegrees(carto.latitude);
+          const lon = Cesium.Math.toDegrees(carto.longitude);
+          fetchStreetView(lat, lon);
+        }, Cesium.ScreenSpaceEventType.LEFT_CLICK, Cesium.KeyboardEventModifier.SHIFT);
+
+        if (mounted) setStatus("ready");
+      } catch (e) {
+        console.error("Globe init failed:", e);
+        if (mounted) {
+          setInitError(String(e));
+          setStatus("error");
+        }
+      }
+    }
+
+    init();
+
+    return () => {
+      mounted = false;
+      try { viewerRef.current?.destroy(); } catch { /* ignore */ }
+      viewerRef.current = null;
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ── Toggle buildings visibility ────────────────────────────────────────────
+  useEffect(() => {
+    if (buildingsRef.current) {
+      buildingsRef.current.show = showBuildings;
+    }
+  }, [showBuildings]);
+
+  // ── Keyboard ─────────────────────────────────────────────────────────────
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        if (streetView) { setStreetView(null); return; }
+        onExit();
+      }
+      if (e.key === "l" || e.key === "L") setShowLocations(v => !v);
+      if (e.key === "b" || e.key === "B") setShowBuildings(v => !v);
+      if (e.key === "v" || e.key === "V") setStreetView(null); // dismiss street view
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onExit, streetView]);
+
+  // ── Zoom to Earth view (reset) ────────────────────────────────────────────
+  const resetToEarthView = useCallback(() => {
+    const viewer = viewerRef.current;
+    const Cesium = cesiumRef.current;
+    if (!viewer || !Cesium) return;
+    viewer.camera.flyTo({
+      destination: Cesium.Cartesian3.fromDegrees(0, 20, 20_000_000),
+      orientation: {
+        heading: 0,
+        pitch: Cesium.Math.toRadians(-90),
+        roll: 0,
+      },
+      duration: 2.5,
+    });
+    setMetadata(null);
+  }, []);
+
+  // ── Format altitude ─────────────────────────────────────────────────────
+  function formatAlt(m: number): string {
+    if (m > 100_000) return `${(m / 1000).toFixed(0)} km`;
+    if (m > 1000) return `${(m / 1000).toFixed(1)} km`;
+    return `${m} m`;
+  }
+
+  // ── Fetch Street View ──────────────────────────────────────────────────
+  async function fetchStreetView(lat: number, lon: number) {
+    setStreetViewLoading(true);
+    try {
+      const token = process.env.NEXT_PUBLIC_CESIUM_ION_TOKEN;
+      if (!token) {
+        // Fallback: use Google's static map as a preview
+        setStreetView({
+          lat, lon,
+          url: `https://maps.googleapis.com/maps/api/streetview?size=640x400&location=${lat},${lon}&fov=90&heading=0&pitch=0`,
+        });
+        return;
+      }
+
+      // Try Cesium Ion's experimental Google Street View endpoint
+      const resp = await fetch("https://api.cesium.com/v1/experimental/panoramas/google", {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+
+      if (resp.ok) {
+        const data = await resp.json();
+        const baseUrl = data.options?.url || "https://assets.cesium.com/proxy/0/maps/api/streetview";
+        const key = data.options?.key || "";
+        const svUrl = `${baseUrl}?size=640x400&location=${lat},${lon}&fov=90&heading=0&pitch=0&key=${key}`;
+        setStreetView({ lat, lon, url: svUrl });
+      } else {
+        // Fallback: just show coordinates
+        setStreetView({
+          lat, lon,
+          url: `https://maps.googleapis.com/maps/api/streetview?size=640x400&location=${lat},${lon}&fov=90&heading=0&pitch=0`,
+        });
+      }
+    } catch {
+      setStreetView(null);
+    } finally {
+      setStreetViewLoading(false);
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black">
+      <div ref={containerRef} className="w-full h-full" />
+
+      {/* ── Loading ─────────────────────────────────────────────────────── */}
+      {status === "loading" && (
+        <div className="absolute inset-0 flex items-center justify-center bg-[#0a0a12]">
+          <div className="text-center">
+            <div className="w-12 h-12 border-2 border-[#E35930]/30 border-t-[#E35930] rounded-full animate-spin mx-auto mb-5" />
+            <h2 className="text-xl font-bold mb-1" style={{ color: "#E35930" }}>SOLANApolis</h2>
+            <p className="text-white/60 text-sm mb-1">Loading globe…</p>
+            <p className="text-white/25 text-xs tracking-wide">3D Earth · OSM Buildings · Cesium</p>
+          </div>
+        </div>
+      )}
+
+      {/* ── Error ──────────────────────────────────────────────────────── */}
+      {status === "error" && (
+        <div className="absolute inset-0 flex items-center justify-center bg-[#0a0a12]">
+          <div className="text-center bg-black/80 border border-red-500/20 rounded-3xl px-10 py-8 shadow-2xl max-w-md">
+            <div className="text-4xl mb-4">⚠️</div>
+            <h2 className="text-xl font-bold text-white mb-2">Globe Error</h2>
+            <p className="text-white/50 text-sm mb-4">{initError || "Something went wrong."}</p>
+            <div className="flex gap-3 justify-center">
+              <button onClick={() => window.location.reload()}
+                className="px-5 py-2.5 bg-[#E35930]/15 hover:bg-[#E35930]/25 border border-[#E35930]/30 rounded-xl text-sm text-[#E35930] transition-colors cursor-pointer">
+                Reload
+              </button>
+              <button onClick={onExit}
+                className="px-5 py-2.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl text-sm text-white/60 transition-colors cursor-pointer">
+                Return to City
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ── HUD ────────────────────────────────────────────────────────── */}
+      {status === "ready" && (
+        <>
+          {/* Top centre — coordinates + altitude */}
+          <div className="absolute top-4 left-1/2 -translate-x-1/2 flex items-center gap-5 bg-black/75 backdrop-blur-xl border border-white/10 rounded-2xl px-6 py-3 pointer-events-none">
+            <HudStat label="LAT" value={cameraInfo.lat.toFixed(2)} />
+            <div className="w-px h-8 bg-white/10" />
+            <HudStat label="LON" value={cameraInfo.lon.toFixed(2)} />
+            <div className="w-px h-8 bg-white/10" />
+            <HudStat label="ALT" value={formatAlt(cameraInfo.alt)} />
+          </div>
+
+          {/* Top-right: controls */}
+          <div className="absolute top-4 right-4 flex items-center gap-2">
+            {walletAddress && (
+              <div className="px-3 py-2 bg-purple-500/10 border border-purple-400/20 rounded-xl text-xs text-purple-300/80 font-mono">
+                🌍 {walletAddress.slice(0, 4)}…{walletAddress.slice(-4)}
+              </div>
+            )}
+            <button
+              onClick={() => setShowBuildings(v => !v)}
+              className={`px-3 py-2 rounded-xl text-[10px] tracking-widest font-mono transition-colors cursor-pointer border ${
+                showBuildings
+                  ? "bg-[#E35930]/15 border-[#E35930]/30 text-[#E35930]"
+                  : "bg-black/60 border-white/10 text-white/40"
+              }`}
+              title="Toggle buildings (B)"
+            >
+              🏢 {showBuildings ? "ON" : "OFF"}
+            </button>
+            <button
+              onClick={resetToEarthView}
+              className="px-3 py-2 bg-black/60 hover:bg-black/80 border border-white/10 hover:border-white/25 rounded-xl text-xs text-white/50 hover:text-white/80 transition-colors cursor-pointer"
+              title="Zoom out to Earth view"
+            >
+              🌏 Earth
+            </button>
+            <button
+              onClick={onExit}
+              className="px-4 py-2 bg-black/70 backdrop-blur-xl border border-white/10 rounded-xl text-sm text-white/70 hover:text-white hover:border-white/25 transition-colors cursor-pointer"
+            >
+              ← City
+            </button>
+          </div>
+
+          {/* Top-left: location picker */}
+          <div className="absolute top-4 left-4 flex items-center gap-2">
+            <div className="relative">
+              <button
+                onClick={() => setShowLocations(v => !v)}
+                className="px-3 py-2 bg-black/60 hover:bg-black/80 border border-white/10 hover:border-white/25 rounded-xl text-xs text-white/50 hover:text-white/80 transition-colors cursor-pointer"
+                title="Jump to location (L)"
+              >
+                📍 Locations
+              </button>
+              {showLocations && (
+                <div className="absolute top-full left-0 mt-2 w-52 bg-black/90 backdrop-blur-xl border border-white/10 rounded-2xl overflow-hidden shadow-2xl z-10">
+                  <div className="px-4 py-2.5 border-b border-white/10">
+                    <p className="text-[10px] text-white/40 tracking-widest font-medium">FLY TO CITY</p>
+                  </div>
+                  <div className="max-h-72 overflow-y-auto">
+                    {GLOBE_LOCATIONS.map(loc => (
+                      <button
+                        key={loc.name}
+                        onClick={() => flyTo(loc.lon, loc.lat, loc.alt, loc.pitch)}
+                        className="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-white/5 text-left transition-colors cursor-pointer"
+                      >
+                        <span className="text-base">{loc.flag}</span>
+                        <div>
+                          <p className="text-xs text-white/80 font-medium">{loc.name}</p>
+                          <p className="text-[10px] text-white/30">{loc.alt}m · {loc.lat.toFixed(1)}°, {loc.lon.toFixed(1)}°</p>
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+            {onFlyAt && (
+              <div className="px-3 py-2 bg-black/40 border border-white/5 rounded-xl text-[10px] text-white/25 pointer-events-none">
+                Double-click to fly there
+              </div>
+            )}
+          </div>
+
+          {/* Bottom-left: controls legend */}
+          <div className="absolute bottom-6 left-5 bg-black/50 backdrop-blur-xl border border-white/[0.08] rounded-2xl px-4 py-3 text-xs text-white/35 space-y-1">
+            <p className="text-white/50 font-medium mb-1">Globe Controls</p>
+            <p><span className="text-white/45">Left-click drag</span> Rotate</p>
+            <p><span className="text-white/45">Right-click drag</span> Pan</p>
+            <p><span className="text-white/45">Scroll</span> Zoom</p>
+            <p><span className="text-white/45">Middle-click</span> Tilt</p>
+            <p><span className="text-white/45">Double-click</span> Fly here</p>
+            <p><span className="text-white/45">Shift+click</span> Street View</p>
+            <p><span className="text-white/45">B</span> Toggle buildings</p>
+            <p><span className="text-white/45">L</span> Locations</p>
+            <p><span className="text-white/45">Esc</span> Return to city</p>
+          </div>
+        </>
+      )}
+
+      {/* ── Metadata popover ──────────────────────────────────────────── */}
+      {metadata && (
+        <div
+          className="absolute z-20 pointer-events-none"
+          style={{
+            left: metadata.screenX + 16,
+            top: metadata.screenY - 20,
+          }}
+        >
+          <div className="bg-black/85 backdrop-blur-xl border border-white/15 rounded-xl px-4 py-3 shadow-2xl min-w-[160px] max-w-[260px]">
+            <p className="text-[9px] text-[#E35930] tracking-widest font-medium mb-1.5 uppercase">Building Info</p>
+            {metadata.entries.map(({ label, value }) => (
+              <div key={label} className="flex justify-between items-baseline gap-3 py-0.5">
+                <span className="text-[10px] text-white/40 shrink-0">{label}</span>
+                <span className="text-[11px] text-white/80 font-medium text-right truncate">{value}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* ── Street View panel ──────────────────────────────────────── */}
+      {(streetView || streetViewLoading) && (
+        <div className="absolute bottom-20 right-5 z-30 w-[480px]">
+          <div className="bg-black/90 backdrop-blur-xl border border-white/15 rounded-2xl overflow-hidden shadow-2xl">
+            <div className="flex items-center justify-between px-4 py-2.5 border-b border-white/10">
+              <div className="flex items-center gap-2">
+                <span className="text-sm">📷</span>
+                <span className="text-[10px] text-white/40 tracking-widest font-medium">STREET VIEW</span>
+                {streetView && (
+                  <span className="text-[10px] text-white/25 font-mono">
+                    {streetView.lat.toFixed(4)}°, {streetView.lon.toFixed(4)}°
+                  </span>
+                )}
+              </div>
+              <button
+                onClick={() => setStreetView(null)}
+                className="text-white/40 hover:text-white/80 text-lg leading-none transition-colors cursor-pointer"
+              >
+                ×
+              </button>
+            </div>
+            <div className="relative w-full aspect-[16/10] bg-black/60">
+              {streetViewLoading ? (
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <div className="w-6 h-6 border-2 border-[#E35930]/30 border-t-[#E35930] rounded-full animate-spin" />
+                </div>
+              ) : streetView ? (
+                <img
+                  src={streetView.url}
+                  alt={`Street View at ${streetView.lat.toFixed(4)}, ${streetView.lon.toFixed(4)}`}
+                  className="w-full h-full object-cover"
+                  onError={(e) => {
+                    // If image fails, show placeholder
+                    (e.target as HTMLImageElement).style.display = "none";
+                  }}
+                />
+              ) : null}
+              {streetView && (
+                <div className="absolute bottom-2 left-2 px-2 py-1 bg-black/60 rounded-lg text-[10px] text-white/40">
+                  Shift+click another location · Esc to close
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Location backdrop close */}
+      {showLocations && (
+        <div className="absolute inset-0 z-[5]" onClick={() => setShowLocations(false)} />
+      )}
+    </div>
+  );
+}
+
+// ── Sub-components ─────────────────────────────────────────────────────────────
+function HudStat({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="text-center min-w-[55px]">
+      <div className="text-white/40 text-[10px] font-medium tracking-widest mb-0.5">{label}</div>
+      <div className="text-white font-mono text-sm font-bold leading-none">{value}</div>
+    </div>
+  );
+}