@nuitee/booking-widget 1.0.0

package/dist/vue/BookingWidget.vue

@@ -0,0 +1,1062 @@
+<template>
+  <div v-if="isOpen || isClosing">
+    <div :class="['booking-widget-overlay', { active: isVisible }]" @click="requestClose"></div>
+    <div 
+      ref="widgetRef"
+      :class="['booking-widget-modal', { active: isVisible }]"
+      :style="widgetStyles"
+      @transitionend="handleTransitionEnd"
+    >
+      <button class="booking-widget-close" @click="requestClose">
+        <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>
+      </button>
+      <div v-if="state.step !== 'confirmation'" class="booking-widget-step-indicator">
+        <template v-for="(step, i) in STEPS" :key="step.key">
+          <div class="step-item">
+            <span 
+              :class="['step-circle', getStepClass(i)]" 
+              @click="getStepClass(i) === 'past' ? goToStep(step.key) : null"
+            >
+              <span v-if="i < stepIndex(state.step)" style="display:inline-flex;align-items:center;justify-content:center;">
+                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" 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>
+              </span>
+              <span v-else>{{ step.num }}</span>
+            </span>
+            <span 
+              :class="['step-label', getStepClass(i)]" 
+              @click="getStepClass(i) === 'past' ? goToStep(step.key) : null"
+            >
+              {{ step.label }}
+            </span>
+          </div>
+          <span v-if="i < STEPS.length - 1" class="step-line">
+            <span :class="['step-line-fill', { filled: i < stepIndex(state.step) }]"></span>
+          </span>
+        </template>
+      </div>
+      <div class="booking-widget-step-content">
+        <!-- Dates Step -->
+        <div v-if="state.step === 'dates'">
+          <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" @click="calendarOpen = !calendarOpen" style="display:flex;align-items:center;gap:0.5em;">
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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>
+                <span :class="{placeholder: !state.checkIn}">{{ state.checkIn ? fmt(state.checkIn) : 'Check-in' }}</span>
+                &nbsp;→&nbsp;
+                <span :class="{placeholder: !state.checkOut}">{{ state.checkOut ? fmt(state.checkOut) : 'Check-out' }}</span>
+              </div>
+              <div v-if="calendarOpen" class="calendar-popup open">
+                <div class="cal-header">
+                  <button @click="calNav(-1)">‹</button>
+                  <span class="cal-title">{{ monthName(calendarMonth) }} {{ calendarYear }}</span>
+                  <span class="cal-title">{{ monthName(calendarMonth === 11 ? 0 : calendarMonth + 1) }} {{ calendarMonth === 11 ? calendarYear + 1 : calendarYear }}</span>
+                  <button @click="calNav(1)">›</button>
+                </div>
+                <div class="cal-months">
+                  <div class="cal-grid">
+                    <div v-for="n in buildMonth(calendarYear, calendarMonth).names" :key="n" class="cal-day-name">{{ n }}</div>
+                    <template v-for="(day, idx) in buildMonth(calendarYear, calendarMonth).daysArray" :key="idx">
+                      <button v-if="day" :class="day.cls" :disabled="day.disabled" @click="!day.disabled && pickDate(calendarYear, calendarMonth, day.day)">{{ day.day }}</button>
+                      <div v-else class="cal-day empty"></div>
+                    </template>
+                  </div>
+                  <div class="cal-grid">
+                    <div v-for="n in buildMonth(calendarYear, calendarMonth === 11 ? 0 : calendarMonth + 1).names" :key="n" class="cal-day-name">{{ n }}</div>
+                    <template v-for="(day, idx) in buildMonth(calendarYear, calendarMonth === 11 ? 0 : calendarMonth + 1).daysArray" :key="idx">
+                      <button v-if="day" :class="day.cls" :disabled="day.disabled" @click="!day.disabled && pickDate(calendarMonth === 11 ? calendarYear + 1 : calendarYear, calendarMonth === 11 ? 0 : calendarMonth + 1, day.day)">{{ day.day }}</button>
+                      <div v-else class="cal-day empty"></div>
+                    </template>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <label class="form-label" style="margin-top:1.5em;display:flex;align-items:center;gap:0.5em;">
+              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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>
+              Guests & Rooms
+            </label>
+            <div class="guests-rooms-section">
+              <div v-for="(occ, roomIdx) in (state.occupancies || []).slice(0, state.rooms)" :key="roomIdx" class="room-card">
+                <div class="room-card-header">
+                  <span class="room-card-title">Room {{ roomIdx + 1 }}</span>
+                  <button v-if="state.rooms > 1" type="button" class="remove-room-btn" @click="removeRoom(roomIdx)" aria-label="Remove room">Remove</button>
+                </div>
+                <div class="counter-row">
+                  <span class="counter-label">Adults</span>
+                  <div class="counter-controls">
+                    <button class="counter-btn" :disabled="(occ.adults ?? 1) <= 1" @click="changeCounter('adults', -1, roomIdx)">−</button>
+                    <span class="counter-val">{{ occ.adults ?? 1 }}</span>
+                    <button class="counter-btn" :disabled="(occ.adults ?? 1) >= 8" @click="changeCounter('adults', 1, roomIdx)">+</button>
+                  </div>
+                </div>
+                <div class="counter-row">
+                  <span class="counter-label">Children</span>
+                  <div class="counter-controls">
+                    <button class="counter-btn" :disabled="(occ.children ?? 0) <= 0" @click="changeCounter('children', -1, roomIdx)">−</button>
+                    <span class="counter-val">{{ occ.children ?? 0 }}</span>
+                    <button class="counter-btn" :disabled="(occ.children ?? 0) >= 6" @click="changeCounter('children', 1, roomIdx)">+</button>
+                  </div>
+                </div>
+                <div v-if="(occ.children ?? 0) > 0" class="child-ages-section" style="display:flex;flex-wrap:wrap;gap:0.5em 1em;">
+                  <div v-for="i in (occ.children ?? 0)" :key="i" 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 }} age</label>
+                    <select
+                      class="form-input"
+                      style="width:100%;margin-top:0.25em;"
+                      :value="(occ.childrenAges || [])[i - 1] ?? 0"
+                      @change="updateChildAge(roomIdx, i - 1, parseInt($event.target.value, 10))"
+                    >
+                      <option v-for="a in 18" :key="a - 1" :value="a - 1">{{ a - 1 }} year{{ (a - 1) !== 1 ? 's' : '' }}</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+              <button type="button" class="add-room-btn" :disabled="state.rooms >= 5" @click="changeCounter('rooms', 1)">+ Add room</button>
+            </div>
+            <button class="btn-primary" :disabled="!state.checkIn || !state.checkOut" @click="goToStep('rooms')">Select Room</button>
+          </div>
+        </div>
+
+        <!-- Rooms Step -->
+        <div v-if="state.step === 'rooms'">
+          <h2 class="step-title">Choose Your Room</h2>
+          <p v-if="apiError" class="step-subtitle" style="color: var(--destructive, #ef4444);">{{ apiError }}</p>
+          <p v-else class="step-subtitle">Each space is crafted for an unforgettable experience</p>
+          <div v-if="loadingRooms" class="room-grid-wrapper">
+            <div class="room-grid">
+              <div v-for="i in 4" :key="i" 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>
+            </div>
+          </div>
+          <template v-else-if="apiError">
+            <button class="btn-secondary" @click="goToStep('rooms')">Try again</button>
+          </template>
+          <template v-else-if="roomsList.length === 0">
+            <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" @click="goToStep('dates')">Change dates</button>
+            </div>
+          </template>
+          <div v-else class="room-grid-wrapper">
+            <button class="room-nav-btn room-nav-prev" @click="scrollRooms(-1)" aria-label="Previous rooms">
+              <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>
+            </button>
+            <div class="room-grid" ref="roomGridRef">
+              <div v-for="r in roomsList" :key="r.id" :class="['room-card', {selected: state.selectedRoom?.id === r.id}]" @click="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" @error="$event.target.src='https://images.unsplash.com/photo-1618773928121-c32242e63f39?w=800&q=80'" />
+                  <div v-if="state.selectedRoom?.id === r.id" class="room-card-check">
+                    <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"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                  </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(nights > 0 ? r.basePrice / nights : r.basePrice, r.currency) }}</strong><small>/ night</small></div>
+                  </div>
+                  <p class="room-card-desc">{{ r.description }}</p>
+                  <div class="room-card-meta">
+                    <span style="display:flex;align-items:center;gap:0.25em;">
+                      <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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>
+                      {{ formatRoomSize(r.size) }}
+                    </span>
+                    <span style="display:flex;align-items:center;gap:0.25em;">
+                      <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"><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>
+                      Up to {{ r.maxGuests }}
+                    </span>
+                  </div>
+                  <div class="amenity-tags"><span v-for="a in (r.amenities || []).slice(0, 5)" :key="a" class="amenity-tag">{{ a }}</span></div>
+                </div>
+              </div>
+            </div>
+            <button class="room-nav-btn room-nav-next" @click="scrollRooms(1)" aria-label="Next rooms">
+              <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>
+            </button>
+          </div>
+          <button class="btn-primary" :disabled="!state.selectedRoom" @click="goToStep('rates')">Select Rate</button>
+        </div>
+
+        <!-- Rates Step -->
+        <div v-if="state.step === 'rates'">
+          <p v-if="loadingRates" class="step-subtitle">Loading rates...</p>
+          <p v-else-if="apiError" class="step-subtitle" style="color: var(--destructive, #ef4444);">{{ apiError }}</p>
+          <div v-if="loadingRates" style="padding:2em;text-align:center;color:var(--muted);">Please wait.</div>
+          <template v-else-if="apiError">
+            <button class="btn-secondary" @click="goToStep('rates')">Try again</button>
+          </template>
+          <template v-else>
+            <div class="rate-step-card">
+              <div v-if="state.selectedRoom" class="rate-step-room-summary">
+                <img class="rate-step-room-summary-image" :src="state.selectedRoom.image" alt="" @error="$event.target.src='https://images.unsplash.com/photo-1618773928121-c32242e63f39?w=800&q=80'" />
+                <div class="rate-step-room-summary-body">
+                  <h3 class="rate-step-room-summary-name">{{ state.selectedRoom.name }}</h3>
+                  <p v-if="state.selectedRoom.description" class="rate-step-room-summary-desc">{{ state.selectedRoom.description }}</p>
+                  <div class="rate-step-room-summary-meta">
+                    <span v-if="state.selectedRoom.size">{{ formatRoomSize(state.selectedRoom.size) }}</span>
+                    <span v-if="state.selectedRoom.maxGuests != null">Up to {{ state.selectedRoom.maxGuests }} guests</span>
+                  </div>
+                </div>
+              </div>
+              <template v-if="ratesList.length === 0">
+                <p style="color:var(--muted);font-size:0.9em;margin:0;padding:1em;">No rates available for this room.</p>
+              </template>
+              <div v-else class="rate-list">
+            <div v-for="r in ratesList" :key="r.id" :class="['rate-card', {selected: state.selectedRate?.id === r.id}]" @click="selectRate(r.id)">
+              <div v-if="r.recommended" class="rate-badge">
+                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" 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>
+                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(Math.round(state.selectedRoom?.basePrice * r.priceModifier * state.rooms), state.selectedRoom?.currency) }}</strong><small>total</small></div>
+              </div>
+              <p v-if="r.policy" 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" 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>
+              </div>
+            </div>
+            <button v-if="ratesList.length > 0" class="btn-primary" :disabled="!state.selectedRate" @click="goToStep('summary')">Proceed to Summary</button>
+            <button v-else class="btn-secondary" @click="goToStep('rooms')">Choose another room</button>
+          </template>
+        </div>
+
+        <!-- Summary Step -->
+        <div v-if="state.step === 'summary'">
+          <h2 class="step-title">Review Your Booking</h2>
+          <p class="step-subtitle">Confirm your details before payment</p>
+          <div class="checkout-grid">
+            <div>
+              <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="state.guest.firstName" @input="updateGuest('firstName', $event.target.value)" placeholder="James" />
+                </div>
+                <div class="form-group">
+                  <label class="form-label">Last Name</label>
+                  <input class="form-input" :value="state.guest.lastName" @input="updateGuest('lastName', $event.target.value)" placeholder="Bond" />
+                </div>
+              </div>
+              <div class="form-group">
+                <label class="form-label">Email</label>
+                <input class="form-input" type="email" :value="state.guest.email" @input="updateGuest('email', $event.target.value)" placeholder="james@example.com" />
+              </div>
+              <div class="form-group">
+                <label class="form-label">Phone</label>
+                <input class="form-input" type="tel" :value="state.guest.phone" @input="updateGuest('phone', $event.target.value)" placeholder="+1 (555) 000-0000" />
+              </div>
+              <div class="form-group">
+                <label class="form-label">Special Requests</label>
+                <textarea class="form-textarea" rows="3" :value="state.guest.specialRequests" @input="updateGuest('specialRequests', $event.target.value)" placeholder="Any special requests..."></textarea>
+              </div>
+            </div>
+            <div>
+              <div class="summary-box">
+                <h3>Booking Summary</h3>
+                <img v-if="state.selectedRoom" :src="state.selectedRoom.image" alt="" style="width:100%;height:8em;object-fit:cover;border-radius:0.5em;margin-bottom:0.75em;" @error="$event.target.src='https://images.unsplash.com/photo-1618773928121-c32242e63f39?w=800&q=80'" />
+                <p v-if="state.selectedRoom" style="font-family:var(--font-serif);margin-bottom:1em;">{{ state.selectedRoom.name }}</p>
+                <div class="summary-row"><span>Check-in</span><span>{{ fmt(state.checkIn) }}</span></div>
+                <div class="summary-row"><span>Check-out</span><span>{{ fmt(state.checkOut) }}</span></div>
+                <div class="summary-row"><span>Guests</span><span>{{ totalGuests.adults }} adults{{ totalGuests.children ? ', ' + totalGuests.children + ' children' : '' }}</span></div>
+                <div class="summary-row"><span>Rate</span><span>{{ state.selectedRate ? [state.selectedRate.policy, ...(state.selectedRate.benefits || [])].filter(Boolean).join(' ') : '—' }}</span></div>
+                <template v-if="checkoutFeeRows.length">
+                  <div class="summary-row">
+                    <span>{{ checkoutFeeRows[0].label }}</span>
+                    <span>{{ formatPrice(checkoutFeeRows[0].amount, state.selectedRoom?.currency) }}</span>
+                  </div>
+                  <div class="summary-fees">
+                    <p class="summary-fees-heading">Fees & taxes</p>
+                    <p v-if="checkoutFeesSection && checkoutFeesSection.allIncluded" class="summary-fees-note">Included in your rate</p>
+                    <div class="summary-fees-list">
+                      <div v-for="(row, i) in checkoutFeeRows.slice(1)" :key="i" class="summary-row summary-row--fee">
+                        <span class="summary-fee-label">
+                          {{ row.name }}
+                          <span v-if="row.name !== 'VAT' || row.amount !== 0" :class="['summary-fee-badge', { 'summary-fee-badge--excluded': !row.included }]">
+                            {{ row.included ? 'Included' : 'Excluded' }}
+                          </span>
+                        </span>
+                        <span>{{ formatPrice(row.amount, state.selectedRoom?.currency) }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+                <div class="summary-total">
+                  <span class="summary-total-label">Total</span>
+                  <span class="summary-total-price">{{ formatPrice(checkoutTotal, state.selectedRoom?.currency) }}</span>
+                </div>
+                <p v-if="apiError" style="color:var(--destructive, #ef4444);font-size:0.85em;margin-top:0.5em;">{{ apiError }}</p>
+                <button
+                  class="btn-primary"
+                  style="max-width:100%;margin-top:1em;display:flex;align-items:center;justify-content:center;gap:0.5em;"
+                  :disabled="!canSubmit"
+                  @click="confirmReservation"
+                >
+                  {{ hasStripe ? 'Proceed to Payment' : 'Confirm Reservation' }}
+                </button>
+                <p class="secure-note" style="display:flex;align-items:center;justify-content:center;gap:0.5em;">
+                  <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"><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>
+                  Secure & encrypted booking
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Payment Step (Stripe) -->
+        <div v-if="state.step === 'payment'" class="payment-step">
+          <button type="button" class="payment-step-back" aria-label="Back to summary" @click="goToStep('summary')">
+            <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="15 18 9 12 15 6"></polyline></svg>
+            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>
+                <p v-if="!paymentElementReady && !apiError" 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" v-once></div>
+                <p v-if="apiError" class="payment-setup-error" style="font-size:0.85em;color:var(--destructive, #ef4444);margin:0;">{{ apiError }}</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(checkoutTotal, state.selectedRoom?.currency) }}</span>
+              </div>
+              <button
+                class="btn-primary"
+                :disabled="!paymentElementReady"
+                @click="confirmReservation"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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>
+                {{ !paymentElementReady ? 'Loading payment…' : 'Confirm Reservation' }}
+              </button>
+              <p class="secure-note">
+                <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"><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>
+                Secure & encrypted booking
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Confirmation Step -->
+        <div v-if="state.step === 'confirmation'" class="confirmation">
+          <div v-if="!confirmationDetails" 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>
+            <span v-if="confirmationStatus" style="font-size:0.8em;color:var(--muted);">Status: {{ confirmationStatus }}</span>
+          </div>
+          <template v-else>
+          <div class="confirm-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" 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>
+          </div>
+          <h2 class="step-title">Reservation Confirmed</h2>
+          <p class="step-subtitle">Thank you, {{ state.guest.firstName }}. We look forward to welcoming you.</p>
+          <div class="confirm-box">
+            <div v-if="confirmationBookingId" class="confirm-header">
+              <div class="confirm-booking-id">
+                <span class="confirm-booking-id-label">Booking ID</span>
+                <span class="confirm-booking-id-value">{{ confirmationBookingId }}</span>
+              </div>
+            </div>
+            <div class="confirm-detail">
+              <span class="confirm-detail-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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>
+              </span>
+              <div class="confirm-detail-content">
+                <span>{{ fmtLong(confirmationCheckIn) }} to {{ fmtLong(confirmationCheckOut) }}</span>
+                <small>{{ confirmationNights }} {{ confirmationNights === 1 ? 'night' : 'nights' }}</small>
+              </div>
+            </div>
+            <div v-if="confirmationHotelName" class="confirm-detail">
+              <span class="confirm-detail-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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>
+              </span>
+              <div class="confirm-detail-content"><span>{{ confirmationHotelName }}</span></div>
+            </div>
+            <div class="confirm-detail">
+              <span class="confirm-detail-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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>
+              </span>
+              <div class="confirm-detail-content">
+                <span>{{ confirmationRoomType }}</span>
+                <span v-if="state.selectedRate" class="confirm-detail-rate-line">{{ [state.selectedRate.policy, ...(state.selectedRate.benefits || [])].filter(Boolean).join(' · ') }}</span>
+              </div>
+            </div>
+            <div class="confirm-detail">
+              <span class="confirm-detail-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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>
+              </span>
+              <div class="confirm-detail-content">
+                <span>{{ state.guest.firstName }} {{ state.guest.lastName }}</span>
+                <small>{{ state.guest.email }}</small>
+              </div>
+            </div>
+            <div class="summary-total">
+              <span class="summary-total-label">Total Charged</span>
+              <span class="summary-total-price">{{ formatPrice(confirmationTotal, confirmationCurrency) }}</span>
+            </div>
+          </div>
+          <p style="font-size:0.75em;color:var(--muted);margin-bottom:1.5em;">A confirmation email has been sent to {{ state.guest.email }}</p>
+          <button class="btn-secondary" @click="resetBooking">Book Another Stay</button>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { loadStripe } from '@stripe/stripe-js';
+import '../core/styles.css';
+import { createBookingApi, formatPrice, buildCheckoutPayload, buildPaymentIntentPayload } from '../core/booking-api.js';
+import { STRIPE_PUBLISHABLE_KEY, API_BASE_URL } from '../core/stripe-config.js';
+
+const BASE_STEPS = [
+  { key: 'dates', label: 'Dates & Guests', num: '01' },
+  { key: 'rooms', label: 'Room', num: '02' },
+  { key: 'rates', label: 'Rate', num: '03' },
+  { key: 'summary', label: 'Summary', num: '04' },
+];
+
+export default {
+  name: 'BookingWidget',
+  props: {
+    isOpen: { type: Boolean, default: false },
+    onClose: Function,
+    onComplete: Function,
+    onOpen: Function,
+    /** API base URL (e.g. 'https://api.example.com'). Uses shared booking-api when set. */
+    apiBaseUrl: { type: String, default: '' },
+    /** Pre-created API client from createBookingApi(). Overrides apiBaseUrl + apiSecret/propertyId/etc. if set. */
+    bookingApi: { type: Object, default: null },
+    /** API secret for X-API-Key header (pass from your app instead of env). */
+    apiSecret: { type: String, default: '' },
+    /** Property ID for the booking engine (pass from your app instead of env). */
+    propertyId: { type: [String, Number], default: '' },
+    /** Property key/hash for decrypt/pref (pass from your app instead of env). */
+    propertyKey: { type: String, default: '' },
+    availabilityBaseUrl: { type: String, default: '' },
+    propertyBaseUrl: { type: String, default: '' },
+    s3BaseUrl: { type: String, default: '' },
+    colors: {
+      type: Object,
+      default: () => null
+    },
+    /** If set, called with checkout payload (Stripe + external_booking + internal_booking) instead of createBooking. Return { confirmationCode } or resolve to go to confirmation. */
+    onBeforeConfirm: { type: Function, default: null },
+    /** Stripe: publishable key. Defaults to package .env (STRIPE_PUBLICED_KEY) at build time. */
+    stripePublishableKey: { type: String, default: () => STRIPE_PUBLISHABLE_KEY },
+    /** Stripe: optional override. If not set, package uses .env (VITE_API_BASE_URL or API_BASE_URL) + '/proxy/create-payment-intent'. */
+    createPaymentIntent: { type: Function, default: null },
+    /** Stripe: deprecated (booking completion is fetched from confirmation endpoint instead). */
+    onBookingComplete: { type: Function, default: null },
+  },
+  emits: ['close', 'complete', 'open'],
+  data() {
+    return {
+      roomsList: [],
+      ratesList: [],
+      loadingRooms: false,
+      loadingRates: false,
+      apiError: null,
+      confirmationCode: null,
+      calendarMonth: new Date().getMonth(),
+      calendarYear: new Date().getFullYear(),
+      pickState: 0,
+      calendarOpen: false,
+      stripeInstance: null,
+      elementsInstance: null,
+      paymentElementReady: false,
+      checkoutShowPaymentForm: false,
+      paymentIntentConfirmationToken: null,
+      confirmationStatus: null,
+      confirmationDetails: null,
+      confirmationPollTimer: null,
+      isClosing: false,
+      isReadyForOpen: false,
+      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: '' },
+      },
+    };
+  },
+  computed: {
+    // Use package .env when props not passed (e.g. examples with envDir pointing at root)
+    effectiveApiBaseUrl() {
+      return this.apiBaseUrl || (typeof import.meta !== 'undefined' && import.meta.env && import.meta.env.VITE_API_URL) || '';
+    },
+    effectiveAvailabilityBaseUrl() {
+      const env = typeof import.meta !== 'undefined' && import.meta.env ? import.meta.env : {};
+      const apiBase = (env.VITE_API_BASE_URL || API_BASE_URL || '').replace(/\/$/, '');
+      if (this.availabilityBaseUrl !== '') return this.availabilityBaseUrl;
+      return apiBase;
+    },
+    effectivePropertyBaseUrl() {
+      return this.propertyBaseUrl || (typeof import.meta !== 'undefined' && import.meta.env && import.meta.env.VITE_PROPERTY_BASE_URL) || '';
+    },
+    effectiveS3BaseUrl() {
+      return this.s3BaseUrl || (typeof import.meta !== 'undefined' && import.meta.env && import.meta.env.VITE_AWS_S3_PATH) || '';
+    },
+    effectivePaymentIntentUrl() {
+      const env = typeof import.meta !== 'undefined' && import.meta.env ? import.meta.env : {};
+      const apiBase = (env.VITE_API_BASE_URL || API_BASE_URL || '').replace(/\/$/, '');
+      return (apiBase ? apiBase + '/proxy/create-payment-intent' : '').trim();
+    },
+    effectiveConfirmationBaseUrl() {
+      const env = typeof import.meta !== 'undefined' && import.meta.env ? import.meta.env : {};
+      const base = env.VITE_API_BASE_URL || API_BASE_URL || 'https://ai.thehotelplanet.com';
+      return String(base).replace(/\/$/, '');
+    },
+    hasStripe() {
+      return !!(this.stripePublishableKey && typeof this.effectiveCreatePaymentIntent === 'function');
+    },
+    STEPS() {
+      return this.hasStripe ? [...BASE_STEPS, { key: 'payment', label: 'Payment', num: '05' }] : BASE_STEPS;
+    },
+    effectiveCreatePaymentIntent() {
+      if (typeof this.createPaymentIntent === 'function') return this.createPaymentIntent;
+      const url = this.effectivePaymentIntentUrl;
+      if (!url) return null;
+      return async (payload) => {
+        const headers = { 'Content-Type': 'application/json' };
+        if (url.includes('ngrok')) headers['ngrok-skip-browser-warning'] = 'true';
+        const res = await fetch(url, { method: 'POST', headers, body: JSON.stringify(payload) });
+        if (!res.ok) throw new Error(await res.text());
+        const data = await res.json();
+        const clientSecret = data.clientSecret ?? data.client_secret ?? data.data?.clientSecret ?? data.data?.client_secret ?? data.paymentIntent?.client_secret;
+        const confirmationToken = data.confirmationToken ?? data.confirmation_token ?? data.data?.confirmationToken ?? data.data?.confirmation_token;
+        return { clientSecret, confirmationToken };
+      };
+    },
+    bookingApiRef() {
+      if (this.bookingApi && typeof this.bookingApi.fetchRooms === 'function') return this.bookingApi;
+      if ((this.effectiveApiBaseUrl || this.propertyKey) && typeof createBookingApi === 'function') {
+        return createBookingApi({
+          baseUrl: this.effectiveApiBaseUrl || this.effectiveAvailabilityBaseUrl || '',
+          availabilityBaseUrl: this.effectiveAvailabilityBaseUrl === '' ? '' : (this.effectiveAvailabilityBaseUrl || undefined),
+          propertyBaseUrl: this.effectivePropertyBaseUrl === '' ? '' : (this.effectivePropertyBaseUrl || undefined),
+          s3BaseUrl: this.effectiveS3BaseUrl || undefined,
+          propertyId: this.propertyId != null && this.propertyId !== '' ? String(this.propertyId) : undefined,
+          propertyKey: this.propertyKey || undefined,
+          headers: this.apiSecret ? { 'X-API-Key': this.apiSecret } : undefined,
+        });
+      }
+      return null;
+    },
+    widgetStyles() {
+      if (!this.colors) return {};
+      const styles = {};
+      if (this.colors.background) {
+        styles['--bg'] = this.colors.background;
+        styles['--card'] = this.colors.background;
+      }
+      if (this.colors.text) {
+        styles['--fg'] = this.colors.text;
+        styles['--card-fg'] = this.colors.text;
+      }
+      if (this.colors.primary) {
+        styles['--primary'] = this.colors.primary;
+      }
+      if (this.colors.primaryText) {
+        styles['--primary-fg'] = this.colors.primaryText;
+      }
+      return styles;
+    },
+    nights() {
+      if (!this.state.checkIn || !this.state.checkOut) return 0;
+      return Math.max(1, Math.round((this.state.checkOut - this.state.checkIn) / 86400000));
+    },
+    checkoutTotal() {
+      if (!this.state.selectedRoom || !this.state.selectedRate) return 0;
+      const nights = this.nights;
+      const rooms = this.state.rooms;
+      const roomTotal = Math.round(this.state.selectedRoom.basePrice * this.state.selectedRate.priceModifier * 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);
+    },
+    confirmationTotal() {
+      if (this.confirmationDetails && (this.confirmationDetails.totalAmount != null && this.confirmationDetails.totalAmount !== '')) {
+        return Number(this.confirmationDetails.totalAmount);
+      }
+      return this.checkoutTotal;
+    },
+    confirmationCurrency() {
+      return (this.confirmationDetails && this.confirmationDetails.currency) ? this.confirmationDetails.currency : (this.state.selectedRoom?.currency || 'USD');
+    },
+    confirmationNights() {
+      if (this.confirmationDetails && this.confirmationDetails.nights != null) return this.confirmationDetails.nights;
+      return this.nights;
+    },
+    confirmationBookingId() {
+      return this.confirmationDetails?.bookingId ?? this.confirmationDetails?.booking_id ?? null;
+    },
+    confirmationHotelName() {
+      return this.confirmationDetails?.hotelName ?? this.confirmationDetails?.hotel_name ?? null;
+    },
+    confirmationRoomType() {
+      const raw = this.confirmationDetails?.roomType ?? this.confirmationDetails?.room_type ?? this.state.selectedRoom?.name ?? '';
+      return raw.replace(/\s*Rate\s*\d+\s*$/i, '').trim();
+    },
+    confirmationCheckIn() {
+      if (!this.confirmationDetails?.checkIn) return this.state.checkIn;
+      const d = this.confirmationDetails.checkIn;
+      return typeof d === 'string' ? new Date(d) : d;
+    },
+    confirmationCheckOut() {
+      if (!this.confirmationDetails?.checkOut) return this.state.checkOut;
+      const d = this.confirmationDetails.checkOut;
+      return typeof d === 'string' ? new Date(d) : d;
+    },
+    checkoutFeeRows() {
+      const rate = this.state.selectedRate;
+      if (!rate || (!rate.fees?.length && !rate.vat)) return [];
+      const nights = this.nights;
+      const rooms = this.state.rooms;
+      const roomTotal = Math.round(this.state.selectedRoom.basePrice * rate.priceModifier * rooms);
+      const rows = [{ label: 'Room total', amount: roomTotal }];
+      (rate.fees ?? []).forEach(f => rows.push({ name: f.name, amount: f.perNight ? f.amount * nights * rooms : f.amount, included: f.included }));
+      if (rate.vat) rows.push({ name: 'VAT', amount: rate.vat.value, included: rate.vat.included });
+      return rows;
+    },
+    checkoutFeesSection() {
+      const rate = this.state.selectedRate;
+      if (!rate || (!rate.fees?.length && !rate.vat)) return null;
+      const fees = rate.fees ?? [];
+      const allIncluded = fees.every(f => f.included) && (!rate.vat || rate.vat.included);
+      return { allIncluded, fees: rate.fees, vat: rate.vat };
+    },
+    canSubmit() {
+      return this.state.guest.firstName && this.state.guest.lastName && this.state.guest.email;
+    },
+    displayConfirmationCode() {
+      return this.confirmationCode || (this.confirmationDetails?.confirmationCode ?? this.confirmationDetails?.confirmation_code ?? this.confirmationDetails?.id ?? ('LX' + Date.now().toString(36).toUpperCase().slice(-6)));
+    },
+    totalGuests() {
+      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),
+      };
+    },
+    isVisible() {
+      return this.isOpen && !this.isClosing && this.isReadyForOpen;
+    },
+  },
+  watch: {
+    isOpen: {
+      handler(open) {
+        if (open && this.onOpen) this.onOpen();
+        if (!open || this.isClosing) {
+          this.isReadyForOpen = false;
+          return;
+        }
+        this.isReadyForOpen = false;
+        this.$nextTick(() => {
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => { this.isReadyForOpen = true; });
+          });
+        });
+      },
+      immediate: true,
+    },
+    'state.step': function(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;
+        }
+      }
+    },
+    checkoutShowPaymentForm: function(show) {
+      if (show && this.state.step === 'payment') this.loadStripePaymentElement();
+    },
+  },
+  methods: {
+    async fetchConfirmationDetails(token) {
+      const t = String(token || '').trim();
+      if (!t) throw new Error('Missing confirmation token');
+      const url = `${this.effectiveConfirmationBaseUrl}/proxy/confirmation/${encodeURIComponent(t)}`;
+      const res = await fetch(url, { method: 'POST' });
+      if (!res.ok) throw new Error(await res.text());
+      return await res.json();
+    },
+    startConfirmationPolling(token) {
+      this.confirmationDetails = null;
+      this.confirmationStatus = 'pending';
+      this.apiError = null;
+      this.state.step = 'confirmation';
+      if (this.confirmationPollTimer) clearTimeout(this.confirmationPollTimer);
+      const pollOnce = async () => {
+        try {
+          const data = await this.fetchConfirmationDetails(token);
+          const status = data?.status != null ? String(data.status) : '';
+          this.confirmationStatus = status || this.confirmationStatus || 'pending';
+          if (status === 'confirmed') {
+            this.confirmationDetails = data;
+            return;
+          }
+        } catch (err) {
+          this.apiError = (err && err.message) || err || 'Failed to fetch confirmation';
+        }
+        this.confirmationPollTimer = setTimeout(pollOnce, 2000);
+      };
+      pollOnce();
+    },
+    async loadStripePaymentElement() {
+      if (this.state.step !== 'payment' || !this.checkoutShowPaymentForm || !this.stripePublishableKey || typeof this.effectiveCreatePaymentIntent !== 'function') return;
+      const paymentIntentPayload = buildPaymentIntentPayload(this.state, { propertyKey: this.propertyKey || undefined });
+      this.paymentElementReady = false;
+      try {
+        await this.$nextTick();
+        const result = await this.effectiveCreatePaymentIntent(paymentIntentPayload);
+        const clientSecret = result?.clientSecret ?? result?.client_secret ?? result?.data?.clientSecret ?? result?.data?.client_secret ?? result?.paymentIntent?.client_secret;
+        this.paymentIntentConfirmationToken = result?.confirmationToken ?? result?.confirmation_token ?? result?.data?.confirmationToken ?? result?.data?.confirmation_token;
+        if (!clientSecret || this.state.step !== 'payment') {
+          this.apiError = 'Payment setup failed: no client secret returned';
+          return;
+        }
+        const stripe = await loadStripe(this.stripePublishableKey);
+        if (!stripe || this.state.step !== 'payment') return;
+        this.stripeInstance = stripe;
+        const elements = stripe.elements({ clientSecret, appearance: { theme: 'flat', variables: { borderRadius: '8px' } } });
+        this.elementsInstance = elements;
+        const paymentElement = elements.create('payment');
+        await this.$nextTick();
+        const container = document.getElementById('booking-widget-payment-element');
+        if (!container || this.state.step !== 'payment') {
+          this.apiError = 'Payment form container not found';
+          return;
+        }
+        this.apiError = null;
+        container.innerHTML = '';
+        paymentElement.mount(container);
+        this.paymentElementReady = true;
+      } catch (err) {
+        this.apiError = (err && err.message) || err || 'Payment setup failed';
+      }
+    },
+    stepIndex(key) {
+      return this.STEPS.findIndex(s => s.key === key);
+    },
+    getStepClass(i) {
+      const ci = this.stepIndex(this.state.step);
+      return i === ci ? 'active' : i < ci ? 'past' : 'future';
+    },
+    goToStep(step) {
+      if (step !== 'summary' && step !== 'payment') this.checkoutShowPaymentForm = false;
+      if (step === 'payment') this.checkoutShowPaymentForm = true;
+      this.state.step = step;
+      this.apiError = null;
+      const api = this.bookingApiRef;
+      if (step === 'rooms' && api) {
+        this.loadingRooms = true;
+        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 };
+        api.fetchRooms(params).then((rooms) => {
+          this.roomsList = Array.isArray(rooms) ? rooms : [];
+          this.loadingRooms = false;
+        }).catch((err) => {
+          this.apiError = err.message || 'Failed to load rooms';
+          this.loadingRooms = false;
+        });
+        return;
+      }
+      if (step === 'rates' && this.state.selectedRoom) {
+        this.loadingRates = false;
+        this.ratesList = Array.isArray(this.state.selectedRoom.rates) && this.state.selectedRoom.rates.length
+          ? this.state.selectedRoom.rates
+          : [];
+        return;
+      }
+    },
+    updateState(newState) {
+      this.state = { ...this.state, ...newState };
+    },
+    requestClose() {
+      if (this.isClosing) return;
+      this.isClosing = true;
+    },
+    handleTransitionEnd(e) {
+      if (e.target !== this.$refs.widgetRef || e.propertyName !== 'transform') return;
+      if (!this.isClosing) return;
+      this.handleClose();
+      this.isClosing = false;
+    },
+    handleClose() {
+      this.checkoutShowPaymentForm = false;
+      this.paymentIntentConfirmationToken = null;
+      this.confirmationStatus = null;
+      this.confirmationDetails = null;
+      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.apiError = null;
+      this.roomsList = [];
+      this.ratesList = [];
+      if (this.onClose) this.onClose();
+      this.$emit('close');
+    },
+    confirmReservation() {
+      if (!this.canSubmit) return;
+      const payload = buildCheckoutPayload(this.state, { propertyId: this.propertyId != null && this.propertyId !== '' ? this.propertyId : undefined, propertyKey: this.propertyKey || undefined });
+      // Summary step with Stripe: go to payment step (form loads there)
+      if (this.state.step === 'summary' && this.stripePublishableKey && typeof this.effectiveCreatePaymentIntent === 'function') {
+        this.apiError = null;
+        this.goToStep('payment');
+        return;
+      }
+
+      // Payment step: confirm payment
+      if (this.state.step === 'payment' && this.stripePublishableKey && typeof this.effectiveCreatePaymentIntent === 'function' && this.stripeInstance && this.elementsInstance) {
+        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?.message || 'Payment failed';
+            return;
+          }
+          if (paymentIntent?.status === 'succeeded' || paymentIntent?.status === 'requires_capture') {
+            if (!this.paymentIntentConfirmationToken) {
+              this.apiError = 'Missing confirmation token from payment intent';
+              return;
+            }
+            this.startConfirmationPolling(this.paymentIntentConfirmationToken);
+          }
+        }).catch((err) => { this.apiError = (err && err.message) || err || 'Payment failed'; });
+        return;
+      }
+
+      if (typeof this.onBeforeConfirm === 'function') {
+        this.apiError = null;
+        Promise.resolve(this.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';
+          })
+          .catch((err) => {
+            this.apiError = (err && err.message) || err || 'Booking failed';
+          });
+        return;
+      }
+      // No Stripe flow and no onBeforeConfirm: only log payload
+      return;
+      const api = this.bookingApiRef;
+      if (api) {
+        this.apiError = null;
+        api.createBooking(this.state).then((res) => {
+          this.confirmationCode = res.confirmationCode || ('LX' + Date.now().toString(36).toUpperCase().slice(-6));
+          this.state.step = 'confirmation';
+        }).catch((err) => {
+          this.apiError = err.message || 'Booking failed';
+        });
+        return;
+      }
+      this.confirmationCode = 'LX' + Date.now().toString(36).toUpperCase().slice(-6);
+      this.state.step = 'confirmation';
+    },
+    resetBooking() {
+      this.checkoutShowPaymentForm = false;
+      this.paymentElementReady = false;
+      this.stripeInstance = null;
+      const el = document.getElementById('booking-widget-payment-element');
+      if (el) el.innerHTML = '';
+      this.elementsInstance = null;
+      this.paymentIntentConfirmationToken = null;
+      this.confirmationStatus = null;
+      this.confirmationDetails = null;
+      if (this.confirmationPollTimer) clearTimeout(this.confirmationPollTimer);
+      this.confirmationPollTimer = 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: '' },
+      };
+      this.confirmationCode = null;
+      this.apiError = null;
+      if (!this.bookingApiRef) {
+        this.roomsList = [];
+        this.ratesList = [];
+      }
+      if (this.onComplete) this.onComplete(this.state);
+      this.$emit('complete', this.state);
+    },
+    formatPrice,
+    fmt(date) {
+      if (!date) return '';
+      return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+    },
+    formatRoomSize(size) {
+      if (size == null || typeof size !== 'string') return size ?? '';
+      return size.replace(/\bsquare_?meter(s)?\b/gi, 'm²').trim();
+    },
+    fmtLong(date) {
+      if (!date) return '';
+      return date.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
+    },
+    monthName(m) {
+      return ['January','February','March','April','May','June','July','August','September','October','November','December'][m];
+    },
+    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.updateState({ rooms: next, occupancies: occ });
+        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.updateState({ occupancies: occ });
+    },
+    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.updateState({ occupancies: occ });
+    },
+    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.updateState({ occupancies: occ, rooms: occ.length });
+    },
+    pickDate(y, m, d) {
+      const date = new Date(y, m, d);
+      if (this.pickState === 0 || (this.state.checkIn && date <= this.state.checkIn)) {
+        this.updateState({ checkIn: date, checkOut: null });
+        this.pickState = 1;
+      } else {
+        this.updateState({ checkOut: date });
+        this.pickState = 0;
+        this.calendarOpen = false;
+      }
+    },
+    calNav(dir) {
+      this.calendarMonth += dir;
+      if (this.calendarMonth > 11) { this.calendarMonth = 0; this.calendarYear++; }
+      if (this.calendarMonth < 0) { this.calendarMonth = 11; this.calendarYear--; }
+    },
+    buildMonth(year, month) {
+      const today = new Date(); today.setHours(0,0,0,0);
+      const first = new Date(year, month, 1);
+      const days = new Date(year, month + 1, 0).getDate();
+      const startDay = first.getDay();
+      const names = ['Su','Mo','Tu','We','Th','Fr','Sa'];
+      let daysArray = [];
+      for (let i = 0; i < startDay; i++) daysArray.push(null);
+      for (let d = 1; d <= days; d++) {
+        const date = new Date(year, month, d);
+        const disabled = date < today;
+        let cls = 'cal-day';
+        if (disabled) cls += ' disabled';
+        if (date.getTime() === today.getTime()) cls += ' today';
+        if (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';
+        daysArray.push({ date, disabled, cls, day: d });
+      }
+      return { daysArray, names };
+    },
+    scrollRooms(direction) {
+      if (this.$refs.roomGridRef) {
+        const scrollAmount = 300;
+        this.$refs.roomGridRef.scrollBy({
+          left: direction * scrollAmount,
+          behavior: 'smooth'
+        });
+      }
+    },
+    selectRoom(id) {
+      this.updateState({ selectedRoom: this.roomsList.find(r => r.id === id) });
+    },
+    selectRate(id) {
+      this.updateState({ selectedRate: this.ratesList.find(r => r.id === id) });
+    },
+    updateGuest(field, value) {
+      this.updateState({ guest: { ...this.state.guest, [field]: value } });
+    },
+  },
+};
+</script>