@nuitee/booking-widget 1.0.0

package/dist/booking-widget-standalone.js

@@ -0,0 +1,1848 @@
+(function(){'use strict';window.__BOOKING_WIDGET_API_BASE_URL__='https://ai.thehotelplanet.com';window.__BOOKING_WIDGET_STRIPE_KEY__='pk_test_51T0Se5EvQaQIixshRA8gbsI40NubMGwHlSWZmQM2LAx3jpVO0ThzVifqdTiMeGOyBfLNe8V9G8POGu8SjkvWOStM00H0i1U3uz';})();
+/**
+ * Shared Booking API layer for the @nuitee/booking-widget.
+ * Used by Vanilla JS, Vue, and React variants so integration lives in one place.
+ *
+ * API contract (adapt your backend to this shape or use transform in the methods below):
+ *
+ * GET /rooms?checkIn=ISO&checkOut=ISO&adults=N&children=N&rooms=N
+ * Response: Array<{ id, name, description, image, size, maxGuests, amenities[], basePrice }>
+ *
+ * GET /rates?roomId=ID&checkIn=ISO&checkOut=ISO&adults=N&children=N&rooms=N
+ * Response: Array<{ id, name, description, priceModifier, benefits[], recommended? }>
+ *
+ * POST /bookings
+ * Body: { checkIn, checkOut, adults, children, rooms, roomId, rateId, guest: { firstName, lastName, email, phone, specialRequests } }
+ * Response: { confirmationCode [, ...] }
+ */
+
+const DEFAULT_ROOMS = [];
+
+const DEFAULT_RATES = [];
+
+/**
+ * Returns date as YYYY-MM-DD using local date (no timezone shift).
+ * Calendar dates are created at local midnight; using toISOString() would convert to UTC and can shift the day.
+ */
+function toISO(date) {
+  if (!date) return '';
+  const d = date instanceof Date ? date : new Date(date);
+  if (Number.isNaN(d.getTime())) return '';
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${day}`;
+}
+
+/** Maps currency code (e.g. 'EUR') to symbol (e.g. '€'). Falls back to code if unknown. */
+const CURRENCY_SYMBOLS = {
+  USD: '$', EUR: '€', GBP: '£', JPY: '¥', CHF: 'Fr', CAD: 'C$', AUD: 'A$',
+  MAD: 'MAD', IDR: 'Rp', INR: '₹', THB: '฿', MXN: 'MX$', BRL: 'R$',
+  CNY: '¥', KRW: '₩', PLN: 'zł', SEK: 'kr', NOK: 'kr', DKK: 'kr', CZK: 'Kč',
+  HUF: 'Ft', RON: 'lei', BGN: 'лв', TRY: '₺', ZAR: 'R', AED: 'د.إ', SAR: '﷼',
+};
+function getCurrencySymbol(code) {
+  if (!code || typeof code !== 'string') return '$';
+  const c = code.trim().toUpperCase();
+  return CURRENCY_SYMBOLS[c] ?? c + ' ';
+}
+
+/** Format price with currency symbol and space (e.g. formatPrice(1234, 'EUR') → '€ 1,234') */
+function formatPrice(amount, currencyCode = 'USD') {
+  const symbol = getCurrencySymbol(currencyCode).replace(/\s+$/, '');
+  const n = Number(amount);
+  if (Number.isNaN(n)) return symbol + ' 0';
+  return symbol + ' ' + Math.round(n).toLocaleString();
+}
+
+/** Extract user-facing error message from API response body (error, message, etc.) */
+function getErrorMessage(body, fallback) {
+  if (body && typeof body === 'object') {
+    const msg = body.error ?? body.message ?? body.err ?? body.detail;
+    if (typeof msg === 'string') return msg;
+    if (typeof msg === 'object' && msg?.message) return msg.message;
+  }
+  return fallback || 'Request failed';
+}
+
+/**
+ * Parses date from availability API (e.g. "2023-05-20 23:59:59"). Normalizes to ISO for reliable parsing.
+ */
+function parsePolicyUntil(val) {
+  if (val == null) return null;
+  if (val instanceof Date) return Number.isNaN(val.getTime()) ? null : val;
+  const str = String(val).trim();
+  if (!str) return null;
+  const iso = str.replace(/^(\d{4}-\d{2}-\d{2})\s+(\d{2}:\d{2}(?::\d{2})?)/, '$1T$2');
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+
+/**
+ * Derives "Free cancellation" vs "Non-refundable" from the availability rate only.
+ * Uses only the policy array from the availability response: policy[] with { until: "YYYY-MM-DD HH:mm:ss", penalty }.
+ * If policy.length > 0 and the first until date is in the future → "Free cancellation", else "Non-refundable".
+ */
+function deriveRatePolicyLabel(avRate) {
+  const policy = avRate.policy;
+  if (!Array.isArray(policy) || policy.length === 0) return 'Non-refundable';
+
+  const first = policy[0];
+  const until = first?.until;
+  if (until == null) return 'Non-refundable';
+
+  const untilDate = parsePolicyUntil(until);
+  if (untilDate == null) return 'Non-refundable';
+
+  return untilDate > new Date() ? 'Free cancellation' : 'Non-refundable';
+}
+
+/**
+ * Build a stable key for "board" (meal plan) from rate benefits for grouping.
+ * @param {Array<string>} [benefits]
+ * @returns {string}
+ */
+function getBoardKey(benefits) {
+  if (!Array.isArray(benefits) || benefits.length === 0) return '';
+  return benefits
+    .map((b) => (typeof b === 'string' ? b : String(b)).trim())
+    .filter(Boolean)
+    .sort()
+    .join('|');
+}
+
+/**
+ * From a list of rates (widget shape with policy, benefits, priceModifier), keep only the cheapest
+ * rate per (cancellation policy, board). So e.g. 4 rates → 2 free cancellation + room only, 2 non-refundable + breakfast
+ * becomes 2 rates: cheapest in each group.
+ * @param {Array<{ policy?: string, benefits?: string[], priceModifier?: number }>} rates
+ * @returns {Array} Filtered rates (same objects, no copy)
+ */
+function filterCheapestRatePerPolicyAndBoard(rates) {
+  if (!Array.isArray(rates) || rates.length === 0) return rates;
+  const byKey = new Map();
+  for (const r of rates) {
+    const policy = r.policy ?? 'Non-refundable';
+    const boardKey = getBoardKey(r.benefits);
+    const key = `${String(policy)}::${boardKey}`;
+    const existing = byKey.get(key);
+    const price = r.priceModifier ?? 1;
+    if (!existing || (existing.priceModifier ?? 1) > price) {
+      byKey.set(key, r);
+    }
+  }
+  return Array.from(byKey.values());
+}
+
+/**
+ * Normalize rate fees from availability API into a uniform shape for the widget.
+ * API shape: [{ name, value, included? }, ...]. included: true = fee already in rate (show only); false = add to total.
+ * @param {Object} avRate - Raw rate from availability response
+ * @returns {Array<{ name: string, amount: number, included?: boolean }>}
+ */
+function normalizeRateFees(avRate) {
+  const list = avRate?.fees ?? (avRate?.fee != null ? [avRate.fee] : []);
+  if (!Array.isArray(list) || list.length === 0) return [];
+  return list
+    .map((f) => {
+      const name = f?.name ?? f?.label ?? f?.type ?? f?.description ?? 'Fee';
+      const amount = Number(f?.value ?? f?.amount ?? f?.price ?? 0) || 0;
+      if (amount <= 0) return null;
+      const included = Boolean(f?.included);
+      return { name: String(name), amount, included };
+    })
+    .filter(Boolean);
+}
+
+/** Format policy "until" (e.g. "2023-05-20 23:59:59") for display in tooltip. */
+function formatPolicyUntilForDisplay(untilStr) {
+  const d = parsePolicyUntil(untilStr);
+  if (!d) return '';
+  const datePart = d.toLocaleDateString('en-US', { day: 'numeric', month: 'short', year: 'numeric' });
+  const timePart = d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true });
+  return `${datePart}, ${timePart}`;
+}
+
+/**
+ * Builds human-readable policy detail for tooltip from availability rate policy array.
+ */
+const NON_REFUNDABLE_POLICY_DETAIL = 'In case of cancellation, no-show or modification, the total amount of the booking is not refunded.';
+
+function deriveRatePolicyDetail(avRate) {
+  const policy = avRate.policy;
+  if (!Array.isArray(policy) || policy.length === 0) {
+    return NON_REFUNDABLE_POLICY_DETAIL;
+  }
+  const first = policy[0];
+  const until = first?.until;
+  const penalty = first?.penalty;
+  const untilDate = until ? parsePolicyUntil(until) : null;
+  const isFree = untilDate != null && untilDate > new Date();
+  const formattedUntil = formatPolicyUntilForDisplay(until);
+  if (isFree && formattedUntil) {
+    const penaltyNote = penalty != null && penalty > 0
+      ? ` After that, a penalty of ${penalty} may apply.`
+      : ' After that, a penalty may apply.';
+    return `Free cancellation until ${formattedUntil}.${penaltyNote}`;
+  }
+  return NON_REFUNDABLE_POLICY_DETAIL;
+}
+
+/**
+ * Creates a booking API client. Use this in all three widgets (Vanilla, Vue, React).
+ *
+ * @param {Object} config
+ * @param {string} [config.baseUrl] - Base URL for the API (e.g. 'https://api.example.com'). If omitted, fetch methods return static fallback data.
+ * @param {string} [config.availabilityBaseUrl] - Base URL for availability API (e.g. 'https://extranet.thehotelplanet.com'). Defaults to baseUrl.
+ * @param {string} [config.propertyBaseUrl] - Base URL for property/rooms API (e.g. 'https://thehotelplanet.com'). Use '' in dev for same-origin proxy.
+ * @param {string} [config.s3BaseUrl] - Base URL for room images (e.g. from VITE_AWS_S3_PATH).
+ * @param {string|number} [config.propertyId] - Property ID (legacy). Prefer propertyKey for proxy endpoints.
+ * @param {string} [config.propertyKey] - Property key for proxy endpoints (e.g. VITE_PROPERTY_KEY). Used in /proxy/availability and /proxy/ari-properties?key=.
+ * @param {string} [config.currency] - Currency code (e.g. 'MAD'). Default 'MAD'.
+ * @param {Object} [config.headers] - Optional. Static headers for each request (e.g. { 'X-API-Key': '...' }).
+ * @param {function(): Object} [config.getHeaders] - Optional. Return headers for each request (merged after headers). Use for dynamic headers.
+ * @returns {{ fetchRooms: function, fetchRates: function, createBooking: function, hasApi: boolean }}
+ */
+function createBookingApi(config = {}) {
+  const baseUrl = (config.baseUrl || '').replace(/\/$/, '');
+  // Empty string means "same-origin" (relative path) for proxy in dev; undefined/null fall back to baseUrl
+  const availabilityBaseUrl = config.availabilityBaseUrl === '' ? '' : ((config.availabilityBaseUrl || baseUrl) || '').replace(/\/$/, '');
+  const propertyBaseUrl = (config.propertyBaseUrl ?? '').replace(/\/$/, '');
+  const s3BaseUrl = (config.s3BaseUrl ?? '').replace(/\/$/, '');
+  const propertyId = config.propertyId != null ? String(config.propertyId) : null;
+  const rawKey = config.propertyKey != null && config.propertyKey !== '' ? String(config.propertyKey).trim() : null;
+  // Proxy endpoints expect key to start with "book_engine_" (installer's VITE_PROPERTY_KEY). Ignore other values.
+  const propertyKey = rawKey && rawKey.startsWith('book_engine_') ? rawKey : null;
+  if (rawKey && !propertyKey && typeof console !== 'undefined' && console.warn) {
+    console.warn('[booking-api] Property key must start with "book_engine_". Ignoring invalid value. Set VITE_PROPERTY_KEY in your .env (see .env.example).');
+  }
+  const currency = config.currency || 'MAD';
+  const staticHeaders = config.headers || {};
+  const getHeaders = config.getHeaders || (() => ({}));
+
+  // baseUrl can be empty string for same-origin; treat propertyKey flow as "API enabled"
+  const hasApi = Boolean(baseUrl) || Boolean(propertyKey);
+  const hasAvailabilityApi = Boolean(propertyKey || propertyId);
+
+  async function request(method, path, body, base = baseUrl) {
+    const url = `${(base || '').replace(/\/$/, '')}${path}`;
+    const headers = {
+      'Content-Type': 'application/json',
+      ...staticHeaders,
+      ...getHeaders(),
+    };
+    if (url.includes('ngrok')) headers['ngrok-skip-browser-warning'] = 'true';
+    const options = { method, headers };
+    if (body && (method === 'POST' || method === 'PUT')) options.body = JSON.stringify(body);
+    const res = await fetch(url, options);
+    if (!res.ok) {
+      let body;
+      try { body = await res.json(); } catch (_) {}
+      const err = new Error(getErrorMessage(body, res.statusText || 'Request failed'));
+      err.status = res.status;
+      err.response = res;
+      err.body = body;
+      throw err;
+    }
+    const contentType = res.headers.get('content-type');
+    if (contentType && contentType.includes('application/json')) return res.json();
+    return res.text();
+  }
+
+  /**
+   * Fetches available rooms: calls availability API, applies occupancy filter, merges with property/rooms from get_properties.
+   * @param {{ checkIn: Date|string, checkOut: Date|string, adults: number, children: number, rooms: number }} params
+   * @returns {Promise<Array>} Room list in widget shape { id, name, description, image, size, maxGuests, amenities, basePrice }
+   */
+  async function fetchRooms(params) {
+    if (!hasAvailabilityApi) return Promise.resolve([]);
+    const rooms = params.rooms ?? 1;
+    let occupancies;
+    if (Array.isArray(params.occupancies) && params.occupancies.length >= rooms) {
+      occupancies = params.occupancies.slice(0, rooms).map((occ, i) => ({
+        adults: Math.max(1, Math.min(8, Number(occ.adults) || 1)),
+        children: Array.isArray(occ.children) ? occ.children.slice(0, 6).map(a => Math.max(0, Math.min(17, Number(a) || 0))) : [],
+        occupancy_index: i + 1,
+      }));
+    } else {
+      const adults = params.adults ?? 2;
+      const children = params.children ?? 0;
+      const childrenAges = Array.isArray(params.childrenAges) ? params.childrenAges.slice(0, children) : [];
+      while (childrenAges.length < children) childrenAges.push(0);
+      occupancies = Array.from({ length: rooms }, (_, i) => ({
+        adults: i === 0 ? adults : 1,
+        children: i === 0 ? childrenAges : [],
+        occupancy_index: i + 1,
+      }));
+    }
+    const occupancyLength = occupancies.length;
+
+    // Fetch get_properties first to get currency_code (e.g. 'EUR') and room details
+    let propertyRooms = {};
+    let propertyCurrency = currency;
+    const propFullUrl = propertyKey
+      ? `${availabilityBaseUrl}/proxy/ari-properties?key=${encodeURIComponent(propertyKey)}`
+      : propertyBaseUrl
+        ? `${propertyBaseUrl}/ari/get_properties?id=${encodeURIComponent(propertyId)}`
+        : `/ari/get_properties?id=${encodeURIComponent(propertyId)}`;
+    try {
+      const getOpts = { method: 'GET' };
+      if (propFullUrl.includes('ngrok')) getOpts.headers = { 'ngrok-skip-browser-warning': 'true' };
+      const propRes = await fetch(propFullUrl, getOpts);
+      if (propRes.ok) {
+        const propData = await propRes.json();
+        propertyRooms = propData?.rooms ?? {};
+        propertyCurrency = (typeof propData?.currency_code === 'string' && propData.currency_code.trim())
+          ? propData.currency_code.trim()
+          : currency;
+      }
+    } catch (_) {}
+
+    const body = {
+      ...(propertyKey ? {} : { property_ids: [Number(propertyId)] }),
+      checkin: toISO(params.checkIn),
+      checkout: toISO(params.checkOut),
+      occupancies,
+      nationality: '',
+      currency: propertyCurrency,
+    };
+
+    const availabilityPath = propertyKey
+      ? `/proxy/availability?key=${encodeURIComponent(propertyKey)}`
+      : `/api/calendar/booking_engine/${propertyId}/availability`;
+    const data = await request('POST', availabilityPath, body, availabilityBaseUrl);
+    if (data && typeof data === 'object' && (data.error || data.message)) {
+      throw new Error(getErrorMessage(data, 'Failed to load rooms'));
+    }
+
+    // Extract rates: properties[0].rates or rates or data
+    const rawRates = data?.properties?.[0]?.rates ?? data?.rates ?? data?.data ?? [];
+    const ratesArray = Array.isArray(rawRates) ? rawRates : Object.values(rawRates || {});
+
+    if (ratesArray.length === 0) {
+      return [];
+    }
+
+    // Occupancy filter: keep only room_id+rate_id combos that appear for ALL occupancies
+    const duplicateCountMap = new Map();
+    for (const r of ratesArray) {
+      const key = `${r.room_id}-${r.rate_id}`;
+      duplicateCountMap.set(key, (duplicateCountMap.get(key) || 0) + 1);
+    }
+    const uniqueRates = ratesArray.filter((r) => {
+      const key = `${r.room_id}-${r.rate_id}`;
+      return duplicateCountMap.get(key) === occupancyLength;
+    });
+    const seenKeys = new Set();
+    const filteredRates = uniqueRates.filter((r) => {
+      const key = `${r.room_id}-${r.rate_id}`;
+      if (seenKeys.has(key)) return false;
+      seenKeys.add(key);
+      return true;
+    });
+
+    const availableRoomIds = [...new Set(filteredRates.map((r) => String(r.room_id)))];
+    if (availableRoomIds.length === 0) return [];
+
+    // Map to widget room format (propertyRooms already fetched above)
+    const getPrice = (r) => {
+      const a = r?.amount ?? r;
+      return (a?.price ?? a?.total ?? r?.price ?? 0) || 0;
+    };
+    const fallbackImage = 'https://images.unsplash.com/photo-1618773928121-c32242e63f39?w=800&q=80';
+
+    return availableRoomIds.map((roomId) => {
+      const roomData = propertyRooms[roomId] ?? propertyRooms[String(roomId)] ?? {};
+      const roomRates = filteredRates.filter((r) => String(r.room_id) === String(roomId));
+      const minPrice = roomRates.length
+        ? Math.min(...roomRates.map(getPrice).filter((p) => p > 0)) || roomData.base_price || 0
+        : roomData.base_price || 0;
+
+      const photos = roomData.photos ?? [];
+      const mainPhoto = photos.find((p) => p.main) ?? photos[0];
+      const photoPath = mainPhoto?.path ?? '';
+      const image = s3BaseUrl && photoPath ? `${s3BaseUrl}/${photoPath.replace(/^\//, '')}` : fallbackImage;
+
+      const sizeVal = roomData.size?.value ?? roomData.size_value;
+      let sizeUnit = roomData.size?.unit ?? roomData.size_unit ?? 'm²';
+      if (typeof sizeUnit === 'string' && /^square_?meter(s)?$/i.test(sizeUnit.trim())) sizeUnit = 'm²';
+      const size = sizeVal != null ? `${sizeVal} ${sizeUnit}` : '';
+
+      const roomBasePrice = minPrice || 1;
+      const propertyRates = roomData.rates ?? {};
+      const rates = roomRates.map((avRate, idx) => {
+        const ratePrice = getPrice(avRate) || 0;
+        const plan = propertyRates[avRate.rate_id] ?? propertyRates[String(avRate.rate_id)] ?? {};
+        const planName = plan.name ?? avRate.name ?? `Rate ${avRate.rate_id}`;
+        const board = avRate.board ?? avRate.meal_plan;
+        const benefits = Array.isArray(board) ? board : (board ? [String(board)] : []);
+        const policyLabel = deriveRatePolicyLabel(avRate);
+        const policyDetail = deriveRatePolicyDetail(avRate);
+        const fees = normalizeRateFees(avRate);
+        const vat = avRate?.vat != null
+          ? { value: Number(avRate.vat.value) || 0, included: Boolean(avRate.vat.included) }
+          : { value: 0, included: false };
+        const rateCode = avRate.rate_code ?? avRate.rate_name ?? plan.rate_code ?? plan.rate_name ?? planName;
+        const rateIdentifier = avRate.rate_identifier ?? avRate.rate_id ?? avRate.id ?? rateCode;
+        return {
+          id: avRate.rate_id ?? avRate.id ?? avRate,
+          name: planName,
+          description: plan.min_stay_length ? `Min. ${plan.min_stay_length} night(s)` : '',
+          priceModifier: ratePrice > 0 ? ratePrice / roomBasePrice : 1,
+          benefits,
+          policy: policyLabel,
+          policyDetail,
+          fees,
+          vat,
+          recommended: idx === 0,
+          rate_code: rateCode,
+          rate_identifier: rateIdentifier,
+        };
+      });
+
+      const ratesFiltered = filterCheapestRatePerPolicyAndBoard(rates);
+
+      return {
+        id: roomData.id ?? roomId,
+        name: roomData.name ?? `Room ${roomId}`,
+        description: roomData.description ?? '',
+        image,
+        size,
+        maxGuests: roomData.max_guests ?? roomData.max_occupancy ?? 2,
+        amenities: (() => {
+          const a = roomData.amenities;
+          if (!a) return [];
+          if (Array.isArray(a)) return a.map((x) => (typeof x === 'object' && x?.name ? x.name : String(x)));
+          return [String(a)];
+        })(),
+        basePrice: minPrice || 0,
+        currency: propertyCurrency,
+        rates: ratesFiltered,
+      };
+    });
+  }
+
+  /**
+   * @param {string} roomId
+   * @param {{ checkIn: Date|string, checkOut: Date|string, adults: number, children: number, rooms: number }} params
+   * @returns {Promise<Array>} Rate list in widget shape
+   */
+  async function fetchRates(roomId, params) {
+    if (!hasApi) return Promise.resolve([]);
+    let adults = params.adults;
+    let children = params.children;
+    if (Array.isArray(params.occupancies) && params.occupancies.length > 0) {
+      adults = params.occupancies.reduce((s, o) => s + (o.adults || 0), 0);
+      children = params.occupancies.reduce((s, o) => s + (o.children || 0), 0);
+    }
+    const q = new URLSearchParams({
+      roomId,
+      checkIn: toISO(params.checkIn),
+      checkOut: toISO(params.checkOut),
+      adults: String(adults ?? 2),
+      children: String(children ?? 0),
+      rooms: String(params.rooms ?? 1),
+    }).toString();
+    const data = await request('GET', `/rates?${q}`);
+    if (data && typeof data === 'object' && (data.error || data.message)) {
+      throw new Error(getErrorMessage(data, 'Failed to load rates'));
+    }
+    return Array.isArray(data) ? data : (data.rates || data.data || []);
+  }
+
+  /**
+   * @param {Object} payload - Full booking state: checkIn, checkOut, adults, children, rooms, selectedRoom (or roomId), selectedRate (or rateId), guest
+   * @returns {Promise<{ confirmationCode: string }>}
+   */
+  async function createBooking(payload) {
+    let adults = payload.adults;
+    let children = payload.children;
+    if (Array.isArray(payload.occupancies) && payload.occupancies.length > 0) {
+      adults = payload.occupancies.reduce((s, o) => s + (o.adults || 0), 0);
+      children = payload.occupancies.reduce((s, o) => s + (o.children || 0), 0);
+    }
+    const body = {
+      checkIn: toISO(payload.checkIn),
+      checkOut: toISO(payload.checkOut),
+      adults: adults ?? 2,
+      children: children ?? 0,
+      rooms: payload.rooms ?? 1,
+      roomId: payload.selectedRoom?.id ?? payload.roomId,
+      rateId: payload.selectedRate?.id ?? payload.rateId,
+      guest: payload.guest || {},
+    };
+    if (!hasApi) {
+      return Promise.resolve({
+        confirmationCode: 'LX' + Date.now().toString(36).toUpperCase().slice(-6),
+      });
+    }
+    const data = await request('POST', '/bookings', body);
+    if (data && typeof data === 'object' && (data.error || data.message)) {
+      throw new Error(getErrorMessage(data, 'Booking failed'));
+    }
+    return {
+      confirmationCode: data.confirmationCode || data.confirmation_code || data.id || ('LX' + Date.now().toString(36).toUpperCase().slice(-6)),
+      ...data,
+    };
+  }
+
+  return {
+    fetchRooms,
+    fetchRates,
+    createBooking,
+    hasApi,
+  };
+}
+
+/**
+ * Compute total price (same logic as widget getTotalPrice).
+ * API basePrice is total for the full stay per room; total = basePrice * priceModifier * rooms.
+ * @param {{ selectedRoom: { basePrice: number, currency?: string }, selectedRate: { priceModifier: number, fees?: Array<{ included?: boolean, perNight?: boolean, amount: number }>, vat?: { included?: boolean, value?: number } }, rooms: number }} state
+ * @param {number} nights
+ * @returns {number}
+ */
+function computeCheckoutTotal(state, nights) {
+  const room = state.selectedRoom;
+  const rate = state.selectedRate;
+  if (!room || !rate) return 0;
+  const rooms = state.rooms ?? 1;
+  const roomTotal = Math.round(room.basePrice * rate.priceModifier * rooms);
+  const fees = rate.fees ?? [];
+  let add = 0;
+  fees.forEach((f) => {
+    if (!f.included) add += f.perNight ? f.amount * nights * rooms : f.amount;
+  });
+  if (rate.vat && !rate.vat.included) add += rate.vat.value || 0;
+  return Math.round(roomTotal + add);
+}
+
+/**
+ * Build payload for checkout submit: Stripe Payment Intent + external_booking + internal_booking.
+ * Use this when integrating Stripe (amount/currency for Payment Intent) and your booking API (external_booking + internal_booking; add stripe_token after payment success).
+ *
+ * @param {Object} state - Widget state: checkIn, checkOut, rooms, occupancies, selectedRoom, selectedRate, guest
+ * @param {Object} [options] - { propertyId: string|number, propertyKey: string, clientBookingReference?: string }
+ * @returns {{ stripe: { amount: number, currency: string }, external_booking: Object, internal_booking: Object }}
+ */
+function buildCheckoutPayload(state, options = {}) {
+  const propertyId = options.propertyId != null ? String(options.propertyId) : '';
+  const rawKey = options.propertyKey != null && options.propertyKey !== '' ? String(options.propertyKey).trim() : '';
+  const propertyKey = rawKey && rawKey.startsWith('book_engine_') ? rawKey : '';
+  const clientBookingReference = options.clientBookingReference || 'nuitee-booking-widget';
+
+  const checkIn = state.checkIn;
+  const checkOut = state.checkOut;
+  const nights = checkIn && checkOut
+    ? Math.max(1, Math.round((checkOut - checkIn) / 86400000))
+    : 0;
+  const total = computeCheckoutTotal(state, nights);
+  const currency = (state.selectedRoom?.currency || 'USD').trim();
+  const occupancies = Array.isArray(state.occupancies) ? state.occupancies : [{ adults: 2, children: 0, childrenAges: [] }];
+  const totalAdults = occupancies.reduce((s, o) => s + (o.adults || 0), 0);
+  const totalChildren = occupancies.reduce((s, o) => s + (o.children || 0), 0);
+
+  const g = state.guest || {};
+  const availabilityRequest = {
+    ...(propertyKey ? { property_key: propertyKey } : propertyId ? { property_id: propertyId } : {}),
+    checkin: toISO(checkIn),
+    checkout: toISO(checkOut),
+    currency: currency.toUpperCase(),
+    occupancies: occupancies.map((o, i) => ({
+      adults: o.adults ?? 0,
+      children: o.children ?? 0,
+      ...(Array.isArray(o.childrenAges) && o.childrenAges.length ? { child_ages: o.childrenAges } : {}),
+      ...(i > 0 ? { occupancy_index: i + 1 } : {}),
+    })),
+  };
+
+  const rateIdentifier = state.selectedRate?.rate_identifier ?? state.selectedRate?.rate_code ?? state.selectedRate?.id;
+
+  const external_booking = {
+    availability_request: availabilityRequest,
+    booked_rates: [
+      {
+        quantity: state.rooms ?? 1,
+        rate_identifier: rateIdentifier,
+        amount: { price: total, currency: currency.toUpperCase() },
+        guest_details: [
+          { leader: true, first_name: g.firstName || '', last_name: g.lastName || '' },
+        ],
+      },
+    ],
+    client_booking_reference: clientBookingReference,
+  };
+  if (g.specialRequests != null && String(g.specialRequests).trim() !== '') {
+    external_booking.customer_remarks = String(g.specialRequests).trim();
+  }
+
+  const internal_booking = {
+    email: g.email || '',
+    first_name: g.firstName || '',
+    last_name: g.lastName || '',
+    phone: g.phone || '',
+    checkin: toISO(checkIn),
+    checkout: toISO(checkOut),
+    stays: nights,
+    price: total,
+    currency: currency.toUpperCase(),
+    points_for_currency_amount: options.pointsForCurrencyAmount ?? 2,
+    adults: totalAdults,
+    children: totalChildren,
+    room_name: state.selectedRoom?.name || '',
+    room_id: state.selectedRoom?.id ?? '',
+  };
+
+  return {
+    stripe: {
+      amount: total,
+      currency: currency.toLowerCase(),
+    },
+    external_booking,
+    internal_booking,
+  };
+}
+
+/**
+ * Build payload for payment-intent API (Stripe).
+ * Request body: { rate_identifier, key, metadata: { hotel_name, room_type, check_in, check_out, guests, nights, currency, first_name, last_name } }
+ * Response: { clientSecret, confirmationToken }
+ *
+ * @param {Object} state - Widget state: checkIn, checkOut, rooms, occupancies, selectedRoom, selectedRate, guest
+ * @param {Object} [options] - { propertyKey: string }
+ * @returns {{ rate_identifier: string, key: string, metadata: Object }}
+ */
+function buildPaymentIntentPayload(state, options = {}) {
+  const rawKey = options.propertyKey != null && options.propertyKey !== '' ? String(options.propertyKey).trim() : '';
+  const propertyKey = rawKey && rawKey.startsWith('book_engine_') ? rawKey : '';
+  const checkIn = state.checkIn;
+  const checkOut = state.checkOut;
+  const nights = checkIn && checkOut
+    ? Math.max(1, Math.round((checkOut - checkIn) / 86400000))
+    : 0;
+  const currency = (state.selectedRoom?.currency || 'USD').trim().toUpperCase();
+  const occupancies = Array.isArray(state.occupancies) ? state.occupancies : [{ adults: 2, children: 0, childrenAges: [] }];
+  const totalAdults = occupancies.reduce((s, o) => s + (o.adults || 0), 0);
+  const totalChildren = occupancies.reduce((s, o) => s + (o.children || 0), 0);
+  const g = state.guest || {};
+  const rateIdentifier = state.selectedRate?.rate_identifier ?? state.selectedRate?.rate_code ?? state.selectedRate?.id ?? '';
+  // Same occupancies shape as availability body: adults, children, child_ages?, occupancy_index?
+  const occupanciesForPayload = occupancies.map((o, i) => ({
+    adults: o.adults ?? 0,
+    children: (o.children && o.children > 0) ? o.children : [],
+    occupancy_index: i + 1,
+    ...(Array.isArray(o.childrenAges) && o.childrenAges.length ? { child_ages: o.childrenAges } : {}),
+  }));
+
+  return {
+    rate_identifier: rateIdentifier,
+    key: propertyKey,
+    metadata: {
+      hotel_name: state.selectedRoom?.name ?? 'Hotel',
+      room_type: state.selectedRoom?.name ?? 'Room',
+      check_in: toISO(checkIn),
+      check_out: toISO(checkOut),
+      guests: String(totalAdults + totalChildren),
+      nights: String(nights),
+      currency,
+      first_name: g.firstName ?? '',
+      last_name: g.lastName ?? '',
+      email: g.email ?? '',
+      occupancies: occupanciesForPayload,
+      source_transaction: 'booking engine',
+    },
+  };
+}
+
+/**
+ * Decrypts property key to get property_id. Call this before fetchBookingEnginePref.
+ *
+ * @param {Object} options
+ * @param {string} options.baseUrl - Base URL for the API (e.g. 'https://thehotelplanet.com')
+ * @param {string} options.propertyKey - Hash from env (e.g. VITE_PROPERTY_KEY)
+ * @param {Object} [options.headers] - Optional headers (e.g. { 'X-API-Key': '...' })
+ * @param {string} [options.locale='en'] - Locale segment in path (default 'en')
+ * @returns {Promise<number|null>} property_id or null
+ */
+async function decryptPropertyId(options = {}) {
+  const { baseUrl, propertyKey, headers = {}, locale = 'en' } = options;
+  if (!propertyKey) return null;
+  const base = (baseUrl || '').replace(/\/$/, '');
+  const url = `${base}/${locale}/booking_engine/decrypt_property_id`;
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', ...headers },
+    body: JSON.stringify({ hash: propertyKey }),
+  });
+  if (!res.ok) throw new Error(res.statusText || 'Failed to decrypt property id');
+  const data = await res.json();
+  return data.property_id != null ? Number(data.property_id) : null;
+}
+
+/**
+ * Fetches booking engine preferences (colors, links) from the config API.
+ *
+ * @param {Object} options
+ * @param {string} options.baseUrl - Base URL for the API (e.g. 'https://thehotelplanet.com')
+ * @param {string|number} options.propertyId - Property ID (from decryptPropertyId)
+ * @param {Object} [options.headers] - Optional headers (e.g. { 'X-API-Key': '...' })
+ * @param {string} [options.locale='en'] - Locale segment in path (default 'en')
+ * @returns {Promise<{ color_header, color_button, color_Text, link_privacy, link_terms }>}
+ */
+async function fetchBookingEnginePref(options = {}) {
+  const { baseUrl, propertyId, headers = {}, locale = 'en', debug = false } = options;
+  if (!propertyId) {
+    return Promise.resolve(null);
+  }
+  const base = (baseUrl || '').replace(/\/$/, '');
+  const url = `${base}/api/core/${locale}/booking_engine/booking_engine_pref?property_id=${encodeURIComponent(propertyId)}`;
+  const res = await fetch(url, {
+    method: 'GET',
+    headers: { 'Content-Type': 'application/json', ...headers },
+  });
+  if (!res.ok) throw new Error(res.statusText || 'Failed to fetch config');
+
+  const text = await res.text();
+  if (debug) console.log('[fetchBookingEnginePref] raw response:', { status: res.status, contentType: res.headers.get('content-type'), bodyLength: text?.length, bodyPreview: text?.slice(0, 200) });
+  if (!text || !text.trim()) return null;
+
+  let data;
+  try {
+    data = JSON.parse(text);
+  } catch {
+    if (debug) console.warn('[fetchBookingEnginePref] invalid JSON');
+    return null;
+  }
+
+  // Unwrap nested response: { data: {...} } or { result: {...} }
+  const pref = data?.data ?? data?.result ?? data;
+  const out = pref && typeof pref === 'object' ? pref : null;
+  if (debug) console.log('[fetchBookingEnginePref] parsed pref:', out);
+  return out;
+}
+
+/**
+ * Maps booking_engine_pref API response to widget customColors.
+ *
+ * @param {Object} pref - Response from fetchBookingEnginePref
+ * @returns {Object} customColors for the widget { background, text, primary, primaryText } plus link_privacy, link_terms
+ */
+function mapPrefToCustomColors(pref) {
+  if (!pref) return null;
+  return {
+    background: pref.color_header || '#1a1a1a',
+    text: pref.color_Text || '#e0e0e0',
+    primary: pref.color_button || '#3b82f6',
+    primaryText: '#ffffff',
+    link_privacy: pref.link_privacy || '#',
+    link_terms: pref.link_terms || '#',
+  };
+}
+
+// Support both ESM and CJS
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { createBookingApi, DEFAULT_ROOMS, DEFAULT_RATES, buildCheckoutPayload, buildPaymentIntentPayload, decryptPropertyId, fetchBookingEnginePref, mapPrefToCustomColors, getCurrencySymbol, formatPrice };
+}
+if (typeof window !== 'undefined') {
+  window.createBookingApi = createBookingApi;
+  window.buildCheckoutPayload = buildCheckoutPayload;
+  window.buildPaymentIntentPayload = buildPaymentIntentPayload;
+  window.decryptPropertyId = decryptPropertyId;
+  window.fetchBookingEnginePref = fetchBookingEnginePref;
+  window.mapPrefToCustomColors = mapPrefToCustomColors;
+  window.getCurrencySymbol = getCurrencySymbol;
+  window.formatPrice = formatPrice;
+}
+// Standalone bundle - includes widget class and CSS injection
+(function() {
+  'use strict';
+  
+  // Inject CSS
+  if (!document.getElementById('booking-widget-styles')) {
+    const style = document.createElement('style');
+    style.id = 'booking-widget-styles';
+    style.textContent = `/* CSS will be injected here - see dist/booking-widget.css */`;
+    document.head.appendChild(style);
+  }
+
+  // Icons (Lucide/shadcn)
+  const icons = {
+    calendar: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`,
+    users: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>`,
+    user: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>`,
+    check: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`,
+    mapPin: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>`,
+    phone: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>`,
+    square: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>`,
+    creditCard: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>`,
+    lock: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>`,
+    star: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>`,
+    x: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`,
+    chevronLeft: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>`,
+    chevronRight: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>`,
+  };
+
+  function iconHTML(name, size = '1em') {
+    const icon = icons[name];
+    if (!icon) {
+      console.warn(`Icon "${name}" not found`);
+      return '';
+    }
+    // Extract numeric value from size (e.g., '1.2em' -> 1.2, '16' -> 16, '1.5em' -> 1.5)
+    const sizeMatch = size.match(/([\d.]+)(\w*)/);
+    const sizeNum = sizeMatch ? parseFloat(sizeMatch[1]) : 16;
+    const sizeUnit = sizeMatch && sizeMatch[2] ? sizeMatch[2] : (size.includes('em') ? 'em' : 'em');
+    
+    // Replace SVG width/height with dynamic size, preserving viewBox
+    // CRITICAL: Ensure all SVG elements have fill="none" explicitly set
+    let sizedIcon = icon
+      .replace(/width="[^"]*"/g, `width="${sizeNum}${sizeUnit}"`)
+      .replace(/height="[^"]*"/g, `height="${sizeNum}${sizeUnit}"`);
+    
+    // Ensure SVG root has fill="none" and visible stroke
+    sizedIcon = sizedIcon.replace(/<svg([^>]*)>/g, (match, attrs) => {
+      let out = `<svg${attrs}`;
+      if (!out.includes('fill=')) out += ' fill="none"';
+      out += ' style="display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round">';
+      return out;
+    });
+    
+    // Ensure ALL child elements have fill="none"
+    sizedIcon = sizedIcon.replace(/<(rect|circle|path|polygon|polyline|ellipse|line)(\s+[^>]*?)(?:\s*\/)?>/gi, (match, tag, attrs) => {
+      if (!attrs || !attrs.includes('fill=')) {
+        return `<${tag}${attrs} fill="none">`;
+      }
+      return match.replace(/fill="[^"]*"/gi, 'fill="none"');
+    });
+    
+    return `<span class="icon" style="display:inline-flex;align-items:center;justify-content:center;width:${size};height:${size};min-width:${size};min-height:${size};vertical-align:middle;flex-shrink:0;color:inherit;">${sizedIcon}</span>`;
+  }
+
+  // Copy the BookingWidget class from core/widget.js
+  // This is a simplified version that will be bundled
+  const apiBase = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_API_BASE_URL__) ? window.__BOOKING_WIDGET_API_BASE_URL__ : '';
+  const builtInStripeKey = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_STRIPE_KEY__) ? window.__BOOKING_WIDGET_STRIPE_KEY__ : '';
+  const builtInCreatePaymentIntent = (apiBase && typeof window !== 'undefined')
+    ? function (payload) {
+        return fetch(apiBase.replace(/\/$/, '') + '/proxy/create-payment-intent', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload),
+        }).then(function (r) {
+          if (!r.ok) throw new Error(r.statusText || 'Payment intent failed');
+          return r.json();
+        }).then(function (data) {
+          return {
+            clientSecret: data.clientSecret ?? data.client_secret ?? data.data?.clientSecret ?? data.data?.client_secret ?? data.paymentIntent?.client_secret,
+            confirmationToken: data.confirmationToken ?? data.confirmation_token ?? data.data?.confirmationToken ?? data.data?.confirmation_token,
+          };
+        });
+      }
+    : null;
+
+  class BookingWidget {
+    constructor(options = {}) {
+      this.options = {
+        containerId: options.containerId || 'booking-widget-container',
+        onOpen: options.onOpen || null,
+        onClose: options.onClose || null,
+        onComplete: options.onComplete || null,
+        onBeforeConfirm: options.onBeforeConfirm || null,
+        createPaymentIntent: options.createPaymentIntent || builtInCreatePaymentIntent,
+        onBookingComplete: options.onBookingComplete || null,
+        confirmationBaseUrl: options.confirmationBaseUrl || (typeof window !== 'undefined' && window.__BOOKING_WIDGET_API_BASE_URL__) || 'https://ai.thehotelplanet.com',
+        stripePublishableKey: options.stripePublishableKey || builtInStripeKey || null,
+        propertyId: options.propertyId != null && options.propertyId !== '' ? options.propertyId : null,
+        propertyKey: options.propertyKey || null,
+        bookingApi: options.bookingApi || null,
+        cssUrl: options.cssUrl || null,
+        // Color customization options
+        colors: {
+          background: options.colors?.background || null,
+          text: options.colors?.text || null,
+          primary: options.colors?.primary || null,
+          primaryText: options.colors?.primaryText || null,
+          ...options.colors
+        },
+        ...options
+      };
+      
+      this.state = {
+        step: 'dates',
+        checkIn: null,
+        checkOut: null,
+        rooms: 1,
+        occupancies: [{ adults: 2, children: 0, childrenAges: [] }],
+        selectedRoom: null,
+        selectedRate: null,
+        guest: { firstName: '', lastName: '', email: '', phone: '', specialRequests: '' },
+      };
+
+      this.confirmationCode = null;
+      this.confirmationToken = null;
+      this.confirmationDetails = null;
+      this.confirmationStatus = null;
+      this.confirmationPolling = false;
+      this._confirmationPollTimer = null;
+      this._confirmationPollCancelled = false;
+      this.apiError = null;
+      this.loadingRooms = false;
+      this.checkoutShowPaymentForm = false;
+      this.paymentElementReady = false;
+      this.stripeInstance = null;
+      this.elementsInstance = null;
+
+      const baseSteps = [
+        { 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' },
+      ];
+      this.hasStripe = !!(this.options.stripePublishableKey && typeof this.options.createPaymentIntent === 'function');
+      this.STEPS = this.hasStripe ? [...baseSteps, { key: 'payment', label: 'Payment', num: '05' }] : baseSteps;
+
+      this.ROOMS = [];
+      this.RATES = [];
+      const defaultApiBase = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_API_BASE_URL__) ? window.__BOOKING_WIDGET_API_BASE_URL__ : '';
+      this.bookingApi = this.options.bookingApi || ((this.options.propertyKey || defaultApiBase) && typeof window.createBookingApi === 'function'
+        ? window.createBookingApi({
+            availabilityBaseUrl: defaultApiBase || '',
+            propertyKey: this.options.propertyKey || undefined,
+          })
+        : null);
+
+      this.calendarMonth = null;
+      this.calendarYear = null;
+      this.pickState = 0;
+      this.container = null;
+      this.overlay = null;
+      this.widget = null;
+    }
+
+    getNights() {
+      if (!this.state.checkIn || !this.state.checkOut) return 0;
+      return Math.max(1, Math.round((this.state.checkOut - this.state.checkIn) / 86400000));
+    }
+
+    getTotalPrice() {
+      if (!this.state.selectedRoom || !this.state.selectedRate) return 0;
+      const nights = this.getNights();
+      const rooms = this.state.rooms;
+      const roomTotal = Math.round(this.state.selectedRoom.basePrice * this.state.selectedRate.priceModifier * nights * rooms);
+      const fees = this.state.selectedRate.fees ?? [];
+      let add = 0;
+      fees.forEach(f => { if (!f.included) add += f.perNight ? f.amount * nights * rooms : f.amount; });
+      const vat = this.state.selectedRate.vat;
+      if (vat && !vat.included) add += vat.value || 0;
+      return Math.round(roomTotal + add);
+    }
+
+    fmt(date) {
+      if (!date) return '';
+      return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+    }
+
+    fmtLong(date) {
+      if (!date) return '';
+      return date.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
+    }
+
+    stepIndex(key) {
+      return this.STEPS.findIndex(s => s.key === key);
+    }
+
+    open() {
+      if (!this.container) this.init();
+      this.overlay.classList.add('active');
+      this.widget.classList.add('active');
+      this.render();
+      if (this.options.onOpen) this.options.onOpen();
+    }
+
+    close() {
+      this._confirmationPollCancelled = true;
+      this.confirmationPolling = false;
+      if (this._confirmationPollTimer) clearTimeout(this._confirmationPollTimer);
+      this._confirmationPollTimer = null;
+      if (this.overlay) this.overlay.classList.remove('active');
+      if (this.widget) this.widget.classList.remove('active');
+      // Reset state so next open starts from step 1 with no selection
+      Object.assign(this.state, {
+        step: 'dates',
+        checkIn: null,
+        checkOut: null,
+        rooms: 1,
+        occupancies: [{ adults: 2, children: 0, childrenAges: [] }],
+        selectedRoom: null,
+        selectedRate: null,
+        guest: { firstName: '', lastName: '', email: '', phone: '', specialRequests: '' }
+      });
+      if (this.options.onClose) this.options.onClose();
+    }
+
+    goToStep(step) {
+      if (step !== 'summary' && step !== 'payment') {
+        this.checkoutShowPaymentForm = false;
+        this.paymentElementReady = false;
+        this.stripeInstance = null;
+        if (this.elementsInstance) {
+          const el = document.getElementById('booking-widget-payment-element');
+          if (el) el.innerHTML = '';
+        }
+        this.elementsInstance = null;
+      }
+      if (step === 'payment') this.checkoutShowPaymentForm = true;
+      this.state.step = step;
+      this.apiError = null;
+      if (step === 'rooms' && this.bookingApi) {
+        this.loadingRooms = true;
+        this.render();
+        const occupancies = (this.state.occupancies || []).slice(0, this.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: this.state.checkIn, checkOut: this.state.checkOut, rooms: this.state.rooms, occupancies };
+        this.bookingApi.fetchRooms(params).then((rooms) => {
+          this.ROOMS = Array.isArray(rooms) ? rooms : [];
+          this.loadingRooms = false;
+          this.render();
+        }).catch((err) => {
+          this.apiError = err.message || 'Failed to load rooms';
+          this.loadingRooms = false;
+          this.render();
+        });
+        return;
+      }
+      if (step === 'rates' && this.state.selectedRoom) {
+        this.RATES = Array.isArray(this.state.selectedRoom.rates) && this.state.selectedRoom.rates.length
+          ? this.state.selectedRoom.rates
+          : [];
+        this.render();
+        return;
+      }
+      this.render();
+    }
+
+    init() {
+      const container = document.getElementById(this.options.containerId);
+      if (!container) {
+        console.error(`Container with id "${this.options.containerId}" not found`);
+        return;
+      }
+
+      this.container = container;
+      
+      this.overlay = document.createElement('div');
+      this.overlay.className = 'booking-widget-overlay';
+      this.overlay.addEventListener('click', () => this.close());
+      container.appendChild(this.overlay);
+
+      this.widget = document.createElement('div');
+      this.widget.className = 'booking-widget-modal';
+      this.widget.innerHTML = `
+        <button class="booking-widget-close">${iconHTML('x', '1.5em')}</button>
+        <div class="booking-widget-step-indicator"></div>
+        <div class="booking-widget-step-content"></div>
+      `;
+      this.widget.querySelector('.booking-widget-close').addEventListener('click', () => this.close());
+      container.appendChild(this.widget);
+
+      if (typeof window !== 'undefined') {
+        window.bookingWidgetInstance = this;
+      }
+
+      // Apply custom colors
+      this.applyColors();
+
+      this.injectCSS();
+    }
+
+    applyColors() {
+      if (!this.widget) return;
+      
+      const colors = this.options.colors;
+      if (!colors) return;
+      
+      const style = this.widget.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);
+      }
+    }
+
+    injectCSS() {
+      if (document.getElementById('booking-widget-styles')) return;
+      
+      if (this.options.cssUrl) {
+        const link = document.createElement('link');
+        link.id = 'booking-widget-styles';
+        link.rel = 'stylesheet';
+        link.href = this.options.cssUrl;
+        document.head.appendChild(link);
+      } else {
+        // Inline CSS would go here in a real bundle
+        console.warn('CSS not loaded. Please include booking-widget.css or provide cssUrl option.');
+      }
+    }
+
+    render() {
+      this.renderStepIndicator();
+      this.renderStepContent();
+    }
+
+    renderStepIndicator() {
+      const el = this.widget.querySelector('.booking-widget-step-indicator');
+      if (this.state.step === 'confirmation') {
+        el.innerHTML = '';
+        return;
+      }
+      const ci = this.stepIndex(this.state.step);
+      let html = '';
+      this.STEPS.forEach((s, i) => {
+        const cls = i === ci ? 'active' : i < ci ? 'past' : 'future';
+        const widget = this;
+        html += `<div class="step-item">
+          <span class="step-circle ${cls}" ${cls === 'past' ? `onclick="window.bookingWidgetInstance.goToStep(&quot;${String(s.key).replace(/"/g, '&quot;')}&quot;)"` : ''}>${i < ci ? iconHTML('check', '0.75em') : s.num}</span>
+          <span class="step-label ${cls}" ${cls === 'past' ? `onclick="window.bookingWidgetInstance.goToStep(&quot;${String(s.key).replace(/"/g, '&quot;')}&quot;)"` : ''}>${s.label}</span>`;
+        if (i < this.STEPS.length - 1) {
+          html += `<span class="step-line"><span class="step-line-fill ${i < ci ? 'filled' : ''}"></span></span>`;
+        }
+        html += '</div>';
+      });
+      el.innerHTML = html;
+    }
+
+    renderStepContent() {
+      const el = this.widget.querySelector('.booking-widget-step-content');
+      switch (this.state.step) {
+        case 'dates':
+          el.innerHTML = this.renderDatesStep();
+          this.initCalendar();
+          if (this.pickState === 1) {
+            const popup = this.widget.querySelector('.calendar-popup');
+            if (popup) popup.classList.add('open');
+            this.renderCalendar();
+          }
+          break;
+        case 'rooms':
+          el.innerHTML = this.renderRoomsStep();
+          break;
+        case 'rates':
+          el.innerHTML = this.renderRatesStep();
+          break;
+        case 'summary':
+          el.innerHTML = this.renderSummaryStep();
+          break;
+        case 'payment':
+          el.innerHTML = this.renderPaymentStep();
+          break;
+        case 'confirmation':
+          el.innerHTML = this.renderConfirmationStep();
+          break;
+      }
+    }
+
+    renderDatesStep() {
+      return `
+        <h2 class="step-title">Plan Your Stay</h2>
+        <p class="step-subtitle">Select your dates and guests to begin</p>
+        <div style="max-width:32em;margin:0 auto;">
+          <label class="form-label">Dates</label>
+          <div class="date-wrapper">
+            <div class="date-trigger" onclick="window.bookingWidgetInstance.toggleCalendar()">
+              ${iconHTML('calendar', '1.2em')}&nbsp;&nbsp;
+              <span ${this.state.checkIn ? '' : 'class="placeholder"'}>${this.state.checkIn ? this.fmt(this.state.checkIn) : 'Check-in'}</span>
+              &nbsp;→&nbsp;
+              <span ${this.state.checkOut ? '' : 'class="placeholder"'}>${this.state.checkOut ? this.fmt(this.state.checkOut) : 'Check-out'}</span>
+            </div>
+            <div class="calendar-popup"></div>
+          </div>
+          <label class="form-label" style="margin-top:1.5em;">${iconHTML('users', '1.2em')}&nbsp; Guests & Rooms</label>
+          <div class="guests-rooms-section">
+            ${(this.state.occupancies || []).slice(0, this.state.rooms).map((occ, roomIdx) => {
+              const adults = occ.adults ?? 1;
+              const children = occ.children ?? 0;
+              const ages = occ.childrenAges || [];
+              const childRows = children > 0 ? Array.from({ length: children }, (_, i) => {
+                const age = ages[i] ?? 0;
+                return `<div class="child-age-row" style="flex:0 1 calc(50% - 0.5em);min-width:0;margin-top:0.5em;">
+              <label class="form-label" style="font-size:0.75em;color:var(--muted);">Child ${i + 1} age</label>
+              <select class="form-input" style="width:100%;margin-top:0.25em;" data-room="${roomIdx}" data-child="${i}" onchange="window.bookingWidgetInstance.updateChildAge(${roomIdx}, ${i}, parseInt(this.value,10))">
+                ${Array.from({ length: 18 }, (_, a) => `<option value="${a}" ${age === a ? 'selected' : ''}>${a} year${a !== 1 ? 's' : ''}</option>`).join('')}
+              </select>
+            </div>`;
+              }).join('') : '';
+              const removeBtn = this.state.rooms > 1 ? `<button type="button" class="remove-room-btn" onclick="window.bookingWidgetInstance.removeRoom(${roomIdx})" aria-label="Remove room">Remove</button>` : '';
+              return `<div class="room-card">
+              <div class="room-card-header"><span class="room-card-title">Room ${roomIdx + 1}</span>${removeBtn}</div>
+              ${this.counterHTMLForRoom('Adults', adults, 1, 8, 'adults', roomIdx)}
+              ${this.counterHTMLForRoom('Children', children, 0, 6, 'children', roomIdx)}
+              ${children > 0 ? `<div class="child-ages-section" style="display:flex;flex-wrap:wrap;gap:0.5em 1em;">${childRows}</div>` : ''}
+            </div>`;
+            }).join('')}
+            <button type="button" class="add-room-btn" ${this.state.rooms >= 5 ? 'disabled' : ''} onclick="window.bookingWidgetInstance.changeCounter('rooms',1)">+ Add room</button>
+          </div>
+          <button class="btn-primary" ${this.state.checkIn && this.state.checkOut ? '' : 'disabled'} onclick="window.bookingWidgetInstance.goToStep(&quot;rooms&quot;)">Select Room</button>
+        </div>`;
+    }
+
+    counterHTML(label, val, min, max, field) {
+      return `<div class="counter-row">
+        <span class="counter-label">${label}</span>
+        <div class="counter-controls">
+          <button class="counter-btn" ${val <= min ? 'disabled' : ''} onclick="window.bookingWidgetInstance.changeCounter(&quot;${field}&quot;,-1)">−</button>
+          <span class="counter-val">${val}</span>
+          <button class="counter-btn" ${val >= max ? 'disabled' : ''} onclick="window.bookingWidgetInstance.changeCounter(&quot;${field}&quot;,1)">+</button>
+        </div>
+      </div>`;
+    }
+
+    counterHTMLForRoom(label, val, min, max, field, roomIndex) {
+      return `<div class="counter-row">
+        <span class="counter-label">${label}</span>
+        <div class="counter-controls">
+          <button class="counter-btn" ${val <= min ? 'disabled' : ''} onclick="window.bookingWidgetInstance.changeCounter(&quot;${field}&quot;,-1,${roomIndex})">−</button>
+          <span class="counter-val">${val}</span>
+          <button class="counter-btn" ${val >= max ? 'disabled' : ''} onclick="window.bookingWidgetInstance.changeCounter(&quot;${field}&quot;,1,${roomIndex})">+</button>
+        </div>
+      </div>`;
+    }
+
+    getTotalGuests() {
+      const occ = this.state.occupancies || [];
+      return {
+        adults: occ.reduce((s, o) => s + (o.adults || 0), 0),
+        children: occ.reduce((s, o) => s + (o.children || 0), 0),
+      };
+    }
+
+    changeCounter(field, delta, roomIndex = 0) {
+      const limits = { adults: [1,8], children: [0,6], rooms: [1,5] };
+      const occ = [...(this.state.occupancies || [{ adults: 2, children: 0, childrenAges: [] }])];
+      if (field === 'rooms') {
+        const next = Math.max(limits.rooms[0], Math.min(limits.rooms[1], this.state.rooms + delta));
+        while (occ.length < next) occ.push({ adults: 1, children: 0, childrenAges: [] });
+        occ.length = next;
+        this.state.rooms = next;
+        this.state.occupancies = occ;
+        this.render();
+        return;
+      }
+      if (roomIndex < 0 || roomIndex >= occ.length) return;
+      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 || []).slice(0, next);
+        while (ages.length < next) ages.push(0);
+        occ[roomIndex].childrenAges = ages;
+      }
+      this.state.occupancies = occ;
+      this.render();
+    }
+
+    updateChildAge(roomIndex, childIndex, value) {
+      const age = Math.max(0, Math.min(17, Number(value) || 0));
+      const occ = [...(this.state.occupancies || [])];
+      if (roomIndex < 0 || roomIndex >= occ.length) return;
+      const ages = [...(occ[roomIndex].childrenAges || [])];
+      if (childIndex >= 0 && childIndex < ages.length) ages[childIndex] = age;
+      occ[roomIndex] = { ...occ[roomIndex], childrenAges: ages };
+      this.state.occupancies = occ;
+      this.render();
+    }
+
+    removeRoom(roomIndex) {
+      if (this.state.rooms <= 1) return;
+      const occ = [...(this.state.occupancies || [])];
+      if (roomIndex < 0 || roomIndex >= occ.length) return;
+      occ.splice(roomIndex, 1);
+      this.state.occupancies = occ;
+      this.state.rooms = occ.length;
+      this.render();
+    }
+
+    initCalendar() {
+      const now = new Date();
+      this.calendarMonth = now.getMonth();
+      this.calendarYear = now.getFullYear();
+      // If we have check-in but no check-out, next click sets check-out; otherwise next click sets check-in (allows changing check-in when both are set)
+      this.pickState = (this.state.checkIn && !this.state.checkOut) ? 1 : 0;
+    }
+
+    toggleCalendar() {
+      const popup = this.widget.querySelector('.calendar-popup');
+      popup.classList.toggle('open');
+      if (popup.classList.contains('open')) {
+        this.initCalendar();
+        this.renderCalendar();
+      }
+    }
+
+    renderCalendar() {
+      const popup = this.widget.querySelector('.calendar-popup');
+      const m1 = this.calendarMonth, y1 = this.calendarYear;
+      const m2 = m1 === 11 ? 0 : m1 + 1, y2 = m1 === 11 ? y1 + 1 : y1;
+      popup.innerHTML = `
+        <div class="cal-header">
+          <button onclick="window.bookingWidgetInstance.calNav(-1)">‹</button>
+          <span class="cal-title">${this.monthName(m1)} ${y1}</span>
+          <span class="cal-title">${this.monthName(m2)} ${y2}</span>
+          <button onclick="window.bookingWidgetInstance.calNav(1)">›</button>
+        </div>
+        <div class="cal-months">${this.buildMonth(y1, m1)}${this.buildMonth(y2, m2)}</div>`;
+    }
+
+    monthName(m) {
+      return ['January','February','March','April','May','June','July','August','September','October','November','December'][m];
+    }
+
+    calNav(dir) {
+      this.calendarMonth += dir;
+      if (this.calendarMonth > 11) { this.calendarMonth = 0; this.calendarYear++; }
+      if (this.calendarMonth < 0) { this.calendarMonth = 11; this.calendarYear--; }
+      this.renderCalendar();
+    }
+
+    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 html = '<div class="cal-grid">';
+      names.forEach(n => { html += `<div class="cal-day-name">${n}</div>`; });
+      for (let i = 0; i < startDay; i++) html += '<div class="cal-day empty"></div>';
+      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 (this.state.checkIn && date.getTime() === this.state.checkIn.getTime()) cls += ' selected';
+        if (this.state.checkOut && date.getTime() === this.state.checkOut.getTime()) cls += ' selected';
+        if (this.state.checkIn && this.state.checkOut && date > this.state.checkIn && date < this.state.checkOut) cls += ' in-range';
+        html += `<button class="${cls}" ${disabled ? 'disabled' : `onclick="window.bookingWidgetInstance.pickDate(${year},${month},${d})"`}>${d}</button>`;
+      }
+      html += '</div>';
+      return html;
+    }
+
+    pickDate(y, m, d) {
+      const date = new Date(y, m, d);
+      if (this.pickState === 0 || (this.state.checkIn && date <= this.state.checkIn)) {
+        this.state.checkIn = date; this.state.checkOut = null; this.pickState = 1;
+        this.render();
+        this.initCalendar();
+        this.pickState = 1;
+        const popup = this.widget.querySelector('.calendar-popup');
+        if (popup) popup.classList.add('open');
+        this.renderCalendar();
+        return;
+      }
+      this.state.checkOut = date; this.pickState = 0;
+      this.widget.querySelector('.calendar-popup').classList.remove('open');
+      this.render();
+    }
+
+    renderRoomsStep() {
+      if (this.loadingRooms) {
+        const skeletonCard = `
+        <div class="room-skeleton">
+          <div class="room-skeleton-img"></div>
+          <div class="room-skeleton-body">
+            <div class="room-skeleton-line title"></div>
+            <div class="room-skeleton-line price"></div>
+            <div class="room-skeleton-line desc"></div>
+            <div class="room-skeleton-line desc"></div>
+            <div class="room-skeleton-line desc"></div>
+            <div class="room-skeleton-meta">
+              <div class="room-skeleton-line meta"></div>
+              <div class="room-skeleton-line meta"></div>
+            </div>
+            <div class="room-skeleton-tags">
+              <div class="room-skeleton-tag"></div>
+              <div class="room-skeleton-tag"></div>
+              <div class="room-skeleton-tag"></div>
+            </div>
+          </div>
+        </div>`;
+        const skeletons = Array(4).fill(skeletonCard).join('');
+        return `
+        <h2 class="step-title">Choose Your Room</h2>
+        <p class="step-subtitle">Each space is crafted for an unforgettable experience</p>
+        <div class="room-grid-wrapper">
+          <div class="room-grid">${skeletons}</div>
+        </div>`;
+      }
+      if (this.apiError) {
+        return `
+        <h2 class="step-title">Choose Your Room</h2>
+        <p class="step-subtitle" style="color:var(--destructive,#ef4444);">${this.apiError}</p>
+        <button class="btn-secondary" onclick="window.bookingWidgetInstance.goToStep(&quot;rooms&quot;)">Try again</button>`;
+      }
+      if (!this.bookingApi || this.ROOMS.length === 0) {
+        return `
+        <h2 class="step-title">Choose Your Room</h2>
+        <p class="step-subtitle">${this.bookingApi ? 'No rooms available for the selected dates.' : 'Set propertyKey to load rooms from the API.'}</p>
+        ${this.bookingApi ? '<button class="btn-secondary" onclick="window.bookingWidgetInstance.goToStep(&quot;dates&quot;)">Change dates</button>' : ''}`;
+      }
+      const formatRoomPrice = (r) => (typeof window.formatPrice === 'function' ? window.formatPrice(r.basePrice || 0, r.currency) : (r.currency || '$') + ' ' + (r.basePrice || 0).toLocaleString());
+      let cards = this.ROOMS.map(r => {
+        const sel = this.state.selectedRoom?.id === r.id;
+        return `<div class="room-card ${sel ? 'selected' : ''}" onclick="window.bookingWidgetInstance.selectRoom(&quot;${String(r.id).replace(/"/g, '&quot;')}&quot;)" style="flex: 0 0 280px; min-width: 280px;">
+          <div class="room-card-img-wrap">
+            <img class="room-card-img" src="${r.image || ''}" alt="${(r.name || '').replace(/"/g, '&quot;')}" onerror="this.src='https://images.unsplash.com/photo-1618773928121-c32242e63f39?w=800&q=80';" />
+            ${sel ? `<div class="room-card-check">${iconHTML('check', '1em')}</div>` : ''}
+          </div>
+          <div class="room-card-body">
+            <div class="room-card-top">
+              <span class="room-card-name">${(r.name || '').replace(/</g, '&lt;')}</span>
+              <div class="room-card-price"><strong>${formatRoomPrice(r)}</strong><small>/ night</small></div>
+            </div>
+            <p class="room-card-desc">${(r.description || '').replace(/</g, '&lt;')}</p>
+            <div class="room-card-meta"><span>${iconHTML('square', '0.9em')} ${r.size || ''}</span><span>${iconHTML('user', '0.9em')} Up to ${r.maxGuests != null ? r.maxGuests : ''}</span></div>
+            <div class="amenity-tags">${(r.amenities || []).slice(0, 5).map(a => `<span class="amenity-tag">${String(a).replace(/</g, '&lt;')}</span>`).join('')}</div>
+          </div>
+        </div>`;
+      }).join('');
+      return `
+        <h2 class="step-title">Choose Your Room</h2>
+        <p class="step-subtitle">Each space is crafted for an unforgettable experience</p>
+        <div class="room-grid-wrapper">
+          <button class="room-nav-btn room-nav-prev" onclick="window.bookingWidgetInstance.scrollRooms(-1)" aria-label="Previous rooms">${iconHTML('chevronLeft', '1.5em')}</button>
+          <div class="room-grid" id="room-grid-${this.options.containerId}">${cards}</div>
+          <button class="room-nav-btn room-nav-next" onclick="window.bookingWidgetInstance.scrollRooms(1)" aria-label="Next rooms">${iconHTML('chevronRight', '1.5em')}</button>
+        </div>
+        <button class="btn-primary" ${this.state.selectedRoom ? '' : 'disabled'} onclick="window.bookingWidgetInstance.goToStep(&quot;rates&quot;)">Select Rate</button>`;
+    }
+
+    scrollRooms(direction) {
+      const grid = this.widget.querySelector('.room-grid');
+      if (!grid) return;
+      const scrollAmount = 300; // Scroll by approximately one card width + gap
+      grid.scrollBy({
+        left: direction * scrollAmount,
+        behavior: 'smooth'
+      });
+    }
+
+    selectRoom(id) {
+      const grid = this.widget.querySelector('.room-grid');
+      const scrollLeft = grid ? grid.scrollLeft : 0;
+      if (document.activeElement && document.activeElement.blur) document.activeElement.blur();
+      this.state.selectedRoom = this.ROOMS.find(r => r.id == id || String(r.id) === String(id)) || null;
+      this.render();
+      const restoreScroll = () => {
+        const newGrid = this.widget.querySelector('.room-grid');
+        if (newGrid && scrollLeft > 0) {
+          const prevBehavior = newGrid.style.scrollBehavior;
+          newGrid.style.scrollBehavior = 'auto';
+          newGrid.scrollLeft = scrollLeft;
+          newGrid.style.scrollBehavior = prevBehavior || '';
+        }
+      };
+      requestAnimationFrame(() => {
+        restoreScroll();
+        requestAnimationFrame(restoreScroll);
+      });
+    }
+
+    renderRatesStep() {
+      const nights = this.getNights();
+      const base = this.state.selectedRoom?.basePrice ?? 0;
+      let cards = this.RATES.map(r => {
+        const sel = this.state.selectedRate?.id === r.id;
+        const total = Math.round(base * r.priceModifier * nights * this.state.rooms);
+        return `<div class="rate-card ${sel ? 'selected' : ''}" onclick="window.bookingWidgetInstance.selectRate(&quot;${String(r.id).replace(/"/g, '&quot;')}&quot;)">
+          ${r.recommended ? `<div class="rate-badge">${iconHTML('star', '0.9em')} Recommended</div>` : ''}
+          <div class="rate-top">
+            <div class="rate-top-left">
+              <div class="rate-radio"><div class="rate-radio-dot"></div></div>
+              <span class="rate-name">${[r.policy, ...(r.benefits || [])].filter(Boolean).join(' ')}</span>
+              <div class="rate-benefits"><span class="amenity-tag">${r.rate_code ?? r.name}</span></div>
+            </div>
+            <div class="rate-price"><strong>$ ${total.toLocaleString()}</strong><small>total</small></div>
+          </div>
+          <p class="rate-desc">${r.description}</p>
+        </div>`;
+      }).join('');
+      const room = this.state.selectedRoom;
+      const fallbackImg = 'https://images.unsplash.com/photo-1618773928121-c32242e63f39?w=800&q=80';
+      const roomSummary = room ? `
+        <div class="rate-step-room-summary">
+          <img class="rate-step-room-summary-image" src="${room.image || fallbackImg}" alt="" onerror="this.src='${fallbackImg}'" />
+          <div class="rate-step-room-summary-body">
+            <h3 class="rate-step-room-summary-name">${room.name || ''}</h3>
+            ${room.description ? `<p class="rate-step-room-summary-desc">${room.description}</p>` : ''}
+            <div class="rate-step-room-summary-meta">
+              ${room.size ? `<span>${room.size}</span>` : ''}
+              ${room.maxGuests != null ? `<span>Up to ${room.maxGuests} guests</span>` : ''}
+            </div>
+          </div>
+        </div>` : '';
+      return `
+        <div class="rate-step-card">
+          ${roomSummary}
+          <div class="rate-list">${cards}</div>
+        </div>
+        <button class="btn-primary" ${this.state.selectedRate ? '' : 'disabled'} onclick="window.bookingWidgetInstance.goToStep(&quot;summary&quot;)">Proceed to Summary</button>`;
+    }
+
+    selectRate(id) {
+      this.state.selectedRate = this.RATES.find(r => r.id == id || String(r.id) === String(id)) || null;
+      this.render();
+    }
+
+    renderSummaryStep() {
+      const g = this.state.guest;
+      const total = this.getTotalPrice();
+      const canSubmit = g.firstName && g.lastName && g.email;
+      const buttonLabel = this.hasStripe ? 'Proceed to Payment' : 'Confirm Reservation';
+      const leftColumn = `<h3 style="font-size:0.65em;text-transform:uppercase;letter-spacing:0.2em;color:var(--muted);padding-bottom:0.5em;border-bottom:1px solid var(--border);margin-bottom:1em;font-family:var(--font-sans);font-weight:500;">Guest Information</h3>
+            <div class="form-row">
+              <div class="form-group"><label class="form-label">First Name</label><input class="form-input" value="${g.firstName}" oninput="window.bookingWidgetInstance.updateGuest(&quot;firstName&quot;,this.value)" placeholder="James" /></div>
+              <div class="form-group"><label class="form-label">Last Name</label><input class="form-input" value="${g.lastName}" oninput="window.bookingWidgetInstance.updateGuest(&quot;lastName&quot;,this.value)" placeholder="Bond" /></div>
+            </div>
+            <div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" value="${g.email}" oninput="window.bookingWidgetInstance.updateGuest(&quot;email&quot;,this.value)" placeholder="james@example.com" /></div>
+            <div class="form-group"><label class="form-label">Phone</label><input class="form-input" type="tel" value="${g.phone}" oninput="window.bookingWidgetInstance.updateGuest(&quot;phone&quot;,this.value)" placeholder="+1 (555) 000-0000" /></div>
+            <div class="form-group"><label class="form-label">Special Requests</label><textarea class="form-textarea" rows="3" oninput="window.bookingWidgetInstance.updateGuest(&quot;specialRequests&quot;,this.value)" placeholder="Any special requests...">${g.specialRequests}</textarea></div>`;
+      return `
+        <h2 class="step-title">Review Your Booking</h2>
+        <p class="step-subtitle">Confirm your details before payment</p>
+        <div class="checkout-grid">
+          <div>${leftColumn}</div>
+          <div>
+            <div class="summary-box">
+              <h3>Booking Summary</h3>
+              ${this.state.selectedRoom ? `<img src="${this.state.selectedRoom.image}" alt="" style="width:100%;height:8em;object-fit:cover;border-radius:0.5em;margin-bottom:0.75em;" /><p style="font-family:var(--font-serif);margin-bottom:1em;">${this.state.selectedRoom.name}</p>` : ''}
+              <div class="summary-row"><span>Check-in</span><span>${this.fmt(this.state.checkIn)}</span></div>
+              <div class="summary-row"><span>Check-out</span><span>${this.fmt(this.state.checkOut)}</span></div>
+              <div class="summary-row"><span>Guests</span><span>${(() => { const gt = this.getTotalGuests(); return gt.adults + ' adults' + (gt.children ? ', ' + gt.children + ' children' : ''); })()}</span></div>
+              <div class="summary-row"><span>Rate</span><span>${this.state.selectedRate ? [this.state.selectedRate.policy, ...(this.state.selectedRate.benefits || [])].filter(Boolean).join(' ') : '—'}</span></div>
+              ${((this.state.selectedRate?.fees ?? []).length || this.state.selectedRate?.vat) ? (() => {
+                const nights = this.getNights();
+                const rooms = this.state.rooms;
+                const roomTotal = Math.round(this.state.selectedRoom.basePrice * this.state.selectedRate.priceModifier * nights * rooms);
+                const fees = this.state.selectedRate.fees ?? [];
+                const allIncluded = fees.length > 0 && fees.every(f => f.included) && (!this.state.selectedRate.vat || this.state.selectedRate.vat.included);
+                let rows = fees.map(f => {
+                  const amt = f.perNight ? f.amount * nights * rooms : f.amount;
+                  const badge = f.included ? '<span class="summary-fee-badge">Included</span>' : '<span class="summary-fee-badge summary-fee-badge--excluded">Excluded</span>';
+                  return `<div class="summary-row summary-row--fee"><span class="summary-fee-label">${f.name} ${badge}</span><span>$ ` + Math.round(amt).toLocaleString() + `</span></div>`;
+                }).join('');
+                const vat = this.state.selectedRate.vat;
+                if (vat) {
+                  const showVatBadge = vat.value !== 0 && vat.value != null;
+                  const vatBadge = showVatBadge ? (vat.included ? '<span class="summary-fee-badge">Included</span>' : '<span class="summary-fee-badge summary-fee-badge--excluded">Excluded</span>') : '';
+                  rows += `<div class="summary-row summary-row--fee"><span class="summary-fee-label">VAT${vatBadge ? ' ' + vatBadge : ''}</span><span>$ ` + Math.round(vat.value || 0).toLocaleString() + `</span></div>`;
+                }
+                return `<div class="summary-row"><span>Room total</span><span>$ ` + Math.round(roomTotal).toLocaleString() + `</span></div>
+                <div class="summary-fees">
+                  <p class="summary-fees-heading">Fees &amp; taxes</p>
+                  ${allIncluded ? '<p class="summary-fees-note">Included in your rate</p>' : ''}
+                  <div class="summary-fees-list">${rows}</div>
+                </div>`;
+              })() : ''}
+              <div class="summary-total">
+                <span class="summary-total-label">Total</span>
+                <span class="summary-total-price">$ ${total.toLocaleString()}</span>
+              </div>
+              ${this.apiError ? `<p style="color:var(--destructive, #ef4444);font-size:0.85em;margin-top:0.5em;">${this.apiError}</p>` : ''}
+              <button type="button" class="btn-primary" style="max-width:100%;margin-top:1em;" ${!canSubmit ? 'disabled' : ''} onclick="window.bookingWidgetInstance.confirmReservation(event)">${iconHTML('creditCard', '1.2em')}&nbsp; ${buttonLabel}</button>
+              <p class="secure-note">${iconHTML('lock', '1em')} Secure & encrypted booking</p>
+            </div>
+          </div>
+        </div>`;
+    }
+
+    renderPaymentStep() {
+      const total = this.getTotalPrice();
+      const buttonDisabled = !this.paymentElementReady ? 'disabled' : '';
+      const buttonLabel = !this.paymentElementReady ? 'Loading payment…' : 'Confirm Reservation';
+      return `
+        <div class="payment-step">
+          <button type="button" class="payment-step-back" onclick="window.bookingWidgetInstance.goToStep(&quot;summary&quot;)" aria-label="Back to summary">${iconHTML('chevronLeft', '1em')}&nbsp; Back to summary</button>
+          <h2 class="step-title">Payment</h2>
+          <p class="step-subtitle">Enter your payment details to confirm your reservation</p>
+          <div class="checkout-grid">
+            <div class="payment-step-form">
+              <div class="checkout-payment-section">
+                <h3 style="font-size:0.65em;text-transform:uppercase;letter-spacing:0.2em;color:var(--muted);margin-bottom:0.5em;font-family:var(--font-sans);font-weight:500;">Card details</h3>
+                ${!this.paymentElementReady && !this.apiError ? '<p class="payment-loading-placeholder" style="font-size:0.85em;color:var(--muted);margin:0;">Loading payment form…</p>' : ''}
+                <div id="booking-widget-payment-element" class="booking-widget-payment-element"></div>
+                ${this.apiError ? `<p class="payment-setup-error" style="font-size:0.85em;color:var(--destructive, #ef4444);margin:0;">Payment form could not load. Check the endpoint and try again.</p>` : ''}
+              </div>
+            </div>
+            <div class="payment-step-summary">
+              <h3>Amount due</h3>
+              <div class="payment-total-row">
+                <span class="payment-total-label">Total</span>
+                <span class="payment-total-amount">$ ${total.toLocaleString()}</span>
+              </div>
+              <button type="button" class="btn-primary" ${buttonDisabled} onclick="window.bookingWidgetInstance.confirmReservation(event)">${iconHTML('creditCard', '1.2em')}&nbsp; ${buttonLabel}</button>
+              <p class="secure-note">${iconHTML('lock', '1em')} Secure & encrypted booking</p>
+            </div>
+          </div>
+        </div>`;
+    }
+
+    updateGuest(field, value) {
+      this.state.guest[field] = value;
+      this.render();
+    }
+
+    loadStripePaymentElement() {
+      if (this.state.step !== 'payment' || !this.checkoutShowPaymentForm || !this.options.stripePublishableKey || typeof this.options.createPaymentIntent !== 'function') return;
+      const buildPaymentIntentPayload = typeof window !== 'undefined' && window.buildPaymentIntentPayload;
+      const buildCheckoutPayload = typeof window !== 'undefined' && window.buildCheckoutPayload;
+      const paymentIntentPayload = buildPaymentIntentPayload ? buildPaymentIntentPayload(this.state, { propertyKey: this.options.propertyKey ?? undefined }) : (buildCheckoutPayload ? buildCheckoutPayload(this.state, { propertyId: this.options.propertyId ?? undefined, propertyKey: this.options.propertyKey ?? undefined }) : null);
+      if (!paymentIntentPayload) return;
+      const self = this;
+      this.paymentElementReady = false;
+      Promise.resolve(this.options.createPaymentIntent(paymentIntentPayload))
+        .then((res) => {
+          const clientSecret = res?.clientSecret ?? res?.client_secret ?? res?.data?.clientSecret ?? res?.data?.client_secret ?? res?.paymentIntent?.client_secret;
+          self.paymentIntentConfirmationToken = res?.confirmationToken ?? res?.confirmation_token ?? res?.data?.confirmationToken ?? res?.data?.confirmation_token;
+          if (!clientSecret || self.state.step !== 'payment') {
+            self.apiError = 'Payment setup failed: no client secret returned';
+            self.render();
+            return;
+          }
+          const ensureLoadStripe = function () {
+            if (typeof window !== 'undefined' && typeof window.loadStripe === 'function') return Promise.resolve(window.loadStripe);
+            if (typeof window === 'undefined') return Promise.resolve(null);
+            return new Promise(function (resolve) {
+              if (window.loadStripe) { resolve(window.loadStripe); return; }
+              window.__bookingWidgetStripeReady = function () { resolve(window.loadStripe || null); };
+              var s = document.createElement('script');
+              s.type = 'module';
+              s.textContent = "import('https://esm.sh/@stripe/stripe-js').then(function(m){ window.loadStripe = m.loadStripe; if(window.__bookingWidgetStripeReady) window.__bookingWidgetStripeReady(); });";
+              s.onerror = function () { resolve(null); };
+              document.head.appendChild(s);
+            });
+          };
+          return ensureLoadStripe().then(function (loadStripe) {
+            if (typeof loadStripe !== 'function') {
+              self.apiError = 'Stripe not loaded';
+              self.render();
+              return;
+            }
+            return loadStripe(self.options.stripePublishableKey).then((stripe) => {
+            if (!stripe || self.state.step !== 'payment') return;
+            self.stripeInstance = stripe;
+            const elements = stripe.elements({ clientSecret, appearance: { theme: 'flat', variables: { borderRadius: '8px' } } });
+            self.elementsInstance = elements;
+            const paymentElement = elements.create('payment');
+            return new Promise((r) => requestAnimationFrame(r)).then(() => {
+              const container = document.getElementById('booking-widget-payment-element');
+              if (!container || self.state.step !== 'payment') {
+                self.apiError = 'Payment form container not found';
+                self.render();
+                return;
+              }
+              self.apiError = null;
+              container.innerHTML = '';
+              paymentElement.mount(container);
+              self.paymentElementReady = true;
+              self._updateCheckoutPaymentUI();
+            });
+          });
+        }).then(function () {});
+        })
+        .catch((err) => {
+          this.apiError = (err && err.message) || err || 'Payment setup failed';
+          this.render();
+        });
+    }
+
+    _updateCheckoutPaymentUI() {
+      if (!this.widget) return;
+      const stepEl = this.widget.querySelector('.booking-widget-step-content');
+      if (!stepEl) return;
+      const loadingEl = stepEl.querySelector('.payment-loading-placeholder');
+      if (loadingEl) loadingEl.style.display = 'none';
+      const btn = stepEl.querySelector('.btn-primary');
+      if (btn) {
+        btn.disabled = false;
+        btn.innerHTML = iconHTML('creditCard', '1.2em') + '&nbsp; Confirm Reservation';
+      }
+    }
+
+    confirmReservation(ev) {
+      if (ev && typeof ev.preventDefault === 'function') ev.preventDefault();
+      if (ev && typeof ev.stopPropagation === 'function') ev.stopPropagation();
+      const canSubmit = this.state.guest.firstName && this.state.guest.lastName && this.state.guest.email;
+      if (!canSubmit) return;
+      const buildPayload = typeof window !== 'undefined' && window.buildCheckoutPayload;
+      const payload = buildPayload ? buildPayload(this.state, { propertyId: this.options.propertyId ?? undefined, propertyKey: this.options.propertyKey ?? undefined }) : null;
+      const hasStripe = this.hasStripe;
+
+      if (this.state.step === 'summary' && hasStripe) {
+        this.apiError = null;
+        this.goToStep('payment');
+        const self = this;
+        requestAnimationFrame(() => { requestAnimationFrame(() => self.loadStripePaymentElement()); });
+        return;
+      }
+
+      if (this.state.step === 'payment' && hasStripe && this.stripeInstance && this.elementsInstance && payload) {
+        this.apiError = null;
+        this.stripeInstance.confirmPayment({
+          elements: this.elementsInstance,
+          confirmParams: { return_url: typeof window !== 'undefined' ? window.location.origin + (window.location.pathname || '') : '' },
+          redirect: 'if_required',
+        }).then(({ error, paymentIntent }) => {
+          if (error) {
+            this.apiError = error && error.message ? error.message : 'Payment failed';
+            this.render();
+            return;
+          }
+          if (paymentIntent && (paymentIntent.status === 'succeeded' || paymentIntent.status === 'requires_capture')) {
+            if (!this.paymentIntentConfirmationToken) {
+              this.apiError = 'Missing confirmation token from payment intent';
+              this.render();
+              return;
+            }
+            this.startConfirmationPolling(this.paymentIntentConfirmationToken);
+          }
+        }).catch((err) => {
+          this.apiError = (err && err.message) || err || 'Payment failed';
+          this.render();
+        });
+        return;
+      }
+
+      const onBeforeConfirm = this.options.onBeforeConfirm;
+      if (typeof onBeforeConfirm === 'function' && payload) {
+        Promise.resolve(onBeforeConfirm(payload))
+          .then((res) => {
+            this.confirmationCode = (res && (res.confirmationCode != null ? res.confirmationCode : res.confirmation_code)) || ('LX' + Date.now().toString(36).toUpperCase().slice(-6));
+            this.state.step = 'confirmation';
+            this.render();
+          })
+          .catch((err) => {
+            this.apiError = (err && err.message) || err || 'Booking failed';
+            this.render();
+          });
+        return;
+      }
+      this.apiError = 'Configure onBeforeConfirm to submit the booking.';
+      this.render();
+    }
+
+    async fetchConfirmationDetails(confirmationToken) {
+      const token = String(confirmationToken || '').trim();
+      if (!token) throw new Error('Missing confirmation token');
+      const base = String(this.options.confirmationBaseUrl || 'https://ai.thehotelplanet.com').replace(/\/$/, '');
+      const url = base + '/proxy/confirmation/' + encodeURIComponent(token);
+      const res = await fetch(url, { method: 'POST' });
+      if (!res.ok) throw new Error(await res.text());
+      return await res.json();
+    }
+
+    startConfirmationPolling(confirmationToken) {
+      this.confirmationToken = String(confirmationToken || '').trim();
+      this.confirmationDetails = null;
+      this.confirmationStatus = 'pending';
+      this.confirmationPolling = true;
+      this.apiError = null;
+      this.state.step = 'confirmation';
+      this.render();
+
+      if (this._confirmationPollTimer) clearTimeout(this._confirmationPollTimer);
+      this._confirmationPollCancelled = false;
+      const self = this;
+      const pollOnce = function () {
+        if (self._confirmationPollCancelled) return;
+        self.fetchConfirmationDetails(self.confirmationToken)
+          .then(function (data) {
+            if (self._confirmationPollCancelled) return;
+            const status = String(data && (data.status ?? data.booking_status ?? data.state ?? '')).toLowerCase();
+            self.confirmationStatus = status || self.confirmationStatus || 'pending';
+            if (status === 'confirmed') {
+              self.confirmationDetails = data;
+              self.confirmationPolling = false;
+              self.render();
+              return;
+            }
+            self._confirmationPollTimer = setTimeout(pollOnce, 2000);
+          })
+          .catch(function (err) {
+            if (self._confirmationPollCancelled) return;
+            self.apiError = (err && err.message) || err || 'Failed to fetch confirmation';
+            self.render();
+            self._confirmationPollTimer = setTimeout(pollOnce, 2000);
+          });
+      };
+      pollOnce();
+    }
+
+    renderConfirmationStep() {
+      const details = this.confirmationDetails;
+      const showLoader = this.confirmationPolling || !details;
+      if (showLoader) {
+        const status = this.confirmationStatus ? String(this.confirmationStatus) : '';
+        return '<div class="confirmation"><div class="confirmation-loader"><div class="confirmation-loader-spinner"></div><h2 class="step-title">Finalizing Reservation</h2><p class="step-subtitle" style="margin:0;color:var(--muted);font-size:0.9em;">We\'re confirming your booking. This usually takes a few seconds.</p>' + (status ? '<span style="font-size:0.8em;color:var(--muted);">Status: ' + String(status).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;') + '</span>' : '') + (this.apiError ? '<p style="color:var(--destructive,#ef4444);font-size:0.85em;margin-top:0.5em;">' + String(this.apiError).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;') + '</p>' : '') + '</div></div>';
+      }
+      const nights = details.nights != null ? details.nights : this.getNights();
+      const nightsLabel = nights === 1 ? '1 night' : nights + ' nights';
+      const total = (details.totalAmount != null && details.totalAmount !== '') ? Number(details.totalAmount) : this.getTotalPrice();
+      const currency = details.currency || this.state.selectedRoom?.currency || 'USD';
+      const bookingId = details.bookingId ?? details.booking_id ?? null;
+      const hotelName = details.hotelName ?? details.hotel_name ?? null;
+      const roomTypeRaw = details.roomType ?? details.room_type ?? this.state.selectedRoom?.name ?? '';
+      const roomType = String(roomTypeRaw).replace(/\s*Rate\s*\d+\s*$/i, '').trim();
+      const checkInD = details.checkIn ? (typeof details.checkIn === 'string' ? new Date(details.checkIn) : details.checkIn) : this.state.checkIn;
+      const checkOutD = details.checkOut ? (typeof details.checkOut === 'string' ? new Date(details.checkOut) : details.checkOut) : this.state.checkOut;
+      const checkInStr = checkInD ? this.fmtLong(checkInD) : '';
+      const checkOutStr = checkOutD ? this.fmtLong(checkOutD) : '';
+      const esc = function (v) { return String(v ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'); };
+      const bookingIdBlock = bookingId ? '<div class="confirm-header"><div class="confirm-booking-id"><span class="confirm-booking-id-label">Booking ID</span><span class="confirm-booking-id-value">' + esc(bookingId) + '</span></div></div>' : '';
+      const hotelRow = hotelName ? '<div class="confirm-detail"><span class="confirm-detail-icon">' + iconHTML('mapPin', '1.2em') + '</span><div class="confirm-detail-content"><span>' + esc(hotelName) + '</span></div></div>' : '';
+      const fmtPrice = (typeof window.formatPrice === 'function') ? window.formatPrice : function (a, c) { return '$ ' + Math.round(Number(a) || 0).toLocaleString(); };
+      return '<div class="confirmation"><div class="confirm-icon">' + iconHTML('check', '3.5em') + '</div><h2 class="step-title">Reservation Confirmed</h2><p class="step-subtitle">Thank you, ' + esc(this.state.guest.firstName) + '. We look forward to welcoming you.</p><div class="confirm-box">' + bookingIdBlock + '<div class="confirm-detail"><span class="confirm-detail-icon">' + iconHTML('calendar', '1.2em') + '</span><div class="confirm-detail-content"><span>' + esc(checkInStr) + ' to ' + esc(checkOutStr) + '</span><small>' + esc(nightsLabel) + '</small></div></div>' + hotelRow + '<div class="confirm-detail"><span class="confirm-detail-icon">' + iconHTML('mapPin', '1.2em') + '</span><div class="confirm-detail-content"><span>' + esc(roomType) + '</span>' + (this.state.selectedRate ? '<span class="confirm-detail-rate-line">' + esc([this.state.selectedRate.policy].concat(this.state.selectedRate.benefits || []).filter(Boolean).join(' · ')) + '</span>' : '') + '</div></div><div class="confirm-detail"><span class="confirm-detail-icon">' + iconHTML('phone', '1.2em') + '</span><div class="confirm-detail-content"><span>' + esc(this.state.guest.firstName + ' ' + this.state.guest.lastName) + '</span><small>' + esc(this.state.guest.email) + '</small></div></div><div class="summary-total"><span class="summary-total-label">Total Charged</span><span class="summary-total-price">' + fmtPrice(total, currency) + '</span></div></div><p style="font-size:0.75em;color:var(--muted);margin-bottom:1.5em;">A confirmation email has been sent to ' + esc(this.state.guest.email) + '</p><button class="btn-secondary" onclick="window.bookingWidgetInstance.resetBooking()">Book Another Stay</button></div>';
+    }
+
+    resetBooking() {
+      this._confirmationPollCancelled = true;
+      this.confirmationPolling = false;
+      if (this._confirmationPollTimer) clearTimeout(this._confirmationPollTimer);
+      this._confirmationPollTimer = null;
+      this.confirmationCode = null;
+      this.confirmationToken = null;
+      this.confirmationDetails = null;
+      this.confirmationStatus = null;
+      this.apiError = null;
+      Object.assign(this.state, {
+        step: 'dates',
+        checkIn: null,
+        checkOut: null,
+        rooms: 1,
+        occupancies: [{ adults: 2, children: 0, childrenAges: [] }],
+        selectedRoom: null,
+        selectedRate: null,
+        guest: { firstName: '', lastName: '', email: '', phone: '', specialRequests: '' }
+      });
+      if (this.options.onComplete) {
+        this.options.onComplete(this.state);
+      }
+      this.render();
+    }
+  }
+
+  // Export to global scope
+  if (typeof window !== 'undefined') {
+    window.BookingWidget = BookingWidget;
+  }
+})();