feat(maps): dark/light Mapbox theme + fix empty Image src & missing keys

Mapbox theming
--------------
- New hook `lib/mapbox-style.ts` returning streets-v12 (light) or
  dark-v11 (dark) from the app's useTheme().
- Six map components now initialise with the themed style and
  `map.setStyle(...)` on theme change: project-map, park-map,
  listing-map, district-heatmap (plus re-adding its heatmap source
  after style.load), neighborhood-poi-map, valuation/comparables-map.
- Marker / popup DOM styles swapped from hard-coded white/#666/#green
  to shadcn CSS tokens (--card, --card-foreground, --muted-foreground,
  --primary, --border). Global Mapbox popup + control + attribution
  skins added in app/globals.css.
- POI filter pills on neighborhood-poi-map were hard-coded `bg-white`
  which rendered same-colour text on white in dark mode — switched to
  `bg-card`/`bg-card/60` for proper contrast.
- Extend the MockMap in comparables-map.spec.tsx with setStyle/on
  so the new theme-sync effect doesn't blow up in tests.

Detail client normaliser (du-an-server)
---------------------------------------
- Project media from the backend is a `string[]` (raw URLs) or richer
  `{url,...}` objects. Handle both shapes and drop entries without
  a URL so we never feed "" to <Image src>.
- Amenities are `string[]` in the DB but the frontend type expects
  `{id,name,icon,category}`; normalise strings into objects so the
  AmenitiesTab has stable keys and a displayable name.

Resolves three classes of runtime warnings on /du-an/<slug>:
"Image is missing required 'src' property", "ReactDOM.preload ...
empty href", and "Each child in a list should have a unique 'key'
prop" (AmenitiesTab).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/components/charts/district-heatmap.tsx

@@ -4,6 +4,7 @@
 import mapboxgl from 'mapbox-gl';
 import * as React from 'react';
 import 'mapbox-gl/dist/mapbox-gl.css';
+import { MAPBOX_STYLE_DARK, useMapboxStyle } from '@/lib/mapbox-style';
 
 export interface HeatmapPoint {
   district: string;
@@ -97,6 +98,11 @@ export function DistrictHeatmap({ data, city, className, onDistrictClick }: Dist
   const mapContainerRef = React.useRef<HTMLDivElement>(null);
   const mapRef = React.useRef<mapboxgl.Map | null>(null);
   const markersRef = React.useRef<mapboxgl.Marker[]>([]);
+  const themeStyle = useMapboxStyle();
+  // Heatmap uses the lighter "light-v11" backdrop for better marker contrast in
+  // light mode; in dark mode, fall back to the shared dark style.
+  const mapStyle =
+    themeStyle === MAPBOX_STYLE_DARK ? MAPBOX_STYLE_DARK : 'mapbox://styles/mapbox/light-v11';
 
   const maxPrice = React.useMemo(() => Math.max(...data.map((d) => d.avgPriceM2), 1), [data]);
 
@@ -111,7 +117,7 @@ export function DistrictHeatmap({ data, city, className, onDistrictClick }: Dist
     const center = CITY_CENTER[city] ?? [106.66, 10.79];
     const map = new mapboxgl.Map({
       container: mapContainerRef.current,
-      style: 'mapbox://styles/mapbox/light-v11',
+      style: mapStyle,
       center: center as [number, number],
       zoom: 11,
       attributionControl: false,
@@ -124,8 +130,19 @@ export function DistrictHeatmap({ data, city, className, onDistrictClick }: Dist
       map.remove();
       mapRef.current = null;
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [city]);
 
+  // Sync style changes with theme. The heatmap "layer" is implemented as DOM
+  // markers (re-added by the effect below when data changes), so we also need
+  // to re-add markers after the style finishes loading in case the style swap
+  // raced with a data update.
+  React.useEffect(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    map.setStyle(mapStyle);
+  }, [mapStyle]);
+
   // Update markers
   React.useEffect(() => {
     const map = mapRef.current;
@@ -172,10 +189,10 @@ export function DistrictHeatmap({ data, city, className, onDistrictClick }: Dist
 
       const popup = new mapboxgl.Popup({ offset: 15, closeButton: false })
         .setHTML(`
-          <div style="font-family:system-ui,sans-serif;padding:4px 0;">
+          <div style="font-family:system-ui,sans-serif;background:hsl(var(--card));color:hsl(var(--card-foreground));padding:8px;border-radius:6px;">
             <div style="font-weight:700;font-size:13px;margin-bottom:4px;">${point.district}</div>
-            <div style="font-size:12px;color:#16a34a;font-weight:600;">${priceLabel}</div>
-            <div style="font-size:11px;color:#666;margin-top:2px;">${point.totalListings} tin đăng</div>
+            <div style="font-size:12px;color:hsl(var(--primary));font-weight:600;">${priceLabel}</div>
+            <div style="font-size:11px;color:hsl(var(--muted-foreground));margin-top:2px;">${point.totalListings} tin đăng</div>
           </div>
         `);