@ticketboothapp/booking 0.1.3 → 0.1.7

package/src/components/PickupLocationSelector.tsx

@@ -0,0 +1,1541 @@
+'use client';
+
+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 {
+  formatDistance,
+  formatTime,
+  geocodeAddress,
+} from '@/lib/location-utils';
+import {
+  calculateNearbyLocations,
+  isExactMatch,
+} from '@/lib/location-calculations';
+import {
+  getAutocompleteSuggestions,
+  getPlaceDetails,
+  type AutocompleteSuggestion,
+} from '@/lib/places-api';
+import {
+  createDistanceMarkerIcon,
+  createPinMarkerIcon,
+  createSearchedLocationPinIcon,
+  createDestinationMarkerIcon,
+} from '@/lib/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';
+import { useBookingApp } from '@/contexts/BookingAppContext';
+
+export interface CustomPickupLocation {
+  address: string;
+  coordinates?: { lat: number; lng: number };
+}
+
+interface PickupLocationSelectorProps {
+  pickupLocations: PickupLocation[];
+  selectedLocationId: string | null;
+  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;
+  onSkip?: () => void;
+  isSkipped?: boolean;
+  destinations?: Destination[]; // Destination locations to show on the map
+}
+
+// Constants
+const libraries: ('places')[] = ['places'];
+const LOCATION_BIAS = {
+  latitude: 51.1784,
+  longitude: -115.5708,
+  radius: 50000.0, // 50km radius around Banff
+};
+const MARKER_COLORS = {
+  default: '#dc2626', // Dark red/orange
+  hover: '#1e3a8a', // Navy
+  destination: '#facc15', // Bright yellow for destinations
+} as const;
+const SUGGESTION_HIDE_DELAY = 200; // ms
+const DEFAULT_MAP_ZOOM = 10;
+const SEARCHED_LOCATION_ZOOM = 14;
+const MAX_ZOOM = 15;
+
+// Filter definitions
+const FILTERS = [
+  { id: 'canmore', label: 'Canmore' },
+  { id: 'banff', label: 'Banff' },
+  { id: 'lake-louise', label: 'Lake Louise' },
+  { id: 'free-parking', label: 'Free parking' },
+] as const;
+
+type FilterId = typeof FILTERS[number]['id'];
+
+// Helper function to determine which city a location belongs to
+function getLocationCity(location: PickupLocation): FilterId | null {
+  const addressLower = location.address.toLowerCase();
+  if (addressLower.includes('canmore')) return 'canmore';
+  if (addressLower.includes('banff')) return 'banff';
+  if (addressLower.includes('lake louise')) return 'lake-louise';
+  return null;
+}
+
+// Helper function to check if location has free parking
+function hasFreeParking(location: PickupLocation): boolean {
+  // Use the freeParking field if available, otherwise fall back to checking the name
+  if (location.freeParking !== undefined) {
+    return location.freeParking;
+  }
+  // Fallback: check name for backward compatibility
+  return location.name.toLowerCase().includes('free parking');
+}
+
+// Filter locations based on selected filters (AND logic)
+function filterLocations(
+  locations: PickupLocation[],
+  selectedFilters: Set<string>
+): PickupLocation[] {
+  if (selectedFilters.size === 0) return locations;
+  
+  return locations.filter(location => {
+    // Check city filters (only one city can be selected at a time)
+    const cityFilters = Array.from(selectedFilters).filter(f => 
+      ['canmore', 'banff', 'lake-louise'].includes(f)
+    );
+    if (cityFilters.length > 0) {
+      const locationCity = getLocationCity(location);
+      // Location must match the selected city (if any city filter is selected)
+      if (!locationCity || !cityFilters.includes(locationCity)) {
+        return false;
+      }
+    }
+    
+    // Check free parking filter (AND with city filter if both are selected)
+    if (selectedFilters.has('free-parking')) {
+      if (!hasFreeParking(location)) {
+        return false;
+      }
+    }
+    
+    return true;
+  });
+}
+
+// Check if a filter would result in any results when combined with current filters
+function wouldFilterHaveResults(
+  locations: PickupLocation[],
+  currentFilters: Set<string>,
+  filterToCheck: FilterId
+): boolean {
+  const testFilters = new Set(currentFilters);
+  testFilters.add(filterToCheck);
+  return filterLocations(locations, testFilters).length > 0;
+}
+
+// FilterPills component
+interface FilterPillsProps {
+  pickupLocations: PickupLocation[];
+  selectedFilters: Set<string>;
+  onFilterToggle: (filterId: string) => void;
+}
+
+function FilterPills({ pickupLocations, selectedFilters, onFilterToggle }: FilterPillsProps) {
+  // Memoize which filters would have results to avoid recalculating on every render
+  const filterResults = useMemo(() => {
+    const results = new Map<string, boolean>();
+    FILTERS.forEach(filter => {
+      results.set(filter.id, wouldFilterHaveResults(pickupLocations, selectedFilters, filter.id));
+    });
+    return results;
+  }, [pickupLocations, selectedFilters]);
+  
+  return (
+    <div className="mb-4 flex flex-wrap gap-2">
+      {FILTERS.map(filter => {
+        const isSelected = selectedFilters.has(filter.id);
+        const isCityFilter = ['canmore', 'banff', 'lake-louise'].includes(filter.id);
+        
+        // For city filters: if another city is selected, hide this one (mutually exclusive)
+        if (isCityFilter && !isSelected) {
+          const otherCitySelected = Array.from(selectedFilters).some(f => 
+            ['canmore', 'banff', 'lake-louise'].includes(f) && f !== filter.id
+          );
+          if (otherCitySelected) {
+            return null; // Hide this city filter if another city is selected
+          }
+        }
+        
+        // Check if this filter would have results (from memoized results)
+        const wouldHaveResults = filterResults.get(filter.id) ?? false;
+        
+        // Hide filter if it wouldn't have results (unless it's already selected)
+        if (!isSelected && !wouldHaveResults) {
+          return null;
+        }
+        
+        return (
+          <button
+            key={filter.id}
+            type="button"
+            onClick={() => onFilterToggle(filter.id)}
+            className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
+              isSelected
+                ? 'bg-emerald-600 text-white hover:bg-emerald-700'
+                : 'bg-stone-100 text-stone-700 hover:bg-stone-200'
+            }`}
+          >
+            {filter.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * Inner component that loads the Google Maps script. Only mounted when an API key is present
+ * so we never trigger ApiProjectMapError or load the script with an invalid/empty key.
+ */
+function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
+  const {
+    pickupLocations,
+    selectedLocationId,
+    selectedCustomAddress = null,
+    allowCustomLocation = false,
+    onLocationSelect,
+    onSkip,
+    isSkipped = false,
+    destinations = [],
+  } = props;
+  const { t } = useTranslations();
+  const [searchInput, setSearchInput] = useState('');
+  const [searchedLocation, setSearchedLocation] = useState<SearchedLocation | null>(null);
+  const [isValidLocation, setIsValidLocation] = useState<boolean | null>(null);
+  const [nearbyLocations, setNearbyLocations] = useState<NearbyLocation[]>([]);
+  const [useImperial, setUseImperial] = useState(false);
+  const [isGeocoding, setIsGeocoding] = useState(false);
+  const [selectedMarker, setSelectedMarker] = useState<string | null>(null);
+  const [hoveredMarker, setHoveredMarker] = useState<string | null>(null);
+  const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<AutocompleteSuggestion[]>([]);
+  const [exactMatchLocationId, setExactMatchLocationId] = useState<string | null>(null);
+  const [cityFilter, setCityFilter] = useState<string | null>(null);
+  const [selectedFilters, setSelectedFilters] = useState<Set<string>>(new Set());
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [mapZoom, setMapZoom] = useState(DEFAULT_MAP_ZOOM);
+  const [showSkipWarning, setShowSkipWarning] = useState(false);
+  const mapRef = useRef<google.maps.Map | null>(null);
+  const suggestionTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
+  const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const { googleMapsApiKey: keyFromContext } = useBookingApp();
+  const keyFromWindow = typeof window !== 'undefined' ? (window as unknown as { __TICKETBOOTH_GOOGLE_MAPS_API_KEY__?: string }).__TICKETBOOTH_GOOGLE_MAPS_API_KEY__ : undefined;
+  const googleMapsApiKey = keyFromContext ?? keyFromWindow ?? ENV.GOOGLE_MAPS_API_KEY;
+
+  // ============ Google Maps API Loading ============
+  const { isLoaded, loadError } = useJsApiLoader({
+    id: 'google-map-script',
+    googleMapsApiKey,
+    libraries,
+  });
+
+  // ============ Effects ============
+  
+  // Apply filter pills to pickup locations
+  const filteredPickupLocations = useMemo(() => {
+    return filterLocations(pickupLocations, selectedFilters);
+  }, [pickupLocations, selectedFilters]);
+  
+  // Calculate nearby locations when user searches
+  useEffect(() => {
+    // Case 1: Exact match - show only that one location (if it passes filters)
+    if (exactMatchLocationId) {
+      const exactLocation = filteredPickupLocations.find(loc => loc.id === exactMatchLocationId);
+      if (exactLocation?.coordinates) {
+        setNearbyLocations([{
+          ...exactLocation,
+          distance: 0,
+          walkingTime: 0,
+          drivingTime: 0,
+        }]);
+        setIsValidLocation(true);
+      } else {
+        // Exact match doesn't pass filters
+        setNearbyLocations([]);
+        setIsValidLocation(false);
+      }
+      return;
+    }
+
+    // Case 2: City/town filter - show all locations in that city (already filtered by pills)
+    if (cityFilter) {
+      const cityLocations = filteredPickupLocations
+        .filter(loc => {
+          if (!loc.coordinates) return false;
+          const addressLower = loc.address.toLowerCase();
+          return addressLower.includes(cityFilter.toLowerCase());
+        })
+        .map(loc => ({
+          ...loc,
+          distance: 0, // No distance calculation for city filter
+          walkingTime: 0,
+          drivingTime: 0,
+        }));
+      setNearbyLocations(cityLocations);
+      setIsValidLocation(null);
+      return;
+    }
+
+    // Case 3: Address search - show 3 closest locations (from filtered list)
+    if (!searchedLocation?.coordinates) {
+      setIsValidLocation(null);
+      setNearbyLocations([]);
+      return;
+    }
+
+    const locationsWithDistance = calculateNearbyLocations(
+      searchedLocation.coordinates,
+      filteredPickupLocations
+    );
+
+    // Take only the 3 closest locations (already sorted by distance)
+    const closestLocations = locationsWithDistance.slice(0, 3);
+
+    setNearbyLocations(closestLocations);
+    setIsValidLocation(isExactMatch(locationsWithDistance));
+  }, [searchedLocation, filteredPickupLocations, exactMatchLocationId, cityFilter]);
+
+  // Reset search state when switching to "I don't know" option
+  useEffect(() => {
+    if (isSkipped) {
+      setSearchInput('');
+      setSearchedLocation(null);
+      setIsValidLocation(null);
+      setNearbyLocations([]);
+      setShowSuggestions(false);
+      setAutocompleteSuggestions([]);
+      setSelectedMarker(null);
+      setExactMatchLocationId(null);
+      setCityFilter(null);
+      setHoveredMarker(null);
+    }
+  }, [isSkipped]);
+
+  // Clear search state when a location is selected externally (from parent)
+  useEffect(() => {
+    if (selectedLocationId && (searchedLocation || searchInput)) {
+      // Location was selected externally, clear search state
+      setSearchInput('');
+      setSearchedLocation(null);
+      setIsValidLocation(null);
+      setNearbyLocations([]);
+      setShowSuggestions(false);
+      setAutocompleteSuggestions([]);
+    }
+  }, [selectedLocationId, searchedLocation, searchInput]);
+
+  // Cleanup timeouts on unmount
+  useEffect(() => {
+    return () => {
+      if (suggestionTimeoutRef.current) {
+        clearTimeout(suggestionTimeoutRef.current);
+      }
+      if (focusTimeoutRef.current) {
+        clearTimeout(focusTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  // ============ Event Handlers ============
+  
+  // Handle autocomplete suggestions as user types
+  const handleSearchInputChange = async (value: string) => {
+    setSearchInput(value);
+
+    if (!value.trim() || !googleMapsApiKey) {
+      setAutocompleteSuggestions([]);
+      setShowSuggestions(false);
+      return;
+    }
+
+    try {
+      const suggestions = await getAutocompleteSuggestions(value, googleMapsApiKey, LOCATION_BIAS);
+      // Only update if the input value hasn't changed (avoid race conditions)
+      setAutocompleteSuggestions(suggestions);
+      setShowSuggestions(suggestions.length > 0);
+    } catch (error) {
+      console.error('Error fetching autocomplete suggestions:', error);
+      setAutocompleteSuggestions([]);
+      setShowSuggestions(false);
+    }
+  };
+
+  const handleSuggestionSelect = async (suggestion: AutocompleteSuggestion) => {
+    setSearchInput(suggestion.description);
+    setShowSuggestions(false);
+    setAutocompleteSuggestions([]);
+    setExactMatchLocationId(null);
+    setCityFilter(null);
+
+    const searchText = suggestion.description.split(',')[0].trim().toLowerCase();
+    const searchWords = searchText.split(/\s+/).filter(w => w.length > 0);
+
+    // Case 1: Check for exact pickup location match (multiple words)
+    if (searchWords.length > 1) {
+      const matchingPickupLocation = filteredPickupLocations.find((loc) => {
+        const nameLower = loc.name.toLowerCase();
+        // Check if the location name starts with the search text (not just contains it)
+        // This prevents "banff" from matching "Banff Aspen Lodge"
+        return nameLower.startsWith(searchText) || 
+               // Or if the search contains the full location name
+               (searchText.includes(nameLower) && nameLower.length > 10);
+      });
+
+      // If exact match found, filter to show only that location (don't auto-select)
+      if (matchingPickupLocation) {
+        setExactMatchLocationId(matchingPickupLocation.id);
+        setCityFilter(null); // Clear city filter if it was set
+        setSearchedLocation(null); // Don't show searched location pin
+        return;
+      }
+    }
+
+    // Case 2 & 3: Get place details to determine if it's a city or specific location
+    setIsGeocoding(true);
+    try {
+      // Get place details including types to determine if it's a city
+      const placeDetails = await getPlaceDetails(suggestion.placeId, googleMapsApiKey);
+
+      if (placeDetails) {
+        const { lat, lng, types } = placeDetails;
+        
+        // Check if it's a city/locality based on place types
+        // Cities typically have types like: "locality", "political", "administrative_area_level_2", etc.
+        // Specific locations have types like: "lodging", "establishment", "point_of_interest", etc.
+        const isCity = types.some(type => 
+          ['locality', 'administrative_area_level_1', 'administrative_area_level_2', 'political'].includes(type)
+        ) && !types.some(type => 
+          ['lodging', 'establishment', 'point_of_interest', 'restaurant', 'store'].includes(type)
+        );
+
+        if (isCity) {
+          // Case 2: It's a city - find which city it matches
+          const knownCities = ['banff', 'canmore', 'lake louise', 'harvie heights', 'baker creek'];
+          const matchedCity = knownCities.find(city => 
+            suggestion.description.toLowerCase().includes(city)
+          );
+          
+          if (matchedCity) {
+            setCityFilter(matchedCity);
+            setExactMatchLocationId(null);
+            setSearchedLocation(null);
+            setIsGeocoding(false);
+            return;
+          }
+        }
+
+        // Case 3: It's a specific location - geocode and show 3 closest
+        setExactMatchLocationId(null);
+        setCityFilter(null);
+        setSearchedLocation({
+          address: suggestion.description,
+          coordinates: { lat, lng },
+        });
+      } else {
+        // Fallback to geocoding if place details doesn't work
+        const coordinates = await geocodeAddress(suggestion.description, googleMapsApiKey);
+        if (coordinates) {
+          setExactMatchLocationId(null);
+          setCityFilter(null);
+          setSearchedLocation({
+            address: suggestion.description,
+            coordinates,
+          });
+        } else {
+          setSearchedLocation(null);
+          setIsValidLocation(false);
+          setNearbyLocations([]);
+        }
+      }
+    } catch (error) {
+      console.error('Error getting place details:', error);
+      // Final fallback to geocoding
+      try {
+        const coordinates = await geocodeAddress(suggestion.description, googleMapsApiKey);
+        if (coordinates) {
+          setExactMatchLocationId(null);
+          setCityFilter(null);
+          setSearchedLocation({
+            address: suggestion.description,
+            coordinates,
+          });
+        } else {
+          setSearchedLocation(null);
+          setIsValidLocation(false);
+          setNearbyLocations([]);
+        }
+      } catch (geocodeError) {
+        console.error('Geocoding error:', geocodeError);
+        setSearchedLocation(null);
+        setIsValidLocation(false);
+        setNearbyLocations([]);
+      }
+    } finally {
+      setIsGeocoding(false);
+    }
+  };
+
+  const handleSearch = async () => {
+    if (!searchInput.trim()) {
+      setSearchedLocation(null);
+      setIsValidLocation(null);
+      setNearbyLocations([]);
+      setShowSuggestions(false);
+      setExactMatchLocationId(null);
+      setCityFilter(null);
+      return;
+    }
+
+    setShowSuggestions(false);
+    setExactMatchLocationId(null);
+    setCityFilter(null);
+    
+    const searchText = searchInput.split(',')[0].trim().toLowerCase();
+    const searchWords = searchText.split(/\s+/).filter(w => w.length > 0);
+
+    // Case 1: Check for exact pickup location match (multiple words)
+    if (searchWords.length > 1) {
+      const matchingPickupLocation = filteredPickupLocations.find((loc) => {
+        const nameLower = loc.name.toLowerCase();
+        return nameLower.startsWith(searchText) || 
+               (searchText.includes(nameLower) && nameLower.length > 10);
+      });
+
+      // If exact match found, filter to show only that location (don't auto-select)
+      if (matchingPickupLocation) {
+        setExactMatchLocationId(matchingPickupLocation.id);
+        setCityFilter(null); // Clear city filter if it was set
+        setSearchedLocation(null); // Don't show searched location pin
+        return;
+      }
+    }
+
+    // Case 2: Check if it's a city/town name (only for single-word searches or city-only searches)
+    // Don't trigger for addresses that contain city names (those should be Case 3)
+    const knownCities = ['banff', 'canmore', 'lake louise', 'harvie heights', 'baker creek'];
+    // Only treat as city search if:
+    // 1. It's a single word that matches a city name exactly, OR
+    // 2. The input is just the city name (no street names, hotel names, etc.)
+    const isCityOnlySearch = searchWords.length === 1 && knownCities.includes(searchText);
+    const isCityInputOnly = knownCities.some(city => {
+      const inputLower = searchInput.toLowerCase();
+      // Check if input is essentially just the city (maybe with "Canada" or province)
+      const cityPattern = new RegExp(`^${city}(,\\s*(ab|alberta|canada))?$`, 'i');
+      return cityPattern.test(inputLower.trim());
+    });
+    
+    if (isCityOnlySearch || isCityInputOnly) {
+      const matchedCity = knownCities.find(city => {
+        if (searchWords.length === 1 && searchText === city) return true;
+        const inputLower = searchInput.toLowerCase();
+        const cityPattern = new RegExp(`^${city}(,\\s*(ab|alberta|canada))?$`, 'i');
+        return cityPattern.test(inputLower.trim());
+      });
+      if (matchedCity) {
+        setCityFilter(matchedCity);
+        setExactMatchLocationId(null); // Clear exact match if it was set
+        setSearchedLocation(null); // Don't show searched location pin
+        return;
+      }
+    }
+
+    // Case 3: Address search - make sure we clear exact match and city filter states
+    setExactMatchLocationId(null);
+    setCityFilter(null);
+    setIsGeocoding(true);
+    try {
+      const coordinates = await geocodeAddress(searchInput, googleMapsApiKey);
+      if (coordinates) {
+        setSearchedLocation({
+          address: searchInput,
+          coordinates,
+        });
+      } else {
+        setSearchedLocation(null);
+        setIsValidLocation(false);
+        setNearbyLocations([]);
+      }
+    } catch (error) {
+      console.error('Geocoding error:', error);
+      setSearchedLocation(null);
+      setIsValidLocation(false);
+      setNearbyLocations([]);
+    } finally {
+      setIsGeocoding(false);
+    }
+  };
+
+  const handleSearchKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleSearch();
+    }
+  };
+
+  const handleLocationSelect = (locationId: string) => {
+    onLocationSelect(locationId);
+    // Clear search state when a location is selected
+    setSearchInput('');
+    setSearchedLocation(null);
+    setIsValidLocation(null);
+    setNearbyLocations([]);
+    setShowSuggestions(false);
+    setSelectedMarker(null);
+    setHoveredMarker(null);
+  };
+
+  const handleCustomLocationSelect = (address: string, coordinates?: { lat: number; lng: number }) => {
+    onLocationSelect(null, { address, coordinates });
+    // Keep search state so user sees their selection; clear on "Change"
+    setSelectedMarker(null);
+  };
+
+  const handleYesOptionClick = () => {
+    // When clicking "Yes, I can add it now", clear any skip state
+    // Call onLocationSelect with null to signal clearing skip state
+    // The parent will handle clearing the skip state
+    if (isSkipped) {
+      onLocationSelect(null);
+    }
+    // Focus the search input to show the interface is active
+    // Clear any existing focus timeout
+    if (focusTimeoutRef.current) {
+      clearTimeout(focusTimeoutRef.current);
+    }
+    focusTimeoutRef.current = setTimeout(() => {
+      searchInputRef.current?.focus();
+      focusTimeoutRef.current = null;
+    }, 0);
+  };
+
+  const handleSkip = () => {
+    // Show warning modal when user clicks "I don't know yet"
+    setShowSkipWarning(true);
+  };
+
+  const handleSkipConfirm = () => {
+    // User confirmed they understand - proceed with skip
+    setShowSkipWarning(false);
+    
+    // Clear all search-related state when skipping
+    setSearchInput('');
+    setSearchedLocation(null);
+    setIsValidLocation(null);
+    setNearbyLocations([]);
+    setShowSuggestions(false);
+    setAutocompleteSuggestions([]);
+    setSelectedMarker(null);
+    setHoveredMarker(null);
+    
+    onLocationSelect(null);
+    if (onSkip) {
+      onSkip();
+    }
+  };
+
+  // ============ Map Configuration ============
+  
+  // Calculate map center
+  const mapCenter = useMemo(
+    () => calculateMapCenter(searchedLocation, nearbyLocations, filteredPickupLocations),
+    [nearbyLocations, searchedLocation, filteredPickupLocations]
+  );
+
+  // Center and zoom map based on search state
+  useEffect(() => {
+    if (!mapRef.current) return;
+
+    // Case 1: Exact match - zoom to that single location
+    if (exactMatchLocationId) {
+      const exactLocation = filteredPickupLocations.find(loc => loc.id === exactMatchLocationId);
+      if (exactLocation?.coordinates) {
+        mapRef.current.setCenter(exactLocation.coordinates);
+        mapRef.current.setZoom(SEARCHED_LOCATION_ZOOM);
+        setMapZoom(SEARCHED_LOCATION_ZOOM);
+        return;
+      }
+    }
+
+    // Case 2: City filter - fit bounds to all locations in that city
+    if (cityFilter && nearbyLocations.length > 0) {
+      const bounds = new google.maps.LatLngBounds();
+      nearbyLocations.forEach(loc => {
+        if (loc.coordinates) {
+          bounds.extend(loc.coordinates);
+        }
+      });
+      if (!bounds.isEmpty()) {
+        mapRef.current.fitBounds(bounds);
+        // Limit max zoom
+        google.maps.event.addListenerOnce(mapRef.current, 'bounds_changed', () => {
+          const currentZoom = mapRef.current?.getZoom();
+          if (currentZoom && currentZoom > MAX_ZOOM) {
+            mapRef.current?.setZoom(MAX_ZOOM);
+          }
+        });
+      }
+      return;
+    }
+
+    // Case 3: Address search - zoom to searched location
+    if (searchedLocation?.coordinates) {
+      mapRef.current.setCenter(searchedLocation.coordinates);
+      mapRef.current.setZoom(SEARCHED_LOCATION_ZOOM);
+      setMapZoom(SEARCHED_LOCATION_ZOOM);
+    } else if (!searchedLocation && !exactMatchLocationId && !cityFilter) {
+      // Reset zoom when search is cleared
+      setMapZoom(DEFAULT_MAP_ZOOM);
+    }
+  }, [searchedLocation, exactMatchLocationId, cityFilter, nearbyLocations, filteredPickupLocations]);
+
+  const mapOptions = useMemo(() => getMapOptions(), []);
+
+  // Memoize icons for markers to avoid recreating on every hover
+  // Only create icons for the actually hovered location and all others use default
+  const markerIcons = useMemo(() => {
+    const icons = new Map<string, { normal: string; hover: string }>();
+    
+    // Pre-create icons for nearby locations (distance markers)
+    nearbyLocations.forEach((location) => {
+      if (!location.coordinates) return;
+      const showDistanceMarker = searchedLocation !== null && !exactMatchLocationId && !cityFilter;
+      
+      if (showDistanceMarker) {
+        const walkingTimeStr = formatTime(location.walkingTime);
+        const distanceStr = formatDistance(location.distance, useImperial);
+        icons.set(location.id, {
+          normal: createDistanceMarkerIcon({
+            bgColor: MARKER_COLORS.default,
+            distanceStr,
+            walkingTimeStr,
+          }),
+          hover: createDistanceMarkerIcon({
+            bgColor: MARKER_COLORS.hover,
+            distanceStr,
+            walkingTimeStr,
+          }),
+        });
+      } else {
+        icons.set(location.id, {
+          normal: createPinMarkerIcon(MARKER_COLORS.default),
+          hover: createPinMarkerIcon(MARKER_COLORS.hover),
+        });
+      }
+    });
+    
+    // Pre-create icons for all pickup locations (when no search)
+    if (nearbyLocations.length === 0 && !exactMatchLocationId && !cityFilter && !searchedLocation) {
+      filteredPickupLocations.forEach((location) => {
+        if (!location.coordinates) return;
+        icons.set(location.id, {
+          normal: createPinMarkerIcon(MARKER_COLORS.default),
+          hover: createPinMarkerIcon(MARKER_COLORS.hover),
+        });
+      });
+    }
+    
+    return icons;
+  }, [nearbyLocations, searchedLocation, exactMatchLocationId, cityFilter, useImperial, filteredPickupLocations]);
+
+  // Map load handler
+  const onMapLoad = useCallback(
+    (map: google.maps.Map) => {
+      mapRef.current = map;
+
+      // Case 1: Exact match - zoom to that single location
+      if (exactMatchLocationId) {
+        const exactLocation = filteredPickupLocations.find(loc => loc.id === exactMatchLocationId);
+        if (exactLocation?.coordinates) {
+          map.setCenter(exactLocation.coordinates);
+          map.setZoom(SEARCHED_LOCATION_ZOOM);
+          setMapZoom(SEARCHED_LOCATION_ZOOM);
+          return;
+        }
+      }
+
+      // Case 2: City filter - fit bounds to all locations in that city
+      if (cityFilter && nearbyLocations.length > 0) {
+        const bounds = new google.maps.LatLngBounds();
+        nearbyLocations.forEach(loc => {
+          if (loc.coordinates) {
+            bounds.extend(loc.coordinates);
+          }
+        });
+        if (!bounds.isEmpty()) {
+          map.fitBounds(bounds);
+          // Limit max zoom
+          google.maps.event.addListenerOnce(map, 'bounds_changed', () => {
+            const currentZoom = map.getZoom();
+            if (currentZoom && currentZoom > MAX_ZOOM) {
+              map.setZoom(MAX_ZOOM);
+            }
+          });
+        }
+        return;
+      }
+
+      // Case 3: Address search - zoom to searched location
+      if (searchedLocation?.coordinates) {
+        map.setCenter(searchedLocation.coordinates);
+        map.setZoom(SEARCHED_LOCATION_ZOOM);
+        setMapZoom(SEARCHED_LOCATION_ZOOM);
+        return;
+      }
+
+      // Otherwise, fit bounds to show all relevant locations
+      const bounds = calculateMapBounds(
+        nearbyLocations,
+        searchedLocation,
+        isValidLocation,
+        pickupLocations
+      );
+
+      if (bounds) {
+        map.fitBounds(bounds);
+        // Don't zoom in too much - listener removes itself after first use
+        google.maps.event.addListenerOnce(map, 'bounds_changed', () => {
+          const currentZoom = map.getZoom();
+          if (currentZoom && currentZoom > MAX_ZOOM) {
+            map.setZoom(MAX_ZOOM);
+          }
+        });
+      }
+    },
+    [nearbyLocations, searchedLocation, isValidLocation, pickupLocations, exactMatchLocationId, cityFilter, filteredPickupLocations]
+  );
+
+  // ============ Render ============
+  
+  if (loadError) {
+    return (
+      <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
+        Error loading Google Maps. Please check your API key.
+      </div>
+    );
+  }
+
+  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
+                  ref={searchInputRef}
+                  type="text"
+                  value={searchInput}
+                  onChange={(e) => handleSearchInputChange(e.target.value)}
+                  onKeyPress={handleSearchKeyPress}
+                  onKeyDown={(e) => {
+                    // Handle arrow keys for suggestion navigation
+                    if (showSuggestions && autocompleteSuggestions.length > 0) {
+                      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                        e.preventDefault();
+                        // Could implement keyboard navigation here if needed
+                      }
+                      if (e.key === 'Escape') {
+                        setShowSuggestions(false);
+                      }
+                    }
+                  }}
+                  onFocus={() => {
+                    // Clear any pending timeout
+                    if (suggestionTimeoutRef.current) {
+                      clearTimeout(suggestionTimeoutRef.current);
+                      suggestionTimeoutRef.current = null;
+                    }
+                    if (autocompleteSuggestions.length > 0) {
+                      setShowSuggestions(true);
+                    }
+                  }}
+                  onBlur={() => {
+                    // Clear any existing timeout
+                    if (suggestionTimeoutRef.current) {
+                      clearTimeout(suggestionTimeoutRef.current);
+                    }
+                    // Delay hiding suggestions to allow click events
+                    suggestionTimeoutRef.current = setTimeout(() => {
+                      setShowSuggestions(false);
+                      suggestionTimeoutRef.current = null;
+                    }, SUGGESTION_HIDE_DELAY);
+                  }}
+                  placeholder={t('pickup.enterAddress')}
+                  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"
+                />
+                {/* Autocomplete suggestions dropdown */}
+                {showSuggestions && autocompleteSuggestions.length > 0 && (
+                  <div
+                    id="autocomplete-suggestions"
+                    role="listbox"
+                    aria-label="Address suggestions"
+                    className="absolute z-50 w-full mt-1 bg-white border border-stone-300 rounded-lg shadow-lg max-h-60 overflow-y-auto"
+                  >
+                    {autocompleteSuggestions.map((suggestion) => (
+                      <button
+                        key={suggestion.placeId}
+                        type="button"
+                        role="option"
+                        aria-selected="false"
+                        onClick={() => handleSuggestionSelect(suggestion)}
+                        className="w-full text-left px-4 py-3 hover:bg-stone-50 transition-colors border-b border-stone-100 last:border-b-0 focus:bg-stone-50 focus:outline-none"
+                      >
+                        <div className="flex items-start gap-3">
+                          <div className="mt-0.5">
+                            <svg
+                              className="w-5 h-5 text-stone-400"
+                              fill="none"
+                              stroke="currentColor"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+                              />
+                            </svg>
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <p className="text-sm font-medium text-stone-900 truncate">
+                              {suggestion.mainText}
+                            </p>
+                            {suggestion.secondaryText && (
+                              <p className="text-xs text-stone-500 truncate">
+                                {suggestion.secondaryText}
+                              </p>
+                            )}
+                          </div>
+                        </div>
+                      </button>
+                    ))}
+                  </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>
+            )}
+          </div>
+        </label>
+
+        {/* Map - Show when "Yes" option is selected (not skipped) */}
+        {!isSkipped && isLoaded && pickupLocations.length > 0 && (
+          <div className="ml-8">
+            {/* Filter Pills */}
+            <FilterPills
+              pickupLocations={pickupLocations}
+              selectedFilters={selectedFilters}
+              onFilterToggle={(filterId) => {
+                const newFilters = new Set(selectedFilters);
+                const cityFilterIds = ['canmore', 'banff', 'lake-louise'] as const;
+                const isCityFilter = cityFilterIds.includes(filterId as typeof cityFilterIds[number]);
+                
+                if (isCityFilter) {
+                  // For city filters: deselect other cities first (mutually exclusive)
+                  cityFilterIds.forEach(cityId => {
+                    if (cityId !== filterId) {
+                      newFilters.delete(cityId);
+                    }
+                  });
+                  // Toggle this city filter
+                  if (newFilters.has(filterId)) {
+                    newFilters.delete(filterId);
+                  } else {
+                    newFilters.add(filterId);
+                  }
+                } else {
+                  // For non-city filters (like free-parking), just toggle
+                  if (newFilters.has(filterId)) {
+                    newFilters.delete(filterId);
+                  } else {
+                    newFilters.add(filterId);
+                  }
+                }
+                
+                setSelectedFilters(newFilters);
+
+                // 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])
+                ) as FilterId | undefined;
+
+                if (activeCityFilter) {
+                  // Map filter id to the city string used elsewhere (note lake-louise vs lake louise)
+                  const cityString =
+                    activeCityFilter === 'lake-louise' ? 'lake louise' : activeCityFilter;
+                  setCityFilter(cityString);
+                  // Clear any previous exact-match / searched state so case 2 (city) takes over
+                  setExactMatchLocationId(null);
+                  setSearchedLocation(null);
+                } else {
+                  // No city filter selected via pills – clear city-based zoom state
+                  setCityFilter(null);
+                }
+              }}
+            />
+            
+            {/* 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>
+              </div>
+            )}
+            
+            <GoogleMap
+              mapContainerClassName="w-full h-96 rounded-lg border border-stone-300"
+              center={mapCenter}
+              zoom={mapZoom}
+              options={mapOptions}
+              onLoad={onMapLoad}
+            >
+              {/* Markers for filtered locations */}
+              {nearbyLocations.map((location) => {
+                if (!location.coordinates) return null;
+                const isHovered = hoveredMarker === location.id;
+                
+                // Show distance markers only for address searches (Case 3)
+                // For exact match (Case 1) and city filter (Case 2), show regular pins
+                const showDistanceMarker = searchedLocation !== null && !exactMatchLocationId && !cityFilter;
+                
+                if (showDistanceMarker) {
+                  const iconUrls = markerIcons.get(location.id);
+                  const iconUrl = iconUrls ? (isHovered ? iconUrls.hover : iconUrls.normal) : createDistanceMarkerIcon({
+                    bgColor: MARKER_COLORS.default,
+                    distanceStr: formatDistance(location.distance, useImperial),
+                    walkingTimeStr: formatTime(location.walkingTime),
+                  });
+                  
+                  return (
+                    <Marker
+                      key={location.id}
+                      position={location.coordinates}
+                      title={location.name}
+                      zIndex={isHovered ? 200 : 100}
+                      icon={{
+                        url: iconUrl,
+                        scaledSize: new google.maps.Size(120, 32),
+                        anchor: new google.maps.Point(60, 32),
+                      }}
+                      onMouseOver={() => setHoveredMarker(location.id)}
+                      onMouseOut={() => setHoveredMarker(null)}
+                      onClick={() => setSelectedMarker(location.id)}
+                    >
+                      {selectedMarker === location.id && (
+                        <InfoWindow 
+                          position={location.coordinates}
+                          onCloseClick={() => setSelectedMarker(null)}
+                        >
+                          <div className="p-2">
+                            <h3 className="font-semibold text-stone-900 mb-1">
+                              {location.name}
+                            </h3>
+                            <p className="text-sm text-stone-600 mb-2">
+                              {location.address}
+                            </p>
+                            <div className="text-xs text-stone-500 space-y-1">
+                              <p>
+                                📍 {formatDistance(location.distance, useImperial)} {t('pickup.away')}
+                              </p>
+                              <p>🚶 {formatTime(location.walkingTime)} {t('pickup.walk')}</p>
+                              <p>🚗 {formatTime(location.drivingTime)} {t('pickup.drive')}</p>
+                            </div>
+                            <button
+                              onClick={() => {
+                                handleLocationSelect(location.id);
+                                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"
+                            >
+                              {t('pickup.selectThisLocation')}
+                            </button>
+                          </div>
+                        </InfoWindow>
+                      )}
+                    </Marker>
+                  );
+                } else {
+                  // Regular pin markers for exact match or city filter
+                  const iconUrls = markerIcons.get(location.id);
+                  const iconUrl = iconUrls ? (isHovered ? iconUrls.hover : iconUrls.normal) : createPinMarkerIcon(MARKER_COLORS.default);
+                  
+                  return (
+                    <Marker
+                      key={location.id}
+                      position={location.coordinates}
+                      title={location.name}
+                      zIndex={isHovered ? 200 : 100}
+                      icon={{
+                        url: iconUrl,
+                        scaledSize: new google.maps.Size(32, 40),
+                        anchor: new google.maps.Point(16, 40),
+                      }}
+                      onMouseOver={() => setHoveredMarker(location.id)}
+                      onMouseOut={() => setHoveredMarker(null)}
+                      onClick={() => setSelectedMarker(location.id)}
+                    >
+                      {selectedMarker === location.id && (
+                        <InfoWindow 
+                          position={location.coordinates}
+                          onCloseClick={() => setSelectedMarker(null)}
+                        >
+                          <div className="p-2">
+                            <h3 className="font-semibold text-stone-900 mb-1">
+                              {location.name}
+                            </h3>
+                            <p className="text-sm text-stone-600 mb-2">
+                              {location.address}
+                            </p>
+                            {location.notes && (
+                              <p className="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded p-2 mb-2">
+                                {location.notes}
+                              </p>
+                            )}
+                            <button
+                              onClick={() => {
+                                handleLocationSelect(location.id);
+                                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"
+                            >
+                              {t('pickup.selectThisLocation')}
+                            </button>
+                          </div>
+                        </InfoWindow>
+                      )}
+                    </Marker>
+                  );
+                }
+              })}
+
+              {/* Markers for all pickup locations (when no search, no exact match, no city filter) */}
+              {nearbyLocations.length === 0 && !exactMatchLocationId && !cityFilter && !searchedLocation &&
+                filteredPickupLocations.map((location) => {
+                  if (!location.coordinates) return null;
+                  const isHovered = hoveredMarker === location.id;
+                  const iconUrls = markerIcons.get(location.id);
+                  const iconUrl = iconUrls ? (isHovered ? iconUrls.hover : iconUrls.normal) : createPinMarkerIcon(MARKER_COLORS.default);
+                  
+                  return (
+                    <Marker
+                      key={location.id}
+                      position={location.coordinates}
+                      title={location.name}
+                      zIndex={isHovered ? 200 : 100}
+                      icon={{
+                        url: iconUrl,
+                        scaledSize: new google.maps.Size(32, 40),
+                        anchor: new google.maps.Point(16, 40),
+                      }}
+                      onMouseOver={() => setHoveredMarker(location.id)}
+                      onMouseOut={() => setHoveredMarker(null)}
+                      onClick={() => setSelectedMarker(location.id)}
+                    >
+                      {selectedMarker === location.id && (
+                        <InfoWindow 
+                          position={location.coordinates}
+                          onCloseClick={() => setSelectedMarker(null)}
+                        >
+                          <div className="p-2">
+                            <h3 className="font-semibold text-stone-900 mb-1">
+                              {location.name}
+                            </h3>
+                            <p className="text-sm text-stone-600 mb-2">
+                              {location.address}
+                            </p>
+                            {location.notes && (
+                              <p className="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded p-2 mb-2">
+                                {location.notes}
+                              </p>
+                            )}
+                            <button
+                              onClick={() => {
+                                handleLocationSelect(location.id);
+                                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"
+                            >
+                              {t('pickup.selectThisLocation')}
+                            </button>
+                          </div>
+                        </InfoWindow>
+                      )}
+                    </Marker>
+                  );
+                })}
+
+              {/* Marker for searched location (user's hotel/Airbnb) - only show for address searches */}
+              {searchedLocation?.coordinates && !exactMatchLocationId && !cityFilter && (
+                <Marker
+                  position={searchedLocation.coordinates}
+                  title={`Your searched location\n${searchedLocation.address}`}
+                  zIndex={200}
+                  icon={{
+                    url: createSearchedLocationPinIcon(),
+                    scaledSize: new google.maps.Size(32, 40),
+                    anchor: new google.maps.Point(16, 40),
+                  }}
+                  animation={google.maps.Animation.DROP}
+                  onClick={() => setSelectedMarker('searched')}
+                >
+                  {selectedMarker === 'searched' && searchedLocation.coordinates && (
+                    <InfoWindow 
+                      position={searchedLocation.coordinates}
+                      onCloseClick={() => setSelectedMarker(null)}
+                    >
+                      <div className="p-2">
+                        <h3 className="font-semibold text-stone-900 mb-1">
+                          {t('pickup.yourLocation')}
+                        </h3>
+                        <p className="text-sm text-stone-600 mb-2">
+                          {searchedLocation.address}
+                        </p>
+                        {allowCustomLocation && (
+                          <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"
+                          >
+                            {t('pickup.useThisAddress')}
+                          </button>
+                        )}
+                        <p className="text-xs text-stone-500 mt-2">
+                          {t('pickup.chooseClosest')}
+                        </p>
+                      </div>
+                    </InfoWindow>
+                  )}
+                </Marker>
+              )}
+
+              {/* Destination markers */}
+              {destinations && destinations.length > 0 && destinations.map((destination) => (
+                <Marker
+                  key={`destination-${destination.name}`}
+                  position={{ lat: destination.latitude, lng: destination.longitude }}
+                  title={destination.name}
+                  zIndex={50}
+                  icon={{
+                    url: createDestinationMarkerIcon(destination.name, MARKER_COLORS.destination),
+                    scaledSize: new google.maps.Size(80, 60),
+                    anchor: new google.maps.Point(40, 40), // Anchor at the pin point (not including text)
+                  }}
+                  cursor="default"
+                />
+              ))}
+            </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>
+        </label>
+      </div>
+
+      {/* Warning Modal - Only closes when "I understand" 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">
+            <h3 className="text-lg font-semibold text-stone-900 mb-4">
+              {t('pickup.skipWarningTitle')}
+            </h3>
+            <p 
+              className="text-stone-700 mb-6"
+              dangerouslySetInnerHTML={{ __html: t('pickup.skipWarningMessage') }}
+            />
+            <div className="flex justify-end">
+              <button
+                onClick={handleSkipConfirm}
+                className="px-4 py-2 bg-emerald-600 text-white font-medium rounded-lg hover:bg-emerald-700 transition-colors"
+              >
+                {t('pickup.iUnderstand')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Public component. Only loads the Google Maps script when NEXT_PUBLIC_GOOGLE_MAPS_API_KEY
+ * is set; otherwise renders a friendly message so embedded contexts (e.g. provider dashboard)
+ * don't hit ApiProjectMapError.
+ */
+export function PickupLocationSelector(props: PickupLocationSelectorProps) {
+  const { t } = useTranslations();
+  const { googleMapsApiKey: keyFromContext } = useBookingApp();
+  const keyFromWindow = typeof window !== 'undefined' ? (window as unknown as { __TICKETBOOTH_GOOGLE_MAPS_API_KEY__?: string }).__TICKETBOOTH_GOOGLE_MAPS_API_KEY__ : undefined;
+  const mapsKey = keyFromContext ?? keyFromWindow ?? ENV.GOOGLE_MAPS_API_KEY;
+  const hasMapsKey = Boolean(mapsKey?.trim());
+  const showMapsDebug =
+    typeof window !== 'undefined' && new URLSearchParams(window.location.search).get('maps_debug') === '1';
+
+  if (!hasMapsKey) {
+    return (
+      <div className="space-y-6">
+        <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.
+          {showMapsDebug && (
+            <p className="mt-2 text-amber-700 text-xs">
+              Debug: no API key from context, window, or build. Ensure NEXT_PUBLIC_GOOGLE_MAPS_API_KEY is set in Vercel
+              (provider-dashboard), redeploy, then hard-refresh.
+            </p>
+          )}
+        </div>
+        {!props.isSkipped && (
+          <p className="text-sm text-stone-500">
+            Select a pickup location from the list, or skip this step.
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  return <PickupLocationSelectorWithMap {...props} />;
+}