@ticketboothapp/booking 0.1.11 → 0.1.13

package/src/components/PrivateShuttleBookingFlow.tsx

@@ -1,2290 +0,0 @@
-'use client';
-
-import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
-import { format, addWeeks, parseISO, isBefore, isAfter, startOfDay, endOfDay } from 'date-fns';
-import { formatInTimeZone } from 'date-fns-tz';
-import { 
-  getAvailabilities, 
-  createReservation, 
-  createPaymentIntent,
-  confirmFreeBooking,
-  confirmBookingWithoutPayment,
-  getAddOns,
-  validatePromoCode,
-  getPromoDiscount,
-  type Product,
-  type Availability,
-  type ItineraryDisplayStep,
-  type AddOn,
-  ItineraryStepType,
-} from '@/lib/api';
-import { 
-  EARLIEST_AVAILABILITY_DATE,
-  LATEST_AVAILABILITY_DATE,
-  INITIAL_FETCH_WEEKS,
-} from '@/lib/constants';
-import { formatCurrencyAmount } from '@/lib/currency';
-import { formatBookingRefForDisplay } from '@/lib/booking-ref';
-import { buildCheckoutBreakdown } from '@/lib/checkout-breakdown';
-import type { PricingConfig, PrecomputedPricesByCategory } from '@/lib/api';
-import { Calendar } from './Calendar';
-import { PickupLocationSelector } from './PickupLocationSelector';
-import { useTranslations, useLocale } from '@/lib/i18n';
-import { type Currency } from './CurrencySwitcher';
-import { useCompanyTimezone } from '@/contexts/CompanyContext';
-import { useBookingApp } from '@/contexts/BookingAppContext';
-import { CheckoutModal, type CheckoutModalLineItem } from './CheckoutModal';
-import { Check, X } from 'lucide-react';
-import { PriceSummary } from './PriceSummary';
-import { TermsAcceptance } from './TermsAcceptance';
-import { ItineraryBuilder } from './ItineraryBuilder';
-import { MealDrinkAddOnSelector, canUseMealDrinkSelector } from './MealDrinkAddOnSelector';
-
-interface PrivateShuttleBookingFlowProps {
-  product: Product;
-  onBack: () => void;
-  currency: Currency;
-  /**
-   * Optional callback called when reservation is successfully created (before checkout redirect)
-   * If provided, indicates we're in an embedded context (e.g., provider dashboard)
-   */
-  onSuccess?: (data: { reservationReference: string }) => void;
-  /** Change mode: pre-fill from existing booking and call onChangeBooking on submit */
-  initialBooking?: {
-    bookingReference: string;
-    productId: string;
-    dateTime: string;
-    originalTotalAmount?: number;
-    originalCurrency?: string;
-    bookingItems: Array<{ category: string; count: number }>;
-    returnAvailabilityId?: string | null;
-    pickupLocationId?: string | null;
-    travelerHotel?: string | null;
-    startTime?: string | null;
-    privateShuttleDetails?: { passengerCount?: number };
-    cancellationPolicyId?: string | null;
-    promoCode?: string | null;
-    /** Current additional billable hours on the booking (change mode pre-fill). */
-    additionalHoursCount?: number | null;
-    addOnSelections?: Array<{ addOnId: string; variantId?: string; quantity?: number }> | null;
-  };
-  onChangeBooking?: (data: {
-    productId: string;
-    dateTime: string;
-    bookingItems: Array<{ category: string; count: number }>;
-    returnAvailabilityId?: string | null;
-    pickupLocationId?: string | null;
-    travelerHotel?: string | null;
-    startTime?: string | null;
-    passengerCount?: number | null;
-    childSafetySeatsCount?: number | null;
-    foodRestrictions?: string | null;
-    addOnSelections?: Array<{ addOnId: string; variantId?: string; quantity?: number }> | null;
-    cancellationPolicyId?: string | null;
-    promoCode?: string | null;
-    newTotalAmount?: number;
-    keepOriginalPrice?: boolean;
-    /** Billable extra hours; sent on every private shuttle change so backend can update duration and total. */
-    additionalHoursCount?: number | null;
-  }) => Promise<void>;
-}
-
-export function PrivateShuttleBookingFlow({ product, onBack, currency, onSuccess, initialBooking, onChangeBooking }: PrivateShuttleBookingFlowProps) {
-  const { t } = useTranslations();
-  const { locale } = useLocale();
-  const companyTimezone = useCompanyTimezone(); // Get timezone from context
-  const { permissions, onShowManage, getSuccessUrl } = useBookingApp();
-  const isAdmin = permissions.viewerRole === 'admin';
-  const [availabilities, setAvailabilities] = useState<Availability[]>([]);
-  const [selectedDate, setSelectedDate] = useState<string>('');
-  const [selectedAvailability, setSelectedAvailability] = useState<Availability | null>(null);
-  const [selectedOption, setSelectedOption] = useState<string>('');
-  const [selectedStartTime, setSelectedStartTime] = useState<string>('');
-  const [isCustomTimeMode, setIsCustomTimeMode] = useState(false);
-  const isChangeMode = !!(initialBooking && onChangeBooking);
-  const [passengerCount, setPassengerCount] = useState<number>(initialBooking?.privateShuttleDetails?.passengerCount ?? 1);
-  const [email, setEmail] = useState('');
-  const [firstName, setFirstName] = useState('');
-  const [lastName, setLastName] = useState('');
-  const [pickupLocationId, setPickupLocationId] = useState<string | null>(initialBooking?.pickupLocationId ?? null);
-  const [customPickupAddress, setCustomPickupAddress] = useState<string | null>(null);
-  const [pickupLocationSkipped, setPickupLocationSkipped] = useState(false);
-  /** Draft itinerary for Private Shuttle (destinations, lunch stop, planning notes) */
-  const [draftItineraryDestinations, setDraftItineraryDestinations] = useState<string[]>([]);
-  const [draftItineraryPlanningNotes, setDraftItineraryPlanningNotes] = useState('');
-  /** Child safety seats count (0 to passengerCount) */
-  const [childSafetySeatsCount, setChildSafetySeatsCount] = useState(0);
-  /** Food restrictions / dietary notes */
-  const [foodRestrictions, setFoodRestrictions] = useState('');
-  /** Add-on selections (lunch, animals, etc.) - single source of truth */
-  const [addOnSelections, setAddOnSelections] = useState<Array<{ addOnId: string; variantId?: string; quantity?: number }>>(() =>
-    initialBooking?.addOnSelections?.length
-      ? initialBooking.addOnSelections.map((s) => ({
-          addOnId: s.addOnId,
-          variantId: s.variantId,
-          quantity: s.quantity ?? 1,
-        }))
-      : []
-  );
-  /** Fetched add-ons for the selected option */
-  const [addOns, setAddOns] = useState<AddOn[]>([]);
-  
-  // Get selected pickup location (memoized for performance)
-  const selectedPickupLocation = useMemo(() => 
-    pickupLocationId 
-      ? product.pickupLocations?.find(loc => loc.id === pickupLocationId)
-      : null,
-    [pickupLocationId, product.pickupLocations]
-  );
-  const [loading, setLoading] = useState(false);
-  const [loadingAvailabilities, setLoadingAvailabilities] = useState(true);
-  const [error, setError] = useState('');
-  const [showCheckoutModal, setShowCheckoutModal] = useState(false);
-  const [termsAccepted, setTermsAccepted] = useState(false);
-  const [termsAcceptedAt, setTermsAcceptedAt] = useState<string | null>(null);
-  const [checkoutClientSecret, setCheckoutClientSecret] = useState('');
-  const [checkoutModalData, setCheckoutModalData] = useState<{
-    reservationReference: string;
-    customerLastName?: string;
-    ticketLines: CheckoutModalLineItem[];
-    feeLineItems: { name: string; totalAmount: number; description?: string }[];
-    returnPriceAdjustment: number;
-    subtotal: number;
-    tax: number;
-    total: number;
-    totalQuantity: number;
-    isTaxIncludedInPrice: boolean;
-    taxRate: number;
-    /** When true, show deposit messaging (balance charged 7 days before or pay earlier). */
-    isDepositPayment?: boolean;
-    balanceChargeDaysBefore?: number;
-    cancellationPolicyFee?: number;
-    cancellationPolicyLabel?: string;
-    promoDiscountAmount?: number;
-    discountLabel?: string | null;
-  } | null>(null);
-  /** Admin only: skip sending confirmation at creation (provider dashboard). */
-  const [skipConfirmationCommunications, setSkipConfirmationCommunications] = useState(false);
-  /** Admin only: disable all auto communications for this booking (provider dashboard). */
-  const [disableAutoCommunications, setDisableAutoCommunications] = useState(false);
-  /** Admin + deposit: show choice to pay or confirm without payment. */
-  const [showAdminPaymentChoice, setShowAdminPaymentChoice] = useState(false);
-  /** Change mode: when true, apply change but keep original receipt/price — no charge or refund. */
-  const [keepOriginalPrice, setKeepOriginalPrice] = useState(false);
-  /** Promo/voucher (admin only): input, applied code, error, validating, discount amount */
-  const [promoCodeInput, setPromoCodeInput] = useState(() => initialBooking?.promoCode?.trim() ?? '');
-  const [appliedPromoCode, setAppliedPromoCode] = useState<string | null>(() => initialBooking?.promoCode?.trim() || null);
-  const [promoCodeError, setPromoCodeError] = useState('');
-  const [promoCodeValidating, setPromoCodeValidating] = useState(false);
-  const [promoDiscountAmount, setPromoDiscountAmount] = useState(0);
-  const [isGiftCard, setIsGiftCard] = useState(false);
-  const [isVoucher, setIsVoucher] = useState(false);
-  const lastValidatedInputRef = useRef<string | null>(null);
-  /** Admin only: additional hours add-on ($170/hour, extends duration) */
-  const [additionalHoursCount, setAdditionalHoursCount] = useState(
-    () => initialBooking?.additionalHoursCount ?? 0
-  );
-
-  const ADDITIONAL_HOUR_PRICE = 170;
-  /** Data for admin choice step (reservation, breakdown, etc.). */
-  const [adminChoiceData, setAdminChoiceData] = useState<{
-    reservationReference: string;
-    checkoutBreakdown: { lineItems: Array<{ label: string; amount: number; type?: string; quantity?: number }>; totalAmount: number; currency: string };
-    depositAmount: number;
-    balanceAmount: number;
-    totalAmount: number;
-    balanceChargeDaysBefore: number;
-    itineraryDisplay?: ItineraryDisplayStep[];
-    pickupLocationId?: string;
-  } | null>(null);
-  const [pricingConfig, setPricingConfig] = useState<PricingConfig | null>(null);
-  const [cancellationPolicyId, setCancellationPolicyId] = useState<string | null>(null);
-  /** When promo forces a cancellation policy (id + label from validate response). */
-  const [forcedCancellationPolicyFromPromo, setForcedCancellationPolicyFromPromo] = useState<{ id: string; label: string } | null>(null);
-  /** Precomputed prices from ticketbooth-product-prices (category -> currency -> price). Used for display; API prices are for GYG only. */
-  const [precomputedPrices, setPrecomputedPrices] = useState<PrecomputedPricesByCategory | null>(null);
-  /** Private Shuttle only: RESOURCE price per currency from API; use this, no conversion. */
-  const [resourcePriceByCurrency, setResourcePriceByCurrency] = useState<Record<string, number> | null>(null);
-  /** When allOptions: optionId -> (currency -> price) for each option. */
-  const [resourcePriceByOption, setResourcePriceByOption] = useState<Record<string, Record<string, number>> | null>(null);
-  const pricingConfigSetRef = useRef(false); // Track if pricingConfig has been set (optimize: only set once)
-  const fetchingRef = useRef(false); // Prevent concurrent fetches
-  const fetchedRangesRef = useRef<Array<{ start: Date; end: Date }>>([]); // Track fetched date ranges
-  const [refreshKey, setRefreshKey] = useState(0); // Bump to force refetch when tab regains focus (e.g. after reconciling on dashboard)
-  const [visibleRange, setVisibleRange] = useState<{ start: Date; end: Date } | null>(null);
-  const itineraryRef = useRef<HTMLDivElement>(null);
-  
-  // Get all active product options
-  const activeOptions = useMemo(() => {
-    return product.options?.filter(opt => opt.status === 'ACTIVE') || [];
-  }, [product.options]);
-  
-  // Get selected option config
-  const selectedOptionConfig = activeOptions.find(opt => opt.optionId === selectedOption);
-  const privateShuttleConfig = selectedOptionConfig?.privateShuttleConfig;
-  
-  // Helper function to check if we need to fetch a date range
-  const needsFetch = (start: Date, end: Date): boolean => {
-    if (fetchedRangesRef.current.length === 0) return true;
-    
-    // Check if the requested range is fully covered by fetched ranges
-    // For simplicity, check if any single fetched range fully covers the requested range
-    return !fetchedRangesRef.current.some(range => {
-      const rangeStart = range.start.getTime();
-      const rangeEnd = range.end.getTime();
-      const reqStart = start.getTime();
-      const reqEnd = end.getTime();
-      
-      // Check if this fetched range fully covers the requested range
-      return rangeStart <= reqStart && rangeEnd >= reqEnd;
-    });
-  };
-
-  // Initialize visible range only once on mount
-  useEffect(() => {
-    if (!visibleRange) {
-      // Initial load - fetch initial weeks (visible + buffer)
-      const initialEnd = addWeeks(EARLIEST_AVAILABILITY_DATE, INITIAL_FETCH_WEEKS);
-      setVisibleRange({ start: EARLIEST_AVAILABILITY_DATE, end: initialEnd });
-    }
-  }, [visibleRange]);
-
-  // When user changes the product option (after selecting date), clear start time only.
-  // Don't clear selectedAvailability - handleOptionSelect already sets the new one, and clearing
-  // it here caused custom fields to flicker/disappear (effect ran after handleOptionSelect).
-  const prevSelectedOptionRef = useRef<string | null>(null);
-  useEffect(() => {
-    if (selectedOption && prevSelectedOptionRef.current !== null && prevSelectedOptionRef.current !== selectedOption) {
-      setSelectedStartTime('');
-      setIsCustomTimeMode(false);
-    }
-    prevSelectedOptionRef.current = selectedOption;
-  }, [selectedOption]);
-
-  // Fetch add-ons when option is selected (for lunch package, animals, etc.)
-  useEffect(() => {
-    if (!selectedOption || !product.companyId) return;
-    getAddOns(product.companyId, { productOptionId: selectedOption, preCheckout: true })
-      .then(setAddOns)
-      .catch(() => setAddOns([]));
-  }, [selectedOption, product.companyId]);
-
-  // Clear EL lunch add-on when Emerald Lake is deselected from destinations
-  useEffect(() => {
-    const hasEmeraldLake = draftItineraryDestinations.includes('emerald_lake');
-    if (!hasEmeraldLake) {
-      setAddOnSelections((prev) => prev.filter((s) => s.addOnId !== 'addon_el_lunch'));
-    }
-  }, [draftItineraryDestinations]);
-
-  // When applied promo code changes, clear fetched ranges so we refetch with new pricing
-  useEffect(() => {
-    fetchedRangesRef.current = [];
-  }, [appliedPromoCode]);
-
-  // Fetch availabilities for visible range - date-first flow: use productId + allOptions to get all options
-  useEffect(() => {
-    if (activeOptions.length === 0) {
-      setError('No active product options available');
-      setLoadingAvailabilities(false);
-      return;
-    }
-    
-    if (!visibleRange) {
-      // Wait for initial range to be set
-      return;
-    }
-    
-    async function fetchAvailabilities() {
-      // Prevent concurrent fetches
-      if (fetchingRef.current) {
-        return;
-      }
-      
-      // Clamp to available date range
-      if (!visibleRange) return;
-      
-      const clampedStart = isBefore(visibleRange.start, EARLIEST_AVAILABILITY_DATE) 
-        ? EARLIEST_AVAILABILITY_DATE 
-        : visibleRange.start;
-      const endOfLatestDay = endOfDay(LATEST_AVAILABILITY_DATE);
-      let clampedEnd = isAfter(visibleRange.end, endOfLatestDay)
-        ? endOfLatestDay
-        : visibleRange.end;
-      
-      // Ensure we include the selected date if it's after the visible range end
-      if (selectedDate) {
-        try {
-          const selectedDateObj = parseISO(selectedDate);
-          if (isAfter(selectedDateObj, clampedEnd)) {
-            clampedEnd = selectedDateObj;
-          }
-        } catch {
-          // Ignore parse errors
-        }
-      }
-      
-      // Check if we need to fetch this range
-      if (!needsFetch(clampedStart, clampedEnd)) {
-        setLoadingAvailabilities(false);
-        return;
-      }
-      
-      fetchingRef.current = true;
-      setLoadingAvailabilities(true);
-      
-      try {
-        const startDate = format(startOfDay(clampedStart), 'yyyy-MM-dd');
-        const endDateStr = format(endOfDay(clampedEnd), 'yyyy-MM-dd');
-        
-        // Date-first flow: fetch all options at once (productId + allOptions=true)
-        const result = await getAvailabilities(product.productId, startDate, endDateStr, {
-          allOptions: true,
-          promoCode: appliedPromoCode || undefined,
-        });
-        const allFetchedAvailabilities = result.availabilities;
-        
-        if (result.pricingConfig && !pricingConfigSetRef.current) {
-          setPricingConfig(result.pricingConfig);
-          pricingConfigSetRef.current = true;
-        }
-        if (result.precomputedPrices) {
-          setPrecomputedPrices(result.precomputedPrices);
-        }
-        if (result.resourcePriceByCurrency) {
-          setResourcePriceByCurrency(result.resourcePriceByCurrency);
-        }
-        if (result.resourcePriceByOption) {
-          setResourcePriceByOption(result.resourcePriceByOption);
-        } else {
-          setResourcePriceByOption(null);
-        }
-        
-        // Merge: key by dateTime:productId so we keep all options per date
-        setAvailabilities(prev => {
-          const existingMap = new Map(prev.map(avail => [`${avail.dateTime}:${avail.productId || avail.productOptionId || avail.availabilityId}`, avail]));
-          allFetchedAvailabilities.forEach(avail => {
-            const key = `${avail.dateTime}:${avail.productId || avail.productOptionId || avail.availabilityId}`;
-            existingMap.set(key, avail);
-          });
-          return Array.from(existingMap.values());
-        });
-        
-        // Mark this range as fetched
-        fetchedRangesRef.current.push({ start: new Date(clampedStart), end: new Date(clampedEnd) });
-        // Sort and merge overlapping ranges
-        fetchedRangesRef.current.sort((a, b) => a.start.getTime() - b.start.getTime());
-        const merged: Array<{ start: Date; end: Date }> = [];
-        for (const r of fetchedRangesRef.current) {
-          if (merged.length === 0 || merged[merged.length - 1].end < r.start) {
-            merged.push({ start: r.start, end: r.end });
-          } else {
-            merged[merged.length - 1].end = r.end > merged[merged.length - 1].end 
-              ? r.end 
-              : merged[merged.length - 1].end;
-          }
-        }
-        fetchedRangesRef.current = merged;
-        
-        // Initialize passenger count to 1 (only if not already set)
-        if (passengerCount === 0) {
-          setPassengerCount(1);
-        }
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load availabilities');
-      } finally {
-        setLoadingAvailabilities(false);
-        fetchingRef.current = false;
-      }
-    }
-    
-    fetchAvailabilities();
-  }, [visibleRange, activeOptions, selectedDate, refreshKey, product.productId, appliedPromoCode]);
-
-  // Refetch availabilities when user returns to this tab (e.g. after reconciling capacity on dashboard)
-  useEffect(() => {
-    const handleVisibilityChange = () => {
-      if (document.visibilityState === 'visible') {
-        fetchedRangesRef.current = [];
-        setRefreshKey((k) => k + 1);
-      }
-    };
-    document.addEventListener('visibilitychange', handleVisibilityChange);
-    return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
-  }, []);
-
-  // Memoized callback for visible range changes
-  // Only update if the range actually changed to avoid unnecessary fetches
-  const lastVisibleRangeRef = useRef<{ start: Date; end: Date } | null>(null);
-  const handleVisibleRangeChange = useCallback((start: Date, end: Date) => {
-    const lastRange = lastVisibleRangeRef.current;
-    // Update if this is the first range or if it changed significantly (more than a day)
-    const rangeChanged = !lastRange || 
-        Math.abs(lastRange.start.getTime() - start.getTime()) > 24 * 60 * 60 * 1000 ||
-        Math.abs(lastRange.end.getTime() - end.getTime()) > 24 * 60 * 60 * 1000;
-    
-    if (rangeChanged) {
-      lastVisibleRangeRef.current = { start, end };
-      // Always update state to trigger fetch, even if needsFetch might return false
-      // The needsFetch check will prevent unnecessary API calls, but we want the state update
-      setVisibleRange({ start, end });
-    }
-  }, []);
-
-  // Group availabilities by date (date-first: each date can have multiple options)
-  const availabilitiesByDate = useMemo(() => {
-    return availabilities.reduce((acc, avail) => {
-      const dateStr = avail.dateTime.split('T')[0];
-      if (!acc[dateStr]) acc[dateStr] = [];
-      acc[dateStr].push(avail);
-      return acc;
-    }, {} as Record<string, Availability[]>);
-  }, [availabilities]);
-
-  // Options available for the selected date (for option selector - only show options that have availability that day)
-  const optionsAvailableForSelectedDate = useMemo(() => {
-    if (!selectedDate) return [];
-    const dateAvailabilities = availabilitiesByDate[selectedDate] || [];
-    const optionIds = new Set(dateAvailabilities.map(a => a.productId || a.productOptionId).filter(Boolean));
-    return activeOptions.filter(opt => optionIds.has(opt.optionId));
-  }, [selectedDate, availabilitiesByDate, activeOptions]);
-
-  const dates = useMemo(() => Object.keys(availabilitiesByDate).sort(), [availabilitiesByDate]);
-  
-  // Find the earliest availability date - memoize with a stable reference
-  // Only recalculate if we don't have a cached value or if the new earliest is actually earlier
-  // IMPORTANT: Never return null once we have a value, to prevent calendar reset during loading
-  const earliestAvailabilityDateRef = useRef<Date | null>(null);
-  const earliestAvailabilityDate = useMemo(() => {
-    if (dates.length === 0) {
-      // If we have a cached value, keep using it even during loading
-      return earliestAvailabilityDateRef.current || EARLIEST_AVAILABILITY_DATE;
-    }
-    const firstDate = dates[0];
-    const [year, month, day] = firstDate.split('-').map(Number);
-    const newEarliest = new Date(year, month - 1, day);
-    
-    // Only update if we don't have a cached value or if the new one is earlier
-    if (!earliestAvailabilityDateRef.current || newEarliest < earliestAvailabilityDateRef.current) {
-      earliestAvailabilityDateRef.current = newEarliest;
-    }
-    
-    return earliestAvailabilityDateRef.current;
-  }, [dates]);
-  
-  // Get selected availability's suggested start times
-  const suggestedStartTimes = selectedAvailability?.suggestedStartTimes || privateShuttleConfig?.suggestedStartTimes || [];
-  
-  // Resource capacity per shuttle (hardcoded for now - should come from backend/config)
-  const RESOURCE_CAPACITY = 13;
-  
-  // Calculate number of resources needed based on passenger count
-  const resourceCount = Math.ceil(passengerCount / RESOURCE_CAPACITY);
-  
-  // Resource price: prefer selected availability's rates (includes dynamic pricing) when available;
-  // otherwise fall back to resourcePriceByOption, resourcePriceByCurrency, or precomputedPrices
-  const resourcePrice = useMemo(() => {
-    // When user has selected a date/availability, use the per-slot price from rates (has dynamic pricing applied)
-    if (selectedAvailability?.rates) {
-      const resourceRate = selectedAvailability.rates.find((r) => r.rateId === 'RESOURCE' || r.category === 'RESOURCE');
-      if (resourceRate) {
-        const fromRate = resourceRate.priceByCurrency?.[currency] ?? (currency === 'CAD' ? resourceRate.price : undefined);
-        if (fromRate != null) return fromRate;
-      }
-    }
-    if (selectedOption && resourcePriceByOption?.[selectedOption]?.[currency] != null) {
-      return resourcePriceByOption[selectedOption][currency];
-    }
-    const fromApi = resourcePriceByCurrency?.[currency];
-    if (fromApi != null) return fromApi;
-    const fromPrecomputed = precomputedPrices?.['RESOURCE']?.[currency];
-    if (fromPrecomputed != null) return fromPrecomputed;
-    const fromProduct = selectedOptionConfig?.pricing?.['RESOURCE'];
-    if (fromProduct != null) return fromProduct;
-    return 0;
-  }, [selectedAvailability, resourcePriceByOption, resourcePriceByCurrency, precomputedPrices, selectedOption, selectedOptionConfig, currency]);
-  
-  // Calculate base price: resourcePrice * resourceCount
-  const basePrice = resourcePrice * resourceCount;
-  
-  // Tax: for CAD/USD tax is separate; for EUR/GBP/AUD it's included in price
-  const isTaxIncludedInPrice = (pricingConfig?.currenciesWithTaxIncluded ?? []).includes(currency);
-  const taxRate = pricingConfig?.taxRate ?? 0.05;
-  // Cancellation policy fee (from selected policy)
-  const selectedCancellationPolicy = pricingConfig?.cancellationPolicies?.find((p) => p.id === cancellationPolicyId);
-  const cancellationPolicyFee = selectedCancellationPolicy ? (selectedCancellationPolicy.feeByCurrency[currency] ?? 0) : 0;
-  // Add-on totals (lunch, animals)
-  const addOnTotal = useMemo(() => {
-    let sum = 0;
-    for (const sel of addOnSelections) {
-      const addOn = addOns.find((a) => a.addOnId === sel.addOnId);
-      if (!addOn) continue;
-      const basePrice = addOn.price ?? 0;
-      const hasVariant = (addOn.variantType === 'single_choice' || addOn.variantType === 'multi_quantity') && sel.variantId;
-      const variantAdjustment = hasVariant
-        ? (addOn.variants?.find((v) => v.id === sel.variantId)?.priceAdjustment ?? 0)
-        : 0;
-      sum += (basePrice + variantAdjustment) * (sel.quantity ?? 1);
-    }
-    return sum;
-  }, [addOnSelections, addOns]);
-
-  // Additional hours amount (admin only: $170/hour)
-  const additionalHoursAmount = (isAdmin ? additionalHoursCount : 0) * ADDITIONAL_HOUR_PRICE;
-  // Subtotal = base + add-ons + additional hours (needed for promo discount effect)
-  const subtotal = basePrice + addOnTotal + additionalHoursAmount;
-
-  // Promo discount from backend (admin only; order-level)
-  const hasOngoingDiscount = useMemo(
-    () =>
-      selectedAvailability?.rates?.some((r) =>
-        (r.appliedAdjustments ?? r.applied_adjustments ?? []).some((a) => (a.type ?? '').toLowerCase() === 'deal')
-      ) ?? false,
-    [selectedAvailability]
-  );
-
-  useEffect(() => {
-    if (!appliedPromoCode || !selectedOption || !selectedDate || !selectedStartTime || resourceCount === 0) {
-      setPromoDiscountAmount(0);
-      setIsGiftCard(false);
-      setIsVoucher(false);
-      return;
-    }
-    const companyId = product.companyId;
-    if (!companyId) {
-      setPromoDiscountAmount(0);
-      return;
-    }
-    const items = [{ category: 'RESOURCE', qty: resourceCount }];
-    const dateTime = selectedAvailability?.dateTime ?? `${selectedDate}T${selectedStartTime}:00`;
-    let cancelled = false;
-    getPromoDiscount(
-      appliedPromoCode,
-      companyId,
-      product.productId,
-      selectedOption,
-      currency,
-      items,
-      dateTime,
-      subtotal
-    )
-      .then((res) => {
-        if (!cancelled) {
-          setPromoDiscountAmount(res.discount ?? 0);
-          setIsGiftCard(res.isGiftCard ?? false);
-          setIsVoucher(res.isVoucher ?? false);
-        }
-      })
-      .catch(() => {
-        if (!cancelled) {
-          setPromoDiscountAmount(0);
-          setIsGiftCard(false);
-          setIsVoucher(false);
-        }
-      });
-    return () => { cancelled = true; };
-  }, [appliedPromoCode, selectedOption, selectedDate, selectedStartTime, selectedAvailability?.dateTime, resourceCount, subtotal, product.companyId, product.productId, currency]);
-
-  // Percentage/fixed promos: tax on discounted amount (promo before GST). Vouchers/gift cards: tax on base (original).
-  const taxAmount =
-    isTaxIncludedInPrice
-      ? 0
-      : Math.round(
-          (promoDiscountAmount > 0 && !isGiftCard && !isVoucher
-            ? (subtotal - promoDiscountAmount) * taxRate
-            : basePrice * taxRate
-          ) * 100
-        ) / 100;
-
-  // Total = subtotal + tax (when not included) + cancellation fee - promo discount
-  const totalPrice = subtotal + taxAmount + cancellationPolicyFee - promoDiscountAmount;
-  
-  // Calculate duration: base + admin add-on hours (each additional hour = 60 min)
-  const calculatedDuration = (privateShuttleConfig?.baseDurationMinutes ?? 0) + (isAdmin ? additionalHoursCount * 60 : 0);
-  
-  // Calculate end time
-  const calculatedEndTime = useMemo(() => {
-    if (!selectedStartTime || calculatedDuration === 0) return null;
-    
-    try {
-      // Parse selected date and start time
-      const [hours, minutes] = selectedStartTime.split(':').map(Number);
-      const dateTime = new Date(selectedDate);
-      dateTime.setHours(hours, minutes, 0, 0);
-      
-      // Add duration
-      const endDateTime = new Date(dateTime.getTime() + calculatedDuration * 60 * 1000);
-      
-      return formatInTimeZone(endDateTime, companyTimezone, 'h:mm a');
-    } catch {
-      return null;
-    }
-  }, [selectedStartTime, selectedDate, calculatedDuration, companyTimezone]);
-  
-  // Calculate deposit (based on totalPrice which includes tax when applicable)
-  const depositInfo = useMemo(() => {
-    if (!privateShuttleConfig?.depositConfig || totalPrice === 0) return null;
-    
-    const { depositConfig } = privateShuttleConfig;
-    const percentageDeposit = depositConfig.percentage ? totalPrice * depositConfig.percentage : 0;
-    const fixedDeposit = depositConfig.fixedAmount || 0;
-    
-    const depositAmount = Math.round(Math.max(percentageDeposit, fixedDeposit) * 100) / 100;
-    const balanceAmount = Math.round((totalPrice - depositAmount) * 100) / 100;
-    
-    return {
-      depositAmount,
-      balanceAmount,
-      totalPrice,
-    };
-  }, [privateShuttleConfig, totalPrice]);
-  
-  // Build itinerary display items for sticky "Build Your Itinerary" section
-  const itineraryDisplayItems = useMemo(() => {
-    const items: Array<{ time?: string; label?: string; prefix?: string; clickableLabel?: string; timesNote?: string; isProposedStops?: boolean }> = [];
-    const pickupTime = selectedStartTime
-      ? (() => {
-          const [hours, minutes] = selectedStartTime.split(':').map(Number);
-          const d = new Date();
-          d.setHours(hours, minutes, 0, 0);
-          return format(d, 'h:mm a');
-        })()
-      : 'TBD';
-    const dropoffTime = calculatedEndTime ?? 'TBD';
-    const pickupDropoffLabel = customPickupAddress
-      ?? selectedPickupLocation?.name
-      ?? (pickupLocationSkipped ? (t('booking.pickupAtTourStartLocation') || 'tour start location') : null)
-      ?? (t('booking.yourPickupLocation') || 'your pickup location');
-    items.push({
-      time: pickupTime,
-      prefix: `${t('booking.pickupAt') || 'Pickup at'} `,
-      clickableLabel: pickupDropoffLabel,
-    });
-    if (selectedOption && product.itineraryBuilder && draftItineraryDestinations.length > 0) {
-      const destMap = new Map(product.itineraryBuilder.destinations.map((d) => [d.id, d.label]));
-      const locationLabels = draftItineraryDestinations.map((id) => destMap.get(id) || id.replace(/_/g, ' '));
-      items.push({
-        label: locationLabels.join(', '),
-        timesNote: t('booking.orderAndTimesToBeConfirmed') || '(order and times to be confirmed by our team)',
-        isProposedStops: true,
-      });
-    }
-    items.push({
-      time: dropoffTime,
-      prefix: t('booking.dropOffAtPrefix') || 'Drop off at ',
-      clickableLabel: pickupDropoffLabel,
-    });
-    return items;
-  }, [selectedOption, product.itineraryBuilder, draftItineraryDestinations, selectedStartTime, calculatedEndTime, customPickupAddress, selectedPickupLocation, pickupLocationSkipped, t]);
-  
-  // Scroll to pickup location section when "your pickup location" is clicked in itinerary
-  const handlePickupLocationClick = useCallback(() => {
-    const pickupSection = document.getElementById('pickup-location-section');
-    const itineraryBox = document.querySelector('[class*="sticky top-"]');
-    if (pickupSection && itineraryBox) {
-      const headerHeight = window.innerWidth >= 640 ? 73 : 136;
-      const itineraryHeight = itineraryBox.getBoundingClientRect().height;
-      const elementPosition = pickupSection.getBoundingClientRect().top;
-      const offsetPosition = elementPosition + window.pageYOffset - headerHeight - itineraryHeight - 16;
-      window.scrollTo({
-        top: Math.max(0, offsetPosition),
-        behavior: 'smooth',
-      });
-    } else if (pickupSection) {
-      pickupSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    }
-  }, []);
-
-  // Get RESOURCE price for an option (for Select Tour Option grid)
-  // When selectedDate is set, prefer the per-slot price from availability (includes dynamic pricing)
-  const getOptionPrice = useCallback((optionId: string): number => {
-    if (selectedDate) {
-      const dateAvail = availabilitiesByDate[selectedDate]?.find(
-        (a) => (a.productId || a.productOptionId) === optionId
-      );
-      const resourceRate = dateAvail?.rates?.find((r) => r.rateId === 'RESOURCE' || r.category === 'RESOURCE');
-      if (resourceRate) {
-        const fromRate = resourceRate.priceByCurrency?.[currency] ?? (currency === 'CAD' ? resourceRate.price : undefined);
-        if (fromRate != null) return fromRate;
-      }
-    }
-    if (resourcePriceByOption?.[optionId]?.[currency] != null) return resourcePriceByOption[optionId][currency];
-    const fromApi = resourcePriceByCurrency?.[currency];
-    if (fromApi != null) return fromApi;
-    const opt = activeOptions.find((o) => o.optionId === optionId);
-    return opt?.pricing?.['RESOURCE'] ?? 0;
-  }, [selectedDate, availabilitiesByDate, resourcePriceByOption, resourcePriceByCurrency, currency, activeOptions]);
-  
-  const handleDateSelect = (date: string) => {
-    setSelectedDate(date);
-    setSelectedOption('');
-    setSelectedAvailability(null);
-    setSelectedStartTime('');
-    setIsCustomTimeMode(false);
-    setDraftItineraryDestinations([]);
-    setDraftItineraryPlanningNotes('');
-    setError('');
-  };
-
-  // Auto-select option when date selected: most popular if set and available, otherwise first available (or only one)
-  useEffect(() => {
-    if (selectedDate && !selectedOption && optionsAvailableForSelectedDate.length > 0) {
-      const mostPopularOpt = optionsAvailableForSelectedDate.find(o => o.mostPopular);
-      const opt = mostPopularOpt ?? optionsAvailableForSelectedDate[0];
-      setSelectedOption(opt.optionId);
-      const dateAvailabilities = availabilitiesByDate[selectedDate] || [];
-      const avail = dateAvailabilities.find(a => (a.productId || a.productOptionId) === opt.optionId);
-      setSelectedAvailability(avail || null);
-    }
-  }, [selectedDate, selectedOption, optionsAvailableForSelectedDate, availabilitiesByDate]);
-
-  // Clamp passenger count when availability changes (e.g. fewer vacancies for new date/option)
-  useEffect(() => {
-    if (selectedAvailability) {
-      const maxAvailable = selectedAvailability.vacancies || 0;
-      if (maxAvailable > 0 && passengerCount > maxAvailable) {
-        setPassengerCount(maxAvailable);
-      }
-    }
-  }, [selectedAvailability, passengerCount]);
-
-  // Initialize draft itinerary with option's default destinations when option changes
-  useEffect(() => {
-    if (selectedOption) {
-      const optionConfig = activeOptions.find((o) => o.optionId === selectedOption);
-      const blacklist = optionConfig?.privateShuttleConfig?.itineraryBuilderConfig?.optionBlacklist ?? [];
-      const defaults = optionConfig?.privateShuttleConfig?.itineraryBuilderConfig?.defaultDestinations ?? [];
-      const initialDestinations = defaults.filter((id) => !blacklist.includes(id));
-      setDraftItineraryDestinations(initialDestinations);
-      setDraftItineraryPlanningNotes('');
-    }
-  }, [selectedOption, activeOptions]);
-
-  // Auto-select first pickup time when suggested times appear
-  useEffect(() => {
-    if (
-      suggestedStartTimes.length > 0 &&
-      !isCustomTimeMode &&
-      !selectedStartTime
-    ) {
-      setSelectedStartTime(suggestedStartTimes[0]);
-    }
-  }, [suggestedStartTimes, isCustomTimeMode, selectedStartTime]);
-
-  // Auto-select first cancellation policy when policies load
-  useEffect(() => {
-    if (pricingConfig?.cancellationPolicies && pricingConfig.cancellationPolicies.length > 0 && !cancellationPolicyId) {
-      setCancellationPolicyId(pricingConfig.cancellationPolicies[0].id);
-    }
-  }, [pricingConfig?.cancellationPolicies, cancellationPolicyId]);
-
-  const handleOptionSelect = (optionId: string) => {
-    setSelectedOption(optionId);
-    setError('');
-    // Draft itinerary is initialized by useEffect when selectedOption changes
-    // Set selectedAvailability from the availability for this date + option
-    if (selectedDate) {
-      const dateAvailabilities = availabilitiesByDate[selectedDate] || [];
-      const avail = dateAvailabilities.find(a => (a.productId || a.productOptionId) === optionId);
-      setSelectedAvailability(avail || null);
-    } else {
-      setSelectedAvailability(null);
-    }
-    setSelectedStartTime('');
-    setIsCustomTimeMode(false);
-  };
-  
-  const handleStartTimeSelect = (time: string) => {
-    setSelectedStartTime(time);
-    setIsCustomTimeMode(false);
-    setError('');
-  };
-
-  const handleCustomTimeRequest = () => {
-    setIsCustomTimeMode(true);
-    setSelectedStartTime('');
-    setError('');
-  };
-
-  const handleCustomTimeChange = (value: string) => {
-    setSelectedStartTime(value);
-    setError('');
-  };
-  
-  const handlePassengerCountChange = (count: number) => {
-    const maxAvailable = selectedAvailability?.vacancies || 0;
-    const newCount = Math.max(1, Math.min(maxAvailable, count));
-    setPassengerCount(newCount);
-    setError('');
-  };
-
-  const handleApplyPromo = useCallback(async () => {
-    const code = promoCodeInput.trim().toUpperCase();
-    if (!code) return;
-    if (appliedPromoCode === code) return;
-    const companyId = product.companyId;
-    if (!companyId) return;
-    lastValidatedInputRef.current = code;
-    setPromoCodeError('');
-    setPromoCodeValidating(true);
-    try {
-      const result = await validatePromoCode(code, companyId, product.productId, hasOngoingDiscount);
-      if (result.valid) {
-        setAppliedPromoCode(code);
-        fetchedRangesRef.current = [];
-        if (result.forcedCancellationPolicyId) {
-          setCancellationPolicyId(result.forcedCancellationPolicyId);
-          setForcedCancellationPolicyFromPromo(
-            result.forcedCancellationPolicyLabel
-              ? { id: result.forcedCancellationPolicyId, label: result.forcedCancellationPolicyLabel }
-              : { id: result.forcedCancellationPolicyId, label: result.forcedCancellationPolicyId }
-          );
-        } else {
-          setForcedCancellationPolicyFromPromo(null);
-        }
-      } else {
-        const errorMsg =
-          result.error === 'Promo codes cannot be stacked with deals'
-            ? (t('booking.promoCodesCannotStackWithDiscounts') || result.error)
-            : (result.error || t('booking.invalidPromoCode') || 'Invalid or expired promo code');
-        setPromoCodeError(errorMsg);
-      }
-    } catch (err) {
-      setPromoCodeError(err instanceof Error ? err.message : 'Failed to validate promo code');
-    } finally {
-      setPromoCodeValidating(false);
-    }
-  }, [promoCodeInput, appliedPromoCode, product.companyId, product.productId, hasOngoingDiscount, t]);
-
-  useEffect(() => {
-    if (!appliedPromoCode || !hasOngoingDiscount) return;
-    let cancelled = false;
-    validatePromoCode(appliedPromoCode, product.companyId ?? '', product.productId, true).then((result) => {
-      if (cancelled) return;
-      if (!result.valid && result.error === 'Promo codes cannot be stacked with deals') {
-        setAppliedPromoCode(null);
-        setPromoCodeInput(appliedPromoCode);
-        setPromoCodeError(t('booking.promoCodesCannotStackWithDiscounts') || result.error);
-        setForcedCancellationPolicyFromPromo(null);
-        fetchedRangesRef.current = [];
-      }
-    });
-    return () => { cancelled = true; };
-  }, [hasOngoingDiscount, appliedPromoCode, product.companyId, product.productId, t]);
-
-  const handleApplyPromoRef = useRef(handleApplyPromo);
-  handleApplyPromoRef.current = handleApplyPromo;
-
-  useEffect(() => {
-    const trimmed = promoCodeInput.trim().toUpperCase();
-    if (!trimmed) return;
-    if (appliedPromoCode === trimmed) return;
-    if (promoCodeValidating) return;
-    if (lastValidatedInputRef.current === trimmed) return;
-    const timer = setTimeout(() => {
-      handleApplyPromoRef.current();
-    }, 600);
-    return () => clearTimeout(timer);
-  }, [promoCodeInput, appliedPromoCode, promoCodeValidating]);
-  
-  const handleCheckout = async () => {
-    if (!selectedDate || !selectedStartTime || passengerCount < 1) {
-      setError('Please select a date, start time, and enter passenger count');
-      return;
-    }
-    
-    // Require pickup location choice (selected location, custom address, OR "I don't know") — same as BookingFlow
-    if (product.pickupLocations && product.pickupLocations.length > 0 && !pickupLocationId && !customPickupAddress && !pickupLocationSkipped) {
-      setError(t('booking.selectPickupLocation'));
-      return;
-    }
-    
-    // Validate email (required) - skip in change mode
-    if (!isChangeMode) {
-      if (!email) {
-        setError(t('booking.enterEmail') || 'Please enter your email address');
-        return;
-      }
-      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-        setError(t('booking.invalidEmail') || 'Please enter a valid email address');
-        return;
-      }
-      if (!lastName?.trim()) {
-        setError(t('booking.enterLastName') || 'Please enter your last name');
-        return;
-      }
-    }
-    
-    setLoading(true);
-    setError('');
-
-    try {
-      // For Private Shuttle, bookingItems should be [{ category: "RESOURCE", count: resourceCount }]
-      const bookingItems = [{ category: 'RESOURCE', count: resourceCount }];
-
-      if (!selectedOption) {
-        setError('No product option selected');
-        setLoading(false);
-        return;
-      }
-      
-      // Change mode: call onChangeBooking instead of createReservation
-      if (isChangeMode && onChangeBooking) {
-        const selectedPickupLocation = pickupLocationId 
-          ? product.pickupLocations?.find(loc => loc.id === pickupLocationId)
-          : null;
-        const [hours, minutes] = selectedStartTime.split(':').map(Number);
-        const startTimeISO = `${selectedDate}T${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:00-06:00`;
-        await onChangeBooking({
-          productId: selectedOption,
-          dateTime: selectedDate,
-          bookingItems,
-          returnAvailabilityId: null,
-          pickupLocationId: pickupLocationId ?? null,
-          travelerHotel: selectedPickupLocation?.name ?? customPickupAddress ?? initialBooking?.travelerHotel ?? null,
-          startTime: startTimeISO,
-          passengerCount,
-          childSafetySeatsCount: childSafetySeatsCount > 0 ? childSafetySeatsCount : null,
-          foodRestrictions: foodRestrictions.trim() || null,
-          addOnSelections: addOnSelections.length > 0 ? addOnSelections : null,
-          cancellationPolicyId: cancellationPolicyId ?? initialBooking?.cancellationPolicyId ?? null,
-          promoCode: appliedPromoCode ?? null,
-          newTotalAmount: keepOriginalPrice ? undefined : totalPrice,
-          keepOriginalPrice: keepOriginalPrice || undefined,
-          additionalHoursCount: isAdmin ? additionalHoursCount : null,
-        });
-        setLoading(false);
-        return;
-      }
-      
-      // Build start time as ISO 8601 string in company timezone
-      // Simple approach: construct ISO string directly with timezone offset
-      // America/Edmonton is UTC-6 (MST) or UTC-7 (MDT), but we'll let the backend handle validation
-      const [hours, minutes] = selectedStartTime.split(':').map(Number);
-      const hoursStr = String(hours).padStart(2, '0');
-      const minutesStr = String(minutes).padStart(2, '0');
-      
-      // Construct ISO 8601 string: YYYY-MM-DDTHH:mm:ss with timezone offset
-      // We'll use UTC-6 (MST) as the offset for America/Edmonton
-      // Format: 2026-06-01T06:00:00-06:00
-      const startTimeISO = `${selectedDate}T${hoursStr}:${minutesStr}:00-06:00`;
-
-      // Get the hotel name if a pickup location was selected
-      const selectedPickupLocation = pickupLocationId 
-        ? product.pickupLocations?.find(loc => loc.id === pickupLocationId)
-        : null;
-
-      const reservation = await createReservation({
-        productId: selectedOption,
-        dateTime: selectedDate, // Date-only for Private Shuttle
-        bookingItems,
-        currency: currency,
-        startTime: startTimeISO,
-        passengerCount: passengerCount,
-        pickupLocationId: pickupLocationId || undefined,
-        cancellationPolicyId: cancellationPolicyId || undefined,
-        promoCode: isAdmin && appliedPromoCode ? appliedPromoCode : undefined,
-        // Pass hotel name when pickup location is selected (for reference)
-        // Don't set travelerHotel when user selects "I don't know" - leave it undefined
-        // This allows us to distinguish between "unknown" (null) and "unmapped hotel name" (not null)
-        travelerHotel: selectedPickupLocation?.name || customPickupAddress || undefined,
-        // Draft itinerary (destinations, planning notes only)
-        draftItinerary:
-          draftItineraryDestinations.length > 0 || draftItineraryPlanningNotes.trim()
-            ? {
-                destinations: draftItineraryDestinations,
-                planningNotes: draftItineraryPlanningNotes.trim() || undefined,
-              }
-            : undefined,
-        childSafetySeatsCount: childSafetySeatsCount > 0 ? childSafetySeatsCount : undefined,
-        foodRestrictions: foodRestrictions.trim() || undefined,
-        addOnSelections: addOnSelections.length > 0 ? addOnSelections : undefined,
-        additionalHoursCount: isAdmin && additionalHoursCount > 0 ? additionalHoursCount : undefined,
-      });
-
-      if (!reservation || !reservation.reservationReference) {
-        throw new Error('Invalid reservation response: missing reservationReference');
-      }
-
-      onSuccess?.({
-        reservationReference: reservation.reservationReference,
-      });
-
-      const amountToPay = depositInfo?.depositAmount ?? totalPrice;
-      // Always send full line items (Shuttle, GST, etc.) so receipt shows full breakdown.
-      // For deposit: we charge amountToPay but receipt stores full total + line items.
-      const lines = [
-        {
-          label: resourceCount > 1 ? 'Shuttles' : 'Shuttle',
-          amount: basePrice,
-          type: 'TICKET' as const,
-          quantity: resourceCount,
-        },
-        ...addOnSelections.map((sel) => {
-          const addOn = addOns.find((a) => a.addOnId === sel.addOnId);
-          if (!addOn) return null;
-          const base = addOn.price ?? 0;
-          const hasVariant = (addOn.variantType === 'single_choice' || addOn.variantType === 'multi_quantity') && sel.variantId;
-          const adj = hasVariant
-            ? (addOn.variants?.find((v) => v.id === sel.variantId)?.priceAdjustment ?? 0)
-            : 0;
-          const amt = (base + adj) * (sel.quantity ?? 1);
-          const variantLabel = hasVariant
-            ? addOn.variants?.find((v) => v.id === sel.variantId)?.label
-            : null;
-          const qty = sel.quantity ?? 1;
-          return { label: variantLabel ? `${addOn.name} (${variantLabel})${qty > 1 ? ` × ${qty}` : ''}` : addOn.name, amount: amt, type: 'FEE' as const };
-        }).filter(Boolean) as Array<{ label: string; amount: number; type: 'FEE' }>,
-        ...(additionalHoursAmount > 0
-          ? [{
-              label: additionalHoursCount === 1 ? 'Additional hour' : `Additional hours (${additionalHoursCount})`,
-              amount: additionalHoursAmount,
-              type: 'ADDITIONAL_HOURS' as const,
-            }]
-          : []),
-        ...(cancellationPolicyFee > 0 && selectedCancellationPolicy
-          ? [{
-              label: selectedCancellationPolicy.label,
-              amount: cancellationPolicyFee,
-              type: 'CANCELLATION_UPGRADE' as const,
-            }]
-          : []),
-        ...(taxAmount > 0
-          ? [
-              {
-                label: t('booking.tax') !== 'booking.tax' ? t('booking.tax') : 'Taxes and fees',
-                amount: taxAmount,
-                type: 'TAX' as const,
-              },
-            ]
-          : []),
-      ];
-      const receiptTotal = depositInfo ? depositInfo.totalPrice : totalPrice;
-      const linesWithPromo = [
-        ...lines,
-        ...(promoDiscountAmount > 0
-          ? [{
-              label: appliedPromoCode ? `Promo: ${appliedPromoCode}` : (t('booking.discount') || 'Discount'),
-              amount: -promoDiscountAmount,
-              type: isGiftCard ? ('GIFT_CARD' as const) : ('PROMO_CODE' as const),
-            }]
-          : []),
-      ];
-      const checkoutBreakdown = buildCheckoutBreakdown({
-        lines: linesWithPromo,
-        totalAmount: receiptTotal,
-        currency,
-        roundingLabel: t('booking.rounding') || 'Rounding',
-      });
-
-      // Build itineraryDisplay for storage (same for paid and confirm-without-payment flows)
-      const itineraryDisplayForStorage: ItineraryDisplayStep[] = itineraryDisplayItems.map((item, i) => {
-        if (item.isProposedStops) {
-          return { stepType: ItineraryStepType.draft, time: 'Proposed stops', place: item.label ?? undefined };
-        }
-        const isPickup = i === 0;
-        return {
-          stepType: isPickup ? ItineraryStepType.pickup : ItineraryStepType.drop_off,
-          time: item.time ?? 'TBD',
-          place: item.clickableLabel ?? undefined,
-        };
-      });
-
-      // Admin + deposit: show choice to pay or confirm without payment
-      if (isAdmin && depositInfo) {
-        setAdminChoiceData({
-          reservationReference: reservation.reservationReference,
-          checkoutBreakdown,
-          depositAmount: depositInfo.depositAmount,
-          balanceAmount: depositInfo.balanceAmount,
-          totalAmount: depositInfo.totalPrice,
-          balanceChargeDaysBefore: privateShuttleConfig?.balanceChargeDaysBefore ?? 7,
-          itineraryDisplay: itineraryDisplayForStorage,
-          pickupLocationId: pickupLocationId ?? undefined,
-        });
-        setShowAdminPaymentChoice(true);
-        setLoading(false);
-        return;
-      }
-
-      const paymentIntent = await createPaymentIntent({
-        customerFirstName: firstName.trim() || undefined,
-        customerLastName: lastName.trim() || undefined,
-        productId: product.productId,
-        optionId: selectedOption,
-        date: selectedDate,
-        time: selectedStartTime,
-        quantity: resourceCount,
-        customerEmail: email,
-        currency: currency,
-        reservationReference: reservation.reservationReference,
-        travelerHotel: selectedPickupLocation?.name || customPickupAddress || undefined,
-        pickupLocationId: pickupLocationId ?? undefined,
-        itineraryDisplay: itineraryDisplayForStorage,
-        termsAcceptedAt: termsAcceptedAt ?? undefined,
-        cancellationPolicyId: cancellationPolicyId || undefined,
-        promoCode: isAdmin && appliedPromoCode ? appliedPromoCode : undefined,
-        checkoutBreakdown,
-        ...(depositInfo && {
-          paymentPlanType: 'DEPOSIT' as const,
-          depositAmount: depositInfo.depositAmount,
-          balanceAmount: depositInfo.balanceAmount,
-          totalAmount: depositInfo.totalPrice,
-          balanceChargeDaysBefore: privateShuttleConfig?.balanceChargeDaysBefore ?? 7,
-        }),
-        skipConfirmationCommunications: isAdmin && skipConfirmationCommunications ? true : undefined,
-        disableAutoCommunications: isAdmin && disableAutoCommunications ? true : undefined,
-      });
-
-      // Free booking (e.g. voucher covers full total): confirm without payment, then redirect to success
-      if (paymentIntent.freeBooking) {
-        const freeBookingResult = await confirmFreeBooking({
-          reservationReference: reservation.reservationReference,
-          productId: product.productId,
-          optionId: selectedOption,
-          date: selectedDate,
-          time: selectedStartTime,
-          customerEmail: email || undefined,
-          customerFirstName: firstName.trim() || undefined,
-          customerLastName: lastName.trim() || undefined,
-          currency: currency,
-          travelerHotel: selectedPickupLocation?.name || customPickupAddress || undefined,
-          pickupLocationId: pickupLocationId || undefined,
-          itineraryDisplay: itineraryDisplayForStorage,
-          termsAcceptedAt: termsAcceptedAt ?? undefined,
-          skipConfirmationCommunications: isAdmin && skipConfirmationCommunications ? true : undefined,
-          disableAutoCommunications: isAdmin && disableAutoCommunications ? true : undefined,
-        });
-        // Show manage UI: in provider-dashboard use callback (e.g. dialog); otherwise redirect to /manage
-        const ref = formatBookingRefForDisplay(freeBookingResult.bookingReference);
-        const ln = lastName.trim();
-        if (onShowManage) {
-          onShowManage({ ref, lastName: ln });
-        } else {
-          const params = new URLSearchParams({ ref, lastName: ln });
-          window.location.href = `/manage?${params.toString()}`;
-        }
-        setLoading(false);
-        return;
-      }
-
-      const ticketLinesForModal: CheckoutModalLineItem[] = [
-        {
-          line: {
-            category: resourceCount > 1 ? 'Shuttles' : 'Shuttle',
-            qty: resourceCount,
-            pricePerUnit: resourcePrice,
-            itemTotal: basePrice,
-          },
-          breakdown: null,
-        },
-      ];
-      const feeLineItemsForModal: { name: string; totalAmount: number }[] = [
-        ...addOnSelections.map((sel) => {
-          const addOn = addOns.find((a) => a.addOnId === sel.addOnId);
-          if (!addOn) return null;
-          const base = addOn.price ?? 0;
-          const hasVariant = (addOn.variantType === 'single_choice' || addOn.variantType === 'multi_quantity') && sel.variantId;
-          const adj = hasVariant ? (addOn.variants?.find((v) => v.id === sel.variantId)?.priceAdjustment ?? 0) : 0;
-          const amt = (base + adj) * (sel.quantity ?? 1);
-          const variantLabel = hasVariant ? addOn.variants?.find((v) => v.id === sel.variantId)?.label : null;
-          const qty = sel.quantity ?? 1;
-          const label = variantLabel ? `${addOn.name} (${variantLabel})${qty > 1 ? ` × ${qty}` : ''}` : addOn.name;
-          return { name: label, totalAmount: amt };
-        }).filter(Boolean) as { name: string; totalAmount: number }[],
-        ...(additionalHoursAmount > 0
-          ? [{ name: additionalHoursCount === 1 ? 'Additional hour' : `${additionalHoursCount} additional hours`, totalAmount: additionalHoursAmount }]
-          : []),
-      ];
-
-      setCheckoutClientSecret(paymentIntent.clientSecret ?? '');
-      setCheckoutModalData({
-        reservationReference: reservation.reservationReference,
-        customerLastName: lastName.trim(),
-        ticketLines: ticketLinesForModal,
-        feeLineItems: feeLineItemsForModal,
-        returnPriceAdjustment: 0,
-        subtotal: depositInfo ? totalPrice : subtotal,
-        tax: taxAmount,
-        total: amountToPay,
-        totalQuantity: resourceCount,
-        isTaxIncludedInPrice,
-        taxRate,
-        isDepositPayment: !!depositInfo,
-        balanceChargeDaysBefore: depositInfo ? (privateShuttleConfig?.balanceChargeDaysBefore ?? 7) : undefined,
-        cancellationPolicyFee: cancellationPolicyFee > 0 ? cancellationPolicyFee : undefined,
-        cancellationPolicyLabel: selectedCancellationPolicy?.label,
-        promoDiscountAmount: promoDiscountAmount > 0 ? promoDiscountAmount : 0,
-        discountLabel: appliedPromoCode ? `Promo: ${appliedPromoCode}` : undefined,
-      });
-      setShowCheckoutModal(true);
-      setLoading(false);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Something went wrong');
-      setLoading(false);
-    }
-  };
-
-  const handleConfirmWithoutPayment = async () => {
-    if (!adminChoiceData) return;
-    setLoading(true);
-    setError('');
-    try {
-      const result = await confirmBookingWithoutPayment({
-        reservationReference: adminChoiceData.reservationReference,
-        productId: product.productId,
-        optionId: selectedOption,
-        date: selectedDate,
-        time: selectedStartTime,
-        customerEmail: email || undefined,
-        customerFirstName: firstName.trim() || undefined,
-        customerLastName: lastName.trim() || undefined,
-        currency: currency,
-        travelerHotel: selectedPickupLocation?.name || customPickupAddress || undefined,
-        pickupLocationId: adminChoiceData.pickupLocationId ?? pickupLocationId ?? undefined,
-        itineraryDisplay: adminChoiceData.itineraryDisplay,
-        termsAcceptedAt: termsAcceptedAt ?? undefined,
-        skipConfirmationCommunications: skipConfirmationCommunications ? true : undefined,
-        disableAutoCommunications: disableAutoCommunications ? true : undefined,
-        checkoutBreakdown: adminChoiceData.checkoutBreakdown,
-        depositAmount: adminChoiceData.depositAmount,
-        balanceAmount: adminChoiceData.balanceAmount,
-        totalAmount: adminChoiceData.totalAmount,
-        balanceChargeDaysBefore: adminChoiceData.balanceChargeDaysBefore,
-      });
-      const ref = formatBookingRefForDisplay(result.bookingReference);
-      const ln = lastName.trim();
-      setShowAdminPaymentChoice(false);
-      setAdminChoiceData(null);
-      if (onShowManage) {
-        onShowManage({ ref, lastName: ln });
-      } else {
-        const params = new URLSearchParams({ ref, lastName: ln });
-        window.location.href = `/manage?${params.toString()}`;
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to confirm booking');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handlePayDepositNow = async () => {
-    if (!adminChoiceData) return;
-    setLoading(true);
-    setError('');
-    try {
-      const paymentIntent = await createPaymentIntent({
-        customerFirstName: firstName.trim() || undefined,
-        customerLastName: lastName.trim() || undefined,
-        productId: product.productId,
-        optionId: selectedOption,
-        date: selectedDate,
-        time: selectedStartTime,
-        quantity: resourceCount,
-        customerEmail: email,
-        currency: currency,
-        reservationReference: adminChoiceData.reservationReference,
-        travelerHotel: selectedPickupLocation?.name || customPickupAddress || undefined,
-        pickupLocationId: adminChoiceData.pickupLocationId ?? pickupLocationId ?? undefined,
-        itineraryDisplay: adminChoiceData.itineraryDisplay,
-        termsAcceptedAt: termsAcceptedAt ?? undefined,
-        cancellationPolicyId: cancellationPolicyId || undefined,
-        promoCode: isAdmin && appliedPromoCode ? appliedPromoCode : undefined,
-        checkoutBreakdown: adminChoiceData.checkoutBreakdown,
-        paymentPlanType: 'DEPOSIT' as const,
-        depositAmount: adminChoiceData.depositAmount,
-        balanceAmount: adminChoiceData.balanceAmount,
-        totalAmount: adminChoiceData.totalAmount,
-        balanceChargeDaysBefore: adminChoiceData.balanceChargeDaysBefore,
-        skipConfirmationCommunications: skipConfirmationCommunications ? true : undefined,
-        disableAutoCommunications: disableAutoCommunications ? true : undefined,
-      });
-      setShowAdminPaymentChoice(false);
-      setAdminChoiceData(null);
-      const ticketLinesForModal: CheckoutModalLineItem[] = [
-        {
-          line: {
-            category: resourceCount > 1 ? 'Shuttles' : 'Shuttle',
-            qty: resourceCount,
-            pricePerUnit: resourcePrice,
-            itemTotal: basePrice,
-          },
-          breakdown: null,
-        },
-      ];
-      const feeLineItemsForPayDeposit: { name: string; totalAmount: number }[] = [
-        ...addOnSelections.map((sel) => {
-          const addOn = addOns.find((a) => a.addOnId === sel.addOnId);
-          if (!addOn) return null;
-          const base = addOn.price ?? 0;
-          const hasVariant = (addOn.variantType === 'single_choice' || addOn.variantType === 'multi_quantity') && sel.variantId;
-          const adj = hasVariant ? (addOn.variants?.find((v) => v.id === sel.variantId)?.priceAdjustment ?? 0) : 0;
-          const amt = (base + adj) * (sel.quantity ?? 1);
-          const variantLabel = hasVariant ? addOn.variants?.find((v) => v.id === sel.variantId)?.label : null;
-          const qty = sel.quantity ?? 1;
-          const label = variantLabel ? `${addOn.name} (${variantLabel})${qty > 1 ? ` × ${qty}` : ''}` : addOn.name;
-          return { name: label, totalAmount: amt };
-        }).filter(Boolean) as { name: string; totalAmount: number }[],
-        ...(additionalHoursAmount > 0
-          ? [{ name: additionalHoursCount === 1 ? 'Additional hour' : `${additionalHoursCount} additional hours`, totalAmount: additionalHoursAmount }]
-          : []),
-      ];
-      setCheckoutClientSecret(paymentIntent.clientSecret ?? '');
-      setCheckoutModalData({
-        reservationReference: adminChoiceData.reservationReference,
-        customerLastName: lastName.trim(),
-        ticketLines: ticketLinesForModal,
-        feeLineItems: feeLineItemsForPayDeposit,
-        returnPriceAdjustment: 0,
-        subtotal: totalPrice,
-        tax: taxAmount,
-        total: adminChoiceData.depositAmount,
-        totalQuantity: resourceCount,
-        isTaxIncludedInPrice,
-        taxRate,
-        isDepositPayment: true,
-        balanceChargeDaysBefore: adminChoiceData.balanceChargeDaysBefore,
-        promoDiscountAmount: promoDiscountAmount > 0 ? promoDiscountAmount : 0,
-        discountLabel: appliedPromoCode ? `Promo: ${appliedPromoCode}` : undefined,
-      });
-      setShowCheckoutModal(true);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to start payment');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  if (activeOptions.length === 0) {
-    return (
-      <div className="flex items-center justify-center py-16">
-        <div className="text-red-600">{t('booking.noActiveOption') || 'No active product options available'}</div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-8">
-      {/* Admin: choose to pay or confirm without payment */}
-      {showAdminPaymentChoice && adminChoiceData && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
-          <div className="bg-white rounded-xl shadow-xl max-w-md w-full p-6">
-            <h3 className="text-lg font-semibold text-stone-900 mb-2">Complete booking</h3>
-            <p className="text-sm text-stone-600 mb-4">
-              Pay the deposit now, or confirm without payment. The customer can pay from the Manage Booking page.
-            </p>
-            {error && (
-              <p className="text-sm text-red-600 mb-4" role="alert">{error}</p>
-            )}
-            <div className="flex flex-col gap-3">
-              <button
-                type="button"
-                onClick={handlePayDepositNow}
-                disabled={loading}
-                className="w-full py-3 px-4 bg-emerald-600 text-white font-semibold rounded-lg hover:bg-emerald-700 disabled:opacity-50"
-              >
-                {loading ? 'Loading...' : `Pay deposit now (${formatCurrencyAmount(adminChoiceData.depositAmount, currency)})`}
-              </button>
-              <button
-                type="button"
-                onClick={handleConfirmWithoutPayment}
-                disabled={loading}
-                className="w-full py-3 px-4 border border-stone-300 text-stone-700 rounded-lg hover:bg-stone-50 disabled:opacity-50"
-              >
-                Confirm without payment
-              </button>
-              <button
-                type="button"
-                onClick={() => { setShowAdminPaymentChoice(false); setAdminChoiceData(null); setError(''); }}
-                className="w-full py-2 text-sm text-stone-500 hover:text-stone-700"
-              >
-                Cancel
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-      {checkoutModalData && (
-          <CheckoutModal
-          open={showCheckoutModal}
-          onClose={() => {
-            setShowCheckoutModal(false);
-            setCheckoutClientSecret('');
-            setCheckoutModalData(null);
-          }}
-          clientSecret={checkoutClientSecret}
-          reservationReference={checkoutModalData.reservationReference}
-          customerLastName={checkoutModalData.customerLastName}
-          successUrlOverride={getSuccessUrl ? getSuccessUrl({ reservationRef: checkoutModalData.reservationReference, lastName: checkoutModalData.customerLastName ?? '' }) : undefined}
-          ticketLines={checkoutModalData.ticketLines}
-          feeLineItems={checkoutModalData.feeLineItems}
-          returnPriceAdjustment={checkoutModalData.returnPriceAdjustment}
-          cancellationPolicyFee={checkoutModalData.cancellationPolicyFee}
-          cancellationPolicyLabel={checkoutModalData.cancellationPolicyLabel}
-          subtotal={checkoutModalData.subtotal}
-          tax={checkoutModalData.tax}
-          total={checkoutModalData.total}
-          totalQuantity={checkoutModalData.totalQuantity}
-          isTaxIncludedInPrice={checkoutModalData.isTaxIncludedInPrice}
-          taxRate={checkoutModalData.taxRate}
-          currency={currency}
-          locale={locale}
-          t={t}
-          isDepositPayment={checkoutModalData.isDepositPayment}
-          balanceChargeDaysBefore={checkoutModalData.balanceChargeDaysBefore}
-          promoDiscountAmount={checkoutModalData.promoDiscountAmount ?? 0}
-          discountLabel={checkoutModalData.discountLabel}
-        />
-      )}
-      {/* Back button */}
-      <button
-        onClick={onBack}
-        className="flex items-center gap-2 text-stone-600 hover:text-stone-900 transition-colors"
-      >
-        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-        </svg>
-        <span>{t('products.backToExperiences')}</span>
-      </button>
-
-      {/* Product header */}
-      <div className="bg-gradient-to-r from-emerald-700 to-emerald-600 text-white p-8 rounded-xl">
-        <h2 className="text-2xl font-bold mb-2">{product.name}</h2>
-        {product.description && (
-          <p className="text-emerald-100">{product.description}</p>
-        )}
-      </div>
-
-      {loadingAvailabilities && availabilities.length === 0 ? (
-        <div className="flex items-center justify-center py-12">
-          <div className="text-center">
-            <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-emerald-600 mb-4"></div>
-            <div className="text-stone-600">{t('booking.loadingTimes')}</div>
-          </div>
-        </div>
-      ) : availabilities.length === 0 ? (
-        <div className="text-center py-8 text-stone-500">
-          {t('booking.noAvailability')}
-        </div>
-      ) : (
-        <>
-          {/* Date Selection - first in date-first flow */}
-          <div>
-            <div className="relative">
-              {loadingAvailabilities && (
-                <div className="absolute inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center z-10 rounded-lg">
-                  <div className="text-stone-600">{t('booking.loadingTimes')}</div>
-                </div>
-              )}
-              <Calendar
-                availabilitiesByDate={availabilitiesByDate}
-                selectedDate={selectedDate}
-                onDateSelect={handleDateSelect}
-                timezone={companyTimezone}
-                earliestDate={earliestAvailabilityDate}
-                onVisibleRangeChange={handleVisibleRangeChange}
-                currency={currency}
-              />
-            </div>
-          </div>
-
-          {/* Build Your Itinerary - sticky section shown after date selection */}
-          {selectedDate && (
-            <div
-              ref={itineraryRef}
-              className="sticky top-[136px] sm:top-[73px] z-10 mb-4 p-3 bg-white rounded-lg shadow-sm border border-stone-200"
-            >
-              <h3 className="font-bold text-stone-900 flex items-center gap-2 mb-2">
-                <svg className="flex-shrink-0 w-4 h-4 text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                </svg>
-                {t('booking.buildYourItinerary')}
-              </h3>
-              {!selectedOption ? (
-                <p className="text-sm text-stone-600">
-                  {t('booking.selectTourOptionToSeeItinerary')}
-                </p>
-              ) : (
-                <div className="space-y-1">
-                  {itineraryDisplayItems.map((item, index) => (
-                    <div key={index} className="flex items-center gap-2 text-sm">
-                      {item.time != null && (
-                        <span className="font-semibold text-stone-700 tabular-nums shrink-0">{item.time}</span>
-                      )}
-                      <span className="text-stone-600">
-                        {item.isProposedStops ? (
-                          <>
-                            <b>{t('booking.proposedStops') || 'Proposed stops'}:</b> {item.label} <em>{item.timesNote}</em>
-                          </>
-                        ) : item.clickableLabel ? (
-                          <>
-                            {item.prefix}
-                            <button
-                              type="button"
-                              onClick={handlePickupLocationClick}
-                              className="text-stone-400 hover:text-stone-600 underline cursor-pointer"
-                            >
-                              {item.clickableLabel}
-                            </button>
-                          </>
-                        ) : (
-                          item.label
-                        )}
-                      </span>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Select Tour Option - grid of option buttons (duration + starting price) */}
-          {selectedDate && optionsAvailableForSelectedDate.length > 0 && (
-            <div>
-              <label className="block text-sm font-medium text-stone-700 mb-2">
-                {t('booking.selectTourOption')}
-              </label>
-              <div className="grid grid-cols-2 gap-2">
-                {[...optionsAvailableForSelectedDate]
-                  .sort((a, b) => (b.mostPopular ? 1 : 0) - (a.mostPopular ? 1 : 0))
-                  .map((option) => {
-                  const isSelected = selectedOption === option.optionId;
-                  const baseDurationMinutes = option.privateShuttleConfig?.baseDurationMinutes ?? 0;
-                  const hours = baseDurationMinutes / 60;
-                  const price = getOptionPrice(option.optionId);
-                  const formattedPrice = formatCurrencyAmount(price, currency);
-                  const hoursRounded = Math.round(hours);
-                  const isMostPopular = optionsAvailableForSelectedDate.length > 1 && option.mostPopular;
-                  const priceHoursLine = price > 0 && hours >= 1
-                    ? (t('booking.startingAtForHours') ?? 'Starting at {price} per shuttle for {hours} hours.')
-                        .replace('{price}', formattedPrice)
-                        .replace('{hours}', String(hoursRounded))
-                    : null;
-                  return (
-                    <button
-                      key={option.optionId}
-                      onClick={() => handleOptionSelect(option.optionId)}
-                      className={`${isMostPopular ? 'pt-5 sm:pt-4' : 'pt-3'} pb-3 px-4 rounded-lg text-sm font-medium transition-all relative text-left ${
-                        isSelected
-                          ? 'bg-emerald-600 text-white'
-                          : 'bg-stone-100 text-stone-700 hover:bg-stone-200'
-                      }`}
-                    >
-                      <div className="font-semibold">{option.name}</div>
-                      {priceHoursLine && (
-                        <div className={`mt-1 text-xs ${isSelected ? 'text-emerald-100' : 'text-stone-500'}`}>
-                          {(() => {
-                            const template = t('booking.startingAtForHours') ?? 'Starting at {price} per shuttle for {hours}.';
-                            const parts = template.split(/\{price\}|\{hours\}/);
-                            const placeholders = template.match(/\{price\}|\{hours\}/g) || [];
-                            const result: React.ReactNode[] = [];
-                            parts.forEach((part, i) => {
-                              result.push(part);
-                              if (i < placeholders.length) {
-                                const value = placeholders[i] === '{price}' ? formattedPrice : `${hoursRounded} ${t('booking.hoursUnit') || 'hours'}`;
-                                result.push(<b key={i}>{value}</b>);
-                              }
-                            });
-                            return result;
-                          })()}
-                        </div>
-                      )}
-                      {priceHoursLine && (
-                        <div className={`mt-0.5 text-[11px] ${isSelected ? 'text-emerald-200/90' : 'text-stone-400'}`}>
-                          {t('booking.additionalHoursAvailable')}
-                        </div>
-                      )}
-                      {isMostPopular && (
-                        <div className="absolute -top-1 left-1/2 -translate-x-1/2 text-white text-[10px] font-semibold px-2.5 py-0.5 rounded-full whitespace-nowrap" style={{ backgroundColor: '#ff4d00' }}>
-                          {t('booking.mostPopular')}
-                        </div>
-                      )}
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-          )}
-
-          {/* Passenger Count - Step 2: shown after option selection. Max is based on available resources (vacancies). */}
-          {selectedOption && selectedAvailability && (
-            <div>
-              <label className="block text-sm font-medium text-stone-700 mb-4">
-                Number of Passengers
-              </label>
-              <div className="p-4 bg-stone-50 rounded-lg">
-                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-                  <div>
-                    <div className="font-medium text-stone-900">Passengers</div>
-                    <div className="text-sm text-stone-600">
-                      {resourceCount} {resourceCount === 1 ? 'shuttle' : 'shuttles'} needed
-                    </div>
-                  </div>
-                  <select
-                    value={passengerCount}
-                    onChange={(e) => handlePassengerCountChange(Number(e.target.value))}
-                    className="w-16 px-2 py-1.5 text-center border border-stone-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-stone-400 focus:border-stone-500 bg-white"
-                  >
-                    {Array.from({ length: Math.max(1, selectedAvailability?.vacancies || 0) }, (_, i) => i + 1).map((n) => (
-                      <option key={n} value={n}>
-                        {n}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-                <div className="text-xs text-stone-500 mt-2">
-                  Each shuttle can accommodate up to {RESOURCE_CAPACITY} passengers.
-                  {resourceCount > 1 && (
-                    <span> You&apos;ll need {resourceCount} shuttles for {passengerCount} passengers.</span>
-                  )}
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Pickup Time Selection - suggested times + option to request custom */}
-          {selectedOption && selectedAvailability && passengerCount > 0 && (
-            <div>
-              <label className="block text-sm font-medium text-stone-700 mb-2">
-                {t('booking.selectPickupTime')}
-              </label>
-              {(suggestedStartTimes.length > 0 || isCustomTimeMode) && (
-                <div className="flex flex-wrap gap-2">
-                  {suggestedStartTimes.map((time) => {
-                    const isSelected = !isCustomTimeMode && selectedStartTime === time;
-                    const [hours, minutes] = time.split(':').map(Number);
-                    const timeDate = new Date();
-                    timeDate.setHours(hours, minutes, 0, 0);
-                    const displayTime = format(timeDate, 'h:mm a');
-                    return (
-                      <button
-                        key={time}
-                        type="button"
-                        onClick={() => handleStartTimeSelect(time)}
-                        className={`py-2 px-4 rounded-full text-sm font-medium transition-all ${
-                          isSelected
-                            ? 'bg-emerald-600 text-white'
-                            : 'bg-stone-100 text-stone-700 hover:bg-stone-200'
-                        }`}
-                      >
-                        {displayTime}
-                      </button>
-                    );
-                  })}
-                  {suggestedStartTimes.length > 0 && (
-                    <button
-                      type="button"
-                      onClick={handleCustomTimeRequest}
-                      className={`py-2 px-4 rounded-full text-sm font-medium transition-all ${
-                        isCustomTimeMode
-                          ? 'bg-emerald-600 text-white'
-                          : 'bg-stone-100 text-stone-700 hover:bg-stone-200'
-                      }`}
-                    >
-                      {t('booking.requestDifferentTime')}
-                    </button>
-                  )}
-                </div>
-              )}
-              {(isCustomTimeMode || suggestedStartTimes.length === 0) && (
-                <div className="mt-3">
-                  <label htmlFor="custom-pickup-time" className="block text-xs text-stone-500 mb-1">
-                    {suggestedStartTimes.length === 0 ? t('booking.preferredPickupTime') : t('booking.requestDifferentTime')}
-                  </label>
-                  <input
-                    id="custom-pickup-time"
-                    type="time"
-                    value={selectedStartTime}
-                    onChange={(e) => handleCustomTimeChange(e.target.value)}
-                    className="px-3 py-2 border border-stone-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-stone-400 focus:border-stone-500"
-                  />
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Itinerary Builder - Step 3: destinations, lunch stop, planning notes */}
-          {selectedOption && passengerCount > 0 && product.itineraryBuilder && (
-            <div className="border-t border-stone-200 pt-6 space-y-6">
-              <ItineraryBuilder
-                destinations={product.itineraryBuilder.destinations}
-                optionBlacklist={privateShuttleConfig?.itineraryBuilderConfig?.optionBlacklist || []}
-                selectedDestinationIds={draftItineraryDestinations}
-                planningNotes={draftItineraryPlanningNotes}
-                onDestinationsChange={setDraftItineraryDestinations}
-                onPlanningNotesChange={setDraftItineraryPlanningNotes}
-              />
-              {/* Admin only: add on hours ($170/hour, extends duration) */}
-              {isAdmin && (
-                <div className="p-4 bg-amber-50/50 border border-amber-200 rounded-lg">
-                  <label className="block text-sm font-medium text-stone-700 mb-2">
-                    Add on hours (admin)
-                  </label>
-                  <p className="text-sm text-stone-600 mb-3">
-                    Each additional hour adds {formatCurrencyAmount(ADDITIONAL_HOUR_PRICE, currency)} and extends the tour duration.
-                  </p>
-                  <div className="flex items-center gap-3">
-                    <button
-                      type="button"
-                      onClick={() => setAdditionalHoursCount((c) => Math.max(0, c - 1))}
-                      disabled={additionalHoursCount <= 0}
-                      className="h-9 w-9 rounded-full border border-stone-300 bg-white text-stone-600 hover:bg-stone-50 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
-                    >
-                      −
-                    </button>
-                    <span className="w-8 text-center font-medium tabular-nums">{additionalHoursCount}</span>
-                    <button
-                      type="button"
-                      onClick={() => setAdditionalHoursCount((c) => c + 1)}
-                      className="h-9 w-9 rounded-full border border-stone-300 bg-white text-stone-600 hover:bg-stone-50 font-medium"
-                    >
-                      +
-                    </button>
-                    <span className="text-sm text-stone-600">
-                      {additionalHoursCount === 0
-                        ? 'No extra hours'
-                        : additionalHoursCount === 1
-                          ? `+1 hour • ${formatCurrencyAmount(ADDITIONAL_HOUR_PRICE, currency)}`
-                          : `+${additionalHoursCount} hours • ${formatCurrencyAmount(additionalHoursAmount, currency)}`}
-                    </span>
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Safety seats - Step 4 */}
-          {selectedOption && passengerCount > 0 && (
-            <div className="border-t border-stone-200 pt-6">
-              <label className="block text-sm font-medium text-stone-700 mb-2">
-                Safety seats for kids
-              </label>
-              <p className="text-sm text-stone-500 mb-2">How many child safety seats do you need?</p>
-              <div className="flex items-center gap-2">
-                <button
-                  type="button"
-                  onClick={() => setChildSafetySeatsCount((c) => Math.max(0, c - 1))}
-                  disabled={childSafetySeatsCount <= 0}
-                  className="h-9 w-9 rounded-full border border-stone-300 bg-white text-stone-600 hover:bg-stone-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  −
-                </button>
-                <span className="w-8 text-center font-medium tabular-nums">{childSafetySeatsCount}</span>
-                <button
-                  type="button"
-                  onClick={() => setChildSafetySeatsCount((c) => Math.min(passengerCount, c + 1))}
-                  disabled={childSafetySeatsCount >= passengerCount}
-                  className="h-9 w-9 rounded-full border border-stone-300 bg-white text-stone-600 hover:bg-stone-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  +
-                </button>
-              </div>
-            </div>
-          )}
-
-          {/* Food restrictions - Step 5 */}
-          {selectedOption && passengerCount > 0 && (
-            <div className="border-t border-stone-200 pt-6">
-              <label htmlFor="food-restrictions" className="block text-sm font-medium text-stone-700 mb-2">
-                Food restrictions
-              </label>
-              <p className="text-sm text-stone-500 mb-2">Shuttle includes croissants, coffee, tea, hot chocolate, trail snacks.</p>
-              <textarea
-                id="food-restrictions"
-                value={foodRestrictions}
-                onChange={(e) => setFoodRestrictions(e.target.value)}
-                placeholder="Any dietary restrictions or allergies?"
-                rows={2}
-                className="w-full px-3 py-2 border border-stone-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-stone-400 focus:border-stone-500 text-sm"
-              />
-            </div>
-          )}
-
-          {/* Add-ons - Step 6: EL lunch (only when Emerald Lake selected), Animals */}
-          {selectedOption && passengerCount > 0 && addOns.length > 0 && (
-            <div className="border-t border-stone-200 pt-6 space-y-4">
-              {/* Emerald Lake Lunch Package - only when emerald_lake is in destinations */}
-              {draftItineraryDestinations.includes('emerald_lake') && (() => {
-                const lunchAddOn = addOns.find((a) => a.addOnId === 'addon_el_lunch');
-                if (!lunchAddOn || !canUseMealDrinkSelector(lunchAddOn)) return null;
-                return (
-                  <MealDrinkAddOnSelector
-                    addOn={lunchAddOn}
-                    selections={addOnSelections}
-                    onSelectionsChange={setAddOnSelections}
-                    currency={currency}
-                    locale={locale}
-                  />
-                );
-              })()}
-              {/* Animals - $50 cleaning fee */}
-              {(() => {
-                const animalsAddOn = addOns.find((a) => a.addOnId === 'addon_animals');
-                if (!animalsAddOn) return null;
-                const isAnimalsSelected = addOnSelections.some((s) => s.addOnId === 'addon_animals');
-                return (
-                  <div>
-                    <label className="block text-sm font-medium text-stone-700 mb-2">
-                      Animals?
-                    </label>
-                    <p className="text-sm text-stone-500 mb-2">{animalsAddOn.description || 'Cleaning fee for traveling with animals'}</p>
-                    <button
-                      type="button"
-                      onClick={() => {
-                        setAddOnSelections((prev) => {
-                          if (isAnimalsSelected) return prev.filter((s) => s.addOnId !== 'addon_animals');
-                          return [...prev, { addOnId: 'addon_animals', quantity: 1 }];
-                        });
-                      }}
-                      className={`flex items-center justify-between w-full p-4 rounded-lg border-2 text-left transition-colors ${
-                        isAnimalsSelected ? 'border-emerald-500 bg-emerald-50' : 'border-stone-200 bg-white hover:border-stone-300'
-                      }`}
-                    >
-                      <span className="font-medium text-stone-900">
-                        {isAnimalsSelected ? 'Yes, traveling with animals' : 'No animals'}
-                      </span>
-                      <span className="text-sm font-semibold text-stone-700">
-                        +{formatCurrencyAmount(animalsAddOn.price || 0, currency, locale)}
-                      </span>
-                    </button>
-                  </div>
-                );
-              })()}
-            </div>
-          )}
-
-          {/* Pickup Location Selection - Step 6 */}
-          {selectedOption && passengerCount > 0 &&
-           product.pickupLocations && 
-           product.pickupLocations.length > 0 && (
-            <div id="pickup-location-section" className="border-t border-stone-200 pt-6">
-              {pickupLocationId || customPickupAddress || pickupLocationSkipped ? (
-                <div className="space-y-4">
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <label className="block text-sm font-medium text-stone-700 mb-1">
-                        {t('pickup.pickupLocation') || 'Pickup Location'}
-                      </label>
-                      {pickupLocationSkipped ? (
-                        <p className="text-sm text-stone-900">
-                          {t('booking.pickupLocationUnknown')}
-                        </p>
-                      ) : customPickupAddress ? (
-                        <p className="text-sm text-stone-900">
-                          {customPickupAddress}
-                        </p>
-                      ) : (
-                        <>
-                          <p className="text-sm text-stone-900">
-                            {selectedPickupLocation?.name}
-                          </p>
-                          <p className="text-xs text-stone-500">
-                            {selectedPickupLocation?.address}
-                          </p>
-                          {selectedPickupLocation?.notes && (
-                            <p className="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded p-2 mt-2">
-                              {selectedPickupLocation.notes}
-                            </p>
-                          )}
-                        </>
-                      )}
-                    </div>
-                    <button
-                      onClick={() => {
-                        setPickupLocationId(null);
-                        setCustomPickupAddress(null);
-                        setPickupLocationSkipped(false);
-                        setSelectedStartTime('');
-                        setIsCustomTimeMode(false);
-                      }}
-                      className="text-sm text-emerald-600 hover:text-emerald-700 underline"
-                    >
-                      {t('common.change') || 'Change'}
-                    </button>
-                  </div>
-                </div>
-              ) : (
-                <PickupLocationSelector
-                  pickupLocations={product.pickupLocations}
-                  selectedLocationId={pickupLocationId}
-                  selectedCustomAddress={customPickupAddress}
-                  allowCustomLocation
-                  isSkipped={pickupLocationSkipped}
-                  destinations={product.destinations}
-                  onLocationSelect={(locationId, customLocation) => {
-                    setError('');
-                    if (customLocation) {
-                      setPickupLocationId(null);
-                      setCustomPickupAddress(customLocation.address);
-                      setPickupLocationSkipped(false);
-                    } else {
-                      setPickupLocationId(locationId);
-                      setCustomPickupAddress(null);
-                      if (locationId === null && pickupLocationSkipped) {
-                        setPickupLocationSkipped(false);
-                      } else if (locationId !== null) {
-                        setPickupLocationSkipped(false);
-                      }
-                    }
-                  }}
-                  onSkip={() => {
-                    setPickupLocationSkipped(true);
-                    setPickupLocationId(null);
-                    setCustomPickupAddress(null);
-                    setError('');
-                  }}
-                />
-              )}
-            </div>
-          )}
-
-          {/* Price Summary, Contact, Terms & Checkout — below pickup location */}
-          {selectedStartTime && passengerCount > 0 && (
-            <div className="border-t border-stone-200 pt-6 mt-6 space-y-4">
-              {/* Cancellation policy - forced by promo or user selection */}
-              {(forcedCancellationPolicyFromPromo || (pricingConfig?.cancellationPolicies && pricingConfig.cancellationPolicies.length > 0)) && (
-                <div>
-                  <div className="text-sm font-medium text-stone-700 mb-2">
-                    {t('booking.cancellationPolicy')}
-                  </div>
-                  {forcedCancellationPolicyFromPromo ? (
-                    <div className="flex items-center gap-3 p-4 rounded-lg border-2 border-amber-200 bg-amber-50">
-                      <Check className="h-5 w-5 shrink-0 text-amber-600" />
-                      <div>
-                        <span className="font-medium text-stone-900">{forcedCancellationPolicyFromPromo.label}</span>
-                        <p className="text-sm text-stone-600 mt-0.5">{t('booking.promoRequiresThisPolicy')}</p>
-                      </div>
-                    </div>
-                  ) : (
-                    <div className="space-y-2">
-                      {pricingConfig!.cancellationPolicies!.map((policy) => {
-                        const fee = policy.feeByCurrency[currency] ?? 0;
-                        const isSelected = cancellationPolicyId === policy.id;
-                        const isFree = fee === 0;
-                        return (
-                          <button
-                            key={policy.id}
-                            type="button"
-                            onClick={() => setCancellationPolicyId(policy.id)}
-                            className={`w-full flex items-center justify-between gap-3 p-4 rounded-lg border-2 text-left transition-colors ${
-                              isSelected
-                                ? 'border-emerald-500 bg-emerald-50'
-                                : 'border-stone-200 bg-white hover:border-stone-300'
-                            }`}
-                          >
-                            <div className="flex items-center gap-3">
-                              <span className={`flex h-5 w-5 shrink-0 items-center justify-center rounded border ${
-                                isSelected ? 'border-emerald-500 bg-emerald-500' : 'border-stone-300'
-                              }`}>
-                                {isSelected && <Check className="h-3 w-3 text-white" />}
-                              </span>
-                              <span className="font-medium text-stone-900">
-                                {policy.label}
-                              </span>
-                            </div>
-                            <span className={`text-sm whitespace-nowrap ${isFree ? 'text-stone-500' : 'font-semibold text-stone-700'}`}>
-                              {isFree ? (t('booking.included') ?? 'Included') : `+${formatCurrencyAmount(fee, currency, locale)}`}
-                            </span>
-                          </button>
-                        );
-                      })}
-                    </div>
-                  )}
-                </div>
-              )}
-              {/* Duration Info */}
-              {calculatedDuration > 0 && (
-                <div className="bg-emerald-50 border border-emerald-200 rounded-lg p-4">
-                  <div className="text-sm text-stone-600 mb-1">Duration</div>
-                  <div className="text-lg font-semibold text-emerald-900">
-                    {Math.floor(calculatedDuration / 60)}h {calculatedDuration % 60}m
-                  </div>
-                  {calculatedEndTime && selectedStartTime && (
-                    <div className="text-sm text-stone-600 mt-1">
-                      Start: {(() => {
-                        const [hours, minutes] = selectedStartTime.split(':').map(Number);
-                        const timeDate = new Date();
-                        timeDate.setHours(hours, minutes);
-                        return format(timeDate, 'h:mm a');
-                      })()} • End: {calculatedEndTime}
-                    </div>
-                  )}
-                </div>
-              )}
-              <PriceSummary
-                lines={[
-                  {
-                    kind: 'line',
-                    label: `Shuttle${resourceCount > 1 ? 's' : ''} (${resourceCount} × ${formatCurrencyAmount(resourcePrice, currency)})`,
-                    amount: basePrice,
-                    type: 'TICKET',
-                    quantity: resourceCount,
-                  },
-                  ...addOnSelections.map((sel) => {
-                    const addOn = addOns.find((a) => a.addOnId === sel.addOnId);
-                    if (!addOn) return null;
-                    const base = addOn.price ?? 0;
-                    const hasVariant = (addOn.variantType === 'single_choice' || addOn.variantType === 'multi_quantity') && sel.variantId;
-                    const adj = hasVariant
-                      ? (addOn.variants?.find((v) => v.id === sel.variantId)?.priceAdjustment ?? 0)
-                      : 0;
-                    const amt = (base + adj) * (sel.quantity ?? 1);
-                    const variantLabel = hasVariant
-                      ? addOn.variants?.find((v) => v.id === sel.variantId)?.label
-                      : null;
-                    const qty = sel.quantity ?? 1;
-                    return { kind: 'line' as const, label: variantLabel ? `${addOn.name} (${variantLabel})${qty > 1 ? ` × ${qty}` : ''}` : addOn.name, amount: amt, type: 'FEE' as const };
-                  }).filter(Boolean) as Array<{ kind: 'line'; label: string; amount: number; type: string }>,
-                  ...(additionalHoursAmount > 0
-                    ? [{ kind: 'line' as const, label: additionalHoursCount === 1 ? 'Additional hour' : `Additional hours (${additionalHoursCount})`, amount: additionalHoursAmount, type: 'FEE' as const }]
-                    : []),
-                  ...(cancellationPolicyFee > 0 && selectedCancellationPolicy
-                    ? [{ kind: 'line' as const, label: selectedCancellationPolicy.label, amount: cancellationPolicyFee, type: 'cancellation' as const }]
-                    : []),
-                  ...(taxAmount > 0
-                    ? [{ kind: 'line' as const, label: t('booking.tax') !== 'booking.tax' ? t('booking.tax') : 'Taxes and fees', amount: taxAmount, type: 'TAX' as const }]
-                    : []),
-                ]}
-                total={totalPrice}
-                currency={currency}
-                locale={locale}
-                size="sm"
-                subtotal={taxAmount > 0 || promoDiscountAmount > 0 ? subtotal : undefined}
-                discountAmount={promoDiscountAmount}
-                discountLabel={appliedPromoCode ? `Promo: ${appliedPromoCode}` : undefined}
-                t={t}
-                extraAfterTotal={isChangeMode && initialBooking?.originalTotalAmount != null && initialBooking.originalCurrency === currency ? (
-                  <div className="pt-3 mt-2 border-t border-stone-200 space-y-2">
-                    <div className="flex justify-between gap-3 min-w-0 text-sm">
-                      <span className="text-stone-600 min-w-0 truncate">Price change</span>
-                      <span className={`flex-shrink-0 whitespace-nowrap font-medium ${totalPrice - initialBooking.originalTotalAmount >= 0 ? 'text-stone-700' : 'text-red-600'}`}>
-                        {totalPrice - initialBooking.originalTotalAmount >= 0 ? '+' : ''}
-                        {formatCurrencyAmount(totalPrice - initialBooking.originalTotalAmount, currency, locale)}
-                      </span>
-                    </div>
-                    <div className="flex justify-between gap-3 min-w-0 text-xs text-stone-500">
-                      <span>Original: {formatCurrencyAmount(initialBooking.originalTotalAmount, currency, locale)}</span>
-                      <span>→ New: {formatCurrencyAmount(totalPrice, currency, locale)}</span>
-                    </div>
-                    {Math.abs(totalPrice - initialBooking.originalTotalAmount) > 0.01 && (
-                      <label className="flex items-center gap-2 text-sm text-stone-600 cursor-pointer">
-                        <input
-                          type="checkbox"
-                          checked={keepOriginalPrice}
-                          onChange={(e) => setKeepOriginalPrice(e.target.checked)}
-                          className="rounded border-stone-300 text-stone-700 focus:ring-stone-500"
-                        />
-                        <span>Keep original price (no charge or refund)</span>
-                      </label>
-                    )}
-                  </div>
-                ) : undefined}
-                extraBetweenTaxAndTotal={
-                  isAdmin ? (
-                    <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 pt-2 border-t border-stone-200">
-                      <label htmlFor="private-shuttle-promo-code" className="flex-shrink-0 text-sm font-medium text-stone-500 whitespace-nowrap">
-                        {t('booking.optionalPromoCode') || 'Promo / voucher / gift card'}
-                      </label>
-                      <div className="flex-1 min-w-0 w-full sm:w-auto flex items-center gap-2 flex-wrap">
-                        <div className="relative flex-1 w-full sm:max-w-[200px] min-w-0 sm:min-w-[120px]">
-                          <input
-                            type="text"
-                            name="promoCode"
-                            id="private-shuttle-promo-code"
-                            value={promoCodeInput}
-                            onChange={(e) => {
-                              setPromoCodeInput(e.target.value.toUpperCase());
-                              setPromoCodeError('');
-                            }}
-                            onKeyDown={(e) => {
-                              if (e.key === 'Enter') {
-                                e.preventDefault();
-                                handleApplyPromo();
-                              }
-                            }}
-                            onPaste={() => {
-                              setTimeout(() => handleApplyPromoRef.current(), 50);
-                            }}
-                            placeholder={t('booking.promoCodePlaceholder')}
-                            autoComplete="off"
-                            readOnly={!!appliedPromoCode}
-                            className="w-full pr-8 pl-3 py-1.5 text-sm rounded border border-stone-300 bg-white focus:outline-none focus:border-stone-500 text-stone-900 read-only:bg-stone-50 read-only:cursor-default"
-                          />
-                          {appliedPromoCode ? (
-                            <button
-                              type="button"
-                              onClick={() => {
-                                setAppliedPromoCode(null);
-                                setPromoCodeInput('');
-                                setPromoCodeError('');
-                                setForcedCancellationPolicyFromPromo(null);
-                                fetchedRangesRef.current = [];
-                              }}
-                              className="absolute right-1 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-stone-200 text-stone-500 hover:text-stone-700"
-                              aria-label={t('booking.removePromo')}
-                            >
-                              <X className="w-4 h-4" strokeWidth={2.5} />
-                            </button>
-                          ) : promoCodeValidating ? (
-                            <span className="absolute right-2 top-1/2 -translate-y-1/2 w-5 h-5 rounded-full bg-stone-100 animate-pulse" aria-hidden />
-                          ) : promoCodeError ? (
-                            <span className="absolute right-2 top-1/2 -translate-y-1/2 w-5 h-5 rounded-full bg-red-500 text-white flex items-center justify-center" aria-label={promoCodeError}>
-                              <X className="w-3 h-3" strokeWidth={3} />
-                            </span>
-                          ) : null}
-                        </div>
-                        {appliedPromoCode && (
-                          <span className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-500 text-white flex items-center justify-center" aria-label={t('booking.promoApplied', { code: appliedPromoCode })}>
-                            <Check className="w-3.5 h-3.5" strokeWidth={3} />
-                          </span>
-                        )}
-                        {promoDiscountAmount > 0 && (
-                          <span className="text-sm font-medium text-red-600 whitespace-nowrap ml-auto">
-                            -{formatCurrencyAmount(promoDiscountAmount, currency, locale)}
-                          </span>
-                        )}
-                        {promoCodeError && (
-                          <span className="text-sm text-red-600 whitespace-nowrap ml-auto">{promoCodeError}</span>
-                        )}
-                        {forcedCancellationPolicyFromPromo && (
-                          <p className="w-full text-sm text-stone-600 mt-2 flex items-center gap-1.5">
-                            <span className="inline-flex items-center rounded bg-amber-50 px-2 py-0.5 text-amber-800 ring-1 ring-amber-200">
-                              {t('booking.promoRequiresCancellationPolicy', { policy: forcedCancellationPolicyFromPromo.label })}
-                            </span>
-                          </p>
-                        )}
-                      </div>
-                    </div>
-                  ) : undefined
-                }
-              />
-              {depositInfo && (
-                <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 space-y-2">
-                  <div className="text-sm font-medium text-amber-900">Payment Plan</div>
-                  <div className="flex justify-between text-sm">
-                    <span className="text-amber-700">Deposit (Due Now)</span>
-                    <span className="font-semibold text-amber-900">
-                      {formatCurrencyAmount(depositInfo.depositAmount, currency)}
-                    </span>
-                  </div>
-                  <div className="flex justify-between text-sm">
-                    <span className="text-amber-700">Balance (Due Later)</span>
-                    <span className="text-amber-900">
-                      {formatCurrencyAmount(depositInfo.balanceAmount, currency)}
-                    </span>
-                  </div>
-                  <div className="text-xs text-amber-600 mt-2">
-                    Balance will be charged {privateShuttleConfig?.balanceChargeDaysBefore || 7} days before your booking
-                  </div>
-                </div>
-              )}
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                <div>
-                  <label className="block text-sm font-medium text-stone-700 mb-2">
-                    {t('booking.firstName') || 'First Name'}
-                  </label>
-                  <input
-                    type="text"
-                    name="firstName"
-                    id="private-shuttle-firstName"
-                    value={firstName}
-                    onChange={(e) => { setFirstName(e.target.value); setError(''); }}
-                    placeholder={t('booking.firstNamePlaceholder') || 'Jane'}
-                    autoComplete="given-name"
-                    className="w-full px-4 py-3 rounded-lg border border-stone-300 focus:outline-none focus:border-stone-500 text-stone-900"
-                  />
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-stone-700 mb-2">
-                    {t('booking.lastName') || 'Last Name'} <span className="text-red-600">*</span>
-                  </label>
-                  <input
-                    type="text"
-                    name="lastName"
-                    id="private-shuttle-lastName"
-                    value={lastName}
-                    onChange={(e) => { setLastName(e.target.value); setError(''); }}
-                    placeholder={t('booking.lastNamePlaceholder') || 'Smith'}
-                    autoComplete="family-name"
-                    required
-                    className="w-full px-4 py-3 rounded-lg border border-stone-300 focus:outline-none focus:border-stone-500 text-stone-900"
-                  />
-                </div>
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-stone-700 mb-2">
-                  {t('booking.emailForConfirmation')} <span className="text-red-600">*</span>
-                </label>
-                <input
-                  type="email"
-                  name="email"
-                  id="private-shuttle-email"
-                  value={email}
-                  onChange={(e) => { setEmail(e.target.value); setError(''); }}
-                  placeholder={t('common.emailPlaceholder')}
-                  autoComplete="email"
-                  required
-                  className="w-full px-4 py-3 rounded-lg border border-stone-300 focus:outline-none focus:border-stone-500 text-stone-900"
-                />
-                {email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) && (
-                  <p className="text-xs text-red-600 mt-1.5">{t('booking.invalidEmail') || 'Please enter a valid email address'}</p>
-                )}
-              </div>
-              {isAdmin && (
-                <div className="p-4 bg-amber-50/50 border border-amber-200 rounded-lg space-y-3">
-                  <p className="text-sm font-medium text-stone-700">Communications (admin)</p>
-                  <label className="flex items-start gap-2 cursor-pointer">
-                    <input
-                      type="checkbox"
-                      checked={skipConfirmationCommunications}
-                      onChange={(e) => setSkipConfirmationCommunications(e.target.checked)}
-                      className="mt-1 h-4 w-4 rounded border-stone-300"
-                    />
-                    <span className="text-sm text-stone-600">Don&apos;t send confirmation email/SMS/WhatsApp for this booking</span>
-                  </label>
-                  <label className="flex items-start gap-2 cursor-pointer">
-                    <input
-                      type="checkbox"
-                      checked={disableAutoCommunications}
-                      onChange={(e) => setDisableAutoCommunications(e.target.checked)}
-                      className="mt-1 h-4 w-4 rounded border-stone-300"
-                    />
-                    <span className="text-sm text-stone-600">Disable all auto communications for this booking</span>
-                  </label>
-                </div>
-              )}
-              <div className="p-4 bg-stone-50 rounded-lg border border-stone-200">
-                <TermsAcceptance
-                  checked={termsAccepted}
-                  onChange={(checked) => {
-                    setTermsAccepted(checked);
-                    setTermsAcceptedAt(checked ? new Date().toISOString() : null);
-                  }}
-                  t={t}
-                />
-              </div>
-              {error && (
-                <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
-                  {error}
-                </div>
-              )}
-              <button
-                onClick={handleCheckout}
-                disabled={loading || !termsAccepted}
-                className="w-full bg-emerald-600 text-white py-4 px-6 rounded-lg font-semibold hover:bg-emerald-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                {loading
-                  ? 'Processing...'
-                  : depositInfo
-                  ? `Pay Deposit (${formatCurrencyAmount(depositInfo.depositAmount, currency, locale)})`
-                  : `Book Now (${formatCurrencyAmount(totalPrice, currency, locale)})`}
-              </button>
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-}
-