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/du-an/project-map.tsx

@@ -9,6 +9,7 @@ import {
   PROJECT_STATUS_LABELS,
   type ProjectSummary,
 } from '@/lib/du-an-api';
+import { useMapboxStyle } from '@/lib/mapbox-style';
 
 interface ProjectMapProps {
   projects: ProjectSummary[];
@@ -22,6 +23,7 @@ export function ProjectMap({ projects, className }: ProjectMapProps) {
   const mapContainerRef = React.useRef<HTMLDivElement>(null);
   const mapRef = React.useRef<mapboxgl.Map | null>(null);
   const markersRef = React.useRef<mapboxgl.Marker[]>([]);
+  const mapStyle = useMapboxStyle();
 
   const geoProjects = React.useMemo(
     () => projects.filter((p) => p.latitude != null && p.longitude != null),
@@ -38,7 +40,7 @@ export function ProjectMap({ projects, className }: ProjectMapProps) {
 
     const map = new mapboxgl.Map({
       container: mapContainerRef.current,
-      style: 'mapbox://styles/mapbox/streets-v12',
+      style: mapStyle,
       center: DEFAULT_CENTER,
       zoom: DEFAULT_ZOOM,
       attributionControl: false,
@@ -53,8 +55,19 @@ export function ProjectMap({ projects, className }: ProjectMapProps) {
       map.remove();
       mapRef.current = null;
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  React.useEffect(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    // setStyle wipes user-added sources/layers — but these components re-add
+    // markers/sources in another effect that fires after geo data changes.
+    // We only need to preserve markers. Since markers are DOM-attached, they
+    // survive the style swap automatically.
+    map.setStyle(mapStyle);
+  }, [mapStyle]);
+
   React.useEffect(() => {
     const map = mapRef.current;
     if (!map) return;
@@ -70,15 +83,16 @@ export function ProjectMap({ projects, className }: ProjectMapProps) {
       const el = document.createElement('div');
       el.className = 'project-map-marker';
       el.style.cssText = `
-        background: white;
+        background: hsl(var(--card));
+        color: hsl(var(--card-foreground));
         border-radius: 8px;
         padding: 4px 8px;
         font-size: 11px;
         font-weight: 600;
-        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
         white-space: nowrap;
         cursor: pointer;
-        border-left: 3px solid hsl(142.1, 76.2%, 36.3%);
+        border-left: 3px solid hsl(var(--primary));
         transition: transform 0.15s;
         max-width: 160px;
         overflow: hidden;
@@ -97,14 +111,14 @@ export function ProjectMap({ projects, className }: ProjectMapProps) {
 
       const popup = new mapboxgl.Popup({ offset: 15, maxWidth: '240px', 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 4px;">${project.name}</p>
-            <p style="font-size:12px;color:#666;margin:0 0 4px;">${project.district}, ${project.city}</p>
+            <p style="font-size:12px;color:hsl(var(--muted-foreground));margin:0 0 4px;">${project.district}, ${project.city}</p>
             <p style="font-size:12px;margin:0 0 4px;">
-              <span style="background:#f1f5f9;padding:2px 6px;border-radius:4px;">${statusLabel}</span>
-              <span style="margin-left:4px;font-weight:600;color:hsl(142.1,76.2%,36.3%);">${priceText}</span>
+              <span style="background:hsl(var(--secondary));padding:2px 6px;border-radius:4px;">${statusLabel}</span>
+              <span style="margin-left:4px;font-weight:600;color:hsl(var(--primary));">${priceText}</span>
             </p>
-            <a href="/du-an/${project.slug}" style="font-size:12px;color:hsl(142.1,76.2%,36.3%);text-decoration:none;">Xem chi tiết →</a>
+            <a href="/du-an/${project.slug}" style="font-size:12px;color:hsl(var(--primary));text-decoration:none;">Xem chi tiết →</a>
           </div>`,
         );