feat(web): add listing detail page and Mapbox GL JS map integration

- Create public listing detail page at /listings/[id] with image gallery,
  property specs, contact card, and embedded map
- Rewrite ListingMap component to use Mapbox GL JS with interactive markers,
  price labels, and listing popups
- Add selectedListingId prop to search page map views for marker highlighting
- Install mapbox-gl dependency

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/app/(public)/search/page.tsx

@@ -44,6 +44,11 @@ function SearchContent() {
   const [loading, setLoading] = React.useState(true);
   const [viewMode, setViewMode] = React.useState<ViewMode>('list');
   const [showMobileFilters, setShowMobileFilters] = React.useState(false);
+  const [selectedListingId, setSelectedListingId] = React.useState<string | undefined>();
+
+  const handleMarkerClick = (listing: ListingDetail) => {
+    setSelectedListingId(listing.id);
+  };
 
   const fetchListings = React.useCallback(() => {
     setLoading(true);
@@ -219,6 +224,8 @@ function SearchContent() {
           {viewMode === 'map' && (
             <ListingMap
               listings={result?.data || []}
+              selectedListingId={selectedListingId}
+              onMarkerClick={handleMarkerClick}
               className="h-[calc(100vh-220px)]"
             />
           )}
@@ -238,6 +245,8 @@ function SearchContent() {
               <div className="hidden lg:block">
                 <ListingMap
                   listings={result?.data || []}
+                  selectedListingId={selectedListingId}
+                  onMarkerClick={handleMarkerClick}
                   className="sticky top-20 h-[calc(100vh-220px)]"
                 />
               </div>