@nuitee/booking-widget 1.0.0

package/dist/react/BookingWidget.jsx

@@ -0,0 +1,1192 @@
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { loadStripe } from '@stripe/stripe-js';
+import { Calendar, Users, User, Check, MapPin, Phone, Square, CreditCard, Lock, Star, X, ChevronLeft, ChevronRight } from 'lucide-react';
+import '../core/styles.css';
+import { createBookingApi, formatPrice, buildCheckoutPayload, buildPaymentIntentPayload } from '../core/booking-api.js';
+import { STRIPE_PUBLISHABLE_KEY, API_BASE_URL } from '../core/stripe-config.js';
+
+const BASE_STEPS = [
+  { key: 'dates', label: 'Dates & Guests', num: '01' },
+  { key: 'rooms', label: 'Room', num: '02' },
+  { key: 'rates', label: 'Rate', num: '03' },
+  { key: 'summary', label: 'Summary', num: '04' },
+];
+function buildSteps(hasStripe) {
+  return hasStripe ? [...BASE_STEPS, { key: 'payment', label: 'Payment', num: '05' }] : BASE_STEPS;
+}
+
+// Empty container for Stripe Payment Element so React never re-renders it and clears Stripe's DOM
+const PaymentElementContainer = React.memo(function PaymentElementContainer() {
+  return <div id="booking-widget-payment-element" className="booking-widget-payment-element" />;
+});
+
+const BookingWidget = ({
+  isOpen,
+  onClose,
+  onComplete,
+  onOpen,
+  colors,
+  apiBaseUrl = '',
+  bookingApi: bookingApiProp = null,
+  apiSecret = '',
+  propertyId = '',
+  propertyKey = '',
+  availabilityBaseUrl = '',
+  propertyBaseUrl = '',
+  s3BaseUrl = '',
+  /** If set, called with checkout payload (Stripe + external_booking + internal_booking) instead of createBooking. Return { confirmationCode } or resolve to go to confirmation. */
+  onBeforeConfirm = null,
+  /** Stripe: publishable key. Defaults to package .env (STRIPE_PUBLICED_KEY) at build time; installers don't set this. */
+  stripePublishableKey: stripePublishableKeyProp = STRIPE_PUBLISHABLE_KEY,
+  /** Stripe: optional override. If not set, package uses .env (VITE_API_BASE_URL or API_BASE_URL) + '/proxy/create-payment-intent'. */
+  createPaymentIntent: createPaymentIntentProp = null,
+  /** Stripe: deprecated (booking completion is fetched from confirmation endpoint instead). */
+  onBookingComplete: onBookingCompleteProp = null,
+}) => {
+  const stripePublishableKey = stripePublishableKeyProp || STRIPE_PUBLISHABLE_KEY;
+  const env = typeof import.meta !== 'undefined' && import.meta.env ? import.meta.env : {};
+  const apiBase = (env.VITE_API_BASE_URL || API_BASE_URL || '').replace(/\/$/, '');
+  const effectivePaymentIntentUrl = (apiBase ? apiBase + '/proxy/create-payment-intent' : '').trim();
+  const createPaymentIntent = useMemo(() => {
+    if (typeof createPaymentIntentProp === 'function') return createPaymentIntentProp;
+    if (!effectivePaymentIntentUrl) return null;
+    return async (payload) => {
+      const headers = { 'Content-Type': 'application/json' };
+      if (effectivePaymentIntentUrl.includes('ngrok')) headers['ngrok-skip-browser-warning'] = 'true';
+      const res = await fetch(effectivePaymentIntentUrl, { method: 'POST', headers, body: JSON.stringify(payload) });
+      if (!res.ok) throw new Error(await res.text());
+      const data = await res.json();
+      const clientSecret = data.clientSecret ?? data.client_secret ?? data.data?.clientSecret ?? data.data?.client_secret ?? data.paymentIntent?.client_secret;
+      const confirmationToken = data.confirmationToken ?? data.confirmation_token ?? data.data?.confirmationToken ?? data.data?.confirmation_token;
+      return { clientSecret, confirmationToken };
+    };
+  }, [createPaymentIntentProp, effectivePaymentIntentUrl]);
+  const onBookingComplete = useMemo(() => onBookingCompleteProp ?? null, [onBookingCompleteProp]);
+  const hasStripe = Boolean(stripePublishableKey && typeof createPaymentIntent === 'function');
+  const STEPS = useMemo(() => buildSteps(hasStripe), [hasStripe]);
+  const [state, setState] = useState({
+    step: 'dates',
+    checkIn: null,
+    checkOut: null,
+    rooms: 1,
+    occupancies: [{ adults: 2, children: 0, childrenAges: [] }],
+    selectedRoom: null,
+    selectedRate: null,
+    guest: { firstName: '', lastName: '', email: '', phone: '', specialRequests: '' },
+  });
+
+  const [roomsList, setRoomsList] = useState([]);
+  const [ratesList, setRatesList] = useState([]);
+  const [loadingRooms, setLoadingRooms] = useState(false);
+  const [loadingRates, setLoadingRates] = useState(false);
+  const [apiError, setApiError] = useState(null);
+  const [confirmationCode, setConfirmationCode] = useState(null);
+  const [confirmationToken, setConfirmationToken] = useState(null);
+  const [confirmationStatus, setConfirmationStatus] = useState(null);
+  const [confirmationDetails, setConfirmationDetails] = useState(null);
+
+  const [calendarMonth, setCalendarMonth] = useState(new Date().getMonth());
+  const [calendarYear, setCalendarYear] = useState(new Date().getFullYear());
+  const [pickState, setPickState] = useState(0);
+  const [calendarOpen, setCalendarOpen] = useState(false);
+  const [paymentElementReady, setPaymentElementReady] = useState(false);
+  const [checkoutShowPaymentForm, setCheckoutShowPaymentForm] = useState(false);
+  const [isClosing, setIsClosing] = useState(false);
+  const [isReadyForOpen, setIsReadyForOpen] = useState(false);
+  const widgetRef = useRef(null);
+  const stripeRef = useRef(null);
+  const elementsRef = useRef(null);
+  const paymentIntentConfirmationTokenRef = useRef(null);
+
+  // Use package .env when props not passed (e.g. examples with envDir pointing at root)
+  const effectiveApiBaseUrl = apiBaseUrl || env.VITE_API_URL || '';
+  const effectiveConfirmationBaseUrl = (env.VITE_API_BASE_URL || API_BASE_URL || 'https://ai.thehotelplanet.com').replace(/\/$/, '');
+  const apiBaseForAvailability = (env.VITE_API_BASE_URL || API_BASE_URL || '').replace(/\/$/, '');
+  const effectiveAvailabilityBaseUrl = availabilityBaseUrl !== '' ? availabilityBaseUrl : apiBaseForAvailability;
+  const effectivePropertyBaseUrl = propertyBaseUrl || env.VITE_PROPERTY_BASE_URL || '';
+  const effectiveS3BaseUrl = s3BaseUrl || env.VITE_AWS_S3_PATH || '';
+
+  const bookingApiRef = useMemo(() => {
+    if (bookingApiProp && typeof bookingApiProp.fetchRooms === 'function') return bookingApiProp;
+    if ((effectiveApiBaseUrl || propertyKey) && typeof createBookingApi === 'function') {
+      return createBookingApi({
+        baseUrl: effectiveApiBaseUrl || effectiveAvailabilityBaseUrl || '',
+        availabilityBaseUrl: effectiveAvailabilityBaseUrl === '' ? '' : (effectiveAvailabilityBaseUrl || undefined),
+        propertyBaseUrl: effectivePropertyBaseUrl === '' ? '' : (effectivePropertyBaseUrl || undefined),
+        s3BaseUrl: effectiveS3BaseUrl || undefined,
+        propertyId: propertyId || undefined,
+        propertyKey: propertyKey || undefined,
+        headers: apiSecret ? { 'X-API-Key': apiSecret } : undefined,
+      });
+    }
+    return null;
+  }, [bookingApiProp, effectiveApiBaseUrl, effectiveAvailabilityBaseUrl, effectivePropertyBaseUrl, effectiveS3BaseUrl, apiSecret, propertyId, propertyKey]);
+
+  useEffect(() => {
+    if (isOpen && onOpen) onOpen();
+  }, [isOpen, onOpen]);
+
+  // Delay adding 'active' by one frame so the browser can paint the initial state and animate open
+  useEffect(() => {
+    if (!isOpen || isClosing) {
+      setIsReadyForOpen(false);
+      return;
+    }
+    const id = requestAnimationFrame(() => {
+      requestAnimationFrame(() => setIsReadyForOpen(true));
+    });
+    return () => cancelAnimationFrame(id);
+  }, [isOpen, isClosing]);
+
+  // Stripe: mount Payment Element only on payment step after user proceeded from summary
+  useEffect(() => {
+    if (state.step !== 'payment' || !checkoutShowPaymentForm || !stripePublishableKey || typeof createPaymentIntent !== 'function') {
+      if (state.step !== 'payment') setCheckoutShowPaymentForm(false);
+      setPaymentElementReady(false);
+      return;
+    }
+    const paymentIntentPayload = buildPaymentIntentPayload(state, { propertyKey: propertyKey || undefined });
+    let mounted = true;
+    setPaymentElementReady(false);
+    setApiError(null);
+    (async () => {
+      try {
+        const result = await createPaymentIntent(paymentIntentPayload);
+        const clientSecret = result?.clientSecret ?? result?.client_secret ?? result?.data?.clientSecret ?? result?.data?.client_secret ?? result?.paymentIntent?.client_secret;
+        if (mounted) paymentIntentConfirmationTokenRef.current = result?.confirmationToken ?? result?.confirmation_token ?? result?.data?.confirmationToken ?? result?.data?.confirmation_token;
+        if (!mounted || !clientSecret) return;
+        const stripe = await loadStripe(stripePublishableKey);
+        if (!mounted || !stripe) return;
+        stripeRef.current = stripe;
+        const elements = stripe.elements({ clientSecret, appearance: { theme: 'flat', variables: { borderRadius: '8px' } } });
+        elementsRef.current = elements;
+        const paymentElement = elements.create('payment');
+        // Defer mount so the checkout step DOM is committed and the container exists
+        await new Promise((r) => requestAnimationFrame(r));
+        if (!mounted) return;
+        const container = document.getElementById('booking-widget-payment-element');
+        if (!container) return;
+        container.innerHTML = '';
+        paymentElement.mount(container);
+        if (mounted) setPaymentElementReady(true);
+      } catch (err) {
+        if (mounted) setApiError(err?.message || err || 'Payment setup failed');
+      }
+    })();
+    return () => {
+      mounted = false;
+      if (elementsRef.current) {
+        const container = document.getElementById('booking-widget-payment-element');
+        if (container) container.innerHTML = '';
+        elementsRef.current = null;
+      }
+      stripeRef.current = null;
+    };
+  }, [state.step, checkoutShowPaymentForm, stripePublishableKey, createPaymentIntent, onBookingComplete, state.checkIn, state.checkOut, state.rooms, state.occupancies, state.selectedRoom?.id, state.selectedRate?.id, state.guest, propertyId, propertyKey]);
+
+  // After Stripe confirms payment, poll confirmation endpoint every 2s until status === 'confirmed'
+  useEffect(() => {
+    if (state.step !== 'confirmation' || !confirmationToken) return;
+    let cancelled = false;
+    let timer = null;
+    const pollOnce = async () => {
+      if (cancelled) return;
+      try {
+        const url = `${effectiveConfirmationBaseUrl}/proxy/confirmation/${encodeURIComponent(String(confirmationToken).trim())}`;
+        const res = await fetch(url, { method: 'POST' });
+        if (!res.ok) throw new Error(await res.text());
+        const data = await res.json();
+        const status = data?.status != null ? String(data.status) : '';
+        if (!cancelled) setConfirmationStatus(status || 'pending');
+        if (status === 'confirmed') {
+          if (!cancelled) setConfirmationDetails(data);
+          return;
+        }
+      } catch (err) {
+        if (!cancelled) setApiError(err?.message || err || 'Failed to fetch confirmation');
+      }
+      timer = setTimeout(pollOnce, 2000);
+    };
+    pollOnce();
+    return () => {
+      cancelled = true;
+      if (timer) clearTimeout(timer);
+    };
+  }, [state.step, confirmationToken, effectiveConfirmationBaseUrl]);
+
+  // Apply custom colors
+  useEffect(() => {
+    if (widgetRef.current && colors) {
+      const style = widgetRef.current.style;
+      if (colors.background) {
+        style.setProperty('--bg', colors.background);
+        style.setProperty('--card', colors.background);
+      }
+      if (colors.text) {
+        style.setProperty('--fg', colors.text);
+        style.setProperty('--card-fg', colors.text);
+      }
+      if (colors.primary) {
+        style.setProperty('--primary', colors.primary);
+      }
+      if (colors.primaryText) {
+        style.setProperty('--primary-fg', colors.primaryText);
+      }
+    }
+  }, [colors, isOpen]);
+
+  const getNights = () => {
+    if (!state.checkIn || !state.checkOut) return 0;
+    return Math.max(1, Math.round((state.checkOut - state.checkIn) / 86400000));
+  };
+
+  /** API basePrice is total for the full stay (per room). Total = basePrice * priceModifier * rooms. */
+  const getTotalPrice = () => {
+    if (!state.selectedRoom || !state.selectedRate) return 0;
+    const nights = getNights();
+    const rooms = state.rooms;
+    const roomTotal = Math.round(state.selectedRoom.basePrice * state.selectedRate.priceModifier * rooms);
+    const fees = state.selectedRate.fees ?? [];
+    let add = 0;
+    fees.forEach(f => { if (!f.included) add += f.perNight ? f.amount * nights * rooms : f.amount; });
+    const vat = state.selectedRate.vat;
+    if (vat && !vat.included) add += vat.value || 0;
+    return Math.round(roomTotal + add);
+  };
+
+  const fmt = (date) => {
+    if (!date) return '';
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+  };
+
+  const fmtLong = (date) => {
+    if (!date) return '';
+    return date.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
+  };
+
+  const formatRoomSize = (size) => {
+    if (size == null || typeof size !== 'string') return size ?? '';
+    return size.replace(/\bsquare_?meter(s)?\b/gi, 'm²').trim();
+  };
+
+  const stepIndex = (key) => STEPS.findIndex(s => s.key === key);
+
+  const goToStep = (step) => {
+    setApiError(null);
+    if (step !== 'summary' && step !== 'payment') setCheckoutShowPaymentForm(false);
+    if (step === 'payment') setCheckoutShowPaymentForm(true);
+    setState(prev => ({ ...prev, step }));
+    const api = bookingApiRef;
+    if (step === 'rooms' && api) {
+      setLoadingRooms(true);
+      const occupancies = (state.occupancies || []).slice(0, state.rooms).map((occ, i) => ({
+        adults: occ.adults ?? 1,
+        children: (occ.childrenAges || []).slice(0, occ.children || 0).map(a => Number(a) || 0),
+        occupancy_index: i + 1,
+      }));
+      const params = { checkIn: state.checkIn, checkOut: state.checkOut, rooms: state.rooms, occupancies };
+      api.fetchRooms(params).then((rooms) => {
+        setRoomsList(Array.isArray(rooms) ? rooms : []);
+        setLoadingRooms(false);
+      }).catch((err) => {
+        setApiError(err.message || 'Failed to load rooms');
+        setLoadingRooms(false);
+      });
+      return;
+    }
+    if (step === 'rates' && state.selectedRoom) {
+      setLoadingRates(false);
+      const rates = Array.isArray(state.selectedRoom.rates) && state.selectedRoom.rates.length
+        ? state.selectedRoom.rates
+        : [];
+      setRatesList(rates);
+      return;
+    }
+  };
+
+  const changeCounter = (field, delta, roomIndex = 0) => {
+    const limits = { adults: [1,8], children: [0,6], rooms: [1,5] };
+    setState(prev => {
+      const occ = [...(prev.occupancies || [{ adults: 2, children: 0, childrenAges: [] }])];
+      if (field === 'rooms') {
+        const next = Math.max(limits.rooms[0], Math.min(limits.rooms[1], prev.rooms + delta));
+        while (occ.length < next) occ.push({ adults: 1, children: 0, childrenAges: [] });
+        occ.length = next;
+        return { ...prev, rooms: next, occupancies: occ };
+      }
+      if (roomIndex < 0 || roomIndex >= occ.length) return prev;
+      const next = Math.max(limits[field][0], Math.min(limits[field][1], (occ[roomIndex][field] ?? (field === 'adults' ? 1 : 0)) + delta));
+      occ[roomIndex] = { ...occ[roomIndex], [field]: next };
+      if (field === 'children') {
+        const ages = occ[roomIndex].childrenAges || [];
+        const newAges = ages.slice(0, next);
+        while (newAges.length < next) newAges.push(0);
+        occ[roomIndex].childrenAges = newAges;
+      }
+      return { ...prev, occupancies: occ };
+    });
+  };
+
+  const updateChildAge = (roomIndex, childIndex, value) => {
+    const age = Math.max(0, Math.min(17, Number(value) || 0));
+    setState(prev => {
+      const occ = [...(prev.occupancies || [])];
+      if (roomIndex < 0 || roomIndex >= occ.length) return prev;
+      const ages = [...(occ[roomIndex].childrenAges || [])];
+      if (childIndex >= 0 && childIndex < ages.length) ages[childIndex] = age;
+      occ[roomIndex] = { ...occ[roomIndex], childrenAges: ages };
+      return { ...prev, occupancies: occ };
+    });
+  };
+
+  const removeRoom = (roomIndex) => {
+    if (state.rooms <= 1) return;
+    setState(prev => {
+      const occ = [...(prev.occupancies || [])];
+      if (roomIndex < 0 || roomIndex >= occ.length) return prev;
+      occ.splice(roomIndex, 1);
+      return { ...prev, occupancies: occ, rooms: occ.length };
+    });
+  };
+
+  const getTotalGuests = () => {
+    const occ = state.occupancies || [];
+    return {
+      adults: occ.reduce((s, o) => s + (o.adults || 0), 0),
+      children: occ.reduce((s, o) => s + (o.children || 0), 0),
+    };
+  };
+
+  const pickDate = (y, m, d) => {
+    const date = new Date(y, m, d);
+    if (pickState === 0 || (state.checkIn && date <= state.checkIn)) {
+      setState(prev => ({ ...prev, checkIn: date, checkOut: null }));
+      setPickState(1);
+    } else {
+      setState(prev => ({ ...prev, checkOut: date }));
+      setPickState(0);
+      setCalendarOpen(false);
+    }
+    if (pickState === 0) {
+      setCalendarMonth(new Date().getMonth());
+      setCalendarYear(new Date().getFullYear());
+      setPickState(1);
+    }
+  };
+
+  const calNav = (dir) => {
+    setCalendarMonth(prev => {
+      const newMonth = prev + dir;
+      if (newMonth > 11) {
+        setCalendarYear(prevYear => prevYear + 1);
+        return 0;
+      }
+      if (newMonth < 0) {
+        setCalendarYear(prevYear => prevYear - 1);
+        return 11;
+      }
+      return newMonth;
+    });
+  };
+
+  const monthName = (m) => ['January','February','March','April','May','June','July','August','September','October','November','December'][m];
+
+  const buildMonth = (year, month) => {
+    const today = new Date(); today.setHours(0,0,0,0);
+    const first = new Date(year, month, 1);
+    const days = new Date(year, month + 1, 0).getDate();
+    const startDay = first.getDay();
+    const names = ['Su','Mo','Tu','We','Th','Fr','Sa'];
+    let daysArray = [];
+    for (let i = 0; i < startDay; i++) daysArray.push(null);
+    for (let d = 1; d <= days; d++) {
+      const date = new Date(year, month, d);
+      const disabled = date < today;
+      let cls = 'cal-day';
+      if (disabled) cls += ' disabled';
+      if (date.getTime() === today.getTime()) cls += ' today';
+      if (state.checkIn && date.getTime() === state.checkIn.getTime()) cls += ' selected';
+      if (state.checkOut && date.getTime() === state.checkOut.getTime()) cls += ' selected';
+      if (state.checkIn && state.checkOut && date > state.checkIn && date < state.checkOut) cls += ' in-range';
+      daysArray.push({ date, disabled, cls, day: d });
+    }
+    return { daysArray, names };
+  };
+
+  const selectRoom = (id) => {
+    setState(prev => ({ ...prev, selectedRoom: roomsList.find(r => r.id === id) }));
+  };
+
+  const selectRate = (id) => {
+    setState(prev => ({ ...prev, selectedRate: ratesList.find(r => r.id === id) }));
+  };
+
+  const updateGuest = (field, value) => {
+    setState(prev => ({
+      ...prev,
+      guest: { ...prev.guest, [field]: value }
+    }));
+  };
+
+  const confirmReservation = () => {
+    const canSubmit = state.guest.firstName && state.guest.lastName && state.guest.email;
+    if (!canSubmit) return;
+    const payload = buildCheckoutPayload(state, { propertyId: propertyId || undefined, propertyKey: propertyKey || undefined });
+    // Summary step with Stripe: go to payment step (payment form loads there)
+    if (state.step === 'summary' && stripePublishableKey && typeof createPaymentIntent === 'function') {
+      setApiError(null);
+      goToStep('payment');
+      return;
+    }
+
+    // Payment step: confirm payment (Payment Element already loaded)
+    if (state.step === 'payment' && stripePublishableKey && typeof createPaymentIntent === 'function' && elementsRef.current && stripeRef.current) {
+      setApiError(null);
+      stripeRef.current.confirmPayment({
+        elements: elementsRef.current,
+        confirmParams: { return_url: typeof window !== 'undefined' ? window.location.origin + (window.location.pathname || '') : '' },
+        redirect: 'if_required',
+      }).then(({ error, paymentIntent }) => {
+        if (error) {
+          setApiError(error?.message || 'Payment failed');
+          return;
+        }
+        if (paymentIntent?.status === 'succeeded' || paymentIntent?.status === 'requires_capture') {
+          if (!paymentIntentConfirmationTokenRef.current) {
+            setApiError('Missing confirmation token from payment intent');
+            return;
+          }
+          setApiError(null);
+          setConfirmationDetails(null);
+          setConfirmationStatus('pending');
+          setConfirmationToken(paymentIntentConfirmationTokenRef.current);
+          setState(prev => ({ ...prev, step: 'confirmation' }));
+        }
+      }).catch((err) => setApiError(err?.message || err || 'Payment failed'));
+      return;
+    }
+
+    if (typeof onBeforeConfirm === 'function') {
+      setApiError(null);
+      Promise.resolve(onBeforeConfirm(payload))
+        .then((res) => {
+          const code = res && (res.confirmationCode ?? res.confirmation_code);
+          setConfirmationCode(code || ('LX' + Date.now().toString(36).toUpperCase().slice(-6)));
+          setState(prev => ({ ...prev, step: 'confirmation' }));
+        })
+        .catch((err) => {
+          setApiError(err?.message || err || 'Booking failed');
+        });
+      return;
+    }
+    // No Stripe flow and no onBeforeConfirm: only log payload
+    return;
+    const api = bookingApiRef;
+    if (api) {
+      setApiError(null);
+      api.createBooking(state).then((res) => {
+        setConfirmationCode(res.confirmationCode || ('LX' + Date.now().toString(36).toUpperCase().slice(-6)));
+        setState(prev => ({ ...prev, step: 'confirmation' }));
+      }).catch((err) => {
+        setApiError(err.message || 'Booking failed');
+      });
+      return;
+    }
+    setConfirmationCode('LX' + Date.now().toString(36).toUpperCase().slice(-6));
+    setState(prev => ({ ...prev, step: 'confirmation' }));
+  };
+
+  const resetBooking = () => {
+    setCheckoutShowPaymentForm(false);
+    setState({
+      step: 'dates',
+      checkIn: null,
+      checkOut: null,
+      rooms: 1,
+      occupancies: [{ adults: 2, children: 0, childrenAges: [] }],
+      selectedRoom: null,
+      selectedRate: null,
+      guest: { firstName: '', lastName: '', email: '', phone: '', specialRequests: '' }
+    });
+    setConfirmationCode(null);
+    setConfirmationToken(null);
+    setConfirmationStatus(null);
+    setConfirmationDetails(null);
+    setApiError(null);
+    paymentIntentConfirmationTokenRef.current = null;
+    if (!bookingApiRef) {
+      setRoomsList([]);
+      setRatesList([]);
+    }
+    if (onComplete) onComplete(state);
+  };
+
+  const resetStateForClose = () => {
+    setCheckoutShowPaymentForm(false);
+    setState({
+      step: 'dates',
+      checkIn: null,
+      checkOut: null,
+      rooms: 1,
+      occupancies: [{ adults: 2, children: 0, childrenAges: [] }],
+      selectedRoom: null,
+      selectedRate: null,
+      guest: { firstName: '', lastName: '', email: '', phone: '', specialRequests: '' }
+    });
+    setConfirmationCode(null);
+    setConfirmationToken(null);
+    setConfirmationStatus(null);
+    setConfirmationDetails(null);
+    setApiError(null);
+    paymentIntentConfirmationTokenRef.current = null;
+    setRoomsList([]);
+    setRatesList([]);
+    if (onClose) onClose();
+  };
+
+  const requestClose = () => {
+    if (isClosing) return;
+    setIsClosing(true);
+  };
+
+  const handleTransitionEnd = (e) => {
+    if (e.target !== widgetRef.current || e.propertyName !== 'transform') return;
+    if (!isClosing) return;
+    resetStateForClose();
+    setIsClosing(false);
+  };
+
+  const renderStepIndicator = () => {
+    if (state.step === 'confirmation') return null;
+    const ci = stepIndex(state.step);
+    return (
+      <div className="booking-widget-step-indicator">
+        {STEPS.map((s, i) => {
+          const cls = i === ci ? 'active' : i < ci ? 'past' : 'future';
+          return (
+            <React.Fragment key={s.key}>
+              <div className="step-item">
+                <span className={`step-circle ${cls}`} onClick={cls === 'past' ? () => goToStep(s.key) : undefined}>
+                  {i < ci ? <Check size={12} /> : s.num}
+                </span>
+                <span className={`step-label ${cls}`} onClick={cls === 'past' ? () => goToStep(s.key) : undefined}>
+                  {s.label}
+                </span>
+              </div>
+              {i < STEPS.length - 1 && (
+                <span className="step-line">
+                  <span className={`step-line-fill ${i < ci ? 'filled' : ''}`}></span>
+                </span>
+              )}
+            </React.Fragment>
+          );
+        })}
+      </div>
+    );
+  };
+
+  const renderDatesStep = () => {
+    const m1 = calendarMonth, y1 = calendarYear;
+    const m2 = m1 === 11 ? 0 : m1 + 1, y2 = m1 === 11 ? y1 + 1 : y1;
+    const month1 = buildMonth(y1, m1);
+    const month2 = buildMonth(y2, m2);
+    
+    return (
+      <>
+        <h2 className="step-title">Plan Your Stay</h2>
+        <p className="step-subtitle">Select your dates and guests to begin</p>
+        <div style={{maxWidth: '32em', margin: '0 auto'}}>
+          <label className="form-label">Dates</label>
+          <div className="date-wrapper">
+            <div className="date-trigger" onClick={() => setCalendarOpen(!calendarOpen)}>
+              <Calendar size={18} style={{marginRight: '0.5em'}} />
+              <span className={!state.checkIn ? 'placeholder' : ''}>
+                {state.checkIn ? fmt(state.checkIn) : 'Check-in'}
+              </span>
+              &nbsp;→&nbsp;
+              <span className={!state.checkOut ? 'placeholder' : ''}>
+                {state.checkOut ? fmt(state.checkOut) : 'Check-out'}
+              </span>
+            </div>
+            {calendarOpen && (
+              <div className="calendar-popup open">
+                <div className="cal-header">
+                  <button onClick={() => calNav(-1)}>‹</button>
+                  <span className="cal-title">{monthName(m1)} {y1}</span>
+                  <span className="cal-title">{monthName(m2)} {y2}</span>
+                  <button onClick={() => calNav(1)}>›</button>
+                </div>
+                <div className="cal-months">
+                  <div className="cal-grid">
+                    {month1.names.map(n => <div key={n} className="cal-day-name">{n}</div>)}
+                    {month1.daysArray.map((day, idx) => 
+                      day ? (
+                        <button key={idx} className={day.cls} disabled={day.disabled} onClick={() => !day.disabled && pickDate(y1, m1, day.day)}>
+                          {day.day}
+                        </button>
+                      ) : <div key={idx} className="cal-day empty"></div>
+                    )}
+                  </div>
+                  <div className="cal-grid">
+                    {month2.names.map(n => <div key={n} className="cal-day-name">{n}</div>)}
+                    {month2.daysArray.map((day, idx) => 
+                      day ? (
+                        <button key={idx} className={day.cls} disabled={day.disabled} onClick={() => !day.disabled && pickDate(y2, m2, day.day)}>
+                          {day.day}
+                        </button>
+                      ) : <div key={idx} className="cal-day empty"></div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+          <label className="form-label" style={{marginTop: '1.5em', display: 'flex', alignItems: 'center', gap: '0.5em'}}>
+            <Users size={18} /> Guests & Rooms
+          </label>
+          <div className="guests-rooms-section">
+            {(state.occupancies || []).slice(0, state.rooms).map((occ, roomIdx) => (
+              <div key={roomIdx} className="room-card">
+                <div className="room-card-header">
+                  <span className="room-card-title">Room {roomIdx + 1}</span>
+                  {state.rooms > 1 && (
+                    <button type="button" className="remove-room-btn" onClick={() => removeRoom(roomIdx)} aria-label="Remove room">Remove</button>
+                  )}
+                </div>
+                <div className="counter-row">
+                  <span className="counter-label">Adults</span>
+                  <div className="counter-controls">
+                    <button className="counter-btn" disabled={(occ.adults ?? 1) <= 1} onClick={() => changeCounter('adults', -1, roomIdx)}>−</button>
+                    <span className="counter-val">{occ.adults ?? 1}</span>
+                    <button className="counter-btn" disabled={(occ.adults ?? 1) >= 8} onClick={() => changeCounter('adults', 1, roomIdx)}>+</button>
+                  </div>
+                </div>
+                <div className="counter-row">
+                  <span className="counter-label">Children</span>
+                  <div className="counter-controls">
+                    <button className="counter-btn" disabled={(occ.children ?? 0) <= 0} onClick={() => changeCounter('children', -1, roomIdx)}>−</button>
+                    <span className="counter-val">{occ.children ?? 0}</span>
+                    <button className="counter-btn" disabled={(occ.children ?? 0) >= 6} onClick={() => changeCounter('children', 1, roomIdx)}>+</button>
+                  </div>
+                </div>
+                {(occ.children ?? 0) > 0 && (
+                  <div className="child-ages-section" style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5em 1em' }}>
+                    {Array.from({ length: occ.children ?? 0 }, (_, i) => (
+                      <div key={i} className="child-age-row" style={{ flex: '0 1 calc(50% - 0.5em)', minWidth: 0, marginTop: '0.5em' }}>
+                        <label className="form-label" style={{ fontSize: '0.75em', color: 'var(--muted)' }}>Child {i + 1} age</label>
+                        <select
+                          className="form-input"
+                          style={{ width: '100%', marginTop: '0.25em' }}
+                          value={(occ.childrenAges || [])[i] ?? 0}
+                          onChange={(e) => updateChildAge(roomIdx, i, parseInt(e.target.value, 10))}
+                        >
+                          {Array.from({ length: 18 }, (_, a) => (
+                            <option key={a} value={a}>{a} year{a !== 1 ? 's' : ''}</option>
+                          ))}
+                        </select>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+            <button type="button" className="add-room-btn" disabled={state.rooms >= 5} onClick={() => changeCounter('rooms', 1)}>
+              + Add room
+            </button>
+          </div>
+          <button className="btn-primary" disabled={!state.checkIn || !state.checkOut} onClick={() => goToStep('rooms')}>
+            Select Room
+          </button>
+        </div>
+      </>
+    );
+  };
+
+  const roomGridRef = useRef(null);
+
+  const scrollRooms = (direction) => {
+    if (roomGridRef.current) {
+      const scrollAmount = 300;
+      roomGridRef.current.scrollBy({
+        left: direction * scrollAmount,
+        behavior: 'smooth'
+      });
+    }
+  };
+
+  const renderRoomSkeleton = () => (
+    <div className="room-skeleton">
+      <div className="room-skeleton-img" />
+      <div className="room-skeleton-body">
+        <div className="room-skeleton-line title" />
+        <div className="room-skeleton-line price" />
+        <div className="room-skeleton-line desc" />
+        <div className="room-skeleton-line desc" />
+        <div className="room-skeleton-line desc" />
+        <div className="room-skeleton-meta">
+          <div className="room-skeleton-line meta" />
+          <div className="room-skeleton-line meta" />
+        </div>
+        <div className="room-skeleton-tags">
+          <div className="room-skeleton-tag" />
+          <div className="room-skeleton-tag" />
+          <div className="room-skeleton-tag" />
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderRoomsStep = () => {
+    if (loadingRooms) {
+      return (
+        <>
+          <h2 className="step-title">Choose Your Room</h2>
+          <p className="step-subtitle">Each space is crafted for an unforgettable experience</p>
+          <div className="room-grid-wrapper">
+            <div className="room-grid">
+              {[1, 2, 3, 4].map((i) => <React.Fragment key={i}>{renderRoomSkeleton()}</React.Fragment>)}
+            </div>
+          </div>
+        </>
+      );
+    }
+    if (apiError) {
+      return (
+        <>
+          <h2 className="step-title">Choose Your Room</h2>
+          <p className="step-subtitle" style={{ color: 'var(--destructive, #ef4444)' }}>{apiError}</p>
+          <button className="btn-secondary" onClick={() => goToStep('rooms')}>Try again</button>
+        </>
+      );
+    }
+    if (roomsList.length === 0) {
+      return (
+        <>
+          <h2 className="step-title">Choose Your Room</h2>
+          <p className="step-subtitle">No rooms available for the selected dates.</p>
+          <div className="rooms-empty-state">
+            <p className="rooms-empty-message">Try different dates or check back later.</p>
+            <button className="btn-secondary" onClick={() => goToStep('dates')}>Change dates</button>
+          </div>
+        </>
+      );
+    }
+    return (
+    <>
+      <h2 className="step-title">Choose Your Room</h2>
+      <p className="step-subtitle">Each space is crafted for an unforgettable experience</p>
+      <div className="room-grid-wrapper">
+        <button className="room-nav-btn room-nav-prev" onClick={() => scrollRooms(-1)} aria-label="Previous rooms">
+          <ChevronLeft size={24} />
+        </button>
+        <div className="room-grid" ref={roomGridRef}>
+          {roomsList.map(r => {
+            const sel = state.selectedRoom?.id === r.id;
+            return (
+              <div key={r.id} className={`room-card ${sel ? 'selected' : ''}`} onClick={() => selectRoom(r.id)} style={{flex: '0 0 280px', minWidth: '280px'}}>
+                <div className="room-card-img-wrap">
+                  <img className="room-card-img" src={r.image} alt={r.name} onError={(e) => { e.target.src = 'https://images.unsplash.com/photo-1618773928121-c32242e63f39?w=800&q=80'; }} />
+                  {sel && <div className="room-card-check"><Check size={14} /></div>}
+                </div>
+                <div className="room-card-body">
+                  <div className="room-card-top">
+                    <span className="room-card-name">{r.name}</span>
+                    <div className="room-card-price">
+                      <strong>{formatPrice(getNights() > 0 ? r.basePrice / getNights() : r.basePrice, r.currency)}</strong>
+                      <small>/ night</small>
+                    </div>
+                  </div>
+                  <p className="room-card-desc">{r.description}</p>
+                  <div className="room-card-meta">
+                    <span style={{display: 'flex', alignItems: 'center', gap: '0.25em'}}>
+                      <Square size={14} /> {formatRoomSize(r.size)}
+                    </span>
+                    <span style={{display: 'flex', alignItems: 'center', gap: '0.25em'}}>
+                      <User size={14} /> Up to {r.maxGuests}
+                    </span>
+                  </div>
+                  <div className="amenity-tags">{(r.amenities || []).slice(0, 5).map(a => <span key={a} className="amenity-tag">{a}</span>)}</div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        <button className="room-nav-btn room-nav-next" onClick={() => scrollRooms(1)} aria-label="Next rooms">
+          <ChevronRight size={24} />
+        </button>
+      </div>
+      <button className="btn-primary" disabled={!state.selectedRoom} onClick={() => goToStep('rates')}>
+        Select Rate
+      </button>
+    </>
+  );
+  };
+
+  const renderRatesStep = () => {
+    if (loadingRates) {
+      return (
+        <>
+          <p className="step-subtitle">Loading rates...</p>
+          <div style={{ padding: '2em', textAlign: 'center', color: 'var(--muted)' }}>Please wait.</div>
+        </>
+      );
+    }
+    if (apiError) {
+      return (
+        <>
+          <p className="step-subtitle" style={{ color: 'var(--destructive, #ef4444)' }}>{apiError}</p>
+          <button className="btn-secondary" onClick={() => goToStep('rates')}>Try again</button>
+        </>
+      );
+    }
+    if (ratesList.length === 0) {
+      const room = state.selectedRoom;
+      return (
+        <>
+          <div className="rate-step-card">
+            {room && (
+              <div className="rate-step-room-summary">
+                <img className="rate-step-room-summary-image" src={room.image} alt="" onError={(e) => { e.target.src = 'https://images.unsplash.com/photo-1618773928121-c32242e63f39?w=800&q=80'; }} />
+                <div className="rate-step-room-summary-body">
+                  <h3 className="rate-step-room-summary-name">{room.name}</h3>
+                  {room.description && <p className="rate-step-room-summary-desc">{room.description}</p>}
+                  <div className="rate-step-room-summary-meta">
+                    {room.size && <span>{formatRoomSize(room.size)}</span>}
+                    {room.maxGuests != null && <span>Up to {room.maxGuests} guests</span>}
+                  </div>
+                </div>
+              </div>
+            )}
+            <p style={{ padding: '1em', color: 'var(--muted)', fontSize: '0.9em', margin: 0 }}>No rates available for this room.</p>
+          </div>
+          <button className="btn-secondary" onClick={() => goToStep('rooms')}>Choose another room</button>
+        </>
+      );
+    }
+    const base = state.selectedRoom?.basePrice ?? 0;
+    const room = state.selectedRoom;
+    return (
+      <>
+        <div className="rate-step-card">
+          {room && (
+            <div className="rate-step-room-summary">
+              <img className="rate-step-room-summary-image" src={room.image} alt="" onError={(e) => { e.target.src = 'https://images.unsplash.com/photo-1618773928121-c32242e63f39?w=800&q=80'; }} />
+              <div className="rate-step-room-summary-body">
+                <h3 className="rate-step-room-summary-name">{room.name}</h3>
+                {room.description && <p className="rate-step-room-summary-desc">{room.description}</p>}
+                <div className="rate-step-room-summary-meta">
+                  {room.size && <span>{formatRoomSize(room.size)}</span>}
+                  {room.maxGuests != null && <span>Up to {room.maxGuests} guests</span>}
+                </div>
+              </div>
+            </div>
+          )}
+          <div className="rate-list">
+          {ratesList.map(r => {
+            const sel = state.selectedRate?.id === r.id;
+            const total = Math.round(base * r.priceModifier * state.rooms);
+            return (
+              <div key={r.id} className={`rate-card ${sel ? 'selected' : ''}`} onClick={() => selectRate(r.id)}>
+                {r.recommended && <div className="rate-badge"><Star size={12} /> Recommended</div>}
+                <div className="rate-top">
+                  <div style={{display: 'flex', gap: '0.75em', alignItems: 'center', flex: 1, flexWrap: 'wrap'}}>
+                    <div className="rate-radio"><div className="rate-radio-dot"></div></div>
+                    <span className="rate-name">{[r.policy, ...(r.benefits || [])].filter(Boolean).join(' ')}</span>
+                    <div className="rate-benefits"><span className="amenity-tag">{r.rate_code ?? r.name}</span></div>
+                  </div>
+                  <div className="rate-price"><strong>{formatPrice(total, state.selectedRoom?.currency)}</strong><small>total</small></div>
+                </div>
+                {r.policy && (
+                  <p className="rate-policy" style={{fontSize: '0.8em', color: 'var(--muted)', marginTop: '0.5em', display: 'flex', alignItems: 'center', gap: '0.35em'}}>
+                    <span>{r.policy}</span>
+                    <span className="policy-info-icon" title={r.policyDetail || r.policy} aria-label="Policy details">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
+                    </span>
+                  </p>
+                )}
+              </div>
+            );
+          })}
+          </div>
+        </div>
+        <button className="btn-primary" disabled={!state.selectedRate} onClick={() => goToStep('summary')}>
+          Proceed to Summary
+        </button>
+      </>
+    );
+  };
+
+  const renderSummaryStep = () => {
+    const nights = getNights();
+    const total = getTotalPrice();
+    const canSubmit = state.guest.firstName && state.guest.lastName && state.guest.email;
+    const hasStripe = stripePublishableKey && typeof createPaymentIntent === 'function';
+    return (
+      <>
+        <h2 className="step-title">Review Your Booking</h2>
+        <p className="step-subtitle">Confirm your details before payment</p>
+        <div className="checkout-grid">
+          <div>
+            <h3 style={{fontSize: '0.65em', textTransform: 'uppercase', letterSpacing: '0.2em', color: 'var(--muted)', paddingBottom: '0.5em', borderBottom: '1px solid var(--border)', marginBottom: '1em', fontFamily: 'var(--font-sans)', fontWeight: 500}}>Guest Information</h3>
+            <div className="form-row">
+              <div className="form-group">
+                <label className="form-label">First Name</label>
+                <input className="form-input" value={state.guest.firstName} onChange={(e) => updateGuest('firstName', e.target.value)} placeholder="James" />
+              </div>
+              <div className="form-group">
+                <label className="form-label">Last Name</label>
+                <input className="form-input" value={state.guest.lastName} onChange={(e) => updateGuest('lastName', e.target.value)} placeholder="Bond" />
+              </div>
+            </div>
+            <div className="form-group">
+              <label className="form-label">Email</label>
+              <input className="form-input" type="email" value={state.guest.email} onChange={(e) => updateGuest('email', e.target.value)} placeholder="james@example.com" />
+            </div>
+            <div className="form-group">
+              <label className="form-label">Phone</label>
+              <input className="form-input" type="tel" value={state.guest.phone} onChange={(e) => updateGuest('phone', e.target.value)} placeholder="+1 (555) 000-0000" />
+            </div>
+            <div className="form-group">
+              <label className="form-label">Special Requests</label>
+              <textarea className="form-textarea" rows="3" value={state.guest.specialRequests} onChange={(e) => updateGuest('specialRequests', e.target.value)} placeholder="Any special requests..."></textarea>
+            </div>
+          </div>
+          <div>
+            <div className="summary-box">
+              <h3>Booking Summary</h3>
+              {state.selectedRoom && (
+                <>
+                  <img src={state.selectedRoom.image} alt="" style={{width: '100%', height: '8em', objectFit: 'cover', borderRadius: '0.5em', marginBottom: '0.75em'}} onError={(e) => { e.target.src = 'https://images.unsplash.com/photo-1618773928121-c32242e63f39?w=800&q=80'; }} />
+                  <p style={{fontFamily: 'var(--font-serif)', marginBottom: '1em'}}>{state.selectedRoom.name}</p>
+                </>
+              )}
+              <div className="summary-row"><span>Check-in</span><span>{fmt(state.checkIn)}</span></div>
+              <div className="summary-row"><span>Check-out</span><span>{fmt(state.checkOut)}</span></div>
+              {(() => { const g = getTotalGuests(); return <div className="summary-row"><span>Guests</span><span>{g.adults} adults{g.children ? ', ' + g.children + ' children' : ''}</span></div>; })()}
+              <div className="summary-row"><span>Rate</span><span>{state.selectedRate ? [state.selectedRate.policy, ...(state.selectedRate.benefits || [])].filter(Boolean).join(' ') : '—'}</span></div>
+              {((state.selectedRate?.fees?.length > 0) || state.selectedRate?.vat) && (() => {
+                const nights = getNights();
+                const rooms = state.rooms;
+                const roomTotal = Math.round(state.selectedRoom.basePrice * state.selectedRate.priceModifier * rooms);
+                const currency = state.selectedRoom?.currency;
+                const fees = state.selectedRate.fees ?? [];
+                const allIncluded = fees.length > 0 && fees.every(f => f.included) && (!state.selectedRate.vat || state.selectedRate.vat.included);
+                return (
+                  <>
+                    <div className="summary-row"><span>Room total</span><span>{formatPrice(roomTotal, currency)}</span></div>
+                    <div className="summary-fees">
+                      <p className="summary-fees-heading">Fees & taxes</p>
+                      {allIncluded && <p className="summary-fees-note">Included in your rate</p>}
+                      <div className="summary-fees-list">
+                        {fees.map((f, i) => (
+                          <div key={i} className="summary-row summary-row--fee">
+                            <span className="summary-fee-label">
+                              {f.name}{' '}
+                              <span className={f.included ? 'summary-fee-badge' : 'summary-fee-badge summary-fee-badge--excluded'}>
+                                {f.included ? 'Included' : 'Excluded'}
+                              </span>
+                            </span>
+                            <span>{formatPrice(f.perNight ? f.amount * nights * rooms : f.amount, currency)}</span>
+                          </div>
+                        ))}
+                        {state.selectedRate.vat && (
+                          <div className="summary-row summary-row--fee">
+                            <span className="summary-fee-label">
+                              VAT
+                              {state.selectedRate.vat.value !== 0 && state.selectedRate.vat.value != null && (
+                                <>
+                                  {' '}
+                                  <span className={state.selectedRate.vat.included ? 'summary-fee-badge' : 'summary-fee-badge summary-fee-badge--excluded'}>
+                                    {state.selectedRate.vat.included ? 'Included' : 'Excluded'}
+                                  </span>
+                                </>
+                              )}
+                            </span>
+                            <span>{formatPrice(state.selectedRate.vat.value, currency)}</span>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </>
+                );
+              })()}
+              <div className="summary-total">
+                <span className="summary-total-label">Total</span>
+                <span className="summary-total-price">{formatPrice(total, state.selectedRoom?.currency)}</span>
+              </div>
+              {apiError && <p style={{ color: 'var(--destructive, #ef4444)', fontSize: '0.85em', marginTop: '0.5em' }}>{apiError}</p>}
+              <button
+                className="btn-primary"
+                style={{maxWidth: '100%', marginTop: '1em'}}
+                disabled={!canSubmit}
+                onClick={confirmReservation}
+              >
+                {hasStripe ? (
+                  <>Proceed to Payment</>
+                ) : (
+                  <>Confirm Reservation</>
+                )}
+              </button>
+              <p className="secure-note" style={{display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5em'}}>
+                <Lock size={14} /> Secure & encrypted booking
+              </p>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  };
+
+  const renderPaymentStep = () => {
+    const total = getTotalPrice();
+    return (
+      <div className="payment-step">
+        <button type="button" className="payment-step-back" onClick={() => goToStep('summary')} aria-label="Back to summary">
+          <ChevronLeft size={16} /> Back to summary
+        </button>
+        <h2 className="step-title">Payment</h2>
+        <p className="step-subtitle">Enter your payment details to confirm your reservation</p>
+        <div className="checkout-grid">
+          <div className="payment-step-form">
+            <div className="checkout-payment-section">
+              <h3 style={{fontSize: '0.65em', textTransform: 'uppercase', letterSpacing: '0.2em', color: 'var(--muted)', marginBottom: '0.5em', fontFamily: 'var(--font-sans)', fontWeight: 500}}>Card details</h3>
+              {!paymentElementReady && !apiError && (
+                <p className="payment-loading-placeholder" style={{ fontSize: '0.85em', color: 'var(--muted)', margin: 0 }}>Loading payment form…</p>
+              )}
+              <PaymentElementContainer />
+              {apiError && (
+                <p className="payment-setup-error" style={{ fontSize: '0.85em', color: 'var(--destructive, #ef4444)', margin: 0 }}>
+                  Payment form could not load. Your backend must create a Stripe Payment Intent and return <code style={{ fontSize: '0.8em' }}>{'{ clientSecret }'}</code>. Check the endpoint and try again.
+                </p>
+              )}
+            </div>
+          </div>
+          <div className="payment-step-summary">
+            <h3>Amount due</h3>
+            <div className="payment-total-row">
+              <span className="payment-total-label">Total</span>
+              <span className="payment-total-amount">{formatPrice(total, state.selectedRoom?.currency)}</span>
+            </div>
+            <button
+              className="btn-primary"
+              disabled={!paymentElementReady}
+              onClick={confirmReservation}
+            >
+              <CreditCard size={18} />
+              {!paymentElementReady ? 'Loading payment…' : 'Confirm Reservation'}
+            </button>
+            <p className="secure-note">
+              <Lock size={14} /> Secure & encrypted booking
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const renderConfirmationStep = () => {
+    if (!confirmationDetails) {
+      return (
+        <div className="confirmation">
+          <div className="confirmation-loader">
+            <div className="confirmation-loader-spinner" />
+            <h2 className="step-title">Finalizing Reservation</h2>
+            <p className="step-subtitle" style={{ margin: 0, color: 'var(--muted)', fontSize: '0.9em' }}>We're confirming your booking. This usually takes a few seconds.</p>
+            {confirmationStatus ? <span style={{ fontSize: '0.8em', color: 'var(--muted)' }}>Status: {confirmationStatus}</span> : null}
+          </div>
+        </div>
+      );
+    }
+    const nights = confirmationDetails?.nights ?? getNights();
+    const total = (confirmationDetails?.totalAmount != null && confirmationDetails?.totalAmount !== '') ? Number(confirmationDetails.totalAmount) : getTotalPrice();
+    const currency = confirmationDetails?.currency || state.selectedRoom?.currency || 'USD';
+    const bookingId = confirmationDetails?.bookingId ?? confirmationDetails?.booking_id ?? null;
+    const hotelName = confirmationDetails?.hotelName ?? confirmationDetails?.hotel_name ?? null;
+    const roomTypeRaw = confirmationDetails?.roomType ?? confirmationDetails?.room_type ?? state.selectedRoom?.name ?? '';
+    const roomType = roomTypeRaw.replace(/\s*Rate\s*\d+\s*$/i, '').trim();
+    const checkInDisplay = confirmationDetails?.checkIn ? (typeof confirmationDetails.checkIn === 'string' ? new Date(confirmationDetails.checkIn) : confirmationDetails.checkIn) : state.checkIn;
+    const checkOutDisplay = confirmationDetails?.checkOut ? (typeof confirmationDetails.checkOut === 'string' ? new Date(confirmationDetails.checkOut) : confirmationDetails.checkOut) : state.checkOut;
+    const nightsLabel = nights === 1 ? '1 night' : `${nights} nights`;
+    return (
+      <div className="confirmation">
+        <div className="confirm-icon"><Check size={56} /></div>
+        <h2 className="step-title">Reservation Confirmed</h2>
+        <p className="step-subtitle">Thank you, {state.guest.firstName}. We look forward to welcoming you.</p>
+        <div className="confirm-box">
+          {bookingId && (
+            <div className="confirm-header">
+              <div className="confirm-booking-id">
+                <span className="confirm-booking-id-label">Booking ID</span>
+                <span className="confirm-booking-id-value">{bookingId}</span>
+              </div>
+            </div>
+          )}
+          <div className="confirm-detail">
+            <span className="confirm-detail-icon"><Calendar size={18} /></span>
+            <div className="confirm-detail-content">
+              <span>{checkInDisplay ? fmtLong(checkInDisplay) : ''} to {checkOutDisplay ? fmtLong(checkOutDisplay) : ''}</span>
+              <small>{nightsLabel}</small>
+            </div>
+          </div>
+          {hotelName && (
+            <div className="confirm-detail">
+              <span className="confirm-detail-icon"><MapPin size={18} /></span>
+              <div className="confirm-detail-content"><span>{hotelName}</span></div>
+            </div>
+          )}
+          <div className="confirm-detail">
+            <span className="confirm-detail-icon"><MapPin size={18} /></span>
+            <div className="confirm-detail-content">
+              <span>{roomType}</span>
+              {state.selectedRate && (
+                <span className="confirm-detail-rate-line">
+                  {[state.selectedRate.policy, ...(state.selectedRate.benefits || [])].filter(Boolean).join(' · ')}
+                </span>
+              )}
+            </div>
+          </div>
+          <div className="confirm-detail">
+            <span className="confirm-detail-icon"><Phone size={18} /></span>
+            <div className="confirm-detail-content">
+              <span>{state.guest.firstName} {state.guest.lastName}</span>
+              <small>{state.guest.email}</small>
+            </div>
+          </div>
+          <div className="summary-total">
+            <span className="summary-total-label">Total Charged</span>
+            <span className="summary-total-price">{formatPrice(total, currency)}</span>
+          </div>
+        </div>
+        <p style={{fontSize: '0.75em', color: 'var(--muted)', marginBottom: '1.5em'}}>A confirmation email has been sent to {state.guest.email}</p>
+        <button className="btn-secondary" onClick={resetBooking}>Book Another Stay</button>
+      </div>
+    );
+  };
+
+  const isVisible = isOpen && !isClosing && isReadyForOpen;
+  if (!isOpen && !isClosing) return null;
+
+  return (
+    <>
+      <div className={`booking-widget-overlay ${isVisible ? 'active' : ''}`} onClick={requestClose}></div>
+      <div
+        ref={widgetRef}
+        className={`booking-widget-modal ${isVisible ? 'active' : ''}`}
+        onTransitionEnd={handleTransitionEnd}
+      >
+        <button className="booking-widget-close" onClick={requestClose}><X size={24} /></button>
+        {renderStepIndicator()}
+        <div className="booking-widget-step-content">
+          {state.step === 'dates' && renderDatesStep()}
+          {state.step === 'rooms' && renderRoomsStep()}
+          {state.step === 'rates' && renderRatesStep()}
+          {state.step === 'summary' && renderSummaryStep()}
+          {state.step === 'payment' && renderPaymentStep()}
+          {state.step === 'confirmation' && renderConfirmationStep()}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default BookingWidget;