@nuitee/booking-widget 1.0.0

package/dist/booking-widget.js

@@ -0,0 +1,1256 @@
+(function(){'use strict';window.__BOOKING_WIDGET_API_BASE_URL__='https://ai.thehotelplanet.com';window.__BOOKING_WIDGET_STRIPE_KEY__='pk_test_51T0Se5EvQaQIixshRA8gbsI40NubMGwHlSWZmQM2LAx3jpVO0ThzVifqdTiMeGOyBfLNe8V9G8POGu8SjkvWOStM00H0i1U3uz';})();
+// ===== 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 formatPrice(amount, currencyCode = 'USD') {
+  if (typeof window !== 'undefined' && window.__bookingWidgetRendering) {
+    return '$ ' + (Number(amount) || 0).toLocaleString();
+  }
+  var custom = typeof window !== 'undefined' && window.formatPrice;
+  if (typeof custom === 'function' && custom !== formatPrice) {
+    return custom(amount, currencyCode);
+  }
+  return '$ ' + (Number(amount) || 0).toLocaleString();
+}
+
+function iconHTML(name, size = '1em') {
+  const icon = icons[name];
+  if (!icon) return '';
+  const sizeMatch = String(size).match(/([\d.]+)(\w*)/);
+  const sizeNum = sizeMatch ? parseFloat(sizeMatch[1]) : 16;
+  const sizeUnit = (sizeMatch && sizeMatch[2]) ? sizeMatch[2] : (String(size).includes('em') ? 'em' : 'em');
+  const w = sizeNum + sizeUnit;
+  const h = sizeNum + sizeUnit;
+  let out = icon.replace(/width="[^"]*"/g, 'width="' + w + '"').replace(/height="[^"]*"/g, 'height="' + h + '"');
+  if (!out.includes('fill=')) out = out.replace(/<svg/, '<svg fill="none"');
+  out = out.replace(/<svg/, '<svg style="display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round"');
+  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;">' + out + '</span>';
+}
+
+function escapeHTML(value) {
+  const s = String(value ?? '');
+  return s
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function getDefaultRooms() {
+  return [];
+}
+
+function getDefaultRates() {
+  return [];
+}
+
+// ===== Core Widget Class =====
+class BookingWidget {
+  constructor(options = {}) {
+    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;
+
+    this.options = {
+      containerId: options.containerId || 'booking-widget-container',
+      onOpen: options.onOpen || null,
+      onClose: options.onClose || null,
+      onComplete: options.onComplete || null,
+      /** If set, called with checkout payload (Stripe + external_booking + internal_booking) instead of createBooking. Resolve with { confirmationCode } to go to confirmation. */
+      onBeforeConfirm: options.onBeforeConfirm || null,
+      /** Stripe: optional. When not set, widget uses __BOOKING_WIDGET_API_BASE_URL__ + '/proxy/create-payment-intent' if __BOOKING_WIDGET_STRIPE_KEY__ is set. */
+      createPaymentIntent: options.createPaymentIntent || builtInCreatePaymentIntent,
+      onBookingComplete: options.onBookingComplete || null,
+      stripePublishableKey: options.stripePublishableKey || builtInStripeKey || null,
+      // API: pass bookingApi (from createBookingApi) or apiBaseUrl + apiSecret/propertyId etc. to use shared API layer
+      bookingApi: options.bookingApi || null,
+      apiBaseUrl: options.apiBaseUrl || null,
+      apiSecret: options.apiSecret || null,
+      propertyId: options.propertyId != null && options.propertyId !== '' ? options.propertyId : null,
+      propertyKey: options.propertyKey || null,
+      availabilityBaseUrl: options.availabilityBaseUrl || null,
+      propertyBaseUrl: options.propertyBaseUrl || null,
+      s3BaseUrl: options.s3BaseUrl || null,
+      /** Base URL for confirmation status polling (same as API_BASE_URL). Default https://ai.thehotelplanet.com */
+      confirmationBaseUrl: options.confirmationBaseUrl || 'https://ai.thehotelplanet.com',
+      // 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
+    };
+
+    const opts = this.options;
+    const defaultApiBase = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_API_BASE_URL__) ? window.__BOOKING_WIDGET_API_BASE_URL__ : '';
+    this.bookingApi = opts.bookingApi || ((opts.apiBaseUrl || opts.availabilityBaseUrl || opts.propertyKey || defaultApiBase) && typeof window.createBookingApi === 'function'
+      ? window.createBookingApi({
+          baseUrl: opts.apiBaseUrl || opts.availabilityBaseUrl || defaultApiBase || '',
+          availabilityBaseUrl: opts.availabilityBaseUrl || defaultApiBase || undefined,
+          propertyBaseUrl: opts.propertyBaseUrl || undefined,
+          s3BaseUrl: opts.s3BaseUrl || undefined,
+          propertyId: opts.propertyId != null && opts.propertyId !== '' ? String(opts.propertyId) : undefined,
+          propertyKey: opts.propertyKey || undefined,
+          headers: opts.apiSecret ? { 'X-API-Key': opts.apiSecret } : undefined,
+        })
+      : null);
+
+    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: '' },
+    };
+
+    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 = [];
+    this.loadingRooms = false;
+    this.loadingRates = false;
+    this.apiError = null;
+    this.confirmationCode = null;
+    this.confirmationPolling = false;
+    this.checkoutShowPaymentForm = false;
+    this.paymentElementReady = false;
+    this.stripeInstance = null;
+    this.elementsInstance = null;
+
+    this.calendarMonth = null;
+    this.calendarYear = null;
+    this.pickState = 0;
+    this.container = null;
+    this.overlay = null;
+    this.widget = null;
+  }
+
+  // ===== Helpers =====
+  getNights() {
+    if (!this.state.checkIn || !this.state.checkOut) return 0;
+    return Math.max(1, Math.round((this.state.checkOut - this.state.checkIn) / 86400000));
+  }
+
+  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),
+    };
+  }
+
+  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);
+  }
+
+  getFeesTotal() {
+    const rate = this.state.selectedRate;
+    if (!rate) return 0;
+    const nights = this.getNights();
+    const rooms = this.state.rooms;
+    let total = 0;
+    (rate.fees ?? []).forEach(f => { if (!f.included) total += f.perNight ? f.amount * nights * rooms : f.amount; });
+    if (rate.vat && !rate.vat.included) total += rate.vat.value || 0;
+    return total;
+  }
+
+  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);
+  }
+
+  // ===== Widget Open/Close =====
+  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() {
+    if (this.overlay) this.overlay.classList.remove('active');
+    if (this.widget) this.widget.classList.remove('active');
+    this._confirmationPollCancelled = true;
+    this.confirmationPolling = false;
+    if (this._confirmationPollTimer) clearTimeout(this._confirmationPollTimer);
+    this._confirmationPollTimer = null;
+    // 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: '' }
+    });
+    this.confirmationCode = null;
+    this.confirmationToken = null;
+    this.confirmationDetails = null;
+    this.confirmationStatus = null;
+    this.apiError = null;
+    if (!this.bookingApi) {
+      this.ROOMS = [];
+      this.RATES = [];
+    }
+    if (this.options.onClose) this.options.onClose();
+  }
+
+  goToStep(step) {
+    const doRender = () => {
+      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.loadingRates = false;
+        this.RATES = Array.isArray(this.state.selectedRoom.rates) && this.state.selectedRoom.rates.length
+          ? this.state.selectedRoom.rates
+          : [];
+        this.render();
+        return;
+      }
+      this.render();
+    };
+    if (step === 'rooms' && !this.bookingApi) {
+      requestAnimationFrame(() => doRender());
+    } else {
+      doRender();
+    }
+  }
+
+  // ===== Initialization =====
+  init() {
+    const container = document.getElementById(this.options.containerId);
+    if (!container) {
+      console.error(`Container with id "${this.options.containerId}" not found`);
+      return;
+    }
+
+    this.container = container;
+    
+    // Create overlay
+    this.overlay = document.createElement('div');
+    this.overlay.className = 'booking-widget-overlay';
+    this.overlay.addEventListener('click', () => this.close());
+    container.appendChild(this.overlay);
+
+    // Create widget modal
+    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());
+    this.widget.querySelector('.booking-widget-step-indicator').addEventListener('click', (e) => {
+      const stepEl = e.target.closest('[data-step]');
+      if (stepEl && stepEl.dataset.step) this.goToStep(stepEl.dataset.step);
+    });
+    container.appendChild(this.widget);
+
+    // Apply custom colors
+    this.applyColors();
+
+    // Inject CSS if not already present
+    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;
+    
+    const link = document.createElement('link');
+    link.id = 'booking-widget-styles';
+    link.rel = 'stylesheet';
+    link.href = this.options.cssUrl || './booking-widget.css';
+    document.head.appendChild(link);
+  }
+
+  // ===== Render =====
+  render() {
+    if (!this.widget) return;
+    if (this._renderInProgress) return;
+    this._renderInProgress = true;
+    window.__bookingWidgetRendering = true;
+    try {
+      this.renderStepIndicator();
+      this.renderStepContent();
+    } finally {
+      window.__bookingWidgetRendering = false;
+      this._renderInProgress = false;
+    }
+  }
+
+  renderStepIndicator() {
+    const el = this.widget.querySelector('.booking-widget-step-indicator');
+    if (!el) return;
+    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 clickable = cls === 'past' ? ` data-step="${s.key}" role="button" tabindex="0"` : '';
+      html += `<div class="step-item">
+        <span class="step-circle ${cls}"${clickable}>${i < ci ? iconHTML('check', '0.75em') : s.num}</span>
+        <span class="step-label ${cls}"${clickable}>${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;
+  }
+
+  // ===== Step Renderers =====
+  renderStepContent() {
+    const el = this.widget.querySelector('.booking-widget-step-content');
+    switch (this.state.step) {
+      case 'dates':
+        el.innerHTML = this.renderDatesStep();
+        this.initCalendar();
+        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;
+    }
+  }
+
+  // --- Dates ---
+  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 val = ages[i] != null ? ages[i] : 0;
+              let options = '';
+              for (let a = 0; a <= 17; a++) options += `<option value="${a}"${val === a ? ' selected' : ''}>${a} year${a !== 1 ? 's' : ''}</option>`;
+              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;" onchange="window.bookingWidgetInstance.updateChildAge(${roomIdx}, ${i}, parseInt(this.value,10))">${options}</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, roomIdx, 'adults')}${this.counterHTMLForRoom('Children', children, 0, 6, roomIdx, 'children')}${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('rooms')">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('${field}',-1)">−</button>
+        <span class="counter-val">${val}</span>
+        <button class="counter-btn" ${val >= max ? 'disabled' : ''} onclick="window.bookingWidgetInstance.changeCounter('${field}',1)">+</button>
+      </div>
+    </div>`;
+  }
+
+  counterHTMLForRoom(label, val, min, max, roomIndex, 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('${field}',-1,${roomIndex})">−</button>
+        <span class="counter-val">${val}</span>
+        <button class="counter-btn" ${val >= max ? 'disabled' : ''} onclick="window.bookingWidgetInstance.changeCounter('${field}',1,${roomIndex})">+</button>
+      </div>
+    </div>`;
+  }
+
+  changeCounter(field, delta, roomIndex) {
+    const limits = { adults: [1,8], children: [0,6], rooms: [1,5] };
+    if (field === 'rooms') {
+      const next = Math.max(limits.rooms[0], Math.min(limits.rooms[1], this.state.rooms + delta));
+      const occ = this.state.occupancies || [{ adults: 2, children: 0, childrenAges: [] }];
+      while (occ.length < next) occ.push({ adults: 1, children: 0, childrenAges: [] });
+      occ.length = next;
+      this.state.occupancies = occ;
+      this.state.rooms = next;
+    } else {
+      const occ = this.state.occupancies || [];
+      const idx = roomIndex != null ? roomIndex : 0;
+      if (idx < 0 || idx >= occ.length) return;
+      const next = Math.max(limits[field][0], Math.min(limits[field][1], (occ[idx][field] || (field === 'adults' ? 1 : 0)) + delta));
+      occ[idx][field] = next;
+      if (field === 'children') {
+        const ages = occ[idx].childrenAges || [];
+        while (ages.length < next) ages.push(0);
+        ages.length = next;
+        occ[idx].childrenAges = ages;
+      }
+    }
+    this.render();
+  }
+
+  updateChildAge(roomIndex, childIndex, value) {
+    const occ = this.state.occupancies || [];
+    if (roomIndex < 0 || roomIndex >= occ.length) return;
+    const ages = occ[roomIndex].childrenAges || [];
+    const age = Math.max(0, Math.min(17, Number(value) || 0));
+    if (childIndex >= 0 && childIndex < ages.length) {
+      ages[childIndex] = age;
+      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();
+  }
+
+  // --- Calendar ---
+  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;
+    } else {
+      this.state.checkOut = date; this.pickState = 0;
+      this.widget.querySelector('.calendar-popup').classList.remove('open');
+    }
+    this.render();
+    if (this.pickState === 1) {
+      this.initCalendar();
+      this.pickState = 1;
+      const popup = this.widget.querySelector('.calendar-popup');
+      if (popup) popup.classList.add('open');
+      this.renderCalendar();
+    }
+  }
+
+  // --- Rooms ---
+  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('rooms')">Try again</button>`;
+    }
+    const rooms = Array.isArray(this.ROOMS) ? this.ROOMS : [];
+    if (rooms.length === 0) {
+      return `
+        <h2 class="step-title">Choose Your Room</h2>
+        <p class="step-subtitle">No rooms available for the selected dates.</p>
+        <div class="rooms-empty-state">
+          <p class="rooms-empty-message">Try different dates or check back later.</p>
+          <button class="btn-secondary" onclick="window.bookingWidgetInstance.goToStep('dates')">Change dates</button>
+        </div>`;
+    }
+    let cards = rooms.map(r => {
+      const sel = this.state.selectedRoom?.id === r.id;
+        return `<div class="room-card ${sel ? 'selected' : ''}" onclick="window.bookingWidgetInstance.selectRoom('${r.id}')" 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}" 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}</span>
+              <div class="room-card-price"><strong>${formatPrice(r.basePrice, r.currency)}</strong><small>/ night</small></div>
+            </div>
+            <p class="room-card-desc">${r.description}</p>
+            <div class="room-card-meta"><span>${iconHTML('square', '0.9em')} ${r.size}</span><span>${iconHTML('user', '0.9em')} Up to ${r.maxGuests}</span></div>
+            <div class="amenity-tags">${(r.amenities || []).slice(0, 5).map(a => `<span class="amenity-tag">${a}</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('rates')">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);
+    });
+  }
+
+  // --- Rates ---
+  renderRatesStep() {
+    if (this.loadingRates) {
+      return `
+        <p class="step-subtitle">Loading rates...</p>
+        <div style="padding:2em;text-align:center;color:var(--muted);">Please wait.</div>`;
+    }
+    if (this.apiError && this.state.step === 'rates') {
+      return `
+        <p class="step-subtitle" style="color:var(--destructive, #ef4444);">${this.apiError}</p>
+        <button class="btn-secondary" onclick="window.bookingWidgetInstance.goToStep('rates')">Try again</button>`;
+    }
+    const nights = this.getNights();
+    const base = this.state.selectedRoom?.basePrice ?? 0;
+    const rates = Array.isArray(this.RATES) ? this.RATES : [];
+    if (rates.length === 0) {
+      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}
+          <p style="color:var(--muted);font-size:0.9em;margin:0;padding:1em;">No rates available for this room.</p>
+        </div>
+        <button class="btn-secondary" onclick="window.bookingWidgetInstance.goToStep('rooms')">Choose another room</button>`;
+    }
+    let cards = 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('${r.id}')">
+          ${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>${formatPrice(total, this.state.selectedRoom?.currency)}</strong><small>total</small></div>
+        </div>
+        ${r.policy ? `<p class="rate-policy" style="font-size:0.8em;color:var(--muted);margin-top:0.5em;display:flex;align-items:center;gap:0.35em;"><span>${r.policy}</span><span class="policy-info-icon" title="${(r.policyDetail || r.policy).replace(/"/g, '&quot;')}" aria-label="Policy details"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg></span></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('summary')">Proceed to Summary</button>`;
+  }
+
+  selectRate(id) {
+    this.state.selectedRate = this.RATES.find(r => r.id == id || String(r.id) === String(id)) || null;
+    this.render();
+  }
+
+  // --- Summary (review + guest info) ---
+  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('firstName',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('lastName',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('email',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('phone',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('specialRequests',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 currency = this.state.selectedRoom?.currency;
+              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>${formatPrice(amt, currency)}</span></div>`;
+              }).join('');
+              const vat = this.state.selectedRate.vat;
+              if (vat) {
+                const vatBadge = (vat.value !== 0 && vat.value != null) ? (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>${formatPrice(vat.value, currency)}</span></div>`;
+              }
+              return `<div class="summary-row"><span>Room total</span><span>${formatPrice(roomTotal, currency)}</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">${formatPrice(total, this.state.selectedRoom?.currency)}</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>`;
+  }
+
+  // --- Payment (Stripe form) ---
+  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('summary')" 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">${formatPrice(total, this.state.selectedRoom?.currency)}</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;
+    // On summary, do not re-render: replacing step content would destroy inputs and steal focus.
+    if (this.state.step === 'summary') {
+      this._updateCheckoutSubmitButton();
+      return;
+    }
+    if (this._guestRenderTimer) clearTimeout(this._guestRenderTimer);
+    this._guestRenderTimer = setTimeout(() => {
+      this._guestRenderTimer = null;
+      this.render();
+    }, 80);
+  }
+
+  _updateCheckoutSubmitButton() {
+    if (!this.widget) return;
+    const stepEl = this.widget.querySelector('.booking-widget-step-content');
+    if (!stepEl) return;
+    const btn = stepEl.querySelector('.btn-primary');
+    if (!btn) return;
+    const g = this.state.guest;
+    const canSubmit = !!(g.firstName && g.lastName && g.email);
+    btn.disabled = !canSubmit;
+  }
+
+  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.options.stripePublishableKey && typeof this.options.createPaymentIntent === 'function';
+
+    // Summary step with Stripe: go to payment step (form loads there)
+    if (this.state.step === 'summary' && hasStripe) {
+      this.apiError = null;
+      this.goToStep('payment');
+      requestAnimationFrame(() => { requestAnimationFrame(() => this.loadStripePaymentElement()); });
+      return;
+    }
+
+    // Payment step: confirm payment then poll confirmation endpoint for booking details
+    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) {
+      this.apiError = null;
+      Promise.resolve(onBeforeConfirm(payload))
+        .then((res) => {
+          const code = res && (res.confirmationCode != null ? res.confirmationCode : res.confirmation_code);
+          this.confirmationCode = 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;
+    }
+    // No Stripe flow and no onBeforeConfirm: only log payload
+    return;
+    if (this.bookingApi) {
+      this.apiError = null;
+      this.bookingApi.createBooking(this.state).then((res) => {
+        this.confirmationCode = res.confirmationCode || ('LX' + Date.now().toString(36).toUpperCase().slice(-6));
+        this.state.step = 'confirmation';
+        this.render();
+      }).catch((err) => {
+        this.apiError = err.message || 'Booking failed';
+        this.render();
+      });
+      return;
+    }
+    this.confirmationCode = 'LX' + Date.now().toString(36).toUpperCase().slice(-6);
+    this.state.step = 'confirmation';
+    this.render();
+  }
+
+  // --- Confirmation ---
+  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: ${escapeHTML(status)}</span>` : ''}
+          </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 = 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 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">${escapeHTML(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>${escapeHTML(hotelName)}</span></div></div>` : '';
+    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, ${escapeHTML(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>${checkInStr} to ${checkOutStr}</span>
+                <small>${escapeHTML(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>${escapeHTML(roomType)}</span>
+                ${this.state.selectedRate ? `<span class="confirm-detail-rate-line">${escapeHTML([this.state.selectedRate.policy, ...(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>${escapeHTML(this.state.guest.firstName + ' ' + this.state.guest.lastName)}</span>
+                <small>${escapeHTML(this.state.guest.email)}</small>
+              </div>
+            </div>
+          <div class="summary-total">
+            <span class="summary-total-label">Total Charged</span>
+            <span class="summary-total-price">${formatPrice(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 ${escapeHTML(this.state.guest.email)}</p>
+        <button class="btn-secondary" onclick="window.bookingWidgetInstance.resetBooking()">Book Another Stay</button>
+      </div>`;
+  }
+
+  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 pollOnce = async () => {
+      if (this._confirmationPollCancelled) return;
+      try {
+        const data = await this.fetchConfirmationDetails(this.confirmationToken);
+        const status = String(data?.status ?? data?.booking_status ?? data?.state ?? '').toLowerCase();
+        this.confirmationStatus = status || this.confirmationStatus || 'pending';
+        if (status === 'confirmed') {
+          this.confirmationDetails = data;
+          this.confirmationPolling = false;
+          this.render();
+          return;
+        }
+      } catch (err) {
+        // Keep polling; surface the latest error unobtrusively.
+        this.apiError = (err && err.message) || err || 'Failed to fetch confirmation';
+        this.render();
+      }
+      this._confirmationPollTimer = setTimeout(pollOnce, 2000);
+    };
+    pollOnce();
+  }
+
+  resetBooking() {
+    this._confirmationPollCancelled = true;
+    this.confirmationPolling = false;
+    if (this._confirmationPollTimer) clearTimeout(this._confirmationPollTimer);
+    this._confirmationPollTimer = 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: '' }
+    });
+    this.confirmationCode = null;
+    this.confirmationToken = null;
+    this.confirmationDetails = null;
+    this.confirmationStatus = null;
+    this.apiError = null;
+    if (!this.bookingApi) {
+      this.ROOMS = [];
+      this.RATES = [];
+    }
+    if (this.options.onComplete) {
+      this.options.onComplete(this.state);
+    }
+    this.render();
+  }
+}
+
+// Export for different module systems
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = BookingWidget;
+}
+if (typeof window !== 'undefined') {
+  window.BookingWidget = BookingWidget;
+}