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/neighborhood/neighborhood-poi-map.tsx

@@ -4,6 +4,7 @@
 import mapboxgl from 'mapbox-gl';
 import * as React from 'react';
 import 'mapbox-gl/dist/mapbox-gl.css';
+import { useMapboxStyle } from '@/lib/mapbox-style';
 import { cn } from '@/lib/utils';
 import { type POIItem, type POICategory, POI_CATEGORY_CONFIG  } from './types';
 
@@ -25,6 +26,7 @@ export function NeighborhoodPOIMap({
   const mapContainerRef = React.useRef<HTMLDivElement>(null);
   const mapRef = React.useRef<mapboxgl.Map | null>(null);
   const markersRef = React.useRef<mapboxgl.Marker[]>([]);
+  const mapStyle = useMapboxStyle();
 
   const [activeCategories, setActiveCategories] = React.useState<Set<POICategory>>(
     () => new Set(Object.keys(POI_CATEGORY_CONFIG) as POICategory[]),
@@ -53,7 +55,7 @@ export function NeighborhoodPOIMap({
 
     const map = new mapboxgl.Map({
       container: mapContainerRef.current,
-      style: 'mapbox://styles/mapbox/streets-v12',
+      style: mapStyle,
       center: [center.lng, center.lat],
       zoom,
       attributionControl: false,
@@ -71,8 +73,16 @@ export function NeighborhoodPOIMap({
       map.remove();
       mapRef.current = null;
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // Sync style changes with theme
+  React.useEffect(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    map.setStyle(mapStyle);
+  }, [mapStyle]);
+
   // Update center when prop changes
   React.useEffect(() => {
     mapRef.current?.flyTo({ center: [center.lng, center.lat], zoom });
@@ -120,9 +130,9 @@ export function NeighborhoodPOIMap({
 
       const popup = new mapboxgl.Popup({ offset: 20, 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;">
             <p style="font-weight:600;font-size:13px;margin:0 0 2px;">${config.icon} ${poi.name}</p>
-            <p style="font-size:12px;color:#666;margin:0;">${config.label}${poi.distance ? ` · ${poi.distance}m` : ''}</p>
+            <p style="font-size:12px;color:hsl(var(--muted-foreground));margin:0;">${config.label}${poi.distance ? ` · ${poi.distance}m` : ''}</p>
           </div>`,
         );
 
@@ -145,9 +155,9 @@ export function NeighborhoodPOIMap({
       width: 16px;
       height: 16px;
       border-radius: 50%;
-      background: hsl(142.1, 76.2%, 36.3%);
-      border: 3px solid white;
-      box-shadow: 0 0 0 2px hsl(142.1, 76.2%, 36.3%), 0 2px 8px rgba(0,0,0,0.3);
+      background: hsl(var(--primary));
+      border: 3px solid hsl(var(--card));
+      box-shadow: 0 0 0 2px hsl(var(--primary)), 0 2px 8px rgba(0,0,0,0.3);
     `;
 
     const marker = new mapboxgl.Marker({ element: el, anchor: 'center' })
@@ -183,8 +193,8 @@ export function NeighborhoodPOIMap({
               className={cn(
                 'flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium shadow-sm transition-all',
                 isActive
-                  ? 'bg-white text-foreground ring-1 ring-inset ring-border'
-                  : 'bg-white/60 text-muted-foreground line-through ring-1 ring-inset ring-transparent',
+                  ? 'bg-card text-card-foreground ring-1 ring-inset ring-border'
+                  : 'bg-card/60 text-muted-foreground line-through ring-1 ring-inset ring-transparent',
               )}
               title={`${isActive ? 'Ẩn' : 'Hiện'} ${config.label}`}
             >