@ticketboothapp/booking 0.1.11 → 0.1.13

package/src/components/{PickupLocationSelector.tsx → booking/PickupLocationSelector.tsx}

@@ -2,37 +2,39 @@
 
 import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import { GoogleMap, Marker, InfoWindow, useJsApiLoader } from '@react-google-maps/api';
-import type { PickupLocation, Destination } from '@/lib/api';
+import type { PickupLocation, Destination } from '@/lib/booking-api';
 import {
   formatDistance,
   formatTime,
   geocodeAddress,
-} from '@/lib/location-utils';
+  isWithinPrivateShuttleServiceArea,
+} from '@/lib/booking/location-utils';
 import {
   calculateNearbyLocations,
   isExactMatch,
-} from '@/lib/location-calculations';
+} from '@/lib/booking/location-calculations';
 import {
   getAutocompleteSuggestions,
   getPlaceDetails,
   type AutocompleteSuggestion,
-} from '@/lib/places-api';
+} from '@/lib/booking/places-api';
 import {
   createDistanceMarkerIcon,
   createPinMarkerIcon,
   createSearchedLocationPinIcon,
   createDestinationMarkerIcon,
-} from '@/lib/marker-icons';
+} from '@/lib/booking/marker-icons';
 import { ENV } from '@/lib/env';
 import {
   calculateMapCenter,
   calculateMapBounds,
   getMapOptions,
   panToLocationIfNeeded,
-} from '@/lib/map-utils';
-import type { SearchedLocation, NearbyLocation } from '@/lib/pickup-location-types';
-import { useTranslations } from '@/lib/i18n';
+} from '@/lib/booking/map-utils';
+import type { SearchedLocation, NearbyLocation } from '@/lib/booking/pickup-location-types';
+import { useTranslations } from '@/lib/booking/i18n';
 import { useBookingApp } from '@/contexts/BookingAppContext';
+import styles from './PickupLocationSelector.module.css';
 
 export interface CustomPickupLocation {
   address: string;
@@ -45,10 +47,18 @@ interface PickupLocationSelectorProps {
   selectedCustomAddress?: string | null;
   /** When true (default), show "Use this address" for custom locations. Only Private Shuttle uses this. */
   allowCustomLocation?: boolean;
-  onLocationSelect: (locationId: string | null, customLocation?: CustomPickupLocation) => void;
+  /** When true with allowCustomLocation, restrict custom addresses to Lake Louise–Kananaskis corridor. */
+  restrictCustomLocationToServiceArea?: boolean;
+  onLocationSelect: (locationId: string | null, customLocation?: CustomPickupLocation, locationName?: string) => void;
   onSkip?: () => void;
   isSkipped?: boolean;
   destinations?: Destination[]; // Destination locations to show on the map
+  /** When true, hide the title (e.g. when embedded in a dialog that has its own title) */
+  hideTitle?: boolean;
+  /** When true, hide the "I don't know" filter pill and option (e.g. when changing pickup on existing booking) */
+  hideSkipOption?: boolean;
+  /** Location IDs to prioritize at the top and visually highlight (e.g. partner-preferred pickups). */
+  highlightedPickupLocationIds?: string[];
 }
 
 // Constants
@@ -78,6 +88,10 @@ const FILTERS = [
 
 type FilterId = typeof FILTERS[number]['id'];
 
+/** Stable fallback — default `= []` in destructuring would allocate a new array every render. */
+const NO_HIGHLIGHTED_PICKUP_LOCATION_IDS: string[] = [];
+const NO_DESTINATIONS: Destination[] = [];
+
 // Helper function to determine which city a location belongs to
 function getLocationCity(location: PickupLocation): FilterId | null {
   const addressLower = location.address.toLowerCase();
@@ -157,7 +171,7 @@ function FilterPills({ pickupLocations, selectedFilters, onFilterToggle }: Filte
   }, [pickupLocations, selectedFilters]);
   
   return (
-    <div className="mb-4 flex flex-wrap gap-2">
+    <div className="flex flex-wrap items-center gap-2">
       {FILTERS.map(filter => {
         const isSelected = selectedFilters.has(filter.id);
         const isCityFilter = ['canmore', 'banff', 'lake-louise'].includes(filter.id);
@@ -185,7 +199,7 @@ function FilterPills({ pickupLocations, selectedFilters, onFilterToggle }: Filte
             key={filter.id}
             type="button"
             onClick={() => onFilterToggle(filter.id)}
-            className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
+            className={`px-4 py-3 rounded-full text-[11px] font-medium transition-colors ${
               isSelected
                 ? 'bg-emerald-600 text-white hover:bg-emerald-700'
                 : 'bg-stone-100 text-stone-700 hover:bg-stone-200'
@@ -209,11 +223,17 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
     selectedLocationId,
     selectedCustomAddress = null,
     allowCustomLocation = false,
+    restrictCustomLocationToServiceArea = false,
     onLocationSelect,
     onSkip,
     isSkipped = false,
-    destinations = [],
+    hideTitle = false,
+    hideSkipOption = false,
+    highlightedPickupLocationIds,
+    destinations: destinationsProp,
   } = props;
+  const highlightIds = highlightedPickupLocationIds ?? NO_HIGHLIGHTED_PICKUP_LOCATION_IDS;
+  const destinations = destinationsProp ?? NO_DESTINATIONS;
   const { t } = useTranslations();
   const [searchInput, setSearchInput] = useState('');
   const [searchedLocation, setSearchedLocation] = useState<SearchedLocation | null>(null);
@@ -230,7 +250,26 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
   const [showSuggestions, setShowSuggestions] = useState(false);
   const [mapZoom, setMapZoom] = useState(DEFAULT_MAP_ZOOM);
   const [showSkipWarning, setShowSkipWarning] = useState(false);
+  const [dontKnowFilterActive, setDontKnowFilterActive] = useState(false);
   const mapRef = useRef<google.maps.Map | null>(null);
+  const highlightedPickupLocationIdSet = useMemo(
+    () => new Set(highlightIds),
+    [highlightIds]
+  );
+
+  const sortHighlightedFirst = useCallback(
+    <T extends PickupLocation,>(locations: T[]): T[] => {
+      if (highlightedPickupLocationIdSet.size === 0 || locations.length < 2) return locations;
+      return [...locations].sort((a, b) => {
+        const aHighlighted = highlightedPickupLocationIdSet.has(a.id);
+        const bHighlighted = highlightedPickupLocationIdSet.has(b.id);
+        if (aHighlighted === bHighlighted) return 0;
+        return aHighlighted ? -1 : 1;
+      });
+    },
+    [highlightedPickupLocationIdSet]
+  );
+
   const suggestionTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const searchInputRef = useRef<HTMLInputElement | null>(null);
   const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -250,8 +289,14 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
   
   // Apply filter pills to pickup locations
   const filteredPickupLocations = useMemo(() => {
-    return filterLocations(pickupLocations, selectedFilters);
-  }, [pickupLocations, selectedFilters]);
+    return sortHighlightedFirst(filterLocations(pickupLocations, selectedFilters));
+  }, [pickupLocations, selectedFilters, sortHighlightedFirst]);
+
+  // When restrictCustomLocationToServiceArea is true, custom address is only allowed if within Lake Louise–Kananaskis corridor
+  const isCustomLocationInServiceArea = useMemo(() => {
+    if (!restrictCustomLocationToServiceArea || !searchedLocation?.coordinates) return true;
+    return isWithinPrivateShuttleServiceArea(searchedLocation.coordinates);
+  }, [restrictCustomLocationToServiceArea, searchedLocation?.coordinates]);
   
   // Calculate nearby locations when user searches
   useEffect(() => {
@@ -276,7 +321,7 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
 
     // Case 2: City/town filter - show all locations in that city (already filtered by pills)
     if (cityFilter) {
-      const cityLocations = filteredPickupLocations
+      const cityLocations = sortHighlightedFirst(filteredPickupLocations
         .filter(loc => {
           if (!loc.coordinates) return false;
           const addressLower = loc.address.toLowerCase();
@@ -287,7 +332,7 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
           distance: 0, // No distance calculation for city filter
           walkingTime: 0,
           drivingTime: 0,
-        }));
+        })));
       setNearbyLocations(cityLocations);
       setIsValidLocation(null);
       return;
@@ -306,11 +351,11 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
     );
 
     // Take only the 3 closest locations (already sorted by distance)
-    const closestLocations = locationsWithDistance.slice(0, 3);
+    const closestLocations = sortHighlightedFirst(locationsWithDistance.slice(0, 3));
 
     setNearbyLocations(closestLocations);
     setIsValidLocation(isExactMatch(locationsWithDistance));
-  }, [searchedLocation, filteredPickupLocations, exactMatchLocationId, cityFilter]);
+  }, [searchedLocation, filteredPickupLocations, exactMatchLocationId, cityFilter, sortHighlightedFirst]);
 
   // Reset search state when switching to "I don't know" option
   useEffect(() => {
@@ -328,10 +373,10 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
     }
   }, [isSkipped]);
 
-  // Clear search state when a location is selected externally (from parent)
+  // Clear search state when a location is selected from the list (parent updates selectedLocationId/selectedCustomAddress)
+  // Only run when selection changes - NOT when user types (searchInput), otherwise typing gets erased
   useEffect(() => {
-    if (selectedLocationId && (searchedLocation || searchInput)) {
-      // Location was selected externally, clear search state
+    if ((selectedLocationId || selectedCustomAddress) && (searchedLocation || searchInput)) {
       setSearchInput('');
       setSearchedLocation(null);
       setIsValidLocation(null);
@@ -339,7 +384,7 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
       setShowSuggestions(false);
       setAutocompleteSuggestions([]);
     }
-  }, [selectedLocationId, searchedLocation, searchInput]);
+  }, [selectedLocationId, selectedCustomAddress]);
 
   // Cleanup timeouts on unmount
   useEffect(() => {
@@ -588,8 +633,8 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
     }
   };
 
-  const handleLocationSelect = (locationId: string) => {
-    onLocationSelect(locationId);
+  const handleLocationSelect = (locationId: string, locationName?: string) => {
+    onLocationSelect(locationId, undefined, locationName);
     // Clear search state when a location is selected
     setSearchInput('');
     setSearchedLocation(null);
@@ -831,49 +876,26 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
   }
 
   return (
-    <div className="space-y-6">
-      <h2 className="text-2xl font-bold text-stone-900">
-        {t('pickup.title')}
-      </h2>
-
-      {/* Radio buttons for selection */}
-      <div className="space-y-4">
-        <label className="flex items-start gap-3 cursor-pointer">
-          <input
-            type="radio"
-            name="pickup-option"
-            checked={!isSkipped}
-            onChange={handleYesOptionClick}
-            className="mt-1 w-5 h-5 text-emerald-600 focus:ring-emerald-500"
-            aria-label={t('pickup.yesAddNow')}
-          />
-          <div className="flex-1">
-            <span className="font-medium text-stone-900">
-              {t('pickup.yesAddNow')}
-            </span>
-            <p className="text-sm text-stone-600 mt-1">
-              {t('pickup.yesAddNowSubtext')}
-            </p>
-            {/* Show search and map interface when "Yes" option is selected (not skipped) */}
-            {!isSkipped && (
-              <div className="mt-2">
-                <div className="relative">
-                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                  <svg
-                    className="h-5 w-5 text-stone-400"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                    />
-                  </svg>
-                </div>
-                <input
+    <div className="space-y-3">
+      {!hideTitle && (
+        <div className="space-y-0.5">
+          <h2 className="text-2xl font-bold text-stone-900">
+            {t('pickup.title')}
+          </h2>
+          <p className="text-sm text-stone-600">
+            {t('pickup.yesAddNowSubtext')}
+          </p>
+        </div>
+      )}
+
+      {/* Input with search icon inside - padding ensures text stays to the right of icon */}
+      <div className="relative">
+        <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-stone-400">
+          <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+        </div>
+        <input
                   ref={searchInputRef}
                   type="text"
                   value={searchInput}
@@ -916,7 +938,8 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
                   aria-label={t('pickup.enterAddress')}
                   aria-autocomplete="list"
                   aria-controls="autocomplete-suggestions"
-                  className="w-full pl-10 pr-4 py-3 rounded-lg border border-stone-300 focus:outline-none focus:border-stone-500 text-stone-900"
+                  data-pickup-search
+                  className="w-full rounded-lg border border-stone-300 focus:outline-none focus:border-stone-500 text-stone-900 placeholder:text-stone-400"
                 />
                 {/* Autocomplete suggestions dropdown */}
                 {showSuggestions && autocompleteSuggestions.length > 0 && (
@@ -966,42 +989,57 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
                     ))}
                   </div>
                 )}
-              </div>
-              {isGeocoding && (
-                <p className="mt-1 text-sm text-stone-500">
-                  {t('pickup.searchingLocation')}
-                </p>
-              )}
-              {searchedLocation && !searchedLocation.coordinates && !isGeocoding && (
-                <div className="mt-2 p-3 bg-red-50 border border-red-200 rounded-lg">
-                  <div className="flex items-start gap-2">
-                    <svg
-                      className="w-5 h-5 text-red-600 mt-0.5 flex-shrink-0"
-                      fill="currentColor"
-                      viewBox="0 0 20 20"
-                    >
-                      <path
-                        fillRule="evenodd"
-                        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
-                        clipRule="evenodd"
-                      />
-                    </svg>
-                    <p className="text-sm text-red-700">
-                      {t('pickup.locationNotFound')}
-                    </p>
-                  </div>
-                </div>
-              )}
-              </div>
-            )}
+        {isGeocoding && (
+          <p className="mt-1 text-sm text-stone-500">
+            {t('pickup.searchingLocation')}
+          </p>
+        )}
+        {searchedLocation && !searchedLocation.coordinates && !isGeocoding && (
+          <div className="mt-2 p-3 bg-red-50 border border-red-200 rounded-lg">
+            <div className="flex items-start gap-2">
+              <svg
+                className="w-5 h-5 text-red-600 mt-0.5 flex-shrink-0"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              <p className="text-sm text-red-700">
+                {t('pickup.locationNotFound')}
+              </p>
+            </div>
           </div>
-        </label>
+        )}
+        {allowCustomLocation && restrictCustomLocationToServiceArea && searchedLocation?.coordinates && !isCustomLocationInServiceArea && (
+          <div className="mt-2 p-3 bg-amber-50 border border-amber-200 rounded-lg">
+            <div className="flex items-start gap-2">
+              <svg
+                className="w-5 h-5 text-amber-600 mt-0.5 flex-shrink-0"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              <p className="text-sm text-amber-800">
+                {t('pickup.outsideServiceArea')}
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
 
-        {/* Map - Show when "Yes" option is selected (not skipped) */}
-        {!isSkipped && isLoaded && pickupLocations.length > 0 && (
-          <div className="ml-8">
-            {/* Filter Pills */}
-            <FilterPills
+      {/* Filter Pills + I don't know pill - horizontal scroll on mobile */}
+      {isLoaded && pickupLocations.length > 0 && (
+        <div className={styles.filterPillsScroll}>
+        <FilterPills
               pickupLocations={pickupLocations}
               selectedFilters={selectedFilters}
               onFilterToggle={(filterId) => {
@@ -1033,6 +1071,11 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
                 
                 setSelectedFilters(newFilters);
 
+                // When a location filter (city or free-parking) is selected, exit "I don't know" mode
+                if (newFilters.size > 0) {
+                  setDontKnowFilterActive(false);
+                }
+
                 // When a city filter is active, also drive the map zoom like a typed city search
                 const activeCityFilter = Array.from(newFilters).find(f =>
                   cityFilterIds.includes(f as typeof cityFilterIds[number])
@@ -1052,23 +1095,147 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
                 }
               }}
             />
-            
-            {/* No results message */}
-            {nearbyLocations.length === 0 && 
-             !exactMatchLocationId && 
-             !cityFilter && 
-             !searchedLocation && 
-             filteredPickupLocations.length === 0 && 
-             selectedFilters.size > 0 && (
-              <div className="mb-4 p-4 bg-stone-50 border border-stone-200 rounded-lg">
-                <p className="text-sm text-stone-600 text-center">
-                  No pickup locations match the selected filters. Try adjusting your filters.
-                </p>
+        {/* I don't know pill - only show when no filters are selected and not hidden */}
+        {!hideSkipOption && selectedFilters.size === 0 && (
+          <button
+            type="button"
+            onClick={() => setDontKnowFilterActive(!dontKnowFilterActive)}
+            className={`px-4 py-3 rounded-full text-[11px] font-medium transition-colors ${
+              dontKnowFilterActive ? 'bg-emerald-600 text-white hover:bg-emerald-700' : 'bg-stone-100 text-stone-700 hover:bg-stone-200'
+            }`}
+          >
+            {t('pickup.dontKnow')}
+          </button>
+        )}
+        </div>
+      )}
+
+      {/* Two-column layout: list left, map right - list height matches map */}
+      {isLoaded && pickupLocations.length > 0 && (
+          <div className={styles.twoColLayout}>
+            {/* Left column: scrollable list of pickup locations + I don't know */}
+            <div className={styles.leftColumn}>
+              <div className={styles.locationList}>
+                {/* When "I don't know" filter is active, show only that option (unless hidden) */}
+                {!hideSkipOption && dontKnowFilterActive ? (
+                  <label
+                    className="flex items-start gap-2 cursor-pointer p-2.5 rounded-lg hover:bg-stone-50 border border-stone-200"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handleSkip();
+                    }}
+                  >
+                    <input
+                      type="radio"
+                      name="pickup-location"
+                      checked={isSkipped}
+                      readOnly
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleSkip();
+                      }}
+                      className="mt-1 w-4 h-4 text-emerald-600 focus:ring-emerald-500 shrink-0"
+                      aria-label={t('pickup.dontKnow')}
+                    />
+                    <div className="flex-1 min-w-0">
+                      <p className="font-medium text-stone-900 text-sm">{t('pickup.dontKnow')}</p>
+                      <p className="text-xs text-stone-600">{t('pickup.dontKnowSubtext')}</p>
+                    </div>
+                  </label>
+                ) : (
+                  <>
+                {/* Custom address option - show at TOP when user searched (Private Shuttle allows custom), and within service area if restricted */}
+                {allowCustomLocation && searchedLocation && !exactMatchLocationId && !cityFilter && isCustomLocationInServiceArea && (
+                  <label className="flex items-start gap-2 cursor-pointer p-3 rounded-lg hover:bg-emerald-50/50 border-2 border-emerald-500 bg-emerald-50/50 shadow-sm" onMouseEnter={() => { setHoveredMarker('searched'); mapRef.current && searchedLocation.coordinates && panToLocationIfNeeded(mapRef.current, searchedLocation.coordinates); }} onMouseLeave={() => setHoveredMarker(null)}>
+                    <input type="radio" name="pickup-location" checked={selectedCustomAddress === searchedLocation.address} onChange={() => handleCustomLocationSelect(searchedLocation.address, searchedLocation.coordinates ?? undefined)} className="mt-1 w-4 h-4 text-emerald-600 focus:ring-emerald-500 shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <p className="font-semibold text-emerald-800 text-sm">{t('pickup.useThisAddress')}</p>
+                      <p className="text-xs text-stone-600 truncate">{searchedLocation.address}</p>
+                    </div>
+                  </label>
+                )}
+                {/* Locations to show: nearbyLocations when we have search/filter results, else filteredPickupLocations */}
+                {(nearbyLocations.length > 0 ? nearbyLocations : filteredPickupLocations).map((location) => {
+                  const isNearby = nearbyLocations.length > 0 && nearbyLocations.some(n => n.id === location.id);
+                  const isPartnerHighlighted = highlightedPickupLocationIdSet.has(location.id);
+                  return (
+                  <label key={location.id} className={`flex items-start gap-2 cursor-pointer p-2.5 rounded-lg border ${
+                    isPartnerHighlighted
+                      ? 'border-emerald-300 bg-emerald-50/40 hover:bg-emerald-50'
+                      : 'border-stone-200 hover:bg-stone-50'
+                  }`} onMouseEnter={() => { setHoveredMarker(location.id); mapRef.current && location.coordinates && panToLocationIfNeeded(mapRef.current, location.coordinates); }} onMouseLeave={() => setHoveredMarker(null)}>
+                    <input type="radio" name="pickup-location" checked={selectedLocationId === location.id} onChange={() => handleLocationSelect(location.id, location.name)} className="mt-1 w-4 h-4 text-emerald-600 focus:ring-emerald-500 shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-1.5">
+                        <p className="font-medium text-stone-900 text-sm">{location.name}</p>
+                        {isPartnerHighlighted && (
+                          <span
+                            className="inline-flex items-center justify-center rounded-full w-4 h-4 bg-emerald-100 text-emerald-700"
+                            aria-label="Highlighted pickup location"
+                            title="Highlighted pickup location"
+                          >
+                            <svg
+                              className="w-2.5 h-2.5"
+                              viewBox="0 0 20 20"
+                              fill="currentColor"
+                              aria-hidden="true"
+                            >
+                              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81H7.03a1 1 0 00.95-.69l1.07-3.292z" />
+                            </svg>
+                          </span>
+                        )}
+                      </div>
+                      <p className="text-xs text-stone-600 truncate">{location.address}</p>
+                      {isNearby && searchedLocation && !exactMatchLocationId && !cityFilter && (
+                        <div className="flex items-center gap-2 mt-1 text-xs text-stone-500">
+                          <span>📍 {formatDistance((location as NearbyLocation).distance, useImperial)}</span>
+                          <span>🚶 {formatTime((location as NearbyLocation).walkingTime)}</span>
+                        </div>
+                      )}
+                    </div>
+                  </label>
+                );})}
+                {/* No results message */}
+                {nearbyLocations.length === 0 && filteredPickupLocations.length === 0 && selectedFilters.size > 0 && (
+                  <p className="p-3 text-sm text-stone-500 text-center">No locations match. Try adjusting filters.</p>
+                )}
+                {/* I don't know - only at end of list when no filters are selected (unless hidden) */}
+                {!hideSkipOption && selectedFilters.size === 0 && (
+                  <label
+                    className="flex items-start gap-2 cursor-pointer p-2.5 rounded-lg hover:bg-stone-50 border border-stone-200"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handleSkip();
+                    }}
+                  >
+                    <input
+                      type="radio"
+                      name="pickup-location"
+                      checked={isSkipped}
+                      readOnly
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleSkip();
+                      }}
+                      className="mt-1 w-4 h-4 text-emerald-600 focus:ring-emerald-500 shrink-0"
+                      aria-label={t('pickup.dontKnow')}
+                    />
+                    <div className="flex-1 min-w-0">
+                      <p className="font-medium text-stone-900 text-sm">{t('pickup.dontKnow')}</p>
+                      <p className="text-xs text-stone-600">{t('pickup.dontKnowSubtext')}</p>
+                    </div>
+                  </label>
+                )}
+                  </>
+                )}
               </div>
-            )}
-            
+            </div>
+
+            {/* Right column: map */}
+            <div className={styles.rightColumn}>
+            <div className={styles.mapWrapper}>
             <GoogleMap
-              mapContainerClassName="w-full h-96 rounded-lg border border-stone-300"
+              mapContainerClassName="w-full h-full rounded-lg overflow-hidden"
               center={mapCenter}
               zoom={mapZoom}
               options={mapOptions}
@@ -1127,7 +1294,7 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
                             </div>
                             <button
                               onClick={() => {
-                                handleLocationSelect(location.id);
+                                handleLocationSelect(location.id, location.name);
                                 setSelectedMarker(null);
                               }}
                               className="mt-2 w-full px-3 py-1.5 bg-emerald-600 text-white text-sm font-medium rounded hover:bg-emerald-700 transition-colors"
@@ -1178,7 +1345,7 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
                             )}
                             <button
                               onClick={() => {
-                                handleLocationSelect(location.id);
+                                handleLocationSelect(location.id, location.name);
                                 setSelectedMarker(null);
                               }}
                               className="mt-2 w-full px-3 py-1.5 bg-emerald-600 text-white text-sm font-medium rounded hover:bg-emerald-700 transition-colors"
@@ -1235,7 +1402,7 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
                             )}
                             <button
                               onClick={() => {
-                                handleLocationSelect(location.id);
+                                handleLocationSelect(location.id, location.name);
                                 setSelectedMarker(null);
                               }}
                               className="mt-2 w-full px-3 py-1.5 bg-emerald-600 text-white text-sm font-medium rounded hover:bg-emerald-700 transition-colors"
@@ -1275,7 +1442,7 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
                         <p className="text-sm text-stone-600 mb-2">
                           {searchedLocation.address}
                         </p>
-                        {allowCustomLocation && (
+                        {allowCustomLocation && isCustomLocationInServiceArea && (
                           <button
                             onClick={() => handleCustomLocationSelect(searchedLocation.address, searchedLocation.coordinates ?? undefined)}
                             className="w-full px-3 py-1.5 bg-emerald-600 text-white text-sm font-medium rounded hover:bg-emerald-700 transition-colors mb-2"
@@ -1283,6 +1450,11 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
                             {t('pickup.useThisAddress')}
                           </button>
                         )}
+                        {allowCustomLocation && !isCustomLocationInServiceArea && restrictCustomLocationToServiceArea && (
+                          <p className="text-xs text-amber-700 mb-2">
+                            {t('pickup.outsideServiceArea')}
+                          </p>
+                        )}
                         <p className="text-xs text-stone-500 mt-2">
                           {t('pickup.chooseClosest')}
                         </p>
@@ -1308,174 +1480,15 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
                 />
               ))}
             </GoogleMap>
-          </div>
-        )}
-
-        {/* Filtered locations list */}
-        {nearbyLocations.length > 0 && (
-          <div className="ml-8 space-y-4">
-            <h3 className="font-semibold text-stone-900">
-              {exactMatchLocationId 
-                ? t('pickup.exactMatch') 
-                : cityFilter 
-                ? t('pickup.locationsInCity', { city: cityFilter.charAt(0).toUpperCase() + cityFilter.slice(1) })
-                : t('pickup.chooseNearby')}
-            </h3>
-            <div className="space-y-3">
-              {/* Custom address option - only when user searched for an address (Case 3) and allowCustomLocation is true */}
-              {allowCustomLocation && searchedLocation && !exactMatchLocationId && !cityFilter && (
-                <label
-                  className="flex items-start gap-3 cursor-pointer p-3 rounded-lg hover:bg-stone-50 border border-stone-200 bg-emerald-50/30"
-                  onMouseEnter={() => {
-                    setHoveredMarker('searched');
-                    if (mapRef.current && searchedLocation.coordinates) {
-                      panToLocationIfNeeded(mapRef.current, searchedLocation.coordinates);
-                    }
-                  }}
-                  onMouseLeave={() => setHoveredMarker(null)}
-                >
-                  <input
-                    type="radio"
-                    name="pickup-location"
-                    checked={selectedCustomAddress === searchedLocation.address}
-                    onChange={() => handleCustomLocationSelect(searchedLocation.address, searchedLocation.coordinates ?? undefined)}
-                    className="mt-1 w-5 h-5 text-emerald-600 focus:ring-emerald-500"
-                  />
-                  <div className="flex-1">
-                    <p className="font-medium text-stone-900">
-                      {t('pickup.useThisAddress')} — {searchedLocation.address}
-                    </p>
-                    <p className="text-sm text-stone-600 mt-1">
-                      {t('pickup.yourLocation')}
-                    </p>
-                  </div>
-                </label>
-              )}
-              {nearbyLocations.map((location) => (
-                <label
-                  key={location.id}
-                  className="flex items-start gap-3 cursor-pointer p-3 rounded-lg hover:bg-stone-50 border border-stone-200"
-                  onMouseEnter={() => {
-                    setHoveredMarker(location.id);
-                    if (mapRef.current && location.coordinates) {
-                      panToLocationIfNeeded(mapRef.current, location.coordinates);
-                    }
-                  }}
-                  onMouseLeave={() => {
-                    setHoveredMarker(null);
-                  }}
-                >
-                  <input
-                    type="radio"
-                    name="pickup-location"
-                    checked={selectedLocationId === location.id}
-                    onChange={() => handleLocationSelect(location.id)}
-                    className="mt-1 w-5 h-5 text-emerald-600 focus:ring-emerald-500"
-                  />
-                  <div className="flex-1">
-                    <p className="font-medium text-stone-900">
-                      {location.name}
-                    </p>
-                    <p className="text-sm text-stone-600 mt-1">
-                      {location.address}
-                    </p>
-                  {/* Only show distance/time for address searches (Case 3) */}
-                  {searchedLocation && !exactMatchLocationId && !cityFilter && (
-                    <div className="flex items-center gap-4 mt-2 text-sm text-stone-500">
-                      <span className="flex items-center gap-1">
-                        <svg
-                          className="w-4 h-4"
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
-                          />
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
-                          />
-                        </svg>
-                        {formatDistance(location.distance, useImperial)}
-                      </span>
-                      <span className="flex items-center gap-1">
-                        <svg
-                          className="w-4 h-4"
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M13 10V3L4 14h7v7l9-11h-7z"
-                          />
-                        </svg>
-                        {formatTime(location.walkingTime)} {t('pickup.walk')}
-                      </span>
-                      <span className="flex items-center gap-1">
-                        <svg
-                          className="w-4 h-4"
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"
-                          />
-                        </svg>
-                        {formatTime(location.drivingTime)} {t('pickup.drive')}
-                      </span>
-                    </div>
-                  )}
-                  </div>
-                </label>
-              ))}
             </div>
-            <button
-              onClick={() => setUseImperial(!useImperial)}
-              className="text-sm text-emerald-600 hover:text-emerald-700 underline"
-            >
-              {t('pickup.switchUnits', { unit: useImperial ? t('pickup.metric') : t('pickup.imperial') })}
-            </button>
-          </div>
-        )}
-
-        {/* Skip option */}
-        <label className="flex items-start gap-3 cursor-pointer">
-          <input
-            type="radio"
-            name="pickup-option"
-            checked={isSkipped && selectedLocationId === null && searchedLocation === null}
-            onChange={handleSkip}
-            className="mt-1 w-5 h-5 text-emerald-600 focus:ring-emerald-500"
-            aria-label={t('pickup.dontKnow')}
-          />
-          <div className="flex-1">
-            <span className="font-medium text-stone-900">
-              {t('pickup.dontKnow')}
-            </span>
-            <p className="text-sm text-stone-600 mt-1">
-              {t('pickup.dontKnowSubtext')}
-            </p>
+            </div>
           </div>
-        </label>
-      </div>
+      )}
 
-      {/* Warning Modal - Only closes when "I understand" is clicked */}
+      {/* Warning Modal - Only closes when "I understand" or "Nevermind" is clicked */}
       {showSkipWarning && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-          <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 p-6">
+          <div className="bg-white rounded-lg shadow-xl max-w-xl w-full mx-4 p-6">
             <h3 className="text-lg font-semibold text-stone-900 mb-4">
               {t('pickup.skipWarningTitle')}
             </h3>
@@ -1483,10 +1496,20 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
               className="text-stone-700 mb-6"
               dangerouslySetInnerHTML={{ __html: t('pickup.skipWarningMessage') }}
             />
-            <div className="flex justify-end">
+            <div className="flex justify-center gap-3 flex-nowrap">
+              <button
+                type="button"
+                onClick={() => {
+                  setShowSkipWarning(false);
+                  setDontKnowFilterActive(false);
+                }}
+                className={styles.skipModalNevermindBtn}
+              >
+                {t('pickup.nevermindSelectLocation')}
+              </button>
               <button
                 onClick={handleSkipConfirm}
-                className="px-4 py-2 bg-emerald-600 text-white font-medium rounded-lg hover:bg-emerald-700 transition-colors"
+                className={`${styles.skipModalUnderstandBtn} bg-emerald-600 text-white font-medium rounded-lg hover:bg-emerald-700 transition-colors`}
               >
                 {t('pickup.iUnderstand')}
               </button>
@@ -1515,9 +1538,11 @@ export function PickupLocationSelector(props: PickupLocationSelectorProps) {
   if (!hasMapsKey) {
     return (
       <div className="space-y-6">
-        <h2 className="text-2xl font-bold text-stone-900">
-          {props.isSkipped ? null : t('pickup.title')}
-        </h2>
+        {!props.hideTitle && (
+          <h2 className="text-2xl font-bold text-stone-900">
+            {props.isSkipped ? null : t('pickup.title')}
+          </h2>
+        )}
         <div className="p-4 bg-stone-50 border border-stone-200 rounded-lg text-stone-600 text-sm">
           Map unavailable (no API key). You can still complete your booking. Add{' '}
           <code className="bg-stone-200 px-1 rounded">NEXT_PUBLIC_GOOGLE_MAPS_API_KEY</code> to enable the map.
@@ -1528,7 +1553,7 @@ export function PickupLocationSelector(props: PickupLocationSelectorProps) {
             </p>
           )}
         </div>
-        {!props.isSkipped && (
+        {!props.isSkipped && !props.hideTitle && (
           <p className="text-sm text-stone-500">
             Select a pickup location from the list, or skip this step.
           </p>