fix: resolve contact page 500 and Leaflet initialization errors

- Fixed Docker service names and volume configuration
- Bootstrapped Directus and applied schema
- Updated DIRECTUS_URL to local instance in .env
- Implemented manual Leaflet lifecycle management in LeafletMap.tsx
  to prevent re-initialization error

components/LeafletMap.tsx

@@ -1,18 +1,18 @@
-'use client';
-
-import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import React, { useEffect, useRef } from 'react';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 
 // Fix for default marker icon in Leaflet with Next.js
-const DefaultIcon = L.icon({
-  iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
-  shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
-  iconSize: [25, 41],
-  iconAnchor: [12, 41],
-});
+if (typeof window !== 'undefined') {
+  const DefaultIcon = L.icon({
+    iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
+    shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
+  });
 
-L.Marker.prototype.options.icon = DefaultIcon;
+  L.Marker.prototype.options.icon = DefaultIcon;
+}
 
 interface LeafletMapProps {
   address: string;
@@ -21,25 +21,46 @@ interface LeafletMapProps {
 }
 
 export default function LeafletMap({ address, lat, lng }: LeafletMapProps) {
-  const position: [number, number] = [lat, lng];
+  const mapRef = useRef<HTMLDivElement>(null);
+  const mapInstanceRef = useRef<L.Map | null>(null);
 
-  return (
-    <MapContainer
-      center={position}
-      zoom={15}
-      scrollWheelZoom={false}
-      className="h-full w-full z-0"
-    >
-      <TileLayer
-        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-      />
-      <Marker position={position}>
-        <Popup>
-          <div className="text-primary font-bold">KLZ Cables</div>
-          <div className="text-sm whitespace-pre-line">{address}</div>
-        </Popup>
-      </Marker>
-    </MapContainer>
-  );
+  useEffect(() => {
+    if (!mapRef.current || mapInstanceRef.current) return;
+
+    // Initialize map
+    const map = L.map(mapRef.current, {
+      center: [lat, lng],
+      zoom: 15,
+      scrollWheelZoom: false,
+    });
+
+    // Add tiles
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution:
+        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    }).addTo(map);
+
+    // Add marker
+    const marker = L.marker([lat, lng]).addTo(map);
+
+    // Create popup content
+    const popupContent = `
+      <div class="text-primary font-bold">KLZ Cables</div>
+      <div class="text-sm">${address.replace(/\n/g, '<br/>')}</div>
+    `;
+
+    marker.bindPopup(popupContent);
+
+    mapInstanceRef.current = map;
+
+    // Cleanup on unmount
+    return () => {
+      if (mapInstanceRef.current) {
+        mapInstanceRef.current.remove();
+        mapInstanceRef.current = null;
+      }
+    };
+  }, [lat, lng, address]);
+
+  return <div ref={mapRef} className="h-full w-full z-0" />;
 }