@ticketboothapp/booking 0.1.11 → 0.1.12

package/src/components/BookingFlow.tsx

@@ -1,2952 +0,0 @@
-'use client';
-
-import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
-import { parseISO, addWeeks, format, 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 ReturnOption,
-  type AddOn,
-} from '@/lib/api';
-import {
-  EARLIEST_AVAILABILITY_DATE,
-  LATEST_AVAILABILITY_DATE,
-  INITIAL_FETCH_WEEKS,
-} from '@/lib/constants';
-import { PickupLocationSelector } from './PickupLocationSelector';
-import { Calendar } from './Calendar';
-import { useTranslations, useLocale } from '@/lib/i18n';
-import { type Currency } from './CurrencySwitcher';
-import { formatCurrencyAmount } from '@/lib/currency';
-import { formatBookingRefForDisplay } from '@/lib/booking-ref';
-import { buildCheckoutBreakdown } from '@/lib/checkout-breakdown';
-import type { PricingConfig, PrecomputedPricesByCategory, ItineraryDisplayStep } from '@/lib/api';
-import { ItineraryStepType as StepType } from '@/lib/api';
-import { getStepLabel } from '@/lib/itinerary-labels';
-import { getDisplayPriceFromBaseInDisplayCurrency, computePriceBreakdown, computeOrderSummary, type PriceBreakdown as PriceBreakdownData, type OrderSummary } from '@/lib/pricing';
-import { useCompanyTimezone } from '@/contexts/CompanyContext';
-import { useBookingApp } from '@/contexts/BookingAppContext';
-import { PriceSummary, type PriceSummaryLine } from './PriceSummary';
-import { CheckoutModal, type CheckoutModalLineItem } from './CheckoutModal';
-import { TermsAcceptance } from './TermsAcceptance';
-import { MealDrinkAddOnSelector, canUseMealDrinkSelector } from './MealDrinkAddOnSelector';
-import { Check, X } from 'lucide-react';
-
-/** Initial booking data for change mode (provider dashboard) */
-export interface InitialBookingForChange {
-  bookingReference: string;
-  productId: string;
-  availabilityId?: string;
-  dateTime: string;
-  /** Original total (for price delta display). From booking.receipt.totalAmount. */
-  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;
-  /** Promo code from existing booking — auto-applied when opening change flow */
-  promoCode?: string | null;
-  additionalHoursCount?: number | null;
-  /** Existing add-ons — pre-filled in change mode so they are sent on submit */
-  addOnSelections?: Array<{ addOnId: string; variantId?: string; quantity?: number }> | null;
-}
-
-interface BookingFlowProps {
-  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 instead of createReservation */
-  initialBooking?: InitialBookingForChange;
-  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;
-  }) => Promise<void>;
-}
-
-export function BookingFlow({ product, onBack, currency, onSuccess, initialBooking, onChangeBooking }: BookingFlowProps) {
-  const { t } = useTranslations();
-  const { locale } = useLocale();
-  const companyTimezone = useCompanyTimezone(); // Get timezone from context
-  const { permissions, isSimplifiedPricingView, onShowManage, getSuccessUrl } = useBookingApp();
-  const isAdmin = permissions.viewerRole === 'admin';
-  const [availabilities, setAvailabilities] = useState<Availability[]>([]);
-  const [selectedAvailability, setSelectedAvailability] = useState<Availability | null>(null);
-  const [selectedReturnOption, setSelectedReturnOption] = useState<ReturnOption | null>(null);
-  const isChangeMode = !!(initialBooking && onChangeBooking);
-  const [quantities, setQuantities] = useState<Record<string, number>>(() => {
-    if (initialBooking?.bookingItems?.length) {
-      return initialBooking.bookingItems.reduce((acc, i) => ({ ...acc, [i.category]: i.count }), {});
-    }
-    return {};
-  });
-  const [email, setEmail] = useState('');
-  const [firstName, setFirstName] = useState('');
-  const [lastName, setLastName] = useState('');
-  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 [pickupLocationId, setPickupLocationId] = useState<string | null>(initialBooking?.pickupLocationId ?? null);
-  const [pickupLocationSkipped, setPickupLocationSkipped] = useState(false);
-  // Cancellation policy - will be set to first policy from config (e.g. "standard") when availabilities load
-  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);
-  /** Add-on selections (lunch, animals, etc.) - filtered by selected product option */
-  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 product option */
-  const [addOns, setAddOns] = useState<AddOn[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [loadingAvailabilities, setLoadingAvailabilities] = useState(true);
-  const [error, setError] = useState('');
-  const [pricingConfig, setPricingConfig] = useState<PricingConfig | null>(null);
-  /** Precomputed prices from ticketbooth-product-prices per option (optionId -> category -> currency -> price). Used for display; rates[].price is for GYG only. */
-  const [precomputedPricesByOption, setPrecomputedPricesByOption] = useState<Record<string, PrecomputedPricesByCategory> | 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 (e.g. after tab focus)
-  const [visibleRange, setVisibleRange] = useState<{ start: Date; end: Date } | null>(null);
-  const [selectedDate, setSelectedDate] = useState<string>('');
-  const [isItinerarySticky, setIsItinerarySticky] = useState(false);
-  const isItineraryStickyRef = useRef(false);
-  const [isMobile, setIsMobile] = useState(false);
-  const [showTooltip, setShowTooltip] = useState(false);
-  const itineraryRef = useRef<HTMLDivElement>(null);
-  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: OrderSummary['feeLineItems'];
-    returnPriceAdjustment: number;
-    cancellationPolicyFee: number;
-    cancellationPolicyLabel?: string;
-    subtotal: number;
-    tax: number;
-    total: number;
-    promoDiscountAmount?: number;
-    discountLabel?: string | null;
-    totalQuantity: number;
-    isTaxIncludedInPrice: boolean;
-    taxRate: number;
-  } | 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 only: show choice to pay now or confirm without payment (full balance owed). */
-  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);
-  const [adminChoiceData, setAdminChoiceData] = useState<{
-    reservationReference: string;
-    checkoutBreakdown: { lineItems: Array<{ label: string; amount: number; type?: string; quantity?: number }>; totalAmount: number; currency: string };
-    totalAmount: number;
-    datePart: string;
-    timePart: string;
-    availabilityProductOptionId: string;
-    itineraryDisplay?: ItineraryDisplayStep[] | null;
-    clientSecret: string;
-    ticketLinesForModal: CheckoutModalLineItem[];
-    feeLineItems: OrderSummary['feeLineItems'];
-    returnPriceAdjustment: number;
-    cancellationPolicyFee: number;
-    cancellationPolicyLabel?: string;
-    subtotal: number;
-    tax: number;
-    totalQuantity: number;
-    isTaxIncludedInPrice: boolean;
-    taxRate: number;
-    promoDiscountAmount: number;
-    discountLabel?: string | null;
-  } | null>(null);
-  
-  // Get all active product options (memoized to prevent recreating array on each render)
-  const activeOptions = useMemo(() => 
-    product.options?.filter(opt => opt.status === 'ACTIVE') || [],
-    [product.options]
-  );
-  
-  // Detect if this is a Private Shuttle product
-  const isPrivateShuttle = product.productType === 'PRIVATE_SHUTTLE';
-  
-  // Create stable string key from option IDs for dependency array
-  const activeOptionIdsKey = useMemo(() => 
-    activeOptions.map(opt => opt.optionId).sort().join(','),
-    [activeOptions]
-  );
-  
-  // Create a Map for O(1) option lookups by optionId (performance optimization)
-  const optionsMap = useMemo(() => {
-    const map = new Map<string, typeof activeOptions[0]>();
-    activeOptions.forEach(opt => map.set(opt.optionId, opt));
-    return map;
-  }, [activeOptions]);
-
-  // 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 (or from initialBooking in change mode)
-  useEffect(() => {
-    if (!visibleRange) {
-      if (initialBooking?.dateTime) {
-        const bookingDate = parseISO(initialBooking.dateTime);
-        const start = startOfDay(bookingDate);
-        const end = endOfDay(addWeeks(bookingDate, 2));
-        setVisibleRange({ start, end });
-      } else {
-        const initialEnd = addWeeks(EARLIEST_AVAILABILITY_DATE, INITIAL_FETCH_WEEKS);
-        setVisibleRange({ start: EARLIEST_AVAILABILITY_DATE, end: initialEnd });
-      }
-    }
-  }, [visibleRange, initialBooking?.dateTime]);
-
-  // Fetch availabilities for visible range + buffer
-  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
-      // For end date, we need to check if it's after the end of Oct 12 (inclusive means up to end of day Oct 12)
-      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
-      // This handles the case where user selects a date that's not yet in the visible range
-      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
-      // Backend always returns CAD prices without fee/tax, so no need to refetch on currency change
-      const shouldFetch = needsFetch(clampedStart, clampedEnd);
-      if (!shouldFetch) {
-        // Range already fetched - ensure loading state is cleared
-        setLoadingAvailabilities(false);
-        fetchingRef.current = false;
-        return;
-      }
-      
-      fetchingRef.current = true;
-      setLoadingAvailabilities(true);
-      
-      try {
-        let startDateStr: string;
-        let endDateStr: string;
-        
-        if (isPrivateShuttle) {
-          // Private Shuttle: use date-only format (YYYY-MM-DD)
-          startDateStr = format(startOfDay(clampedStart), 'yyyy-MM-dd');
-          // Use endOfDay to include the full last day
-          endDateStr = format(endOfDay(clampedEnd), 'yyyy-MM-dd');
-        } else {
-          // Standard products: use ISO datetime format
-          // Note: Availabilities are stored in UTC, but we format in company timezone
-          // endOfDay ensures we get the full last day (23:59:59 in company timezone)
-          startDateStr = formatInTimeZone(startOfDay(clampedStart), companyTimezone, "yyyy-MM-dd'T'HH:mm:ssXXX");
-          endDateStr = formatInTimeZone(endOfDay(clampedEnd), companyTimezone, "yyyy-MM-dd'T'HH:mm:ssXXX");
-        }
-        
-        // Fetch availabilities for all product options in parallel (no currency param - we use precomputedPrices for display)
-        const availabilityPromises = activeOptions.map(async (option) => {
-          const result = await getAvailabilities(option.optionId, startDateStr, endDateStr, {
-            promoCode: appliedPromoCode || undefined,
-          });
-          // Store pricing config from first response only (all responses have same config)
-          if (result.pricingConfig && !pricingConfigSetRef.current) {
-            setPricingConfig(prev => {
-              if (!prev) {
-                pricingConfigSetRef.current = true;
-                return result.pricingConfig!;
-              }
-              return prev;
-            });
-          }
-          // Tag each availability with its productOptionId and carry precomputedPrices for this option
-          return {
-            optionId: option.optionId,
-            availabilities: result.availabilities.map(avail => ({
-              ...avail,
-              productOptionId: option.optionId
-            })),
-            precomputedPrices: result.precomputedPrices,
-          };
-        });
-        
-        const results = await Promise.all(availabilityPromises);
-        const allFetchedAvailabilities = results.flatMap(r => r.availabilities);
-        setPrecomputedPricesByOption(prev => {
-          const next = { ...(prev || {}) };
-          results.forEach(r => {
-            if (r.precomputedPrices && Object.keys(r.precomputedPrices).length > 0) {
-              next[r.optionId] = r.precomputedPrices;
-            }
-          });
-          return Object.keys(next).length > 0 ? next : prev;
-        });
-        
-        // Merge with existing availabilities (avoid duplicates by dateTime + productOptionId)
-        setAvailabilities(prev => {
-          const existingMap = new Map(
-            prev.map(avail => [`${avail.dateTime}-${avail.productOptionId}`, avail])
-          );
-          
-          // Merge new availabilities - update existing ones or add new ones
-          allFetchedAvailabilities.forEach(avail => {
-            const key = `${avail.dateTime}-${avail.productOptionId}`;
-            // Always update to get latest data (vacancies, prices, etc.)
-            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 quantities based on first availability's categories (only if not already set)
-        // Use functional update to avoid dependency on quantities state
-        setQuantities(prev => {
-          if (Object.keys(prev).length > 0) return prev; // Already initialized
-          
-          if (allFetchedAvailabilities.length > 0) {
-            const firstAvail = allFetchedAvailabilities.find(avail => avail.rates);
-            if (firstAvail?.rates) {
-              const initialQuantities: Record<string, number> = {};
-              firstAvail.rates.forEach(rate => {
-                initialQuantities[rate.category] = rate.category === 'ADULT' ? 1 : 0;
-              });
-              return initialQuantities;
-            }
-          }
-          return prev;
-        });
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load availabilities');
-        console.error('Error fetching availabilities:', err);
-      } finally {
-        setLoadingAvailabilities(false);
-        fetchingRef.current = false;
-      }
-    }
-    
-    fetchAvailabilities();
-  }, [visibleRange, activeOptionIdsKey, isPrivateShuttle, activeOptions, companyTimezone, selectedDate, appliedPromoCode, refreshKey]);
-
-  // Change mode: pre-fill selectedDate and selectedAvailability when availabilities load
-  const initialBookingPrefilledRef = useRef(false);
-  useEffect(() => {
-    if (!initialBooking?.dateTime || availabilities.length === 0 || initialBookingPrefilledRef.current) return;
-    let match: Availability | undefined;
-    if (initialBooking.availabilityId) {
-      match = availabilities.find((a) => a.availabilityId === initialBooking.availabilityId);
-    }
-    if (!match) {
-      const targetDt = parseISO(initialBooking.dateTime);
-      const targetDateStr = formatInTimeZone(targetDt, companyTimezone, 'yyyy-MM-dd');
-      const targetTimeStr = formatInTimeZone(targetDt, companyTimezone, 'HH:mm');
-      match = availabilities.find((a) => {
-        if (!a.dateTime) return false;
-        const aDateStr = formatInTimeZone(parseISO(a.dateTime), companyTimezone, 'yyyy-MM-dd');
-        if (aDateStr !== targetDateStr) return false;
-        const aTimeStr = formatInTimeZone(parseISO(a.dateTime), companyTimezone, 'HH:mm');
-        return targetTimeStr === aTimeStr;
-      }) ?? availabilities.find((a) => formatInTimeZone(parseISO(a.dateTime), companyTimezone, 'yyyy-MM-dd') === targetDateStr);
-    }
-    if (match) {
-      initialBookingPrefilledRef.current = true;
-      const dateStr = formatInTimeZone(parseISO(match.dateTime), companyTimezone, 'yyyy-MM-dd');
-      setSelectedDate(dateStr);
-      setSelectedAvailability(match);
-      if (initialBooking.returnAvailabilityId && match.returnOptions) {
-        const returnOpt = match.returnOptions.find((r) => r.returnAvailabilityId === initialBooking.returnAvailabilityId);
-        if (returnOpt) setSelectedReturnOption(returnOpt);
-      }
-    }
-  }, [initialBooking, availabilities, companyTimezone]);
-
-  // When applied promo code changes, clear fetched ranges so we refetch with new pricing
-  useEffect(() => {
-    fetchedRangesRef.current = [];
-  }, [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 (in company timezone) and sort by time
-  // Memoized to prevent recalculation on every render
-  const availabilitiesByDate = useMemo(() => {
-    const grouped = availabilities.reduce((acc, avail) => {
-      // Parse the dateTime and extract the date in company timezone
-      const dateTime = parseISO(avail.dateTime);
-      const dateInCompanyTz = formatInTimeZone(dateTime, companyTimezone, 'yyyy-MM-dd');
-      if (!acc[dateInCompanyTz]) acc[dateInCompanyTz] = [];
-      acc[dateInCompanyTz].push(avail);
-      return acc;
-    }, {} as Record<string, Availability[]>);
-    
-    // Sort availabilities within each date by time (create new sorted arrays, don't mutate)
-    const sorted: Record<string, Availability[]> = {};
-    Object.keys(grouped).forEach(date => {
-      sorted[date] = [...grouped[date]].sort((a, b) => {
-        const timeA = parseISO(a.dateTime).getTime();
-        const timeB = parseISO(b.dateTime).getTime();
-        return timeA - timeB;
-      });
-    });
-    
-    return sorted;
-  }, [availabilities, companyTimezone]);
-
-  const dates = useMemo(() => Object.keys(availabilitiesByDate).sort(), [availabilitiesByDate]);
-
-  // Track mobile state
-  useEffect(() => {
-    const checkMobile = () => {
-      setIsMobile(window.innerWidth < 640); // sm breakpoint
-    };
-    checkMobile();
-    window.addEventListener('resize', checkMobile);
-    return () => window.removeEventListener('resize', checkMobile);
-  }, []);
-
-  // Close tooltip when clicking outside
-  useEffect(() => {
-    if (!showTooltip) return;
-    
-    const handleClickOutside = (e: MouseEvent | TouchEvent) => {
-      const target = e.target as HTMLElement;
-      if (!target.closest('[data-tooltip-icon]')) {
-        setShowTooltip(false);
-      }
-    };
-    
-    document.addEventListener('mousedown', handleClickOutside);
-    document.addEventListener('touchstart', handleClickOutside);
-    
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('touchstart', handleClickOutside);
-    };
-  }, [showTooltip]);
-
-  // Detect when itinerary box becomes sticky (throttled to avoid jank)
-  useEffect(() => {
-    let ticking = false;
-
-    const updateStickyState = () => {
-      if (!itineraryRef.current) return;
-
-      const rect = itineraryRef.current.getBoundingClientRect();
-      const stickyTop = window.innerWidth >= 640 ? 73 : 136; // sm breakpoint
-
-      const currentTop = rect.top;
-      const wasSticky = isItineraryStickyRef.current;
-
-      // Simple threshold: sticky when the top of the box reaches the sticky offset
-      const nextSticky = currentTop <= stickyTop + 1; // +1px tolerance for sticky comparison
-
-      if (nextSticky !== wasSticky) {
-        isItineraryStickyRef.current = nextSticky;
-        setIsItinerarySticky(nextSticky);
-      }
-    };
-
-    const handleScroll = () => {
-      if (!ticking) {
-        window.requestAnimationFrame(() => {
-          updateStickyState();
-          ticking = false;
-        });
-        ticking = true;
-      }
-    };
-
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    updateStickyState(); // Check initial state
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, [selectedDate, selectedAvailability]); // Re-check when itinerary content changes
-
-  // 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 firstAvail = availabilitiesByDate[firstDate]?.[0];
-    let newEarliest: Date;
-    if (firstAvail) {
-      newEarliest = parseISO(firstAvail.dateTime);
-    } else {
-      // Fallback: parse the date string
-      const [year, month, day] = firstDate.split('-').map(Number);
-      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, availabilitiesByDate]);
-  
-  const timesForSelectedDate = useMemo(() => {
-    return selectedDate ? availabilitiesByDate[selectedDate] || [] : [];
-  }, [selectedDate, availabilitiesByDate]);
-  
-  // Get selected pickup location
-  const selectedPickupLocation = useMemo(() => 
-    product.pickupLocations?.find(loc => loc.id === pickupLocationId),
-    [product.pickupLocations, pickupLocationId]
-  );
-  
-  // Calculate maximum time offset from all pickup locations (for range display when location is unknown)
-  const maxTimeOffsetMinutes = useMemo(() => {
-    if (!product.pickupLocations || product.pickupLocations.length === 0) {
-      return 0;
-    }
-    return Math.max(...product.pickupLocations.map(loc => loc.pickupTimeOffsetMinutes ?? 0));
-  }, [product.pickupLocations]);
-  
-  // Calculate pickup times based on availability times + pickup location offset
-  interface PickupTimeInfo extends Availability {
-    pickupTime: string;
-    displayTime: string;
-    originalTime: string;
-    displayTimeRange?: string; // Time range when pickup location is unknown
-  }
-  
-  const pickupTimes = useMemo((): PickupTimeInfo[] => {
-    if (!selectedDate || !timesForSelectedDate.length) {
-      return [];
-    }
-    
-    // Show base availability times (without pickup location offset) when pickup location not selected yet
-    // Once pickup location is selected, we can show adjusted times
-    const offsetMinutes = pickupLocationSkipped 
-      ? 0 
-      : (selectedPickupLocation?.pickupTimeOffsetMinutes ?? 0);
-    
-    return timesForSelectedDate.map(avail => {
-      // Parse the dateTime (which should already be in company timezone from backend)
-      const availabilityTime = parseISO(avail.dateTime);
-      
-      // Only apply offset if it's set and > 0 and location is selected
-      const pickupTime = (offsetMinutes > 0 && selectedPickupLocation) 
-        ? new Date(availabilityTime.getTime() + offsetMinutes * 60 * 1000)
-        : availabilityTime;
-      
-      // Format in company timezone (not user's local timezone)
-      const displayTime = formatInTimeZone(pickupTime, companyTimezone, 'h:mm a');
-      const originalTime = formatInTimeZone(availabilityTime, companyTimezone, 'h:mm a');
-      
-      // If pickup location is skipped, calculate and display time range
-      let displayTimeRange: string | undefined;
-      if (pickupLocationSkipped && maxTimeOffsetMinutes > 0) {
-        const latestPickupTime = new Date(availabilityTime.getTime() + maxTimeOffsetMinutes * 60 * 1000);
-        const latestTimeStr = formatInTimeZone(latestPickupTime, companyTimezone, 'h:mm a');
-        displayTimeRange = `${originalTime} - ${latestTimeStr}`;
-      }
-      
-      return {
-        ...avail,
-        pickupTime: pickupTime.toISOString(),
-        displayTime,
-        originalTime,
-        displayTimeRange,
-      };
-    });
-  }, [selectedDate, selectedPickupLocation, timesForSelectedDate, pickupLocationSkipped, maxTimeOffsetMinutes, companyTimezone]);
-
-  // Check if any pickup time has "most popular" tag (memoized for performance)
-  const hasAnyMostPopular = useMemo(() => {
-    if (pickupTimes.length <= 1) return false;
-    return pickupTimes.some(t => {
-      if (!t.productOptionId) return false;
-      const opt = optionsMap.get(t.productOptionId);
-      return opt?.mostPopular;
-    });
-  }, [pickupTimes, optionsMap]);
-
-  // Helper function to get effective itinerary based on selected date and overrides
-  const getEffectiveItinerary = useCallback((option: typeof activeOptions[0], date: Date): typeof option.itinerary => {
-    if (!option.itinerary) return undefined;
-    
-    const monthDay = formatInTimeZone(date, companyTimezone, 'MM-dd');
-    
-    // Check for date-specific override
-    if (option.itineraryOverrides && option.itineraryOverrides.length > 0) {
-      for (const override of option.itineraryOverrides) {
-        if (monthDay >= override.startDate && monthDay <= override.endDate) {
-          return override.itinerary;
-        }
-      }
-    }
-    
-    return option.itinerary;
-  }, [companyTimezone]);
-
-  // Helper function to calculate stay summary for a specific return option
-  const calculateStaySummary = useCallback((returnDateTime: Date): string | null => {
-    if (!selectedAvailability) return null;
-    
-    const availabilityProductOptionId = selectedAvailability.productOptionId || activeOptions[0]?.optionId;
-    const selectedOption = activeOptions.find(opt => opt.optionId === availabilityProductOptionId);
-    if (!selectedOption) return null;
-    
-    const tourStartTime = parseISO(selectedAvailability.dateTime);
-    const itinerary = getEffectiveItinerary(selectedOption, tourStartTime);
-    const hasItinerary = itinerary && itinerary.length > 0 && product.destinations && product.destinations.length > 0;
-    
-    if (!hasItinerary || !product.destinations || !itinerary) return null;
-    
-    const destinationMap = new Map(product.destinations.map(d => [d.name, d]));
-    let lastDepartureTime = tourStartTime;
-    
-    const stays: Array<{ destinationName: string; durationHours: number }> = [];
-    
-    itinerary.forEach((itineraryItem, index) => {
-      const destination = destinationMap.get(itineraryItem.destinationName);
-      if (!destination) return;
-      
-      const arrivalTime = new Date(
-        lastDepartureTime.getTime() + (itineraryItem.travelTimeFromPreviousHours * 60 * 60 * 1000)
-      );
-      
-      const isLastDestination = index === itinerary.length - 1;
-      
-      if (isLastDestination) {
-        // For the last destination, calculate time from arrival to return time
-        const timeDiffMs = returnDateTime.getTime() - arrivalTime.getTime();
-        const timeDiffHours = timeDiffMs / (1000 * 60 * 60);
-        
-        if (timeDiffHours > 0) {
-          stays.push({
-            destinationName: destination.name,
-            durationHours: timeDiffHours,
-          });
-        }
-      } else {
-        // For non-last destinations (including first), use durationHours only if there's more than one stop
-        if (itinerary.length > 1 && itineraryItem.durationHours && itineraryItem.durationHours > 0) {
-          stays.push({
-            destinationName: destination.name,
-            durationHours: itineraryItem.durationHours,
-          });
-        }
-      }
-      
-      const departureTime = itineraryItem.durationHours && !isLastDestination
-        ? new Date(arrivalTime.getTime() + (itineraryItem.durationHours * 60 * 60 * 1000))
-        : arrivalTime;
-      
-      lastDepartureTime = departureTime;
-    });
-    
-    if (stays.length === 0) return null;
-    
-    // Build summary string e.g. "2 hours at [destination] + 2 hours at [destination]"
-    return stays.map(stay => {
-      const hours = Math.floor(stay.durationHours);
-      const minutes = Math.round((stay.durationHours - hours) * 60);
-      let timeStr = '';
-      if (hours === 0 && minutes === 0) {
-        timeStr = '0 min';
-      } else if (hours === 0) {
-        timeStr = `${minutes} min`;
-      } else if (minutes === 0) {
-        timeStr = `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
-      } else {
-        timeStr = `${hours} ${hours === 1 ? 'hour' : 'hours'} ${minutes} min`;
-      }
-      return `${timeStr} at ${stay.destinationName}`;
-    }).join(' + ');
-  }, [selectedAvailability, activeOptions, product.destinations, getEffectiveItinerary]);
-
-  // Helper function to compute itinerary display for storage (returns same shape as "Your Itinerary" box)
-  const computeItineraryDisplay = useCallback((): ItineraryDisplayStep[] | null => {
-    if (!selectedAvailability) return null;
-    const availabilityProductOptionId = selectedAvailability.productOptionId || activeOptions[0]?.optionId;
-    const selectedOption = activeOptions.find(opt => opt.optionId === availabilityProductOptionId);
-    if (!selectedOption) return null;
-    const tourStartTime = parseISO(selectedAvailability.dateTime);
-    const itinerary = getEffectiveItinerary(selectedOption, tourStartTime);
-    const hasItinerary = itinerary && itinerary.length > 0 && product.destinations && product.destinations.length > 0;
-    if (!hasItinerary || !product.destinations || !itinerary) return null;
-    
-    const itineraryItems: ItineraryDisplayStep[] = [];
-    const destinationMap = new Map(product.destinations.map(d => [d.name, d]));
-    const pickupOffsetMinutes = pickupLocationSkipped ? 0 : (selectedPickupLocation?.pickupTimeOffsetMinutes ?? 0);
-    const actualPickupTime = pickupOffsetMinutes > 0
-      ? new Date(tourStartTime.getTime() + pickupOffsetMinutes * 60 * 1000)
-      : tourStartTime;
-    let pickupTimeDisplay: string;
-    if (pickupLocationSkipped && maxTimeOffsetMinutes > 0) {
-      const latestPickupTime = new Date(tourStartTime.getTime() + maxTimeOffsetMinutes * 60 * 1000);
-      pickupTimeDisplay = `${formatInTimeZone(tourStartTime, companyTimezone, 'h:mm a')} - ${formatInTimeZone(latestPickupTime, companyTimezone, 'h:mm a')}`;
-    } else {
-      pickupTimeDisplay = formatInTimeZone(actualPickupTime, companyTimezone, 'h:mm a');
-    }
-    const pickupPlace = pickupLocationSkipped || !selectedPickupLocation ? 'your_pickup_location' : selectedPickupLocation.name;
-    itineraryItems.push({ stepType: StepType.pickup, time: pickupTimeDisplay, place: pickupPlace });
-    let lastDepartureTime = tourStartTime;
-    itinerary.forEach((itineraryItem, index) => {
-      const destination = destinationMap.get(itineraryItem.destinationName);
-      if (!destination) return;
-      const arrivalTime = new Date(lastDepartureTime.getTime() + (itineraryItem.travelTimeFromPreviousHours * 60 * 60 * 1000));
-      itineraryItems.push({
-        stepType: StepType.arrive,
-        time: formatInTimeZone(arrivalTime, companyTimezone, 'h:mm a'),
-        place: destination.name
-      });
-      const departureTime = itineraryItem.durationHours
-        ? new Date(arrivalTime.getTime() + (itineraryItem.durationHours * 60 * 60 * 1000))
-        : arrivalTime;
-      const hasMoreDestinations = index < itinerary.length - 1;
-      if (itineraryItem.durationHours && hasMoreDestinations) {
-        itineraryItems.push({
-          stepType: StepType.depart,
-          time: formatInTimeZone(departureTime, companyTimezone, 'h:mm a'),
-          place: destination.name
-        });
-      }
-      lastDepartureTime = departureTime;
-    });
-    // Return time: from selected return option (products with return selection) OR from itinerary's last departure (e.g. Emerald Lake shuttle with fixed multi-stop itinerary)
-    const returnDateTime = selectedReturnOption
-      ? parseISO(selectedReturnOption.dateTime)
-      : lastDepartureTime;
-    const lastDestination = itinerary.length > 0 ? destinationMap.get(itinerary[itinerary.length - 1].destinationName) : null;
-    const lastDestName = itinerary.length > 0 && product.destinations
-      ? (destinationMap.get(itinerary[itinerary.length - 1].destinationName)?.name ?? null)
-      : null;
-    const getDropOffMinutes = (loc: { travelMinutesFromDestination?: Record<string, number> }) => {
-      if (lastDestName && loc.travelMinutesFromDestination?.[lastDestName] != null) return loc.travelMinutesFromDestination[lastDestName];
-      return 0;
-    };
-    const hasDropOffEstimate = (loc: { travelMinutesFromDestination?: Record<string, number> }) =>
-      Boolean(lastDestName && loc.travelMinutesFromDestination?.[lastDestName] != null);
-    const dropOffPlace = pickupLocationSkipped || !selectedPickupLocation ? 'your_pickup_location' : selectedPickupLocation!.name;
-
-    if (selectedReturnOption) {
-      itineraryItems.push({
-        stepType: StepType.depart,
-        time: formatInTimeZone(returnDateTime, companyTimezone, 'h:mm a'),
-        place: lastDestination?.name ?? 'the_destination'
-      });
-    } else if (lastDestination) {
-      // No return options: show depart from last stop (e.g. Vermillion Lakes for Emerald Lake shuttle)
-      itineraryItems.push({
-        stepType: StepType.depart,
-        time: formatInTimeZone(returnDateTime, companyTimezone, 'h:mm a'),
-        place: lastDestination.name
-      });
-    }
-    // Add drop-off step (works for both return-option products and itinerary-only products like Emerald Lake)
-    if (selectedPickupLocation && hasDropOffEstimate(selectedPickupLocation)) {
-      const dropOffOffsetMinutes = getDropOffMinutes(selectedPickupLocation);
-      const dropOffTime = new Date(returnDateTime.getTime() + dropOffOffsetMinutes * 60 * 1000);
-      itineraryItems.push({
-        stepType: StepType.drop_off,
-        time: formatInTimeZone(dropOffTime, companyTimezone, 'h:mm a'),
-        place: dropOffPlace
-      });
-    } else if (pickupLocationSkipped || !selectedPickupLocation) {
-      itineraryItems.push({ stepType: StepType.drop_off, time: 'TBD', place: dropOffPlace });
-    } else if (product.pickupLocations?.length) {
-      const dropOffOffsets = product.pickupLocations.map(getDropOffMinutes);
-      const [minOffset, maxOffset] = [Math.min(...dropOffOffsets), Math.max(...dropOffOffsets)];
-      const earliestDropOff = new Date(returnDateTime.getTime() + minOffset * 60 * 1000);
-      const latestDropOff = new Date(returnDateTime.getTime() + maxOffset * 60 * 1000);
-      itineraryItems.push({
-        stepType: StepType.drop_off,
-        time: minOffset === maxOffset
-          ? formatInTimeZone(earliestDropOff, companyTimezone, 'h:mm a')
-          : `${formatInTimeZone(earliestDropOff, companyTimezone, 'h:mm a')} - ${formatInTimeZone(latestDropOff, companyTimezone, 'h:mm a')}`,
-        place: dropOffPlace
-      });
-    } else {
-      itineraryItems.push({ stepType: StepType.drop_off, time: 'TBD', place: dropOffPlace });
-    }
-    return itineraryItems;
-  }, [selectedAvailability, selectedReturnOption, selectedPickupLocation, pickupLocationSkipped, activeOptions, product, getEffectiveItinerary, companyTimezone, maxTimeOffsetMinutes]);
-
-  /**
-   * Itinerary for storage only (API/DB). When pickup is unknown, pickup step time is always a range
-   * (e.g. "9 AM - 10:00 AM") so /manage and confirmation email show it; drop-off stays TBD.
-   * UI during booking is unchanged (uses computeItineraryDisplay).
-   */
-  const computeItineraryDisplayForStorage = useCallback((): ItineraryDisplayStep[] | null => {
-    const base = computeItineraryDisplay();
-    if (!base || base.length === 0) return base;
-    const pickupUnknown = pickupLocationSkipped || (!selectedPickupLocation && product.pickupLocations && product.pickupLocations.length > 0);
-    if (!pickupUnknown) return base;
-    const tourStartTime = selectedAvailability ? parseISO(selectedAvailability.dateTime) : null;
-    if (!tourStartTime) return base;
-    const rangeMinutes = maxTimeOffsetMinutes > 0 ? maxTimeOffsetMinutes : 60;
-    const latestPickupTime = new Date(tourStartTime.getTime() + rangeMinutes * 60 * 1000);
-    const startStr = formatInTimeZone(tourStartTime, companyTimezone, 'h:mm a');
-    const endStr = formatInTimeZone(latestPickupTime, companyTimezone, 'h:mm a');
-    const pickupRangeTime = startStr === endStr ? startStr : `${startStr} - ${endStr}`;
-    return base.map((step, i) =>
-      i === 0 && step.stepType === StepType.pickup && step.place === 'your_pickup_location'
-        ? { ...step, time: pickupRangeTime }
-        : step
-    );
-  }, [computeItineraryDisplay, pickupLocationSkipped, selectedPickupLocation, product.pickupLocations, selectedAvailability, companyTimezone, maxTimeOffsetMinutes]);
-
-  // Product has fees from config (e.g. product-fees.json); API sends these in pricingConfig.fees
-  const hasFees = useMemo(() =>
-    Boolean(pricingConfig?.fees && Object.keys(pricingConfig.fees).length > 0 && Object.values(pricingConfig.fees).some(v => (v?.feePerPerson ?? 0) > 0)),
-    [pricingConfig?.fees]
-  );
-  
-  // Ticket prices: use breakdown final price so booking flow total matches the price breakdown. All conversion in mid-layer.
-  const pricing = useMemo(() => {
-    if (!selectedAvailability || !pricingConfig) return [];
-    const optionId = selectedAvailability.productOptionId;
-    const selectedOption = activeOptions.find(opt => opt.optionId === optionId);
-    const precomputed = optionId ? precomputedPricesByOption?.[optionId] : undefined;
-    const rateToDisplayPrice = (backendInDisplayCurrency: number) =>
-      getDisplayPriceFromBaseInDisplayCurrency(backendInDisplayCurrency, currency, pricingConfig, hasFees);
-    const getBaseInDisplayCurrency = (category: string) => {
-      const fromPrecomputed = precomputed?.[category]?.[currency];
-      if (fromPrecomputed != null) return fromPrecomputed;
-      return 0;
-    };
-    const buildRate = (
-      category: string,
-      backendPriceCAD: number,
-      backendInDisplayCurrency: number,
-      baseInDisplayCurrency: number,
-      appliedAdjustments: Array<{ type: string; id: string; name: string; changeByCurrency?: Record<string, number> }>
-    ) => {
-      const basePriceCAD = selectedOption?.pricing?.[category.toUpperCase()] ?? 0;
-      const isPublicMode = isSimplifiedPricingView;
-      const breakdown = computePriceBreakdown(
-        pricingConfig,
-        currency,
-        backendPriceCAD,
-        basePriceCAD,
-        hasFees,
-        appliedAdjustments,
-        undefined,
-        baseInDisplayCurrency,
-        isPublicMode
-      );
-      const price = breakdown?.finalPrice ?? rateToDisplayPrice(backendInDisplayCurrency);
-      return { category, baseInDisplayCurrency, appliedAdjustments, price, priceCAD: backendPriceCAD };
-    };
-    return selectedAvailability.rates?.map(rate => {
-      const backendPriceCAD = rate.price ?? 0;
-      const backendInDisplayCurrency = rate.priceByCurrency?.[currency] ?? (currency === 'CAD' ? backendPriceCAD : 0);
-      const baseInDisplayCurrency = getBaseInDisplayCurrency(rate.category);
-      const built = buildRate(rate.category, backendPriceCAD, backendInDisplayCurrency, baseInDisplayCurrency, rate.appliedAdjustments ?? rate.applied_adjustments ?? []);
-      return {
-        category: rate.category,
-        rateId: rate.rateId || rate.category,
-        available: rate.available,
-        price: built.price,
-        priceCAD: built.priceCAD,
-        baseInDisplayCurrency: built.baseInDisplayCurrency,
-        appliedAdjustments: built.appliedAdjustments,
-      };
-    }) || selectedAvailability.pricesByCategory?.retailPrices?.map(p => {
-      const priceCADFromApi = p.price / 100;
-      const baseInDisplayCurrency = getBaseInDisplayCurrency(p.category);
-      const backendInDisplayCurrency = currency === 'CAD' ? priceCADFromApi : 0;
-      const built = buildRate(p.category, priceCADFromApi, backendInDisplayCurrency, baseInDisplayCurrency, []);
-      return {
-        category: p.category,
-        rateId: p.category,
-        available: selectedAvailability.vacancies,
-        price: built.price,
-        priceCAD: built.priceCAD,
-        baseInDisplayCurrency: built.baseInDisplayCurrency,
-        appliedAdjustments: built.appliedAdjustments,
-      };
-    }) || [];
-  }, [selectedAvailability, currency, hasFees, pricingConfig, precomputedPricesByOption, activeOptions, isSimplifiedPricingView]);
-
-  // Price breakdown: mid-layer returns line items (base + one per rule/deal). UI renders each line; rate in brackets when used.
-  const getPriceBreakdown = useCallback((category: string, priceCAD: number, baseInDisplayCurrency: number | undefined, appliedAdjustments: Array<{ type: string; id: string; name: string; changeByCurrency?: Record<string, number> }> = []): PriceBreakdownData | null => {
-    if (!pricingConfig) return null;
-    const selectedOption = activeOptions.find(opt => opt.optionId === selectedAvailability?.productOptionId);
-    const basePriceCAD = selectedOption?.pricing?.[category.toUpperCase()] ?? 0;
-    const isPublicMode = isSimplifiedPricingView;
-    return computePriceBreakdown(
-      pricingConfig,
-      currency,
-      priceCAD,
-      basePriceCAD,
-      hasFees,
-      appliedAdjustments,
-      undefined,
-      baseInDisplayCurrency,
-      isPublicMode
-    );
-  }, [pricingConfig, currency, hasFees, activeOptions, selectedAvailability, isSimplifiedPricingView]);
-  
-  // Order summary from mid-layer; UI only displays these values (no calculations).
-  const orderSummary: OrderSummary = useMemo(
-    () =>
-      computeOrderSummary(
-        quantities,
-        pricing,
-        selectedReturnOption,
-        pricingConfig ?? null,
-        currency,
-        hasFees,
-        cancellationPolicyId
-      ),
-    [quantities, pricing, selectedReturnOption, pricingConfig, currency, hasFees, cancellationPolicyId]
-  );
-  const { totalQuantity, subtotal, tax, total: totalFromSummary, feeLineItems, returnPriceAdjustment, cancellationPolicyFee, isTaxIncludedInPrice, ticketLineItems } = orderSummary;
-  const selectedCancellationPolicy = pricingConfig?.cancellationPolicies?.find((p) => p.id === cancellationPolicyId);
-
-  // Add-on totals (lunch, animals, etc.)
-  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]);
-
-  // Effective subtotal includes add-ons (for promo discount and total)
-  const effectiveSubtotal = subtotal + addOnTotal;
-
-  // Fee line items including add-ons (for PriceSummary and CheckoutModal)
-  const feeLineItemsWithAddOns = useMemo(() => {
-    const addOnLines = 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 qty = sel.quantity ?? 1;
-        const amt = (base + adj) * qty;
-        const variantLabel = hasVariant ? addOn.variants?.find((v) => v.id === sel.variantId)?.label : null;
-        const name = variantLabel ? `${addOn.name} (${variantLabel})${qty > 1 ? ` × ${qty}` : ''}` : addOn.name;
-        return { name, totalAmount: amt, description: addOn.description ?? undefined };
-      })
-      .filter((x): x is NonNullable<typeof x> => x != null);
-    return [...feeLineItems, ...addOnLines];
-  }, [feeLineItems, addOnSelections, addOns]);
-
-  // Promo discount from backend (order-level only; rates are pre-promo)
-  const [promoDiscountAmount, setPromoDiscountAmount] = useState(0);
-  const [isGiftCard, setIsGiftCard] = useState(false);
-  const [isVoucher, setIsVoucher] = useState(false);
-  useEffect(() => {
-    if (!appliedPromoCode || !selectedAvailability || totalQuantity === 0) {
-      setPromoDiscountAmount(0);
-      setIsGiftCard(false);
-      setIsVoucher(false);
-      return;
-    }
-    const companyId = product.companyId;
-    if (!companyId) {
-      setPromoDiscountAmount(0);
-      return;
-    }
-    const optionId = selectedAvailability.productOptionId;
-    if (!optionId) {
-      setPromoDiscountAmount(0);
-      return;
-    }
-    const items = ticketLineItems.map((l) => ({ category: l.category, qty: l.qty }));
-    if (items.length === 0) {
-      setPromoDiscountAmount(0);
-      return;
-    }
-    let cancelled = false;
-    getPromoDiscount(
-      appliedPromoCode,
-      companyId,
-      product.productId,
-      optionId,
-      currency,
-      items,
-      selectedAvailability.dateTime,
-      effectiveSubtotal
-    )
-      .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, selectedAvailability, ticketLineItems, totalQuantity, product.companyId, product.productId, currency, effectiveSubtotal]);
-
-  // Percentage/fixed promos: tax on discounted amount (promo before GST per CRA guidance).
-  // Vouchers and gift cards: tax on full subtotal (voucher discount includes tax on free portion; gift card is payment).
-  const taxOnSubtotal = isTaxIncludedInPrice ? 0 : effectiveSubtotal * (pricingConfig?.taxRate ?? 0);
-  const effectiveTax =
-    promoDiscountAmount > 0 && !isGiftCard && !isVoucher
-      ? (effectiveSubtotal - promoDiscountAmount) * (pricingConfig?.taxRate ?? 0)
-      : taxOnSubtotal;
-  const totalPrice = effectiveSubtotal + effectiveTax - promoDiscountAmount;
-
-  // Auto-select product option when date is selected: most popular if set, otherwise first available
-  useEffect(() => {
-    if (selectedDate && timesForSelectedDate.length > 0 && !selectedAvailability) {
-      const mostPopularOption = activeOptions.find(opt => opt.mostPopular);
-      const candidate = mostPopularOption
-        ? timesForSelectedDate.find(avail => avail.productOptionId === mostPopularOption.optionId && avail.vacancies > 0)
-        : null;
-      const fallback = timesForSelectedDate.find(avail => avail.vacancies > 0);
-      const toSelect = candidate ?? fallback;
-      if (toSelect) {
-        setSelectedAvailability(toSelect);
-        setError('');
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedDate, timesForSelectedDate.length, activeOptionIdsKey, selectedAvailability]);
-
-  // Currency change does NOT trigger a refetch. Backend returns per-currency data (priceByCurrency,
-  // changeByCurrency, feesByCurrency, precomputedPrices, etc.) in one response; we just
-  // re-render with the new currency and pick the right values.
-
-  // Sync selectedAvailability when the availabilities list changes (e.g. after refetch for new date range)
-  useEffect(() => {
-    if (selectedAvailability && availabilities.length > 0) {
-      const updatedAvailability = availabilities.find(
-        avail =>
-          avail.dateTime === selectedAvailability.dateTime &&
-          avail.productOptionId === selectedAvailability.productOptionId
-      );
-      if (updatedAvailability) {
-        setSelectedAvailability(updatedAvailability);
-        
-        // Also update selectedReturnOption if it exists
-        if (selectedReturnOption && updatedAvailability.returnOptions) {
-          const updatedReturnOption = updatedAvailability.returnOptions.find(
-            opt => opt.returnAvailabilityId === selectedReturnOption.returnAvailabilityId
-          );
-          if (updatedReturnOption) {
-            setSelectedReturnOption(updatedReturnOption);
-          }
-        }
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [availabilities]); // Update when availabilities change (selectedAvailability/selectedReturnOption intentionally excluded to avoid loops)
-
-  // Auto-select first return option (by time) when pickup time is selected
-  useEffect(() => {
-    if (selectedAvailability?.returnOptions && selectedAvailability.returnOptions.length > 0 && !selectedReturnOption) {
-      const sorted = [...selectedAvailability.returnOptions].sort(
-        (a, b) => parseISO(a.dateTime).getTime() - parseISO(b.dateTime).getTime()
-      );
-      const firstAvailable = sorted.find(opt => opt.vacancies > 0);
-      if (firstAvailable) {
-        setSelectedReturnOption(firstAvailable);
-      }
-    }
-  }, [selectedAvailability, selectedReturnOption]);
-
-  // Fetch add-ons when availability (product option) is selected; clear selections when option changes
-  const availabilityProductOptionId = selectedAvailability?.productOptionId ?? null;
-  const prevAvailabilityProductOptionIdRef = useRef<string | null>(null);
-  useEffect(() => {
-    if (!availabilityProductOptionId || !product.companyId) {
-      setAddOns([]);
-      setAddOnSelections([]);
-      return;
-    }
-    const optionChanged = prevAvailabilityProductOptionIdRef.current !== availabilityProductOptionId;
-    if (optionChanged) {
-      setAddOnSelections([]);
-      prevAvailabilityProductOptionIdRef.current = availabilityProductOptionId;
-    }
-    getAddOns(product.companyId, { productOptionId: availabilityProductOptionId, preCheckout: true })
-      .then(setAddOns)
-      .catch(() => setAddOns([]));
-  }, [availabilityProductOptionId, product.companyId]);
-
-  // Auto-select first cancellation policy (e.g. "standard" with fee=0) when pricing config loads
-  useEffect(() => {
-    if (pricingConfig?.cancellationPolicies && pricingConfig.cancellationPolicies.length > 0 && !cancellationPolicyId) {
-      // Select first policy by default (should be "standard" with fee 0)
-      setCancellationPolicyId(pricingConfig.cancellationPolicies[0].id);
-    }
-  }, [pricingConfig?.cancellationPolicies, cancellationPolicyId]);
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const handleDateSelect = (_date: string) => {
-    // Clear selected availability when date changes
-    setSelectedAvailability(null);
-    setSelectedReturnOption(null); // Clear return selection when changing date
-  };
-
-  const handleTimeSelect = (availability: Availability) => {
-    setSelectedAvailability(availability);
-    setSelectedReturnOption(null); // Clear return selection when changing start time
-    setError('');
-  };
-
-  const handleQuantityChange = (category: string, delta: number) => {
-    const maxAvailable = selectedAvailability?.vacancies || 0;
-    const currentQty = quantities[category] || 0;
-    const newQty = Math.max(0, currentQty + delta);
-    // Admin can overbook; non-admin cannot exceed vacancies
-    if (delta > 0 && !isAdmin && orderSummary.totalQuantity >= maxAvailable) {
-      return;
-    }
-    setQuantities(prev => ({
-      ...prev,
-      [category]: newQty,
-    }));
-    setError('');
-  };
-
-  const lastValidatedInputRef = useRef<string | null>(null);
-
-  // Selected availability has a deal applied (promo codes not allowed with deals; vouchers/gift cards still allowed; dynamic pricing alone is ok)
-  const hasOngoingDiscount = useMemo(
-    () =>
-      selectedAvailability?.rates?.some((r) =>
-        (r.appliedAdjustments ?? r.applied_adjustments ?? []).some((a) => (a.type ?? '').toLowerCase() === 'deal')
-      ) ?? false,
-    [selectedAvailability]
-  );
-
-  const handleApplyPromo = useCallback(async () => {
-    const code = promoCodeInput.trim().toUpperCase();
-    if (!code) return;
-    if (appliedPromoCode === code) return; // Already applied, skip API call
-    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]);
-
-  // When user selects a time with ongoing discount and has a promo applied, re-validate and clear if promo can't be stacked
-  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]);
-
-  // Ref to avoid effect re-running when handleApplyPromo identity changes (t changes every render)
-  const handleApplyPromoRef = useRef(handleApplyPromo);
-  handleApplyPromoRef.current = handleApplyPromo;
-
-  // Auto-apply promo when user stops typing (mobile-friendly, no Enter key needed)
-  useEffect(() => {
-    const trimmed = promoCodeInput.trim().toUpperCase();
-    if (!trimmed) return;
-    if (appliedPromoCode === trimmed) return;
-    if (promoCodeValidating) return;
-    // Don't re-validate the same invalid input (prevents infinite loop when user sits on "BL...")
-    if (lastValidatedInputRef.current === trimmed) return;
-
-    const timer = setTimeout(() => {
-      handleApplyPromoRef.current();
-    }, 600);
-
-    return () => clearTimeout(timer);
-  }, [promoCodeInput, appliedPromoCode, promoCodeValidating]);
-
-  const handleCheckout = async () => {
-    if (!selectedAvailability || totalQuantity === 0) {
-      setError(t('booking.selectTimeAndTickets'));
-      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;
-      }
-    }
-    
-    // Allow checkout if pickup location is selected OR if user chose "I don't know"
-    if (product.pickupLocations && product.pickupLocations.length > 0 && !pickupLocationId && !pickupLocationSkipped) {
-      setError(t('booking.selectPickupLocation'));
-      return;
-    }
-
-    setLoading(true);
-    setError('');
-
-    try {
-      const bookingItems = Object.entries(quantities)
-        .filter(([, count]) => count > 0)
-        .map(([category, count]) => ({ category, count }));
-
-      // Get the productOptionId from the selected availability (we tagged it when fetching)
-      const availabilityProductOptionId = selectedAvailability.productOptionId 
-        || activeOptions[0]?.optionId;
-      
-      if (!availabilityProductOptionId) {
-        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;
-        await onChangeBooking({
-          productId: availabilityProductOptionId,
-          dateTime: selectedAvailability.dateTime,
-          bookingItems,
-          returnAvailabilityId: selectedReturnOption?.returnAvailabilityId ?? null,
-          pickupLocationId: pickupLocationId ?? null,
-          travelerHotel: selectedPickupLocation?.name ?? initialBooking?.travelerHotel ?? null,
-          startTime: selectedAvailability.dateTime ?? null,
-          passengerCount: isPrivateShuttle ? Object.values(quantities).reduce((a, b) => a + b, 0) : null,
-          cancellationPolicyId: cancellationPolicyId ?? initialBooking?.cancellationPolicyId ?? null,
-          addOnSelections: addOnSelections.length > 0 ? addOnSelections : null,
-          promoCode: appliedPromoCode ?? null,
-          newTotalAmount: keepOriginalPrice ? undefined : totalPrice,
-          keepOriginalPrice: keepOriginalPrice || undefined,
-        });
-        setLoading(false);
-        return;
-      }
-
-      // 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: availabilityProductOptionId, // GetYourGuide passes productOptionId values in productId field
-        dateTime: selectedAvailability.dateTime,
-        bookingItems,
-        pickupLocationId: pickupLocationId || undefined,
-        returnAvailabilityId: selectedReturnOption?.returnAvailabilityId,
-        currency: currency,
-        promoCode: appliedPromoCode || undefined,
-        cancellationPolicyId: cancellationPolicyId || undefined,
-        addOnSelections: addOnSelections.length > 0 ? addOnSelections : 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 || undefined,
-        // For standard bookings, backend calculates startTime from availability + pickup location offset
-        // When pickup location is skipped, backend will store null for startTime
-      });
-
-      if (!reservation || !reservation.reservationReference) {
-        throw new Error('Invalid reservation response: missing reservationReference');
-      }
-
-      // Call onSuccess callback if provided (before checkout redirect)
-      onSuccess?.({
-        reservationReference: reservation.reservationReference,
-      });
-
-      // Update stored booking data with reservation reference
-      try {
-        const storedBooking = sessionStorage.getItem('pendingBooking');
-        if (storedBooking) {
-          const booking = JSON.parse(storedBooking);
-          booking.reservationReference = reservation.reservationReference;
-          booking.totalPrice = reservation.totalAmount || totalPrice;
-          booking.currency = reservation.currency || currency || selectedAvailability.currency || 'CAD';
-          sessionStorage.setItem('pendingBooking', JSON.stringify(booking));
-        }
-      } catch (e) {
-        console.warn('Failed to update booking data', e);
-      }
-
-      // Create Payment Intent for embedded checkout modal (order summary with strikethrough + green, Payment Element)
-      const datePart = selectedAvailability.dateTime.split('T')[0];
-      const timePart = selectedAvailability.dateTime.split('T')[1]?.substring(0, 5) || '00:00';
-      
-      // Itinerary for storage: when pickup unknown, pickup step is always a range (e.g. "9 AM - 10:00 AM") so /manage and email show it; drop-off stays TBD
-      const itineraryDisplay = computeItineraryDisplayForStorage() ?? computeItineraryDisplay();
-
-      // Build checkout breakdown from the exact same values we show in the UI and Stripe modal.
-      // Backend will charge totalAmount and store this as the receipt so /manage matches.
-      const taxForBreakdown = promoDiscountAmount > 0 ? effectiveTax : tax;
-      const lines = [
-        ...ticketLineItems.map((line) => ({
-          label: line.category,
-          amount: line.itemTotal,
-          type: 'TICKET' as const,
-          quantity: line.qty,
-        })),
-        ...(returnPriceAdjustment !== 0
-          ? [
-              {
-                label: `${t('booking.returnOption') || 'Return option'} (${totalQuantity} ${totalQuantity === 1 ? (t('booking.person') || 'person') : (t('booking.people') || 'people')})`,
-                amount: returnPriceAdjustment,
-                type: 'RETURN_OPTION' as const,
-                quantity: totalQuantity,
-              },
-            ]
-          : []),
-        ...(cancellationPolicyFee > 0
-          ? [
-              {
-                label: selectedCancellationPolicy?.label ?? (t('booking.flexibleCancellation') || 'Flexible cancellation'),
-                amount: cancellationPolicyFee,
-                type: 'CANCELLATION_UPGRADE' as const,
-              },
-            ]
-          : []),
-        ...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 qty = sel.quantity ?? 1;
-            const amt = (base + adj) * qty;
-            const variantLabel = hasVariant ? addOn.variants?.find((v) => v.id === sel.variantId)?.label : null;
-            return {
-              label: variantLabel ? `${addOn.name} (${variantLabel})${qty > 1 ? ` × ${qty}` : ''}` : addOn.name,
-              amount: amt,
-              type: 'FEE' as const,
-              quantity: qty,
-            };
-          })
-          .filter((x): x is NonNullable<typeof x> => x != null),
-        ...feeLineItems.map((fee) => ({
-          label: `${fee.name} (${totalQuantity} ${totalQuantity === 1 ? (t('booking.person') || 'person') : (t('booking.people') || 'people')})`,
-          amount: fee.totalAmount,
-          type: 'FEE' as const,
-          quantity: totalQuantity,
-        })),
-        ...(!isTaxIncludedInPrice && taxForBreakdown > 0
-          ? [
-              {
-                label: t('booking.tax') !== 'booking.tax' ? t('booking.tax') : 'Taxes and fees',
-                amount: taxForBreakdown,
-                type: 'TAX' as const,
-              },
-            ]
-          : []),
-        ...(promoDiscountAmount > 0
-          ? [
-              {
-                label: appliedPromoCode ? `Promo: ${appliedPromoCode}` : (t('booking.discount') || 'Discount'),
-                amount: -promoDiscountAmount,
-                type: isGiftCard ? 'GIFT_CARD' : 'PROMO_CODE',
-              },
-            ]
-          : []),
-      ];
-      const checkoutBreakdown = buildCheckoutBreakdown({
-        lines,
-        totalAmount: totalPrice,
-        currency,
-        roundingLabel: t('booking.rounding') || 'Rounding',
-      });
-      
-      const paymentIntent = await createPaymentIntent({
-        productId: product.productId,
-        optionId: availabilityProductOptionId,
-        date: datePart,
-        time: timePart,
-        quantity: totalQuantity,
-        customerEmail: email,
-        customerFirstName: firstName.trim() || undefined,
-        customerLastName: lastName.trim() || undefined,
-        currency: currency,
-        reservationReference: reservation.reservationReference,
-        travelerHotel: selectedPickupLocation?.name || undefined,
-        pickupLocationId: pickupLocationId || undefined,
-        itineraryDisplay: itineraryDisplay ?? undefined,
-        returnAvailabilityId: selectedReturnOption?.returnAvailabilityId,
-        promoCode: appliedPromoCode || undefined,
-        cancellationPolicyId: cancellationPolicyId || undefined,
-        termsAcceptedAt: termsAcceptedAt ?? undefined,
-        checkoutBreakdown,
-        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: availabilityProductOptionId,
-          date: datePart,
-          time: timePart,
-          customerEmail: email || undefined,
-          customerFirstName: firstName.trim() || undefined,
-          customerLastName: lastName.trim() || undefined,
-          currency: currency,
-          travelerHotel: selectedPickupLocation?.name || undefined,
-          pickupLocationId: pickupLocationId || undefined,
-          itineraryDisplay: itineraryDisplay ?? undefined,
-          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;
-      }
-
-      // Admin: show choice to pay now or confirm without payment (customer owes full balance)
-      if (isAdmin) {
-        setError('');
-        setAdminChoiceData({
-          reservationReference: reservation.reservationReference,
-          checkoutBreakdown,
-          totalAmount: totalPrice,
-          datePart,
-          timePart,
-          availabilityProductOptionId,
-          itineraryDisplay: itineraryDisplay ?? undefined,
-          clientSecret: paymentIntent.clientSecret ?? '',
-          ticketLinesForModal: ticketLineItems.map((line) => {
-            const rate = pricing.find((r) => r.category === line.category);
-            const breakdown = getPriceBreakdown(
-              line.category,
-              rate?.priceCAD ?? 0,
-              rate?.baseInDisplayCurrency,
-              rate?.appliedAdjustments ?? []
-            );
-            return { line, breakdown };
-          }),
-          feeLineItems: feeLineItemsWithAddOns,
-          returnPriceAdjustment,
-          cancellationPolicyFee,
-          cancellationPolicyLabel: selectedCancellationPolicy?.label,
-          subtotal: effectiveSubtotal,
-          tax: promoDiscountAmount > 0 ? effectiveTax : tax,
-          totalQuantity,
-          isTaxIncludedInPrice,
-          taxRate: pricingConfig?.taxRate ?? 0,
-          promoDiscountAmount: promoDiscountAmount > 0 ? promoDiscountAmount : 0,
-          discountLabel: appliedPromoCode ? `Promo: ${appliedPromoCode}` : undefined,
-        });
-        setShowAdminPaymentChoice(true);
-        setLoading(false);
-        return;
-      }
-
-      const ticketLinesForModal: CheckoutModalLineItem[] = ticketLineItems.map((line) => {
-        const rate = pricing.find((r) => r.category === line.category);
-        const breakdown = getPriceBreakdown(
-          line.category,
-          rate?.priceCAD ?? 0,
-          rate?.baseInDisplayCurrency,
-          rate?.appliedAdjustments ?? []
-        );
-        return { line, breakdown };
-      });
-
-      setCheckoutClientSecret(paymentIntent.clientSecret ?? '');
-      setCheckoutModalData({
-        reservationReference: reservation.reservationReference,
-        customerLastName: lastName.trim(),
-        ticketLines: ticketLinesForModal,
-        feeLineItems: feeLineItemsWithAddOns,
-        returnPriceAdjustment,
-        cancellationPolicyFee,
-        cancellationPolicyLabel: selectedCancellationPolicy?.label,
-        subtotal: effectiveSubtotal,
-        tax: promoDiscountAmount > 0 ? effectiveTax : tax,
-        total: totalPrice,
-        totalQuantity,
-        isTaxIncludedInPrice,
-        taxRate: pricingConfig?.taxRate ?? 0,
-        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: adminChoiceData.availabilityProductOptionId,
-        date: adminChoiceData.datePart,
-        time: adminChoiceData.timePart,
-        customerEmail: email || undefined,
-        customerFirstName: firstName.trim() || undefined,
-        customerLastName: lastName.trim() || undefined,
-        currency: currency,
-        travelerHotel: product.pickupLocations?.find(loc => loc.id === pickupLocationId)?.name || undefined,
-        pickupLocationId: pickupLocationId || undefined,
-        itineraryDisplay: adminChoiceData.itineraryDisplay ?? undefined,
-        termsAcceptedAt: termsAcceptedAt ?? undefined,
-        skipConfirmationCommunications: skipConfirmationCommunications ? true : undefined,
-        disableAutoCommunications: disableAutoCommunications ? true : undefined,
-        checkoutBreakdown: adminChoiceData.checkoutBreakdown,
-        depositAmount: 0,
-        balanceAmount: adminChoiceData.totalAmount,
-        totalAmount: adminChoiceData.totalAmount,
-      });
-      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 handlePayNow = () => {
-    if (!adminChoiceData) return;
-    setShowAdminPaymentChoice(false);
-    setCheckoutClientSecret(adminChoiceData.clientSecret);
-    setCheckoutModalData({
-      reservationReference: adminChoiceData.reservationReference,
-      customerLastName: lastName.trim(),
-      ticketLines: adminChoiceData.ticketLinesForModal,
-      feeLineItems: adminChoiceData.feeLineItems,
-      returnPriceAdjustment: adminChoiceData.returnPriceAdjustment,
-      cancellationPolicyFee: adminChoiceData.cancellationPolicyFee,
-      cancellationPolicyLabel: adminChoiceData.cancellationPolicyLabel,
-      subtotal: adminChoiceData.subtotal,
-      tax: adminChoiceData.tax,
-      total: adminChoiceData.totalAmount,
-      totalQuantity: adminChoiceData.totalQuantity,
-      isTaxIncludedInPrice: adminChoiceData.isTaxIncludedInPrice,
-      taxRate: adminChoiceData.taxRate,
-      promoDiscountAmount: adminChoiceData.promoDiscountAmount,
-      discountLabel: adminChoiceData.discountLabel,
-    });
-    setShowCheckoutModal(true);
-    setAdminChoiceData(null);
-  };
-
-  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 now or confirm without payment (full balance owed) */}
-      {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 now, or confirm without payment. The customer can pay the full balance 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={handlePayNow}
-                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 now (${formatCurrencyAmount(adminChoiceData.totalAmount, 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}
-          promoDiscountAmount={checkoutModalData.promoDiscountAmount ?? 0}
-          discountLabel={checkoutModalData.discountLabel}
-          totalQuantity={checkoutModalData.totalQuantity}
-          isTaxIncludedInPrice={checkoutModalData.isTaxIncludedInPrice}
-          taxRate={checkoutModalData.taxRate}
-          currency={currency}
-          locale={locale}
-          t={t}
-        />
-      )}
-      {/* 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 */}
-          <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={(date) => {
-                  setSelectedDate(date);
-                  handleDateSelect(date);
-                }}
-                timezone={companyTimezone}
-                earliestDate={earliestAvailabilityDate}
-                onVisibleRangeChange={handleVisibleRangeChange}
-                currency={currency}
-                showCapacity={isAdmin}
-              />
-            </div>
-          </div>
-
-          {/* Your itinerary box - shown after date selection, before pickup/return/tickets/pickup location */}
-          {selectedDate && (() => {
-            const hasItineraryAny = activeOptions.some(o => o.itinerary?.length) && (product.destinations?.length ?? 0) > 0;
-            if (!hasItineraryAny) return null;
-            if (!selectedAvailability) {
-              return (
-                <div 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="text-sm font-semibold text-stone-700 mb-2">
-                    <b>{t('booking.buildYourItinerary')}</b>
-                  </h3>
-                  <p className="text-sm text-stone-600">
-                    {t('booking.selectPickupTimeToSeeItinerary') || 'Select a pickup time below to see your schedule.'}
-                  </p>
-                </div>
-              );
-            }
-            
-            const itineraryItems = computeItineraryDisplay();
-            if (!itineraryItems || itineraryItems.length === 0) return null;
-            
-            // Check if booking is complete (all required selections made)
-            const isBookingComplete = selectedAvailability && 
-              selectedReturnOption && 
-              (pickupLocationId || pickupLocationSkipped || !product.pickupLocations || product.pickupLocations.length === 0) &&
-              Object.values(quantities).some(qty => qty > 0) &&
-              email.trim() !== '' &&
-              lastName.trim() !== '';
-
-            return (
-              <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 transition-all duration-300 ${isItinerarySticky ? 'text-base sm:text-lg mb-2 sm:mb-4' : 'text-lg sm:text-xl mb-4'}`}>
-                  {!isBookingComplete && (
-                    <svg className={`flex-shrink-0 text-stone-400 ${isItinerarySticky ? 'w-3 h-3 sm:w-4 sm:h-4' : 'w-4 h-4'}`} 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>
-                {itineraryItems.length > 0 && (
-                  <div className={`transition-all duration-700 ease-in-out ${isItinerarySticky ? 'flex items-center gap-0.5 sm:gap-1 flex-wrap' : 'space-y-1'}`}>
-                    {itineraryItems.map((item, index) => {
-                        const itemLabel = getStepLabel(item, t);
-                        const isUncertain =
-                          !item.time ||
-                          (!selectedPickupLocation &&
-                            !pickupLocationSkipped &&
-                            (item.stepType === StepType.pickup || item.stepType === StepType.drop_off));
-                        const hasTime = !!item.time;
-                        const isPlaceholder = item.stepType === StepType.trip_end && !item.time;
-                        const isPickupTime = index === 0 && item.stepType === StepType.pickup;
-                        const isApproximatePickupTime = isPickupTime && !selectedPickupLocation && !pickupLocationSkipped && product.pickupLocations && product.pickupLocations.length > 0;
-                        
-                        // Format time - remove "at" prefix and format distinctly
-                        let formattedTime = '';
-                        if (item.time) {
-                          formattedTime = item.time.replace(/^at /i, '');
-                          formattedTime = formattedTime.replace(/:00(?=\s*(AM|PM))/i, '');
-                        }
-                        
-                        // Helper function to abbreviate destinations
-                        const abbreviateDestination = (text: string): string => {
-                          const abbreviations: Record<string, string> = {
-                            'Moraine Lake': 'ML',
-                            'Lake Louise': 'LL',
-                            'Banff': 'B',
-                            'Jasper': 'J',
-                            'Canmore': 'C',
-                          };
-                          for (const [full, abbrev] of Object.entries(abbreviations)) {
-                            if (text.includes(full)) {
-                              return text.replace(full, abbrev);
-                            }
-                          }
-                          return text;
-                        };
-                        
-                        // When uncertain, the full label is already correct for i18n (getStepLabel uses t('booking.dropOffAt', { location })). Make the whole label clickable so we don't assume word order across languages.
-                        const isUncertainPickupOrDropOff =
-                          isUncertain && (item.stepType === StepType.pickup || item.stepType === StepType.drop_off);
-
-                        // Scroll handler for pickup location
-                        const handlePickupLocationClick = () => {
-                          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' });
-                          }
-                        };
-                        
-                        // For sticky mobile view: abbreviate destinations
-                        const getDisplayLabel = (label: string): string => {
-                          if (isItinerarySticky && isMobile) {
-                            // Mobile sticky: abbreviate destinations
-                            return abbreviateDestination(label);
-                          }
-                          return label;
-                        };
-                        
-                        const locationOnlyDisplay =
-                          item.place === 'your_pickup_location' ? t('booking.yourPickupLocation') : (item.place ?? '');
-                        const prefixKey =
-                          item.stepType === StepType.pickup ? 'booking.pickupAtPrefix' : 'booking.dropOffAtPrefix';
-
-                        const content = (
-                          <>
-                            {hasTime ? (
-                              <span className="inline-flex items-center gap-1.5 flex-wrap">
-                                <span className={`inline-flex items-center gap-1.5 shrink-0 ${(formattedTime === 'TBD' && isUncertain) || isApproximatePickupTime ? 'text-stone-400' : 'font-bold text-stone-900'}`}>
-                                  {(formattedTime === 'TBD' && isUncertain) && (
-                                    <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
-                                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                    </svg>
-                                  )}
-                                  {isApproximatePickupTime && formattedTime !== 'TBD' && (
-                                    <span className="relative inline-block" data-tooltip-icon>
-                                      <svg 
-                                        className="w-4 h-4 text-stone-400 cursor-pointer shrink-0" 
-                                        fill="none" 
-                                        stroke="currentColor" 
-                                        viewBox="0 0 24 24"
-                                        onClick={(e) => {
-                                          e.stopPropagation();
-                                          setShowTooltip(!showTooltip);
-                                        }}
-                                        onMouseEnter={() => !isMobile && setShowTooltip(true)}
-                                        onMouseLeave={() => !isMobile && setShowTooltip(false)}
-                                      >
-                                        <path 
-                                          strokeLinecap="round" 
-                                          strokeLinejoin="round" 
-                                          strokeWidth={2} 
-                                          d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" 
-                                        />
-                                      </svg>
-                                      {showTooltip && (
-                                        <span className={`absolute ${isMobile ? 'top-full mt-1 left-0 w-[280px]' : 'left-1/2 -translate-x-1/2 bottom-full mb-2'} whitespace-normal sm:whitespace-nowrap text-xs bg-stone-800 text-white px-3 py-2 rounded shadow-lg z-50 pointer-events-none sm:max-w-none`}>
-                                          Approximate time - will be finalized when you select a pickup location
-                                        </span>
-                                      )}
-                                    </span>
-                                  )}
-                                  <span className="shrink-0 font-bold">{formattedTime}</span>
-                                </span>
-                                <span className="text-stone-400 shrink-0">-</span>
-                                <span className="text-stone-600">
-                                  {isUncertainPickupOrDropOff ? (
-                                    <>
-                                      {t(prefixKey)}
-                                      <button
-                                        type="button"
-                                        onClick={handlePickupLocationClick}
-                                        className="text-stone-400 hover:text-stone-600 underline cursor-pointer"
-                                      >
-                                        {getDisplayLabel(locationOnlyDisplay)}
-                                      </button>
-                                    </>
-                                  ) : isUncertain ? (
-                                    <span className="text-stone-400 underline">{getDisplayLabel(itemLabel)}</span>
-                                  ) : (
-                                    getDisplayLabel(itemLabel)
-                                  )}
-                                </span>
-                              </span>
-                            ) : isPlaceholder ? (
-                              <span className="text-stone-400">{itemLabel}</span>
-                            ) : (
-                              <span className="inline-flex items-center gap-1.5 flex-wrap">
-                                <span className={`inline-flex items-center gap-1.5 shrink-0 ${isUncertain ? 'text-stone-400' : 'font-bold text-stone-900'}`}>
-                                  {isUncertain && (
-                                    <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
-                                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                    </svg>
-                                  )}
-                                  <span className="shrink-0 font-bold">TBD</span>
-                                </span>
-                                <span className="text-stone-400 shrink-0">-</span>
-                                <span className="text-stone-600">
-                                  {isUncertainPickupOrDropOff ? (
-                                    <>
-                                      {t(prefixKey)}
-                                      <button
-                                        type="button"
-                                        onClick={handlePickupLocationClick}
-                                        className="text-stone-400 hover:text-stone-600 underline cursor-pointer"
-                                      >
-                                        {getDisplayLabel(locationOnlyDisplay)}
-                                      </button>
-                                    </>
-                                  ) : (
-                                    <span className="text-stone-400 underline">{getDisplayLabel(itemLabel)}</span>
-                                  )}
-                                </span>
-                              </span>
-                            )}
-                          </>
-                        );
-                        
-                        if (isItinerarySticky) {
-                          return (
-                            <span key={index} className={`text-xs sm:text-sm ${isMobile ? '' : 'whitespace-nowrap'} break-words`}>
-                              {content}
-                              {index < itineraryItems.length - 1 && (
-                                <span className="mx-0.5 sm:mx-1 text-stone-400">
-                                  <svg className="w-3 h-3 sm:w-4 sm:h-4 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
-                                  </svg>
-                                </span>
-                              )}
-                            </span>
-                          );
-                        }
-                        
-                        return (
-                          <div key={index} className="text-sm leading-tight">
-                            {content}
-                          </div>
-                        );
-                    })}
-                  </div>
-                )}
-              </div>
-            );
-          })()}
-
-          {/* Select pickup time */}
-          {selectedDate && (
-            <div>
-              <label className="block text-sm font-medium text-stone-700 mb-2">
-                {t('booking.selectPickupTime')}
-              </label>
-              <div className="grid grid-cols-3 sm:grid-cols-6 gap-2">
-                {pickupTimes.map((timeInfo) => {
-                    const isSelected = selectedAvailability?.dateTime === timeInfo.dateTime;
-                    const isSoldOut = timeInfo.vacancies === 0;
-                    const canSelect = !isSoldOut || isAdmin;
-                    const option = timeInfo.productOptionId
-                      ? optionsMap.get(timeInfo.productOptionId)
-                      : undefined;
-                    const isMostPopular = pickupTimes.length > 1 && option?.mostPopular;
-                    // Use selectedAvailability for capacity when this slot is selected so it matches tickets line and overbooking message
-                    const capacitySource = isSelected && selectedAvailability ? selectedAvailability : timeInfo;
-                    const totalCap = capacitySource.totalCapacity ?? 0;
-                    const booked = capacitySource.bookedCapacity ?? (totalCap - (capacitySource.vacancies ?? 0));
-                    const showCapacity = isAdmin && totalCap > 0;
-                    return (
-                      <button
-                        key={timeInfo.dateTime}
-                        onClick={() => canSelect && handleTimeSelect(timeInfo)}
-                        disabled={!canSelect}
-                        className={`${hasAnyMostPopular ? 'pt-5 sm:pt-4' : 'pt-3'} pb-3 px-4 rounded-lg text-sm font-medium transition-all relative ${
-                          !canSelect
-                            ? 'bg-stone-100 text-stone-400 cursor-not-allowed'
-                            : isSoldOut && isAdmin
-                            ? 'bg-red-50 text-red-700 border border-red-200 hover:bg-red-100'
-                            : isSelected
-                            ? 'bg-emerald-600 text-white'
-                            : 'bg-stone-100 text-stone-700 hover:bg-stone-200'
-                        }`}
-                      >
-                        <div>{pickupLocationSkipped && timeInfo.displayTimeRange ? timeInfo.displayTimeRange : timeInfo.displayTime}</div>
-                        {showCapacity && !isSoldOut && (
-                          <div className={`text-xs mt-0.5 tabular-nums ${isSelected ? 'text-white' : 'text-stone-500'}`}>
-                            {booked} / {totalCap} capacity
-                          </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>
-                        )}
-                        {isSoldOut && (
-                          <div className="text-xs text-red-600 font-medium">
-                            {isAdmin && showCapacity
-                              ? `Sold out (${booked}/${totalCap} capacity)`
-                              : 'Sold out'}
-                          </div>
-                        )}
-                      </button>
-                    );
-                  })}
-              </div>
-            </div>
-          )}
-
-          {/* Select return time */}
-          {selectedAvailability && selectedAvailability.returnOptions && selectedAvailability.returnOptions.length > 0 && (
-            <div>
-              <label className="block text-sm font-medium text-stone-700 mb-4">
-                {t('booking.selectReturnTime') || 'Select Return Time'}
-              </label>
-
-              <div className="space-y-2">
-                {(() => {
-                  const sortedReturnOptions = [...(selectedAvailability.returnOptions || [])].sort((a, b) => {
-                    const timeA = parseISO(a.dateTime).getTime();
-                    const timeB = parseISO(b.dateTime).getTime();
-                    return timeA - timeB;
-                  });
-                  return sortedReturnOptions.map((returnOption, index) => {
-                  const returnDateTime = parseISO(returnOption.dateTime);
-                  const displayTime = formatInTimeZone(returnDateTime, companyTimezone, 'h:mm a');
-                  const isSelected = selectedReturnOption?.returnAvailabilityId === returnOption.returnAvailabilityId;
-                  const isSoldOut = returnOption.vacancies === 0;
-                  const canSelectReturn = !isSoldOut || isAdmin;
-                  const priceAdjustmentPerPerson = returnOption.priceAdjustmentByCurrency?.[currency] ?? 0;
-                  const returnOptionsCount = selectedAvailability.returnOptions?.length ?? 0;
-                  // First return in list (by time) is treated as most popular — purely frontend
-                  const isMostPopular = returnOptionsCount > 1 && index === 0;
-                  
-                  // Calculate stay summary for this specific return option
-                  const staySummary = calculateStaySummary(returnDateTime);
-                  
-                  return (
-                    <button
-                      key={returnOption.returnAvailabilityId}
-                      onClick={() => canSelectReturn && setSelectedReturnOption(returnOption)}
-                      disabled={!canSelectReturn}
-                      className={`w-full p-4 rounded-lg border-2 transition-all text-left relative ${
-                        isSelected
-                          ? 'border-emerald-600 bg-emerald-50'
-                          : !canSelectReturn
-                          ? 'border-stone-200 bg-stone-100 text-stone-400 cursor-not-allowed'
-                          : isSoldOut && isAdmin
-                          ? 'border-red-200 bg-red-50 hover:border-red-300 hover:bg-red-100'
-                          : 'border-stone-200 bg-white hover:border-emerald-300 hover:bg-emerald-50'
-                      }`}
-                    >
-                      {isMostPopular && (
-                        <div className="absolute -top-1 -right-1 text-white text-[10px] font-semibold px-1.5 py-0.5 rounded-full" style={{ backgroundColor: '#ff4d00' }}>
-                          {t('booking.mostPopular')}
-                        </div>
-                      )}
-                      <div className="flex items-center justify-between">
-                        <div className="flex-1">
-                          <div className="font-medium text-stone-900">{displayTime}</div>
-                          <div className="text-xs text-stone-600 mt-0.5">from {returnOption.returnLocation}</div>
-                          {isAdmin && returnOption.totalCapacity != null && returnOption.totalCapacity > 0 && (
-                            <div className="text-xs text-stone-500 mt-0.5 tabular-nums">
-                              {(returnOption.bookedCapacity ?? returnOption.totalCapacity - returnOption.vacancies)} / {returnOption.totalCapacity} capacity
-                            </div>
-                          )}
-                          {staySummary && (
-                            <div className="text-xs text-stone-500 mt-1 font-semibold">
-                              {staySummary}
-                            </div>
-                          )}
-                          {isSoldOut && (
-                            <div className="text-xs font-medium mt-1 text-red-600">
-                              {t('booking.soldOut')}
-                              {isAdmin && ' (admin can overbook)'}
-                            </div>
-                          )}
-                        </div>
-                        <div className={`text-sm font-semibold ml-4 ${
-                          priceAdjustmentPerPerson === 0 
-                            ? 'text-stone-600' 
-                            : priceAdjustmentPerPerson > 0 
-                            ? 'text-emerald-600' 
-                            : 'text-red-600'
-                        }`}>
-                          {priceAdjustmentPerPerson === 0 
-                            ? 'Included' 
-                            : priceAdjustmentPerPerson > 0 
-                            ? `+${formatCurrencyAmount(priceAdjustmentPerPerson, currency, locale)} per person` 
-                            : `${formatCurrencyAmount(priceAdjustmentPerPerson, currency, locale)} per person`}
-                        </div>
-                        </div>
-                      </button>
-                    );
-                  });
-                })()}
-              </div>
-            </div>
-          )}
-
-          {/* Cancellation policy - forced by promo or user selection */}
-          {selectedAvailability && (forcedCancellationPolicyFromPromo || (pricingConfig?.cancellationPolicies && pricingConfig.cancellationPolicies.length > 0)) && (
-            <div className="mt-6">
-              <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>
-          )}
-
-          {/* Ticket Selection */}
-          {selectedAvailability && (
-            <div>
-              <div className="flex items-center justify-between gap-2 mb-4">
-                <label className="block text-sm font-medium text-stone-700">
-                  {t('booking.tickets')}
-                </label>
-                {isAdmin && (() => {
-                  const pickupTotal = selectedAvailability.totalCapacity ?? 0;
-                  const returnTotal = selectedReturnOption?.totalCapacity ?? null;
-                  const effectiveCapacity = returnTotal != null ? returnTotal : pickupTotal;
-                  if (effectiveCapacity <= 0) return null;
-                  const currentBooked = returnTotal != null && selectedReturnOption
-                    ? (selectedReturnOption.bookedCapacity ?? selectedReturnOption.totalCapacity - (selectedReturnOption.vacancies ?? 0))
-                    : (selectedAvailability.bookedCapacity ?? (pickupTotal - (selectedAvailability.vacancies ?? 0)));
-                  return (
-                    <span className="text-xs text-stone-500 tabular-nums">
-                      {currentBooked} / {effectiveCapacity} capacity
-                    </span>
-                  );
-                })()}
-              </div>
-              <div className="space-y-4">
-                {pricing.map(rate => {
-                  const isPublicMode = isSimplifiedPricingView;
-                  // Use selected return's capacity when a return is selected (bottleneck); otherwise pickup availability capacity
-                  const pickupTotal = selectedAvailability.totalCapacity ?? 0;
-                  const returnTotal = selectedReturnOption?.totalCapacity ?? null;
-                  const effectiveCap = returnTotal != null ? returnTotal : pickupTotal;
-                  const ticketsCurrentBooked = returnTotal != null && selectedReturnOption
-                    ? (selectedReturnOption.bookedCapacity ?? selectedReturnOption.totalCapacity - (selectedReturnOption.vacancies ?? 0))
-                    : (selectedAvailability.bookedCapacity ?? (pickupTotal - (selectedAvailability.vacancies ?? 0)));
-                  const isOverbookedTickets = effectiveCap > 0 && (ticketsCurrentBooked + totalQuantity) > effectiveCap;
-                  
-                  // Calculate the base price with dynamic increases rolled in for public mode
-                  let displayBasePrice = rate.baseInDisplayCurrency ?? 0;
-                  if (isPublicMode && rate.appliedAdjustments) {
-                    // Add any dynamic pricing increases to the base price
-                    const dynamicIncreases = rate.appliedAdjustments
-                      .filter(adj => adj.type === 'dynamic' && (adj.changeByCurrency?.[currency] ?? 0) > 0)
-                      .reduce((sum, adj) => sum + (adj.changeByCurrency?.[currency] ?? 0), 0);
-                    displayBasePrice += dynamicIncreases;
-                  }
-                  
-                  // Check if there's a net discount (final price < adjusted base price)
-                  // For public mode: compare against rolled-up base; for private: original base
-                  const hasDiscount = displayBasePrice > 0 && (rate.price ?? 0) < displayBasePrice;
-                  
-                  return (
-                  <div
-                    key={rate.category}
-                    className="flex items-center justify-between p-4 bg-stone-50 rounded-lg"
-                  >
-                    <div>
-                      <p className="font-medium text-stone-900">
-                        {rate.category}
-                        {rate.category === 'CHILD' && (
-                          <span className="text-xs font-normal text-stone-500 ml-1">(2-10)</span>
-                        )}
-                        {rate.category === 'INFANT' && (
-                          <span className="text-xs font-normal text-stone-500 ml-1">(Under 2)</span>
-                        )}
-                      </p>
-                      <p className="text-sm text-stone-500">
-                        {hasDiscount ? (
-                          <>
-                            <span className="line-through text-stone-400">
-                              {formatCurrencyAmount(displayBasePrice, currency, locale)}
-                            </span>
-                            {' '}
-                            <span className="text-emerald-600 font-medium">
-                              {formatCurrencyAmount(rate.price || 0, currency, locale)}
-                            </span>
-                          </>
-                        ) : (
-                          formatCurrencyAmount(rate.price || 0, currency, locale)
-                        )}
-                      </p>
-                    </div>
-                    <div className="flex items-center gap-3">
-                      <button
-                        onClick={() => handleQuantityChange(rate.category, -1)}
-                        disabled={(quantities[rate.category] || 0) <= 0}
-                        className="w-10 h-10 rounded-full bg-white border border-stone-300 text-stone-600 hover:bg-stone-100 flex items-center justify-center text-xl disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-stone-100 disabled:text-stone-400 disabled:border-stone-200"
-                      >
-                        −
-                      </button>
-                      <span className="w-8 text-center font-medium text-stone-900">
-                        {quantities[rate.category] || 0}
-                      </span>
-                      <button
-                        onClick={() => handleQuantityChange(rate.category, 1)}
-                        disabled={!isAdmin && totalQuantity >= (selectedAvailability?.vacancies ?? 0)}
-                        className={`w-10 h-10 rounded-full flex items-center justify-center text-xl disabled:opacity-50 disabled:cursor-not-allowed ${
-                          isAdmin && isOverbookedTickets
-                            ? 'bg-red-100 border-2 border-red-500 text-red-600 hover:bg-red-200'
-                            : 'bg-white border border-stone-300 text-stone-600 hover:bg-stone-100 disabled:bg-stone-100 disabled:text-stone-400 disabled:border-stone-200'
-                        }`}
-                      >
-                        +
-                      </button>
-                    </div>
-                  </div>
-                  );
-                })}
-              </div>
-              {isAdmin && selectedAvailability && (() => {
-                // Use selected return's capacity when a return is selected (bottleneck); otherwise pickup availability capacity
-                const pickupTotal = selectedAvailability.totalCapacity ?? 0;
-                const returnTotal = selectedReturnOption?.totalCapacity ?? null;
-                const effectiveCapacity = returnTotal != null ? returnTotal : pickupTotal;
-                if (effectiveCapacity <= 0) return null;
-                const currentBooked = returnTotal != null && selectedReturnOption
-                  ? (selectedReturnOption.bookedCapacity ?? selectedReturnOption.totalCapacity - (selectedReturnOption.vacancies ?? 0))
-                  : (selectedAvailability.bookedCapacity ?? (pickupTotal - (selectedAvailability.vacancies ?? 0)));
-                const newTotalBooked = currentBooked + totalQuantity;
-                const isOverbooked = newTotalBooked > effectiveCapacity;
-                if (!isOverbooked) return null;
-                const resourceCount = returnTotal != null ? null : (selectedAvailability.resourceCount ?? null);
-                return (
-                  <p className="text-base font-semibold text-red-600 mt-4 tabular-nums text-center" role="status">
-                    Overbooking {newTotalBooked} / {effectiveCapacity} capacity
-                    {resourceCount != null ? ` for ${resourceCount} ${resourceCount === 1 ? 'resource' : 'resources'}.` : '.'}
-                  </p>
-                );
-              })()}
-            </div>
-          )}
-
-          {/* Add-ons — optional extras for the selected product option */}
-          {selectedAvailability && totalQuantity > 0 && addOns.length > 0 && (
-            <div className="border-t border-stone-200 pt-6 space-y-4">
-              <label className="block text-sm font-medium text-stone-700">
-                Add-ons
-              </label>
-              {addOns.map((addOn) => {
-                if (addOn.variantType === 'none') {
-                  const isSelected = addOnSelections.some((s) => s.addOnId === addOn.addOnId);
-                  return (
-                    <div key={addOn.addOnId}>
-                      <label className="block text-sm font-medium text-stone-700 mb-2">{addOn.name}</label>
-                      {addOn.description && (
-                        <p className="text-sm text-stone-500 mb-2">{addOn.description}</p>
-                      )}
-                      <button
-                        type="button"
-                        onClick={() => {
-                          setAddOnSelections((prev) => {
-                            if (isSelected) return prev.filter((s) => s.addOnId !== addOn.addOnId);
-                            return [...prev, { addOnId: addOn.addOnId, quantity: 1 }];
-                          });
-                        }}
-                        className={`flex items-center justify-between w-full 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'
-                        }`}
-                      >
-                        <span className="font-medium text-stone-900">
-                          {isSelected ? `Yes, add ${addOn.name}` : `No ${addOn.name}`}
-                        </span>
-                        <span className="text-sm font-semibold text-stone-700">
-                          +{formatCurrencyAmount(addOn.price ?? 0, currency, locale)}
-                        </span>
-                      </button>
-                    </div>
-                  );
-                }
-                if (addOn.variantType === 'multi_quantity' && addOn.variants?.length) {
-                  if (canUseMealDrinkSelector(addOn)) {
-                    return (
-                      <MealDrinkAddOnSelector
-                        key={addOn.addOnId}
-                        addOn={addOn}
-                        selections={addOnSelections}
-                        onSelectionsChange={setAddOnSelections}
-                        currency={currency}
-                        locale={locale}
-                      />
-                    );
-                  }
-                  return (
-                    <div key={addOn.addOnId}>
-                      <label className="block text-sm font-medium text-stone-700 mb-2">{addOn.name}</label>
-                      {addOn.description && (
-                        <p className="text-sm text-stone-500 mb-2">{addOn.description}</p>
-                      )}
-                      <div className="space-y-2">
-                        {addOn.variants.map((variant) => {
-                          const sel = addOnSelections.find((s) => s.addOnId === addOn.addOnId && s.variantId === variant.id);
-                          const qty = sel?.quantity ?? 0;
-                          const price = (addOn.price ?? 0) + (variant.priceAdjustment ?? 0);
-                          return (
-                            <div key={variant.id} className="flex items-center justify-between p-3 bg-stone-50 rounded-lg">
-                              <span className="text-sm text-stone-800">{variant.label}</span>
-                              <div className="flex items-center gap-2">
-                                <button
-                                  type="button"
-                                  onClick={() => {
-                                    setAddOnSelections((prev) => {
-                                      const next = Math.max(0, qty - 1);
-                                      const rest = prev.filter((s) => !(s.addOnId === addOn.addOnId && s.variantId === variant.id));
-                                      if (next > 0) return [...rest, { addOnId: addOn.addOnId, variantId: variant.id, quantity: next }];
-                                      return rest;
-                                    });
-                                  }}
-                                  disabled={qty <= 0}
-                                  className="h-8 w-8 rounded-full border border-stone-300 bg-white text-stone-600 hover:bg-stone-50 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-                                >
-                                  −
-                                </button>
-                                <span className="w-6 text-center font-medium tabular-nums text-sm">{qty}</span>
-                                <button
-                                  type="button"
-                                  onClick={() => {
-                                    setAddOnSelections((prev) => {
-                                      const rest = prev.filter((s) => !(s.addOnId === addOn.addOnId && s.variantId === variant.id));
-                                      return [...rest, { addOnId: addOn.addOnId, variantId: variant.id, quantity: qty + 1 }];
-                                    });
-                                  }}
-                                  className="h-8 w-8 rounded-full border border-stone-300 bg-white text-stone-600 hover:bg-stone-50 text-sm"
-                                >
-                                  +
-                                </button>
-                                <span className="text-sm font-medium text-stone-700 w-16 text-right">
-                                  {formatCurrencyAmount(price, currency, locale)} ea
-                                </span>
-                              </div>
-                            </div>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  );
-                }
-                if (addOn.variantType === 'single_choice' && addOn.variants?.length) {
-                  const sel = addOnSelections.find((s) => s.addOnId === addOn.addOnId);
-                  return (
-                    <div key={addOn.addOnId}>
-                      <label className="block text-sm font-medium text-stone-700 mb-2">{addOn.name}</label>
-                      {addOn.description && (
-                        <p className="text-sm text-stone-500 mb-2">{addOn.description}</p>
-                      )}
-                      <div className="space-y-2">
-                        {addOn.variants.map((variant) => {
-                          const isSelected = sel?.variantId === variant.id;
-                          const price = (addOn.price ?? 0) + (variant.priceAdjustment ?? 0);
-                          return (
-                            <button
-                              key={variant.id}
-                              type="button"
-                              onClick={() => {
-                                setAddOnSelections((prev) => {
-                                  const rest = prev.filter((s) => s.addOnId !== addOn.addOnId);
-                                  if (isSelected) return rest;
-                                  return [...rest, { addOnId: addOn.addOnId, variantId: variant.id, quantity: 1 }];
-                                });
-                              }}
-                              className={`flex items-center justify-between w-full p-3 rounded-lg border-2 text-left transition-colors ${
-                                isSelected ? 'border-emerald-500 bg-emerald-50' : 'border-stone-200 bg-white hover:border-stone-300'
-                              }`}
-                            >
-                              <span className="text-sm font-medium text-stone-800">{variant.label}</span>
-                              <span className="text-sm font-semibold text-stone-700">
-                                +{formatCurrencyAmount(price, currency, locale)}
-                              </span>
-                            </button>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  );
-                }
-                return null;
-              })}
-            </div>
-          )}
-
-          {/* Total and Checkout — shared PriceSummary component */}
-          {selectedAvailability && (
-            <div className="border-t border-stone-200 pt-6">
-              <div className="mb-4">
-                <PriceSummary
-                  lines={[
-                    ...ticketLineItems.map((line): PriceSummaryLine => {
-                      const rate = pricing.find((r) => r.category === line.category);
-                      const breakdown = getPriceBreakdown(line.category, rate?.priceCAD ?? 0, rate?.baseInDisplayCurrency, rate?.appliedAdjustments ?? []);
-                      return {
-                        kind: 'ticket',
-                        category: line.category,
-                        qty: line.qty,
-                        itemTotal: line.itemTotal,
-                        breakdown,
-                      };
-                    }),
-                    ...(selectedReturnOption && returnPriceAdjustment !== 0
-                      ? [
-                          {
-                            kind: 'line' as const,
-                            label: `${t('booking.returnOption')} (${totalQuantity} ${totalQuantity === 1 ? 'person' : 'people'})`,
-                            amount: returnPriceAdjustment,
-                            type: 'return',
-                          },
-                        ]
-                      : []),
-                    ...(cancellationPolicyFee > 0 && selectedCancellationPolicy
-                      ? [
-                          {
-                            kind: 'line' as const,
-                            label: selectedCancellationPolicy.label,
-                            amount: cancellationPolicyFee,
-                            type: 'cancellation',
-                          },
-                        ]
-                      : []),
-                    ...feeLineItemsWithAddOns.map((fee) => ({
-                      kind: 'line' as const,
-                      label: feeLineItems.some((f) => f.name === fee.name)
-                        ? `${fee.name} (${totalQuantity} ${totalQuantity === 1 ? 'person' : 'people'})`
-                        : fee.name,
-                      amount: fee.totalAmount,
-                      type: 'fee',
-                    })),
-                  ]}
-                  total={totalPrice}
-                  currency={currency}
-                  locale={locale}
-                  subtotal={subtotal !== totalFromSummary || promoDiscountAmount > 0 || addOnTotal > 0 ? effectiveSubtotal : undefined}
-                  taxAmount={!isTaxIncludedInPrice && (promoDiscountAmount > 0 ? effectiveTax : tax) > 0 ? (promoDiscountAmount > 0 ? effectiveTax : tax) : 0}
-                  taxRate={pricingConfig?.taxRate}
-                  size="sm"
-                  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={
-                    <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="booking-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="booking-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>
-                        )}
-                      </div>
-                      {forcedCancellationPolicyFromPromo && (
-                        <p className="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>
-
-              {/* Contact info (required for confirmation and manage booking lookup) - hidden in change mode */}
-              {!isChangeMode && (
-              <div className="mt-6 space-y-4">
-                <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="booking-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="booking-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="booking-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>
-              </div>
-              )}
-
-              {/* Pickup location - selecting it updates pickup time from range to exact time */}
-              {selectedDate &&
-               selectedAvailability &&
-               product.pickupLocations &&
-               product.pickupLocations.length > 0 && (
-                <div id="pickup-location-section" className="border-t border-stone-200 pt-6 mt-6">
-                  {pickupLocationId || 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')}
-                          </label>
-                          {pickupLocationSkipped ? (
-                            <p className="text-sm text-stone-900">
-                              {t('booking.pickupLocationUnknown')}
-                            </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);
-                            setPickupLocationSkipped(false);
-                            // Keep selectedAvailability — pickup time reverts to range until they pick a location again
-                          }}
-                          className="text-sm text-emerald-600 hover:text-emerald-700 underline"
-                        >
-                          {t('common.change')}
-                        </button>
-                      </div>
-                    </div>
-                  ) : (
-                    <PickupLocationSelector
-                      pickupLocations={product.pickupLocations}
-                      selectedLocationId={pickupLocationId}
-                      isSkipped={pickupLocationSkipped}
-                      destinations={product.destinations}
-                      onLocationSelect={(locationId) => {
-                        setPickupLocationId(locationId);
-                        setError('');
-                        if (locationId === null && pickupLocationSkipped) {
-                          setPickupLocationSkipped(false);
-                        } else if (locationId !== null) {
-                          setPickupLocationSkipped(false);
-                        }
-                        // Keep selectedAvailability — selecting a location only updates pickup time from range to exact
-                      }}
-                      onSkip={() => {
-                        setPickupLocationSkipped(true);
-                        setPickupLocationId(null);
-                        setError('');
-                        // Keep selectedAvailability — skipping only keeps time as range
-                      }}
-                    />
-                  )}
-                </div>
-              )}
-
-              {/* Error Message */}
-              {error && (
-                <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 mt-4">
-                  {error}
-                </div>
-              )}
-
-              {/* Admin only: communication options (provider dashboard) */}
-              {isAdmin && (
-                <div className="mt-4 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 (you can send manually later). Cancellation and reminder emails still send.</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 (no confirmation, cancellation, or reminders). Can be changed later on the booking.</span>
-                  </label>
-                </div>
-              )}
-
-              {/* Terms & Conditions acceptance — required before Continue to Payment (skip in change mode) */}
-              {!isChangeMode && (
-              <div className="mt-4 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>
-              )}
-
-              <button
-                onClick={handleCheckout}
-                disabled={loading || totalQuantity === 0 || (!isChangeMode && !termsAccepted)}
-                className="w-full py-4 bg-emerald-600 text-white font-semibold rounded-lg hover:bg-emerald-700 disabled:bg-stone-300 disabled:cursor-not-allowed transition-colors mt-4"
-              >
-                {loading ? (isChangeMode ? 'Changing…' : t('booking.creatingReservation')) : isChangeMode ? 'Change booking' : t('booking.continueToPayment')}
-              </button>
-              <p className="text-center text-sm text-stone-500 mt-4">
-                {t('booking.securePayment')}
-              </p>
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-}
-