@asksable/site-connector 0.2.0 → 0.3.0

package/dist/booking-widget.js

@@ -3,7 +3,13 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { loadStripe } from '@stripe/stripe-js';
 import { Elements, PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js';
-import { useSableSiteClient, useSableSiteConfig } from './provider.js';
+import { Skeleton } from 'boneyard-js/react';
+// Side-effect: registers all named bones with the boneyard runtime.
+// Regenerate by running `npx boneyard-js build` against a host site
+// that mounts <BookingWidgetPanel /> in its loaded state.
+import './bones/registry.js';
+import { useSableSiteClient, useSableSiteConfig, useTranslation } from './provider.js';
+import { DEFAULT_LOCALE, localeToIntl, pickLocaleField } from './translations.js';
 const stripePromises = new Map();
 function getStripePromise(publishableKey, connectAccountId) {
     const key = `${publishableKey}:${connectAccountId}`;
@@ -24,7 +30,8 @@ function hasIntakeFormSections(service) {
 function findCalculatedServiceMissingIntake(setup) {
     return setup.services.find((service) => service.pricingMode === 'calculated' && !hasIntakeFormSections(service));
 }
-const MOBILE_PROGRESS_STEPS = [1, 2, 3, 4];
+const MOBILE_PROGRESS_STEPS_SCHEDULED = [1, 2, 3, 4];
+const MOBILE_PROGRESS_STEPS_ASYNC = [1, 3, 4];
 export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'create', rescheduleContext, onRescheduleSubmit, successRedirectHref = '/', __devForceState, __devForceSuccess, }) {
     const forcedState = __devForceState ?? (__devForceSuccess ? 'success' : null);
     const isReschedule = mode === 'reschedule';
@@ -43,6 +50,8 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         : undefined;
     const client = useSableSiteClient();
     const { siteSlug } = useSableSiteConfig();
+    const { t, locale } = useTranslation();
+    const intlLocale = localeToIntl(locale);
     const [setup, setSetup] = useState(null);
     const [isSetupLoading, setIsSetupLoading] = useState(true);
     // In reschedule mode the service is locked to the original
@@ -80,6 +89,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     const [payment, setPayment] = useState(null);
     const [paymentAppointmentId, setPaymentAppointmentId] = useState(null);
     const [isSubmitting, setIsSubmitting] = useState(false);
+    const [submitAttempted, setSubmitAttempted] = useState(false);
     const [error, setError] = useState(null);
     const [success, setSuccess] = useState(null);
     const [mobileStep, setMobileStep] = useState(1);
@@ -98,10 +108,12 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         }
     }, [__devForceState]);
     const [monthOpen, setMonthOpen] = useState(false);
-    const [staffOpen, setStaffOpen] = useState(false);
     const [holdNow, setHoldNow] = useState(() => Date.now());
     const [sessionToken] = useState(() => sessionTokenFromBrowser());
-    const staffMenuRef = useRef(null);
+    // Increments on "Book another visit" so the booking section remounts
+    // cleanly. Avoids stale-memo / stale-ref edge cases that otherwise
+    // can leave the calendar empty until a hard refresh.
+    const [bookingFlowKey, setBookingFlowKey] = useState(0);
     const availabilityCacheRef = useRef(new Map());
     const holdIdRef = useRef(null);
     // Calendar card lives in the middle column and is the natural
@@ -130,6 +142,19 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     useEffect(() => {
         holdIdRef.current = holdId;
     }, [holdId]);
+    // Reset the mobile body scroll to the top whenever the step changes
+    // so the user always lands on the first field of the new step (e.g.
+    // step 3's Name input) instead of where the previous step's scroll
+    // happened to leave them.
+    useEffect(() => {
+        const root = widgetRootRef.current;
+        if (!root)
+            return;
+        const body = root.querySelector('.bw-body');
+        if (!body)
+            return;
+        body.scrollTo({ top: 0, behavior: 'smooth' });
+    }, [mobileStep]);
     useEffect(() => {
         let cancelled = false;
         setIsSetupLoading(true);
@@ -163,26 +188,13 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             cancelled = true;
         };
     }, [client, siteSlug]);
-    useEffect(() => {
-        function handleDocumentClick(event) {
-            if (!staffMenuRef.current?.contains(event.target)) {
-                setStaffOpen(false);
-            }
-        }
-        if (staffOpen) {
-            document.addEventListener('mousedown', handleDocumentClick);
-        }
-        return () => {
-            document.removeEventListener('mousedown', handleDocumentClick);
-        };
-    }, [staffOpen]);
     const selectedService = useMemo(() => setup?.services.find((service) => service._id === selectedServiceId) ?? null, [selectedServiceId, setup]);
     const selectedServiceRequiresSlot = selectedService?.publicBookingMode !== 'async';
     const selectedServicePath = selectedServiceRequiresSlot ? 'scheduled' : 'async';
     const selectedServiceHasIntakeForm = hasIntakeFormSections(selectedService);
     const isIntakeComplete = useMemo(() => !selectedService?.intakeForm ||
         areRequiredIntakeFieldsComplete(selectedService.intakeForm, intakeResponses, selectedServicePath), [intakeResponses, selectedService?.intakeForm, selectedServicePath]);
-    const serviceWarning = useMemo(() => getServiceWarning(selectedService, selectedServicePath), [selectedService, selectedServicePath]);
+    const serviceWarning = useMemo(() => getServiceWarning(selectedService, selectedServicePath, locale), [selectedService, selectedServicePath, locale]);
     const selectedServiceRequiresPayment = selectedService?.requiresPayment === true;
     const trimmedCustomerEmail = customerEmail.trim();
     const isCustomerEmailValid = trimmedCustomerEmail.length > 0 && isValidEmailAddress(trimmedCustomerEmail);
@@ -287,7 +299,14 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         let cancelled = false;
         const monthStart = formatDateKey(calendarMonth);
         const monthEnd = formatDateKey(endOfMonth(calendarMonth));
-        const requestKey = getAvailabilityCacheKey(siteSlug, selectedServiceId, selectedStaffId, calendarMonth);
+        // Cache (and the underlying query) are NOT keyed on selectedStaffId
+        // anymore. The server returns aggregated slots tagged with
+        // `availableStaffIds`, and we filter client-side per selected
+        // provider. That means switching providers in the dropdown is
+        // instant (no refetch) and we always know which staff are
+        // available on a given date — even when a single provider is
+        // selected — so we can disable unavailable rows in the dropdown.
+        const requestKey = getAvailabilityCacheKey(siteSlug, selectedServiceId, calendarMonth);
         const cachedAvailability = availabilityCacheRef.current.get(requestKey);
         if (cachedAvailability) {
             setAvailabilityByDate(cachedAvailability);
@@ -305,7 +324,6 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             .getPublicAvailableSlots({
             siteSlug,
             serviceId: selectedServiceId,
-            staffMemberId: selectedStaffId ?? undefined,
             startDate: monthStart,
             endDate: monthEnd,
         })
@@ -332,7 +350,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             if (!cancelled) {
                 setAvailabilityByDate(new Map());
                 setSelectedDate(null);
-                setError(nextError instanceof Error ? nextError.message : 'Unable to load booking availability.');
+                setError(nextError instanceof Error ? nextError.message : t('calendarLoadError'));
             }
         })
             .finally(() => {
@@ -353,7 +371,6 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             client,
             siteSlug,
             selectedServiceId,
-            selectedStaffId,
             calendarMonth: nextMonth,
             cacheRef: availabilityCacheRef,
         });
@@ -368,7 +385,10 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         setPaymentAppointmentId(null);
         if (selectedService?.publicBookingMode === 'async') {
             setViewState('details');
-            setMobileStep(4);
+            // Async services skip the date/time step (step 2). Drop the
+            // customer straight into the details form (step 3); the new
+            // 4-step model lets them review on step 4 before confirming.
+            setMobileStep(3);
         }
         else {
             setViewState('slots');
@@ -465,9 +485,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             return;
         }
         if (holdExpiresAt <= Date.now()) {
-            setHoldId(null);
-            setHoldExpiresAt(null);
-            setHeldStaffId(null);
+            handleHoldExpired();
             return;
         }
         const refreshAt = Math.max(1000, Math.min(60000, holdExpiresAt - Date.now() - 30000));
@@ -482,13 +500,39 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                 setHoldExpiresAt(result.expiresAt);
             })
                 .catch(() => {
-                setHoldId(null);
-                setHoldExpiresAt(null);
-                setHeldStaffId(null);
+                handleHoldExpired();
             });
         }, refreshAt);
         return () => window.clearTimeout(handle);
+        // handleHoldExpired is stable enough — it only reads setters
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [client, holdExpiresAt, holdId, sessionToken, siteSlug]);
+    // Fires the moment the displayed countdown hits zero. The refresh
+    // effect above usually preempts this by extending the hold ~30s
+    // early, so this is the last-line kick when the user has been idle
+    // long enough that even the refresh failed (or was never reached
+    // because the tab was backgrounded).
+    useEffect(() => {
+        if (holdExpiresAt === null)
+            return;
+        if (holdNow >= holdExpiresAt) {
+            handleHoldExpired();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [holdExpiresAt, holdNow]);
+    function handleHoldExpired() {
+        setHoldId(null);
+        setHoldExpiresAt(null);
+        setHeldStaffId(null);
+        setSelectedSlot(null);
+        setQuote(null);
+        setError(t('errorHoldExpired'));
+        setViewState('slots');
+        // Mobile flow: step 2 is the date+time picker. Async services
+        // (no slot) never see a hold, so this branch only fires for
+        // scheduled services that must go back to step 2.
+        setMobileStep((step) => (step > 2 ? 2 : step));
+    }
     useEffect(() => {
         if (!holdExpiresAt) {
             return;
@@ -499,18 +543,55 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         }, 1000);
         return () => window.clearInterval(handle);
     }, [holdExpiresAt]);
-    const selectedDateSlots = selectedDate ? availabilityByDate.get(selectedDate) ?? [] : [];
+    // The query is unfiltered by staff (so we always know who's
+    // available on each date for the dropdown disabled state). When a
+    // specific provider is selected, filter slots client-side to only
+    // those they can fulfill.
+    const filteredAvailabilityByDate = useMemo(() => {
+        if (!selectedStaffId)
+            return availabilityByDate;
+        const next = new Map();
+        for (const [date, slots] of availabilityByDate) {
+            const matching = slots.filter((slot) => slot.availableStaffIds?.includes(selectedStaffId));
+            if (matching.length > 0)
+                next.set(date, matching);
+        }
+        return next;
+    }, [availabilityByDate, selectedStaffId]);
+    // Set of staff IDs that have at least one slot on the selected
+    // date (regardless of who's currently filtered). Drives the
+    // "Unavailable" subtitle + disabled state in the provider dropdown.
+    const staffIdsAvailableOnSelectedDate = useMemo(() => {
+        if (!selectedDate)
+            return null;
+        const slots = availabilityByDate.get(selectedDate);
+        if (!slots || slots.length === 0)
+            return new Set();
+        const set = new Set();
+        for (const slot of slots) {
+            for (const id of slot.availableStaffIds ?? []) {
+                set.add(id);
+            }
+        }
+        return set;
+    }, [availabilityByDate, selectedDate]);
+    const selectedDateSlots = selectedDate ? filteredAvailabilityByDate.get(selectedDate) ?? [] : [];
     const selectedHeldStaff = availableStaff.find((staffMember) => staffMember._id === heldStaffId) ?? selectedStaff ?? null;
     const holdSecondsRemaining = holdExpiresAt !== null ? Math.max(0, Math.floor((holdExpiresAt - holdNow) / 1000)) : null;
-    const monthOptions = useMemo(() => getMonthOptions(calendarMonth, 4), [calendarMonth]);
+    const monthOptions = useMemo(() => getMonthOptions(calendarMonth, 4, intlLocale), [calendarMonth, intlLocale]);
     const calendarDays = useMemo(() => buildCalendarDays(calendarMonth), [calendarMonth]);
     // Mobile 4-step gates. canAdvanceStepN = "the user can move PAST
     // step N to step N+1". Step 1 (service) requires a pick. Step 2
-    // (provider) is always passable since "Any provider" is the
-    // default. Step 3 (calendar) requires both date + slot.
+    // combines calendar + provider + time slots; user must pick date +
+    // slot to advance. Step 3 is the details form — needs contact name,
+    // valid email, and any required intake fields filled. Step 4 is
+    // the review screen (submit, not advance).
     const canAdvanceStep1 = Boolean(selectedService);
-    const canAdvanceStep2 = true;
-    const canAdvanceStep3 = Boolean(selectedDate && selectedSlot);
+    const canAdvanceStep2 = Boolean(selectedDate && selectedSlot);
+    const canAdvanceStep3 = Boolean(selectedService &&
+        customerName.trim() &&
+        isCustomerEmailValid &&
+        isIntakeComplete);
     // Slots block is rendered in two locations: inline under the calendar
     // (mobile flow keeps current step-3 behavior) and at the top of the
     // right column on desktop (calendar | slots | form layout). Both
@@ -522,14 +603,29 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     // + per-slot stagger). React diffs keys per parent, so reusing the
     // same key on both the mobile and desktop render sites is fine —
     // each parent independently remounts its child.
+    // Provider row is the visible-list replacement for the old
+    // dropdown — same data, same handlers, but always-rendered so the
+    // user sees every option at a glance (Any + each staff). Active
+    // selection is the filled state; unavailable staff (no slots on
+    // the selected date) render disabled with an inline "Unavailable"
+    // label. The row scrolls horizontally when content exceeds the
+    // available width, so it works on desktop AND mobile without a
+    // breakpoint-specific layout.
+    const providerRow = selectedService && !isEditingService ? (_jsxs("div", { className: "bw-staff-row", role: "listbox", "aria-label": t('chooseProviderAria'), children: [_jsxs("button", { type: "button", role: "option", "aria-selected": selectedStaffId === null, className: `bw-staff-card${selectedStaffId === null ? ' is-active' : ''}`, onClick: () => setSelectedStaffId(null), children: [_jsx("span", { className: "bw-staff-card-avatar", children: _jsx(UserIcon, {}) }), _jsxs("span", { className: "bw-staff-card-info", children: [_jsx("span", { className: "bw-staff-card-name", children: t('providerAny') }), _jsx("span", { className: "bw-staff-card-desc", children: t('providerFirstAvailable') })] })] }), availableStaff
+                .filter((staffMember) => staffIdsAvailableOnSelectedDate === null ||
+                staffIdsAvailableOnSelectedDate.has(staffMember._id))
+                .map((staffMember) => {
+                const isActive = selectedStaffId === staffMember._id;
+                return (_jsxs("button", { type: "button", role: "option", "aria-selected": isActive, className: `bw-staff-card${isActive ? ' is-active' : ''}`, onClick: () => setSelectedStaffId(staffMember._id), children: [_jsx("span", { className: "bw-staff-card-avatar", children: staffMember.image?.url ? (_jsx("img", { src: staffMember.image.url, alt: staffMember.image.alt ?? staffMember.name, className: "bw-staff-avatar-img" })) : (_jsx("span", { className: "bw-staff-initials", children: getInitials(staffMember.name) })) }), _jsx("span", { className: "bw-staff-card-info", children: _jsx("span", { className: "bw-staff-card-name", children: staffMember.name }) })] }, staffMember._id));
+            })] })) : null;
     const slotsAreaKey = `${selectedServiceId ?? 'none'}-${selectedStaffId ?? 'any'}-${selectedDate ?? 'none'}-${isAvailabilityLoading ? 'loading' : 'ready'}`;
-    const slotsArea = (_jsx("div", { className: "bw-slots-fade", children: !selectedService ? (_jsx("p", { className: "bw-slots-empty", children: "Please select a service." })) : isAvailabilityLoading ? (_jsx(AvailabilitySkeleton, {})) : selectedDate ? (selectedDateSlots.length > 0 ? (_jsx("div", { className: "bw-time-slots", children: selectedDateSlots.map((slot, index) => {
+    const slotsArea = (_jsx("div", { className: "bw-slots-fade", children: !selectedService ? (_jsx("p", { className: "bw-slots-empty", children: t('slotsSelectServicePrompt') })) : isAvailabilityLoading ? (_jsx(AvailabilitySkeleton, {})) : selectedDate ? (selectedDateSlots.length > 0 ? (_jsx("div", { className: "bw-time-slots", children: selectedDateSlots.map((slot, index) => {
                 const slotKey = `${slot.time}-${slot.endTime}`;
                 const isPending = pendingSlotKey === slotKey;
                 const isActive = isPending ||
                     (selectedSlot?.time === slot.time && selectedSlot?.endTime === slot.endTime);
-                return (_jsx("button", { type: "button", className: `bw-slot${isActive ? ' is-active' : ''}${isPending ? ' is-pending' : ''}`, style: { '--bw-slot-i': index }, onClick: () => void handleSlotSelect(slot), disabled: isSubmitting, children: isPending ? 'Securing...' : formatTimeLabel(slot.time) }, slotKey));
-            }) })) : (_jsx("p", { className: "bw-no-slots", children: "No available times for this date." }))) : null }, slotsAreaKey));
+                return (_jsx("button", { type: "button", className: `bw-slot${isActive ? ' is-active' : ''}${isPending ? ' is-pending' : ''}`, style: { '--bw-slot-i': index }, onClick: () => void handleSlotSelect(slot), disabled: isSubmitting, children: isPending ? t('slotSecuring') : formatTimeLabel(slot.time, intlLocale) }, slotKey));
+            }) })) : (_jsx("p", { className: "bw-no-slots", children: t('slotsEmptyForDate') }))) : null }, slotsAreaKey));
     const canSubmit = Boolean(selectedService &&
         (!selectedServiceRequiresSlot || (selectedDate && selectedSlot && holdId)) &&
         isIntakeComplete &&
@@ -549,6 +645,8 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             quote,
             customerName,
             customerEmail,
+            t,
+            locale,
         })
         : [];
     function handleNotesInput(event) {
@@ -562,16 +660,22 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             return null;
         if (submitBlockers.length === 0 && !isQuoteLoading)
             return null;
+        // Only surface the "complete required fields" callout AFTER the
+        // user has tried to confirm. The Confirm button stays visually
+        // disabled but still receives the click via handleConfirmAttempt
+        // so we can flip submitAttempted and reveal the blockers list.
+        if (!submitAttempted)
+            return null;
         const visibleBlockers = submitBlockers.slice(0, 5);
         const hiddenCount = submitBlockers.length - visibleBlockers.length;
-        return (_jsxs("div", { className: "bw-submit-help", role: "status", "aria-live": "polite", children: [_jsx("span", { className: "bw-submit-help-title", children: isQuoteLoading ? 'Calculating your price...' : 'Complete required fields to continue:' }), !isQuoteLoading && visibleBlockers.length > 0 ? (_jsxs("ul", { children: [visibleBlockers.map((blocker) => (_jsx("li", { children: blocker }, blocker))), hiddenCount > 0 ? _jsxs("li", { children: [hiddenCount, " more required fields"] }) : null] })) : null] }));
+        return (_jsxs("div", { className: "bw-submit-help", role: "status", "aria-live": "polite", children: [_jsx("span", { className: "bw-submit-help-title", children: isQuoteLoading ? t('helpCalculating') : t('helpComplete') }), !isQuoteLoading && visibleBlockers.length > 0 ? (_jsxs("ul", { children: [visibleBlockers.map((blocker) => (_jsx("li", { children: blocker }, blocker))), hiddenCount > 0 ? _jsx("li", { children: t('helpMoreFields', { count: hiddenCount }) }) : null] })) : null] }));
     }
     function renderContactFields(idSuffix) {
         const nameId = `bw-name${idSuffix}`;
         const emailId = `bw-email${idSuffix}`;
         const phoneId = `bw-phone${idSuffix}`;
         const emailErrorId = `${emailId}-error`;
-        return (_jsxs("div", { className: "bw-form-fields", children: [_jsxs("div", { className: "bw-field", children: [_jsxs("label", { htmlFor: nameId, children: ["Full name ", _jsx("span", { className: "bw-required", children: "*" })] }), _jsx("input", { id: nameId, value: customerName, onChange: (event) => setCustomerName(event.target.value), placeholder: "John Doe" })] }), _jsxs("div", { className: `bw-field${showCustomerEmailError ? ' is-invalid' : ''}`, children: [_jsxs("label", { htmlFor: emailId, children: ["Email ", _jsx("span", { className: "bw-required", children: "*" })] }), _jsx("input", { id: emailId, type: "email", required: true, value: customerEmail, onChange: (event) => setCustomerEmail(event.target.value), "aria-invalid": showCustomerEmailError, "aria-describedby": showCustomerEmailError ? emailErrorId : undefined, placeholder: "jane@example.com" }), showCustomerEmailError ? (_jsx("span", { className: "bw-field-error", id: emailErrorId, children: "Enter a valid email address." })) : null] }), _jsxs("div", { className: "bw-field", children: [_jsx("label", { htmlFor: phoneId, children: "Phone" }), _jsx("input", { id: phoneId, value: customerPhone, onChange: (event) => setCustomerPhone(event.target.value), placeholder: "+1 (555) 000-0000" })] })] }));
+        return (_jsxs("div", { className: "bw-form-fields", children: [_jsxs("div", { className: "bw-field", children: [_jsxs("label", { htmlFor: nameId, children: [t('contactFullName'), " ", _jsx("span", { className: "bw-required", children: "*" })] }), _jsx("input", { id: nameId, value: customerName, onChange: (event) => setCustomerName(event.target.value), placeholder: t('placeholderFullName') })] }), _jsxs("div", { className: `bw-field${showCustomerEmailError ? ' is-invalid' : ''}`, children: [_jsxs("label", { htmlFor: emailId, children: [t('contactEmail'), " ", _jsx("span", { className: "bw-required", children: "*" })] }), _jsx("input", { id: emailId, type: "email", required: true, value: customerEmail, onChange: (event) => setCustomerEmail(event.target.value), "aria-invalid": showCustomerEmailError, "aria-describedby": showCustomerEmailError ? emailErrorId : undefined, placeholder: t('placeholderEmail') }), showCustomerEmailError ? (_jsx("span", { className: "bw-field-error", id: emailErrorId, children: t('contactEmailInvalid') })) : null] }), _jsxs("div", { className: "bw-field", children: [_jsx("label", { htmlFor: phoneId, children: t('contactPhone') }), _jsx("input", { id: phoneId, value: customerPhone, onChange: (event) => setCustomerPhone(event.target.value), placeholder: t('placeholderPhone') })] })] }));
     }
     function renderIntakeFields(idPrefix) {
         return (_jsx(IntakeFormFields, { form: selectedService?.intakeForm, responses: intakeResponses, onChange: (fieldId, value) => setIntakeResponses((prev) => ({ ...prev, [fieldId]: value })), idPrefix: idPrefix, mode: selectedServicePath }));
@@ -579,7 +683,10 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
     function renderIntakeAndContact(idPrefix, idSuffix) {
         const intakeFields = renderIntakeFields(idPrefix);
         const contactFields = renderContactFields(idSuffix);
-        return selectedServiceHasIntakeForm ? (_jsxs(_Fragment, { children: [intakeFields, contactFields] })) : (_jsxs(_Fragment, { children: [contactFields, intakeFields] }));
+        // Contact first, intake after. Customers expect "tell us who you
+        // are" before "tell us about your shipment" — name and email are
+        // identity, intake fields are service-specific details.
+        return (_jsxs(_Fragment, { children: [contactFields, intakeFields] }));
     }
     function handleServiceSelect(service) {
         if (holdId) {
@@ -598,7 +705,10 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             setHoldExpiresAt(null);
             setHeldStaffId(null);
             setViewState('details');
-            setMobileStep(4);
+            // Async = no date/time step; jump straight to the details form
+            // (step 3). The user advances to step 4 (review) via the Next
+            // button once the form is valid.
+            setMobileStep(3);
         }
     }
     async function handleSlotSelect(slot) {
@@ -616,7 +726,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         const reservationStaffId = selectedStaffId ?? slot.availableStaffIds[0] ?? null;
         if (!reservationStaffId) {
             setPendingSlotKey(null);
-            setError('No staff is available for that time.');
+            setError(t('errorNoStaffForSlot'));
             return;
         }
         setSelectedSlot(slot);
@@ -657,7 +767,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             setHoldExpiresAt(previousHoldExpiresAt);
             setHeldStaffId(previousHeldStaffId);
             setPendingSlotKey(null);
-            setError(nextError instanceof Error ? nextError.message : 'Unable to reserve that time.');
+            setError(nextError instanceof Error ? nextError.message : t('errorHoldFailed'));
         }
     }
     async function handleBackToSlots() {
@@ -687,6 +797,16 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         setViewState('slots');
         setMobileStep(1);
     }
+    function handleConfirmAttempt() {
+        // The disabled state is purely visual (aria-disabled + class). Real
+        // submittability gates here so we can surface validation help only
+        // after the user actually tries to confirm — never on a fresh form.
+        if (!canSubmit || isQuoteLoading || isSubmitting) {
+            setSubmitAttempted(true);
+            return;
+        }
+        void handleConfirmBooking();
+    }
     async function handleConfirmBooking() {
         if (!selectedServiceId ||
             !selectedService ||
@@ -711,7 +831,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
         if (isReschedule && onRescheduleSubmit) {
             try {
                 await onRescheduleSubmit({ newStartTime, newEndTime });
-                setSuccess('Reschedule confirmed.');
+                setSuccess(t('successRescheduleConfirmed'));
                 setMobileStep(4);
             }
             catch (nextError) {
@@ -750,7 +870,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
                 setError(null);
                 return;
             }
-            setSuccess('Booking confirmed.');
+            setSuccess(t('successBookingConfirmed'));
             setSelectedSlot(null);
             setPendingSlotKey(null);
             setHoldId(null);
@@ -767,209 +887,206 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
             setMobileStep(4);
         }
         catch (nextError) {
-            setError(nextError instanceof Error ? nextError.message : 'Unable to confirm booking.');
+            setError(nextError instanceof Error ? nextError.message : t('errorConfirmFailed'));
         }
         finally {
             setIsSubmitting(false);
         }
     }
     if (isSetupLoading) {
-        return (_jsx("section", { className: "bw", children: _jsx(BookingWidgetSkeleton, {}) }));
+        // Boneyard renders the bones JSON captured for "booking-widget"
+        // (see ./bones/booking-widget.bones.json). Children are an empty
+        // sentinel section since the bones own the layout during load.
+        return (_jsx(Skeleton, { name: "booking-widget", loading: true, children: _jsx("section", { className: "bw" }) }));
     }
     if (!setup || setup.services.length === 0) {
-        return (_jsx("section", { className: "bw", children: _jsx("div", { className: "bw-empty", children: "No bookable services are available yet." }) }));
+        return (_jsx("section", { className: "bw", children: _jsx("div", { className: "bw-empty", children: t('errorNoServices') }) }));
     }
     if (forcedState === 'cancelled') {
-        return (_jsx("section", { className: "bw", children: _jsxs("div", { className: "bw-done", children: [_jsx("div", { className: "bw-done-icon bw-done-icon--muted", children: _jsx(XIcon, {}) }), _jsx("h3", { className: "bw-done-title", children: "Booking cancelled" }), _jsx("p", { className: "bw-done-text", children: "Your appointment has been cancelled. We've let your provider know. You can book a new visit any time." }), _jsx("button", { type: "button", className: "bw-btn-primary", onClick: () => {
+        return (_jsx("section", { className: "bw", children: _jsxs("div", { className: "bw-done", children: [_jsx("div", { className: "bw-done-icon bw-done-icon--muted", children: _jsx(XIcon, {}) }), _jsx("h3", { className: "bw-done-title", children: t('cancelledTitle') }), _jsx("p", { className: "bw-done-text", children: t('cancelledBody') }), _jsx("button", { type: "button", className: "bw-btn-primary", onClick: () => {
                             /* dev preview only — host wires the real handler */
-                        }, children: "Book a new visit" })] }) }));
+                        }, children: t('cancelledCta') })] }) }));
     }
     if (success || forcedState === 'success') {
-        return (_jsx("section", { className: "bw", children: _jsxs("div", { className: "bw-done", children: [_jsx("div", { className: "bw-done-icon", children: _jsx(CheckIcon, {}) }), _jsx("h3", { className: "bw-done-title", children: isReschedule ? 'All set.' : "You're All Set!" }), _jsx("p", { className: "bw-done-text", children: isReschedule
-                            ? "Your appointment has been rescheduled. We've sent a confirmation to the email on file and notified your provider."
-                            : "Your booking request has been submitted. We'll follow up using the email you provided if anything needs confirmation." }), isReschedule ? null : (_jsx("button", { type: "button", className: "bw-btn-primary", onClick: () => {
+        return (_jsx("section", { className: "bw", children: _jsxs("div", { className: "bw-done", children: [_jsx("div", { className: "bw-done-icon", children: _jsx(CheckIcon, {}) }), _jsx("h3", { className: "bw-done-title", children: isReschedule ? t('successTitleReschedule') : t('successTitleCreate') }), _jsx("p", { className: "bw-done-text", children: isReschedule ? t('successBodyReschedule') : t('successBodyCreate') }), isReschedule ? null : (_jsx("button", { type: "button", className: "bw-btn-primary", onClick: () => {
                             window.location.assign(successRedirectHref);
-                        }, children: "Back to home" }))] }) }));
+                        }, children: t('successCtaBackHome') }))] }) }));
     }
-    return (_jsxs("section", { className: "bw", "data-view-state": viewState, ref: widgetRootRef, children: [mobileHeader ? _jsx("div", { className: "bw-mobile-header", children: mobileHeader }) : null, _jsxs("div", { className: "bw-header", children: [_jsxs("div", { className: "bw-header-row", children: [_jsx("h2", { className: "bw-title bw-title--desktop", children: title ||
-                                    (isReschedule
+    return (_jsx(Skeleton, { name: "booking-widget", loading: false, children: _jsxs("section", { className: "bw", "data-view-state": viewState, ref: widgetRootRef, children: [mobileHeader ? _jsx("div", { className: "bw-mobile-header", children: mobileHeader }) : null, _jsxs("div", { className: "bw-header", children: [_jsxs("div", { className: "bw-header-row", children: [_jsx("h2", { className: "bw-title bw-title--desktop", children: title ||
+                                        (isReschedule
+                                            ? rescheduleContext?.customerName
+                                                ? t('rescheduleTitleNamed', { name: rescheduleContext.customerName })
+                                                : t('rescheduleTitle')
+                                            : t('pageTitle')) }), _jsx("h2", { className: "bw-title bw-title--mobile", children: isReschedule
                                         ? rescheduleContext?.customerName
-                                            ? `Reschedule ${formatPossessive(rescheduleContext.customerName)} appointment`
-                                            : 'Reschedule appointment'
-                                        : 'Schedule your visit') }), _jsx("h2", { className: "bw-title bw-title--mobile", children: isReschedule
-                                    ? rescheduleContext?.customerName
-                                        ? `Reschedule ${formatPossessive(rescheduleContext.customerName)} appointment`
-                                        : 'Reschedule appointment'
-                                    : mobileStepTitle(mobileStep) }), _jsx("div", { className: "bw-progress", "aria-hidden": "true", children: MOBILE_PROGRESS_STEPS.map((step) => (_jsx("span", { className: `bw-dot${mobileStep >= step ? ' is-filled' : ''}` }, step))) })] }), description ? _jsx("p", { className: "bw-description", children: description }) : null] }), _jsxs("div", { className: "bw-content", children: [_jsx("div", { className: "bw-body", "data-mobile-step": mobileStep, children: _jsxs("div", { className: "bw-body-inner", children: [_jsxs("div", { className: "bw-col bw-col--left", children: [_jsxs("div", { className: "bw-step-1", children: [_jsx("div", { className: "bw-service-picker", children: selectedService && !isEditingService ? (_jsxs("div", { className: "bw-svc-selected", children: [_jsxs("div", { className: "bw-svc-selected-header", children: [_jsx("label", { className: "bw-label", children: "Selected service" }), _jsx("button", { type: "button", className: "bw-svc-change", onClick: () => setIsEditingService(true), children: "Change" })] }), _jsxs("div", { className: "bw-svc-row bw-svc-row--readonly", children: [selectedService.image ? (_jsxs("span", { className: "bw-svc-image is-checked", children: [_jsx("img", { src: selectedService.image.url, alt: selectedService.image.alt ?? selectedService.name, loading: "lazy" }), _jsx("span", { className: "bw-svc-image-badge", children: _jsx(CheckIcon, {}) })] })) : (_jsx("span", { className: "bw-check is-checked", children: _jsx(CheckIcon, {}) })), _jsxs("span", { className: "bw-svc-info", children: [_jsx("span", { className: "bw-svc-name", children: selectedService.name }), selectedService.description ? (_jsx("span", { className: "bw-svc-desc", children: selectedService.description })) : null, _jsxs("span", { className: "bw-svc-meta-row", children: [_jsx("span", { className: "bw-svc-meta", children: formatDuration(selectedService.durationMinutes) }), _jsx("span", { className: "bw-svc-meta-dot", "aria-hidden": "true", children: "\u00B7" }), _jsx("span", { className: "bw-svc-price", children: formatServicePrice(selectedService) })] })] })] })] })) : (_jsxs(_Fragment, { children: [_jsx("label", { className: "bw-label", children: "Select Service" }), _jsx("div", { className: "bw-svc-scroll is-open", children: _jsx("div", { className: "bw-svc-scroll-wrap", children: _jsx("div", { className: "bw-svc-scroll-inner", children: serviceGroups.map((group) => (_jsxs("div", { className: "bw-svc-group", children: [group.categoryName ? (_jsx("div", { className: "bw-svc-category", children: group.categoryName })) : null, group.services.map((service) => {
-                                                                                    const isActive = selectedServiceId === service._id;
-                                                                                    return (_jsxs("button", { type: "button", className: "bw-svc-row", onMouseEnter: () => {
-                                                                                            void prefetchAvailability({
-                                                                                                client,
-                                                                                                siteSlug,
-                                                                                                selectedServiceId: service._id,
-                                                                                                selectedStaffId,
-                                                                                                calendarMonth,
-                                                                                                cacheRef: availabilityCacheRef,
-                                                                                            });
-                                                                                        }, onFocus: () => {
-                                                                                            void prefetchAvailability({
-                                                                                                client,
-                                                                                                siteSlug,
-                                                                                                selectedServiceId: service._id,
-                                                                                                selectedStaffId,
-                                                                                                calendarMonth,
-                                                                                                cacheRef: availabilityCacheRef,
-                                                                                            });
-                                                                                        }, onClick: () => {
-                                                                                            handleServiceSelect(service);
-                                                                                        }, children: [service.image ? (_jsxs("span", { className: `bw-svc-image${isActive ? ' is-checked' : ''}`, children: [_jsx("img", { src: service.image.url, alt: service.image.alt ?? service.name, loading: "lazy" }), isActive ? (_jsx("span", { className: "bw-svc-image-badge", children: _jsx(CheckIcon, {}) })) : null] })) : (_jsx("span", { className: `bw-check${isActive ? ' is-checked' : ''}`, children: isActive ? _jsx(CheckIcon, {}) : null })), _jsxs("span", { className: "bw-svc-info", children: [_jsx("span", { className: "bw-svc-name", children: service.name }), service.description ? (_jsx("span", { className: "bw-svc-desc", children: service.description })) : null, _jsxs("span", { className: "bw-svc-meta-row", children: [_jsx("span", { className: "bw-svc-meta", children: formatDuration(service.durationMinutes) }), _jsx("span", { className: "bw-svc-meta-dot", "aria-hidden": "true", children: "\u00B7" }), _jsx("span", { className: "bw-svc-price", children: formatServicePrice(service) })] })] })] }, service._id));
-                                                                                })] }, group.key))) }) }) })] })) }), selectedService && selectedServiceRequiresSlot && !isEditingService ? (_jsxs("div", { className: "bw-provider-section", children: [_jsx("div", { className: "bw-section-divider" }), _jsx("label", { className: "bw-label", children: "Select a Provider" }), _jsxs("div", { className: "bw-staff-dropdown", ref: staffMenuRef, children: [_jsxs("button", { type: "button", className: `bw-staff-trigger${selectedStaff ? ' has-value' : ''}`, onClick: () => setStaffOpen((current) => !current), children: [_jsxs("span", { className: "bw-staff-trigger-content", children: [_jsx("span", { className: "bw-staff-avatar", children: selectedStaff?.image?.url ? (_jsx("img", { src: selectedStaff.image.url, alt: selectedStaff.image.alt ?? selectedStaff.name, className: "bw-staff-avatar-img" })) : selectedStaff ? (_jsx("span", { className: "bw-staff-initials", children: getInitials(selectedStaff.name) })) : (_jsx(UserIcon, {})) }), _jsxs("span", { className: "bw-staff-trigger-info", children: [_jsx("span", { className: "bw-staff-trigger-name", children: selectedStaff ? selectedStaff.name : 'Any provider' }), selectedStaff ? null : (_jsx("span", { className: "bw-staff-trigger-desc", children: "First available" }))] })] }), _jsx("span", { className: "bw-staff-trigger-chevron", children: _jsx(ChevronDownIcon, {}) })] }), staffOpen ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "bw-staff-overlay", "aria-label": "Close provider menu", onClick: () => setStaffOpen(false) }), _jsxs("div", { className: "bw-staff-list", children: [_jsxs("button", { type: "button", className: `bw-staff-option${selectedStaffId === null ? ' is-active' : ''}`, onClick: () => {
-                                                                                        setSelectedStaffId(null);
-                                                                                        setStaffOpen(false);
-                                                                                    }, children: [_jsx("span", { className: "bw-staff-avatar", children: _jsx(UserIcon, {}) }), _jsxs("span", { className: "bw-staff-option-info", children: [_jsx("span", { className: "bw-staff-option-name", children: "Any Available" }), _jsx("span", { className: "bw-staff-option-desc", children: "First available" })] })] }), availableStaff.map((staffMember) => (_jsxs("button", { type: "button", className: `bw-staff-option${selectedStaffId === staffMember._id ? ' is-active' : ''}`, onClick: () => {
-                                                                                        setSelectedStaffId(staffMember._id);
-                                                                                        setStaffOpen(false);
-                                                                                    }, children: [_jsx("span", { className: "bw-staff-avatar", children: staffMember.image?.url ? (_jsx("img", { src: staffMember.image.url, alt: staffMember.image.alt ?? staffMember.name, className: "bw-staff-avatar-img" })) : (_jsx("span", { className: "bw-staff-initials", children: getInitials(staffMember.name) })) }), _jsx("span", { className: "bw-staff-option-info", children: _jsx("span", { className: "bw-staff-option-name", children: staffMember.name }) })] }, staffMember._id)))] })] })) : null] })] })) : null] }), _jsxs("div", { className: "bw-step-2", children: [_jsx("p", { className: "bw-step-2-heading", children: "Choose your service" }), _jsx("div", { className: "bw-step-2-divider" }), serviceGroups.map((group) => (_jsxs("div", { className: "bw-svc-group", children: [group.categoryName ? (_jsx("div", { className: "bw-svc-category", children: group.categoryName })) : null, group.services.map((service) => {
-                                                            const isActive = selectedServiceId === service._id;
-                                                            return (_jsxs("div", { children: [_jsxs("button", { type: "button", className: "bw-svc-row bw-svc-row--full", onMouseEnter: () => {
-                                                                            void prefetchAvailability({
-                                                                                client,
-                                                                                siteSlug,
-                                                                                selectedServiceId: service._id,
-                                                                                selectedStaffId,
-                                                                                calendarMonth,
-                                                                                cacheRef: availabilityCacheRef,
-                                                                            });
-                                                                        }, onFocus: () => {
-                                                                            void prefetchAvailability({
-                                                                                client,
-                                                                                siteSlug,
-                                                                                selectedServiceId: service._id,
-                                                                                selectedStaffId,
-                                                                                calendarMonth,
-                                                                                cacheRef: availabilityCacheRef,
-                                                                            });
-                                                                        }, onClick: () => {
-                                                                            handleServiceSelect(service);
-                                                                        }, children: [service.image ? (_jsxs("span", { className: `bw-svc-image bw-svc-image--lg${isActive ? ' is-checked' : ''}`, children: [_jsx("img", { src: service.image.url, alt: service.image.alt ?? service.name, loading: "lazy" }), isActive ? (_jsx("span", { className: "bw-svc-image-badge", children: _jsx(CheckIcon, {}) })) : null] })) : (_jsx("span", { className: `bw-check bw-check--lg${isActive ? ' is-checked' : ''}`, children: isActive ? _jsx(CheckIcon, {}) : null })), _jsxs("span", { className: "bw-svc-info", children: [_jsx("span", { className: "bw-svc-name", children: service.name }), service.description ? (_jsx("span", { className: "bw-svc-desc", children: service.description })) : null, _jsxs("span", { className: "bw-svc-meta-row", children: [_jsx("span", { className: "bw-svc-meta", children: formatDuration(service.durationMinutes) }), _jsx("span", { className: "bw-svc-meta-dot", "aria-hidden": "true", children: "\u00B7" }), _jsx("span", { className: "bw-svc-price", children: formatServicePrice(service) })] })] })] }), _jsx("div", { className: "bw-row-divider" })] }, service._id));
-                                                        })] }, group.key)))] })] }), _jsx("div", { className: "bw-col bw-col--center", children: _jsxs("div", { className: "bw-cal-card", ref: calCardRef, children: [_jsxs("div", { className: "bw-cal-header", children: [_jsxs("div", { className: "bw-month-dropdown", children: [_jsxs("button", { type: "button", className: "bw-month-btn", onClick: () => setMonthOpen((current) => !current), children: [_jsx("span", { children: formatMonthLabel(calendarMonth) }), _jsx(ChevronDownIcon, {})] }), monthOpen ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "bw-month-overlay", "aria-label": "Close month picker", onClick: () => setMonthOpen(false) }), _jsx("div", { className: "bw-month-list", children: monthOptions.map((option) => (_jsx("button", { type: "button", className: `bw-month-option${option.value === optionCurrentValue(calendarMonth) ? ' is-active' : ''}`, onClick: () => {
-                                                                                setCalendarMonth(option.date);
-                                                                                setMonthOpen(false);
-                                                                            }, children: option.label }, option.value))) })] })) : null] }), _jsxs("div", { className: "bw-cal-navs", children: [_jsx("button", { type: "button", className: "bw-cal-nav", onMouseEnter: () => {
-                                                                    if (!sameMonth(calendarMonth, startOfMonth(new Date())) && selectedServiceId) {
-                                                                        void prefetchAvailability({
-                                                                            client,
-                                                                            siteSlug,
-                                                                            selectedServiceId,
-                                                                            selectedStaffId,
-                                                                            calendarMonth: addMonths(calendarMonth, -1),
-                                                                            cacheRef: availabilityCacheRef,
-                                                                        });
-                                                                    }
-                                                                }, onClick: () => setCalendarMonth((current) => addMonths(current, -1)), disabled: sameMonth(calendarMonth, startOfMonth(new Date())), "aria-label": "Previous month", children: _jsx(ChevronLeftIcon, {}) }), _jsx("button", { type: "button", className: "bw-cal-nav", onMouseEnter: () => {
-                                                                    if (!sameMonth(calendarMonth, addMonths(startOfMonth(new Date()), 3)) && selectedServiceId) {
-                                                                        void prefetchAvailability({
-                                                                            client,
-                                                                            siteSlug,
-                                                                            selectedServiceId,
-                                                                            selectedStaffId,
-                                                                            calendarMonth: addMonths(calendarMonth, 1),
-                                                                            cacheRef: availabilityCacheRef,
-                                                                        });
-                                                                    }
-                                                                }, onClick: () => setCalendarMonth((current) => addMonths(current, 1)), disabled: sameMonth(calendarMonth, addMonths(startOfMonth(new Date()), 3)), "aria-label": "Next month", children: _jsx(ChevronRightIcon, {}) })] })] }), _jsx("div", { className: "bw-cal-weekdays", children: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => (_jsx("span", { children: day }, day))) }), _jsx("div", { className: "bw-cal-grid", children: calendarDays.map((day) => {
-                                                    const dateKey = formatDateKey(day);
-                                                    const isCurrentMonth = day.getMonth() === calendarMonth.getMonth();
-                                                    const isPast = dateKey < formatDateKey(startOfDay(new Date()));
-                                                    const slots = availabilityByDate.get(dateKey) ?? [];
-                                                    const isAvailable = slots.length > 0;
-                                                    const isSelected = selectedDate === dateKey;
-                                                    const className = [
-                                                        'bw-cal-day',
-                                                        !isCurrentMonth ? 'is-outside' : '',
-                                                        isSelected ? 'is-selected' : '',
-                                                        isAvailable && !isPast ? 'is-available' : '',
-                                                        isPast ? 'is-disabled' : '',
-                                                        !isAvailable && isCurrentMonth && !isPast ? 'is-blocked' : '',
-                                                        dateKey === formatDateKey(startOfDay(new Date())) ? 'is-today' : '',
-                                                    ]
-                                                        .filter(Boolean)
-                                                        .join(' ');
-                                                    return (_jsx("button", { type: "button", className: className, disabled: !isCurrentMonth || isPast || !isAvailable, onClick: () => {
-                                                            setSelectedDate(dateKey);
-                                                            setSelectedSlot(null);
-                                                            setMobileStep((current) => (current < 3 ? 3 : current));
-                                                        }, children: day.getDate() }, dateKey));
-                                                }) }), !selectedService ? (_jsx("p", { className: "bw-cal-prompt", children: "Please select a service to see availability." })) : null, _jsxs("div", { className: "bw-slots-mobile", children: [selectedService && selectedDate && selectedDateSlots.length > 0 ? (_jsx("div", { className: "bw-time-divider" })) : null, slotsArea] }), _jsxs("div", { className: "bw-timezone", children: [_jsx(GlobeIcon, {}), _jsx("span", { children: selectedHeldStaff?.timezone ?? selectedStaff?.timezone ?? setup?.workspaceTimezone ?? setup?.staff?.[0]?.timezone ?? 'UTC' })] })] }) }), _jsx("div", { className: "bw-col bw-col--right", children: _jsx("div", { className: "bw-right-scroll", children: _jsx("div", { className: "bw-right-inner", children: _jsxs("div", { className: "bw-right-stage", children: [_jsx("div", { className: `bw-pane bw-pane--slots${viewState === 'slots' ? ' is-active' : ' is-hidden'}`, "aria-hidden": viewState !== 'slots', children: _jsxs("div", { className: "bw-slots-desktop", children: [_jsxs("div", { className: "bw-slots-heading", children: [_jsx("span", { children: "Available times" }), selectedDateSlots.length > 0 ? (_jsx("span", { className: "bw-slots-count", children: selectedDateSlots.length })) : null] }), slotsArea] }) }), _jsxs("div", { className: `bw-pane bw-pane--details${viewState === 'details' ? ' is-active' : ' is-hidden'}`, "aria-hidden": viewState !== 'details', children: [selectedServiceRequiresSlot ? (_jsxs("button", { type: "button", className: "bw-back-btn", onClick: () => void handleBackToSlots(), children: [_jsx(ArrowLeftIcon, {}), _jsx("span", { children: "Pick a different time" })] })) : (_jsxs("button", { type: "button", className: "bw-back-btn", onClick: handleBackToServicePicker, children: [_jsx(ArrowLeftIcon, {}), _jsx("span", { children: "Pick a different service" })] })), _jsxs("div", { className: "bw-form", children: [serviceWarning ? _jsx(ServiceWarningCallout, { warning: serviceWarning }) : null, renderIntakeAndContact('bw-intake', ''), renderNotesField('bw-notes', 'Additional notes', 'Any preferences or special requests...'), selectedService ? (_jsxs("div", { className: "bw-summary", children: [_jsx("span", { className: "bw-summary-title", children: isReschedule ? 'Reschedule Summary' : 'Booking Summary' }), _jsxs("div", { className: "bw-summary-rows", children: [holdSecondsRemaining !== null ? (_jsxs("div", { className: "bw-summary-row bw-summary-row--hold", "aria-live": "polite", children: [_jsx("span", { children: "Reservation hold" }), _jsx("span", { className: "bw-summary-val bw-summary-val--hold", children: formatHoldCountdown(holdSecondsRemaining) })] })) : null, isReschedule && rescheduleContext ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Former time" }), _jsx("span", { className: "bw-summary-val", style: {
-                                                                                                    ...summaryValStyle,
-                                                                                                    textDecoration: 'line-through',
-                                                                                                    opacity: 0.55,
-                                                                                                }, children: formatFormerSlot(rescheduleContext.formerStartTime, rescheduleContext.formerEndTime) })] })) : null, serviceChanged && formerService ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Former service" }), _jsx("span", { className: "bw-summary-val", style: {
-                                                                                                    ...summaryValStyle,
-                                                                                                    textDecoration: 'line-through',
-                                                                                                    opacity: 0.55,
-                                                                                                }, children: formerService.name })] })) : null, staffChanged ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Former staff" }), _jsx("span", { className: "bw-summary-val", style: {
-                                                                                                    ...summaryValStyle,
-                                                                                                    textDecoration: 'line-through',
-                                                                                                    opacity: 0.55,
-                                                                                                }, children: formerStaffName ?? 'Any Available' })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Service" }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: selectedService.name })] }), _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Provider" }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: selectedHeldStaff?.name ?? selectedStaff?.name ?? 'Any Available' })] }), selectedDate ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Date" }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatReadableDate(selectedDate) })] })) : null, selectedSlot ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Time" }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatTimeLabel(selectedSlot.time) })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Duration" }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatDuration(selectedService.durationMinutes) })] }), _jsxs("div", { className: "bw-summary-row bw-summary-total", children: [_jsx("span", { children: isQuoteLoading ? 'Calculating...' : 'Estimated total' }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatServicePrice(selectedService, quote) })] })] })] })) : null, error ? _jsx("div", { className: "bw-error", children: error }) : null, renderSubmitHelp(), payment ? (_jsx(StripePaymentBlock, { payment: payment, appointmentId: paymentAppointmentId, showInlineButton: false, actionTarget: mobilePaymentActionTarget, onSuccess: () => {
-                                                                            setSuccess('Payment received. Your booking is being confirmed.');
-                                                                            setPayment(null);
-                                                                        }, onError: setError })) : (_jsxs("button", { type: "button", className: "bw-confirm-btn", disabled: !canSubmit || isQuoteLoading, onClick: () => void handleConfirmBooking(), children: [_jsx("span", { children: isSubmitting
-                                                                                    ? isReschedule
-                                                                                        ? 'Rescheduling...'
-                                                                                        : 'Booking...'
-                                                                                    : isReschedule
-                                                                                        ? 'Confirm Reschedule'
-                                                                                        : selectedServiceRequiresPayment
-                                                                                            ? 'Continue to payment'
-                                                                                            : 'Confirm Booking' }), !isSubmitting ? _jsx(ArrowRightIcon, {}) : null] }))] })] })] }) }) }) })] }) }), _jsxs("div", { className: "bw-details-view", children: [_jsx("div", { className: "bw-details-summary", children: selectedService ? (_jsxs(_Fragment, { children: [selectedServiceRequiresSlot ? (_jsxs("button", { type: "button", className: "bw-back-btn bw-back-btn--details", onClick: () => void handleBackToSlots(), children: [_jsx(ArrowLeftIcon, {}), _jsx("span", { children: "Pick a different time" })] })) : (_jsxs("button", { type: "button", className: "bw-back-btn bw-back-btn--details", onClick: handleBackToServicePicker, children: [_jsx(ArrowLeftIcon, {}), _jsx("span", { children: "Pick a different service" })] })), _jsx("h3", { className: "bw-details-service", children: selectedService.name }), selectedService.description ? (_jsx("p", { className: "bw-details-desc", children: selectedService.description })) : null, _jsxs("div", { className: "bw-details-meta", children: [isReschedule && rescheduleContext ? (_jsxs("div", { className: "bw-details-meta-row bw-details-meta-row--strike", children: [_jsx("span", { className: "bw-details-meta-icon", children: _jsx(CalendarIcon, {}) }), _jsxs("div", { className: "bw-details-meta-text", children: [_jsx("span", { className: "bw-details-meta-label", children: "Former time" }), _jsx("span", { className: "bw-details-meta-value", children: formatFormerSlot(rescheduleContext.formerStartTime, rescheduleContext.formerEndTime) })] })] })) : null, selectedDate && selectedSlot ? (_jsxs("div", { className: "bw-details-meta-row", children: [_jsx("span", { className: "bw-details-meta-icon", children: _jsx(CalendarIcon, {}) }), _jsxs("div", { className: "bw-details-meta-text", children: [_jsx("span", { className: "bw-details-meta-label", children: isReschedule ? 'New time' : 'When' }), _jsxs("span", { className: "bw-details-meta-value", children: [formatReadableDate(selectedDate), _jsx("br", {}), formatTimeLabel(selectedSlot.time), " \u2013 ", formatTimeLabel(selectedSlot.endTime)] })] })] })) : null, _jsxs("div", { className: "bw-details-meta-row", children: [_jsx("span", { className: "bw-details-meta-icon", children: _jsx(ClockIcon, {}) }), _jsx("span", { className: "bw-details-meta-value", children: formatDuration(selectedService.durationMinutes) })] }), _jsxs("div", { className: "bw-details-meta-row", children: [_jsx("span", { className: "bw-details-meta-icon", children: _jsx(UserIcon, {}) }), _jsx("span", { className: "bw-details-meta-value", children: selectedHeldStaff?.name ?? selectedStaff?.name ?? 'Any Available' })] }), _jsxs("div", { className: "bw-details-meta-row", children: [_jsx("span", { className: "bw-details-meta-icon", children: _jsx(GlobeIcon, {}) }), _jsx("span", { className: "bw-details-meta-value", children: selectedHeldStaff?.timezone ?? selectedStaff?.timezone ?? setup?.workspaceTimezone ?? setup?.staff?.[0]?.timezone ?? 'UTC' })] }), _jsxs("div", { className: "bw-details-meta-row", children: [_jsx("span", { className: "bw-details-meta-icon", "aria-hidden": "true", children: "$" }), _jsxs("div", { className: "bw-details-meta-text", children: [_jsx("span", { className: "bw-details-meta-label", children: isQuoteLoading ? 'Calculating...' : 'Estimated total' }), _jsx("span", { className: "bw-details-meta-value", children: formatServicePrice(selectedService, quote) })] })] }), holdSecondsRemaining !== null ? (_jsxs("div", { className: "bw-details-meta-row bw-details-meta-row--hold", "aria-live": "polite", children: [_jsx("span", { className: "bw-details-meta-icon", children: _jsx(ClockIcon, {}) }), _jsxs("div", { className: "bw-details-meta-text", children: [_jsx("span", { className: "bw-details-meta-label", children: "Reservation hold" }), _jsx("span", { className: "bw-details-meta-value bw-details-hold", children: formatHoldCountdown(holdSecondsRemaining) })] })] })) : null] })] })) : null }), _jsx("div", { className: "bw-details-form", children: _jsxs("div", { className: "bw-form bw-form--details", children: [serviceWarning ? _jsx(ServiceWarningCallout, { warning: serviceWarning }) : null, renderIntakeAndContact('bw-intake-d', '-d'), renderNotesField('bw-notes-d', isReschedule ? 'Reason for reschedule' : 'Additional notes', isReschedule
-                                            ? 'Let your provider know why...'
-                                            : 'Any preferences or special requests...'), error ? _jsx("div", { className: "bw-error", children: error }) : null, renderSubmitHelp(), !payment && (forcedState === 'payment-full' || forcedState === 'payment-deposit') ? (_jsx(PaymentPanel, { service: selectedService, mode: forcedState === 'payment-full' ? 'full' : 'deposit' })) : null, payment ? (_jsx(StripePaymentBlock, { payment: payment, appointmentId: paymentAppointmentId, onSuccess: () => {
-                                                setSuccess('Payment received. Your booking is being confirmed.');
-                                                setPayment(null);
-                                            }, onError: setError })) : (_jsxs("button", { type: "button", className: "bw-confirm-btn", disabled: !canSubmit || isQuoteLoading, onClick: () => void handleConfirmBooking(), children: [_jsx("span", { children: isSubmitting
-                                                        ? isReschedule
-                                                            ? 'Rescheduling...'
-                                                            : 'Booking...'
-                                                        : forcedState === 'payment-full'
-                                                            ? `Pay ${formatPrice(selectedService)} & Confirm`
-                                                            : forcedState === 'payment-deposit'
-                                                                ? `Pay deposit & Confirm`
-                                                                : isReschedule
-                                                                    ? 'Confirm Reschedule'
-                                                                    : selectedServiceRequiresPayment
-                                                                        ? 'Continue to payment'
-                                                                        : 'Confirm Booking' }), !isSubmitting ? _jsx(ArrowRightIcon, {}) : null] }))] }) })] })] }), _jsxs("div", { className: "bw-footer", children: [mobileStep === 4 && selectedService ? (_jsxs("div", { className: "bw-footer-summary", children: [_jsx("span", { className: "bw-summary-title", children: isReschedule ? 'Reschedule Summary' : 'Booking Summary' }), _jsxs("div", { className: "bw-summary-rows", children: [holdSecondsRemaining !== null ? (_jsxs("div", { className: "bw-summary-row bw-summary-row--hold", "aria-live": "polite", children: [_jsx("span", { children: "Reservation hold" }), _jsx("span", { className: "bw-summary-val bw-summary-val--hold", children: formatHoldCountdown(holdSecondsRemaining) })] })) : null, isReschedule && rescheduleContext ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Former time" }), _jsx("span", { className: "bw-summary-val", style: {
-                                                    ...summaryValStyle,
-                                                    textDecoration: 'line-through',
-                                                    opacity: 0.55,
-                                                }, children: formatFormerSlot(rescheduleContext.formerStartTime, rescheduleContext.formerEndTime) })] })) : null, serviceChanged && formerService ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Former service" }), _jsx("span", { className: "bw-summary-val", style: {
-                                                    ...summaryValStyle,
-                                                    textDecoration: 'line-through',
-                                                    opacity: 0.55,
-                                                }, children: formerService.name })] })) : null, staffChanged ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Former staff" }), _jsx("span", { className: "bw-summary-val", style: {
-                                                    ...summaryValStyle,
-                                                    textDecoration: 'line-through',
-                                                    opacity: 0.55,
-                                                }, children: formerStaffName ?? 'Any Available' })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Service" }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: selectedService.name })] }), _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Provider" }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: selectedHeldStaff?.name ?? selectedStaff?.name ?? 'Any Available' })] }), selectedDate ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Date" }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatReadableDate(selectedDate) })] })) : null, selectedSlot ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Time" }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatTimeLabel(selectedSlot.time) })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Duration" }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatDuration(selectedService.durationMinutes) })] }), _jsxs("div", { className: "bw-summary-row bw-summary-total", children: [_jsx("span", { children: isQuoteLoading ? 'Calculating...' : 'Estimated total' }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatServicePrice(selectedService, quote) })] })] })] })) : null, _jsxs("div", { className: "bw-footer-btns", children: [mobileStep > 1 ? (_jsx("button", { type: "button", className: "bw-footer-back", onClick: () => {
-                                    if (!selectedServiceRequiresSlot && mobileStep === 4) {
-                                        handleBackToServicePicker();
-                                    }
-                                    else {
-                                        setMobileStep((step) => Math.max(1, step - 1));
-                                    }
+                                            ? t('rescheduleTitleNamed', { name: rescheduleContext.customerName })
+                                            : t('rescheduleTitle')
+                                        : mobileStepTitle(mobileStep, t) }), mobileStep > 1 ? (_jsx("div", { className: "bw-progress", "aria-hidden": "true", children: (selectedServiceRequiresSlot
+                                        ? MOBILE_PROGRESS_STEPS_SCHEDULED
+                                        : MOBILE_PROGRESS_STEPS_ASYNC).map((step) => (_jsx("span", { className: `bw-dot${mobileStep >= step ? ' is-filled' : ''}` }, step))) })) : null] }), description ? _jsx("p", { className: "bw-description", children: description }) : null] }), _jsxs("div", { className: "bw-content", children: [_jsx("div", { className: "bw-body", "data-mobile-step": mobileStep, children: _jsxs("div", { className: "bw-body-inner", children: [_jsxs("div", { className: "bw-col bw-col--left", children: [_jsxs("div", { className: "bw-step-1", children: [_jsx("div", { className: "bw-service-picker", children: selectedService && !isEditingService ? (_jsxs("div", { className: "bw-svc-selected", children: [_jsxs("div", { className: "bw-svc-selected-header", children: [_jsx("label", { className: "bw-label", children: t('selectedService') }), _jsx("button", { type: "button", className: "bw-svc-change", onClick: () => setIsEditingService(true), children: t('btnChange') })] }), _jsxs("div", { className: "bw-svc-row bw-svc-row--readonly", children: [selectedService.image ? (_jsxs("span", { className: "bw-svc-image is-checked", children: [_jsx("img", { src: selectedService.image.url, alt: selectedService.image.alt ?? pickLocaleField(selectedService, 'name', locale) ?? selectedService.name, loading: "lazy" }), _jsx("span", { className: "bw-svc-image-badge", children: _jsx(CheckIcon, {}) })] })) : (_jsx("span", { className: "bw-check is-checked", children: _jsx(CheckIcon, {}) })), _jsxs("span", { className: "bw-svc-info", children: [_jsx("span", { className: "bw-svc-name", children: pickLocaleField(selectedService, 'name', locale) ?? selectedService.name }), pickLocaleField(selectedService, 'description', locale) ?? selectedService.description ? (_jsx("span", { className: "bw-svc-desc", children: pickLocaleField(selectedService, 'description', locale) ?? selectedService.description })) : null, _jsxs("span", { className: "bw-svc-meta-row", children: [_jsx("span", { className: "bw-svc-meta", children: formatDuration(selectedService.durationMinutes) }), _jsx("span", { className: "bw-svc-meta-dot", "aria-hidden": "true", children: "\u00B7" }), _jsx("span", { className: "bw-svc-price", children: formatServicePrice(selectedService) })] })] })] })] })) : (_jsxs(_Fragment, { children: [_jsx("label", { className: "bw-label", children: t('selectService') }), _jsx("div", { className: "bw-svc-scroll is-open", children: _jsx("div", { className: "bw-svc-scroll-wrap", children: _jsx("div", { className: "bw-svc-scroll-inner", children: serviceGroups.map((group) => (_jsxs("div", { className: "bw-svc-group", children: [group.categoryName ? (_jsx("div", { className: "bw-svc-category", children: group.categoryName })) : null, group.services.map((service) => {
+                                                                                        const isActive = selectedServiceId === service._id;
+                                                                                        return (_jsxs("button", { type: "button", className: "bw-svc-row", onMouseEnter: () => {
+                                                                                                void prefetchAvailability({
+                                                                                                    client,
+                                                                                                    siteSlug,
+                                                                                                    selectedServiceId: service._id,
+                                                                                                    calendarMonth,
+                                                                                                    cacheRef: availabilityCacheRef,
+                                                                                                });
+                                                                                            }, onFocus: () => {
+                                                                                                void prefetchAvailability({
+                                                                                                    client,
+                                                                                                    siteSlug,
+                                                                                                    selectedServiceId: service._id,
+                                                                                                    calendarMonth,
+                                                                                                    cacheRef: availabilityCacheRef,
+                                                                                                });
+                                                                                            }, onClick: () => {
+                                                                                                handleServiceSelect(service);
+                                                                                            }, children: [service.image ? (_jsxs("span", { className: `bw-svc-image${isActive ? ' is-checked' : ''}`, children: [_jsx("img", { src: service.image.url, alt: service.image.alt ?? pickLocaleField(service, 'name', locale) ?? service.name, loading: "lazy" }), isActive ? (_jsx("span", { className: "bw-svc-image-badge", children: _jsx(CheckIcon, {}) })) : null] })) : (_jsx("span", { className: `bw-check${isActive ? ' is-checked' : ''}`, children: isActive ? _jsx(CheckIcon, {}) : null })), _jsxs("span", { className: "bw-svc-info", children: [_jsx("span", { className: "bw-svc-name", children: pickLocaleField(service, 'name', locale) ?? service.name }), pickLocaleField(service, 'description', locale) ?? service.description ? (_jsx("span", { className: "bw-svc-desc", children: pickLocaleField(service, 'description', locale) ?? service.description })) : null, _jsxs("span", { className: "bw-svc-meta-row", children: [_jsx("span", { className: "bw-svc-meta", children: formatDuration(service.durationMinutes) }), _jsx("span", { className: "bw-svc-meta-dot", "aria-hidden": "true", children: "\u00B7" }), _jsx("span", { className: "bw-svc-price", children: formatServicePrice(service, undefined, intlLocale) })] })] })] }, service._id));
+                                                                                    })] }, group.key))) }) }) })] })) }), selectedService && selectedServiceRequiresSlot && !isEditingService ? (_jsxs("div", { className: "bw-provider-section", children: [_jsx("div", { className: "bw-section-divider" }), _jsx("label", { className: "bw-label", children: t('selectProvider') }), providerRow] })) : null] }), _jsxs("div", { className: "bw-step-2", children: [_jsx("p", { className: "bw-step-2-heading", children: t('chooseYourService') }), _jsx("div", { className: "bw-step-2-divider" }), serviceGroups.map((group) => (_jsxs("div", { className: "bw-svc-group", children: [group.categoryName ? (_jsx("div", { className: "bw-svc-category", children: group.categoryName })) : null, group.services.map((service) => {
+                                                                const isActive = selectedServiceId === service._id;
+                                                                return (_jsxs("div", { children: [_jsxs("button", { type: "button", className: "bw-svc-row bw-svc-row--full", onMouseEnter: () => {
+                                                                                void prefetchAvailability({
+                                                                                    client,
+                                                                                    siteSlug,
+                                                                                    selectedServiceId: service._id,
+                                                                                    calendarMonth,
+                                                                                    cacheRef: availabilityCacheRef,
+                                                                                });
+                                                                            }, onFocus: () => {
+                                                                                void prefetchAvailability({
+                                                                                    client,
+                                                                                    siteSlug,
+                                                                                    selectedServiceId: service._id,
+                                                                                    calendarMonth,
+                                                                                    cacheRef: availabilityCacheRef,
+                                                                                });
+                                                                            }, onClick: () => {
+                                                                                handleServiceSelect(service);
+                                                                            }, children: [service.image ? (_jsxs("span", { className: `bw-svc-image bw-svc-image--lg${isActive ? ' is-checked' : ''}`, children: [_jsx("img", { src: service.image.url, alt: service.image.alt ?? pickLocaleField(service, 'name', locale) ?? service.name, loading: "lazy" }), isActive ? (_jsx("span", { className: "bw-svc-image-badge", children: _jsx(CheckIcon, {}) })) : null] })) : (_jsx("span", { className: `bw-check bw-check--lg${isActive ? ' is-checked' : ''}`, children: isActive ? _jsx(CheckIcon, {}) : null })), _jsxs("span", { className: "bw-svc-info", children: [_jsx("span", { className: "bw-svc-name", children: pickLocaleField(service, 'name', locale) ?? service.name }), pickLocaleField(service, 'description', locale) ?? service.description ? (_jsx("span", { className: "bw-svc-desc", children: pickLocaleField(service, 'description', locale) ?? service.description })) : null, _jsxs("span", { className: "bw-svc-meta-row", children: [_jsx("span", { className: "bw-svc-meta", children: formatDuration(service.durationMinutes) }), _jsx("span", { className: "bw-svc-meta-dot", "aria-hidden": "true", children: "\u00B7" }), _jsx("span", { className: "bw-svc-price", children: formatServicePrice(service, undefined, intlLocale) })] })] })] }), _jsx("div", { className: "bw-row-divider" })] }, service._id));
+                                                            })] }, group.key)))] })] }), _jsxs("div", { className: "bw-col bw-col--center", children: [_jsxs("div", { className: "bw-cal-card", ref: calCardRef, children: [_jsxs("div", { className: "bw-cal-header", children: [_jsxs("div", { className: "bw-month-dropdown", children: [_jsxs("button", { type: "button", className: "bw-month-btn", onClick: () => setMonthOpen((current) => !current), children: [_jsx("span", { children: formatMonthLabel(calendarMonth, intlLocale) }), _jsx(ChevronDownIcon, {})] }), monthOpen ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "bw-month-overlay", "aria-label": t('closeMonthPicker'), onClick: () => setMonthOpen(false) }), _jsx("div", { className: "bw-month-list", children: monthOptions.map((option) => (_jsx("button", { type: "button", className: `bw-month-option${option.value === optionCurrentValue(calendarMonth) ? ' is-active' : ''}`, onClick: () => {
+                                                                                        setCalendarMonth(option.date);
+                                                                                        setMonthOpen(false);
+                                                                                    }, children: option.label }, option.value))) })] })) : null] }), _jsxs("div", { className: "bw-cal-navs", children: [_jsx("button", { type: "button", className: "bw-cal-nav", onMouseEnter: () => {
+                                                                            if (!sameMonth(calendarMonth, startOfMonth(new Date())) && selectedServiceId) {
+                                                                                void prefetchAvailability({
+                                                                                    client,
+                                                                                    siteSlug,
+                                                                                    selectedServiceId,
+                                                                                    calendarMonth: addMonths(calendarMonth, -1),
+                                                                                    cacheRef: availabilityCacheRef,
+                                                                                });
+                                                                            }
+                                                                        }, onClick: () => setCalendarMonth((current) => addMonths(current, -1)), disabled: sameMonth(calendarMonth, startOfMonth(new Date())), "aria-label": t('prevMonth'), children: _jsx(ChevronLeftIcon, {}) }), _jsx("button", { type: "button", className: "bw-cal-nav", onMouseEnter: () => {
+                                                                            if (!sameMonth(calendarMonth, addMonths(startOfMonth(new Date()), 3)) && selectedServiceId) {
+                                                                                void prefetchAvailability({
+                                                                                    client,
+                                                                                    siteSlug,
+                                                                                    selectedServiceId,
+                                                                                    calendarMonth: addMonths(calendarMonth, 1),
+                                                                                    cacheRef: availabilityCacheRef,
+                                                                                });
+                                                                            }
+                                                                        }, onClick: () => setCalendarMonth((current) => addMonths(current, 1)), disabled: sameMonth(calendarMonth, addMonths(startOfMonth(new Date()), 3)), "aria-label": t('nextMonth'), children: _jsx(ChevronRightIcon, {}) })] })] }), _jsx("div", { className: "bw-cal-weekdays", children: [
+                                                            t('weekdaySun'),
+                                                            t('weekdayMon'),
+                                                            t('weekdayTue'),
+                                                            t('weekdayWed'),
+                                                            t('weekdayThu'),
+                                                            t('weekdayFri'),
+                                                            t('weekdaySat'),
+                                                        ].map((day) => (_jsx("span", { children: day }, day))) }), _jsx("div", { className: "bw-cal-grid", children: calendarDays.map((day) => {
+                                                            const dateKey = formatDateKey(day);
+                                                            const isCurrentMonth = day.getMonth() === calendarMonth.getMonth();
+                                                            const isPast = dateKey < formatDateKey(startOfDay(new Date()));
+                                                            const slots = filteredAvailabilityByDate.get(dateKey) ?? [];
+                                                            const isAvailable = slots.length > 0;
+                                                            const isSelected = selectedDate === dateKey;
+                                                            const className = [
+                                                                'bw-cal-day',
+                                                                !isCurrentMonth ? 'is-outside' : '',
+                                                                isSelected ? 'is-selected' : '',
+                                                                isAvailable && !isPast ? 'is-available' : '',
+                                                                isPast ? 'is-disabled' : '',
+                                                                !isAvailable && isCurrentMonth && !isPast ? 'is-blocked' : '',
+                                                                dateKey === formatDateKey(startOfDay(new Date())) ? 'is-today' : '',
+                                                            ]
+                                                                .filter(Boolean)
+                                                                .join(' ');
+                                                            return (_jsx("button", { type: "button", className: className, disabled: !isCurrentMonth || isPast || !isAvailable, onClick: () => {
+                                                                    setSelectedDate(dateKey);
+                                                                    setSelectedSlot(null);
+                                                                    setMobileStep((current) => (current < 2 ? 2 : current));
+                                                                }, children: day.getDate() }, dateKey));
+                                                        }) }), !selectedService ? (_jsx("p", { className: "bw-cal-prompt", children: t('calendarSelectServicePrompt') })) : null, _jsxs("div", { className: "bw-timezone", children: [_jsx(GlobeIcon, {}), _jsx("span", { children: selectedHeldStaff?.timezone ?? selectedStaff?.timezone ?? setup?.workspaceTimezone ?? setup?.staff?.[0]?.timezone ?? 'UTC' })] })] }), selectedService && !isEditingService ? (_jsxs("div", { className: "bw-mobile-card bw-provider-section--mobile", children: [_jsx("label", { className: "bw-label", children: t('selectProvider') }), providerRow] })) : null, selectedService && selectedDate ? (_jsxs("div", { className: "bw-mobile-card bw-slots-mobile", children: [_jsx("label", { className: "bw-label", children: t('selectTimePrompt') }), slotsArea] })) : null] }), _jsx("div", { className: "bw-col bw-col--review", "aria-hidden": mobileStep !== 4, children: selectedService ? (_jsxs("div", { className: "bw-summary bw-summary--review", children: [_jsx("span", { className: "bw-summary-title", children: isReschedule ? t('summaryTitleReschedule') : t('summaryTitleCreate') }), holdSecondsRemaining !== null ? (_jsx("div", { className: "bw-summary-rows", children: _jsxs("div", { className: "bw-summary-row bw-summary-row--hold", "aria-live": "polite", children: [_jsx("span", { children: t('summaryReservationHold') }), _jsx("span", { className: "bw-summary-val bw-summary-val--hold", children: formatHoldCountdown(holdSecondsRemaining) })] }) })) : null, _jsxs("div", { className: "bw-summary-group", children: [_jsx("span", { className: "bw-summary-subhead", children: t('reviewBookingDetails') }), _jsxs("div", { className: "bw-summary-rows", children: [isReschedule && rescheduleContext ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryFormerTime') }), _jsx("span", { className: "bw-summary-val", style: { ...summaryValStyle, textDecoration: 'line-through', opacity: 0.55 }, children: formatFormerSlot(rescheduleContext.formerStartTime, rescheduleContext.formerEndTime, intlLocale) })] })) : null, serviceChanged && formerService ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryFormerService') }), _jsx("span", { className: "bw-summary-val", style: { ...summaryValStyle, textDecoration: 'line-through', opacity: 0.55 }, children: formerService.name })] })) : null, staffChanged ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryFormerStaff') }), _jsx("span", { className: "bw-summary-val", style: { ...summaryValStyle, textDecoration: 'line-through', opacity: 0.55 }, children: formerStaffName ?? t('providerAny') })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryService') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: pickLocaleField(selectedService, 'name', locale) ?? selectedService.name })] }), _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryProvider') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: selectedHeldStaff?.name ?? selectedStaff?.name ?? t('providerAny') })] }), selectedDate ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryDate') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatReadableDate(selectedDate, intlLocale) })] })) : null, selectedSlot ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryTime') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatTimeLabel(selectedSlot.time, intlLocale) })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryDuration') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatDuration(selectedService.durationMinutes) })] })] })] }), _jsxs("div", { className: "bw-summary-group", children: [_jsx("span", { className: "bw-summary-subhead", children: t('reviewYourDetails') }), _jsxs("div", { className: "bw-summary-rows", children: [_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('contactFullName') }), _jsx("span", { className: "bw-summary-val", children: customerName.trim() || t('reviewNotProvided') })] }), _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('contactEmail') }), _jsx("span", { className: "bw-summary-val", children: customerEmail.trim() || t('reviewNotProvided') })] }), _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('contactPhone') }), _jsx("span", { className: "bw-summary-val", children: customerPhone.trim() || t('reviewNotProvided') })] })] })] }), (() => {
+                                                    const intakeRows = buildIntakeReviewRows(selectedService.intakeForm, intakeResponses, selectedServicePath, locale, t);
+                                                    if (intakeRows.length === 0)
+                                                        return null;
+                                                    return (_jsxs("div", { className: "bw-summary-group", children: [_jsx("span", { className: "bw-summary-subhead", children: t('reviewAdditionalInfo') }), _jsx("div", { className: "bw-summary-rows", children: intakeRows.map((row) => (_jsxs("div", { className: `bw-summary-row${row.multiline ? ' bw-summary-row--stack' : ''}`, children: [_jsx("span", { children: row.label }), _jsx("span", { className: "bw-summary-val", children: row.value })] }, row.key))) })] }));
+                                                })(), customerNotes.trim() ? (_jsxs("div", { className: "bw-summary-group", children: [_jsx("span", { className: "bw-summary-subhead", children: isReschedule ? t('notesLabelReschedule') : t('reviewNotesSection') }), _jsx("p", { className: "bw-summary-notes", children: customerNotes.trim() })] })) : null, _jsx("div", { className: "bw-summary-rows bw-summary-rows--total", children: _jsxs("div", { className: "bw-summary-row bw-summary-total", children: [_jsx("span", { children: isQuoteLoading ? t('summaryCalculating') : t('summaryEstimatedTotal') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatServicePrice(selectedService, quote, intlLocale) })] }) })] })) : null }), _jsx("div", { className: "bw-col bw-col--right", children: _jsx("div", { className: "bw-right-scroll", children: _jsx("div", { className: "bw-right-inner", children: _jsxs("div", { className: "bw-right-stage", children: [_jsxs("div", { className: `bw-pane bw-pane--slots${viewState === 'slots' ? ' is-active' : ' is-hidden'}`, "aria-hidden": viewState !== 'slots', children: [_jsxs("div", { className: "bw-slots-heading bw-slots-heading--sticky", children: [_jsx("span", { children: t('slotsHeading') }), selectedDateSlots.length > 0 ? (_jsx("span", { className: "bw-slots-count", children: selectedDateSlots.length })) : null] }), _jsx("div", { className: "bw-slots-desktop", children: slotsArea })] }), _jsxs("div", { className: `bw-pane bw-pane--details${viewState === 'details' ? ' is-active' : ' is-hidden'}`, "aria-hidden": viewState !== 'details', children: [selectedServiceRequiresSlot ? (_jsxs("button", { type: "button", className: "bw-back-btn", onClick: () => void handleBackToSlots(), children: [_jsx(ArrowLeftIcon, {}), _jsx("span", { children: t('backToDifferentTime') })] })) : (_jsxs("button", { type: "button", className: "bw-back-btn", onClick: handleBackToServicePicker, children: [_jsx(ArrowLeftIcon, {}), _jsx("span", { children: t('backToDifferentService') })] })), _jsxs("div", { className: "bw-form", children: [serviceWarning ? _jsx(ServiceWarningCallout, { warning: serviceWarning }) : null, renderIntakeAndContact('bw-intake', ''), renderNotesField('bw-notes', t('notesLabel'), t('notesPlaceholder')), selectedService ? (_jsxs("div", { className: "bw-summary", children: [_jsx("span", { className: "bw-summary-title", children: isReschedule ? t('summaryTitleReschedule') : t('summaryTitleCreate') }), _jsxs("div", { className: "bw-summary-rows", children: [holdSecondsRemaining !== null ? (_jsxs("div", { className: "bw-summary-row bw-summary-row--hold", "aria-live": "polite", children: [_jsx("span", { children: t('summaryReservationHold') }), _jsx("span", { className: "bw-summary-val bw-summary-val--hold", children: formatHoldCountdown(holdSecondsRemaining) })] })) : null, isReschedule && rescheduleContext ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryFormerTime') }), _jsx("span", { className: "bw-summary-val", style: {
+                                                                                                        ...summaryValStyle,
+                                                                                                        textDecoration: 'line-through',
+                                                                                                        opacity: 0.55,
+                                                                                                    }, children: formatFormerSlot(rescheduleContext.formerStartTime, rescheduleContext.formerEndTime, intlLocale) })] })) : null, serviceChanged && formerService ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryFormerService') }), _jsx("span", { className: "bw-summary-val", style: {
+                                                                                                        ...summaryValStyle,
+                                                                                                        textDecoration: 'line-through',
+                                                                                                        opacity: 0.55,
+                                                                                                    }, children: formerService.name })] })) : null, staffChanged ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryFormerStaff') }), _jsx("span", { className: "bw-summary-val", style: {
+                                                                                                        ...summaryValStyle,
+                                                                                                        textDecoration: 'line-through',
+                                                                                                        opacity: 0.55,
+                                                                                                    }, children: formerStaffName ?? t('providerAny') })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryService') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: pickLocaleField(selectedService, 'name', locale) ?? selectedService.name })] }), _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryProvider') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: selectedHeldStaff?.name ?? selectedStaff?.name ?? t('providerAny') })] }), selectedDate ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryDate') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatReadableDate(selectedDate, intlLocale) })] })) : null, selectedSlot ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryTime') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatTimeLabel(selectedSlot.time, intlLocale) })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: t('summaryDuration') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatDuration(selectedService.durationMinutes) })] }), _jsxs("div", { className: "bw-summary-row bw-summary-total", children: [_jsx("span", { children: isQuoteLoading ? t('summaryCalculating') : t('summaryEstimatedTotal') }), _jsx("span", { className: "bw-summary-val", style: summaryValStyle, children: formatServicePrice(selectedService, quote, intlLocale) })] })] })] })) : null, error ? _jsx("div", { className: "bw-error", children: error }) : null, renderSubmitHelp(), payment ? (_jsx(StripePaymentBlock, { payment: payment, appointmentId: paymentAppointmentId, showInlineButton: false, actionTarget: mobilePaymentActionTarget, onSuccess: () => {
+                                                                                setSuccess(t('successPaymentReceived'));
+                                                                                setPayment(null);
+                                                                            }, onError: setError })) : (_jsxs("button", { type: "button", className: `bw-confirm-btn${!canSubmit || isQuoteLoading ? ' is-disabled' : ''}`, "aria-disabled": !canSubmit || isQuoteLoading, onClick: handleConfirmAttempt, children: [_jsx("span", { children: isSubmitting
+                                                                                        ? isReschedule
+                                                                                            ? t('btnRescheduling')
+                                                                                            : t('btnBooking')
+                                                                                        : isReschedule
+                                                                                            ? t('btnConfirmReschedule')
+                                                                                            : selectedServiceRequiresPayment
+                                                                                                ? t('btnContinueToPayment')
+                                                                                                : t('btnConfirmBooking') }), !isSubmitting ? _jsx(ArrowRightIcon, {}) : null] }))] })] })] }) }) }) })] }) }), _jsxs("div", { className: "bw-details-view", children: [_jsx("div", { className: "bw-details-summary", children: selectedService ? (_jsxs(_Fragment, { children: [selectedServiceRequiresSlot ? (_jsxs("button", { type: "button", className: "bw-back-btn bw-back-btn--details", onClick: () => void handleBackToSlots(), children: [_jsx(ArrowLeftIcon, {}), _jsx("span", { children: t('backToDifferentTime') })] })) : (_jsxs("button", { type: "button", className: "bw-back-btn bw-back-btn--details", onClick: handleBackToServicePicker, children: [_jsx(ArrowLeftIcon, {}), _jsx("span", { children: t('backToDifferentService') })] })), _jsx("h3", { className: "bw-details-service", children: pickLocaleField(selectedService, 'name', locale) ?? selectedService.name }), pickLocaleField(selectedService, 'description', locale) ?? selectedService.description ? (_jsx("p", { className: "bw-details-desc", children: pickLocaleField(selectedService, 'description', locale) ?? selectedService.description })) : null, _jsxs("div", { className: "bw-details-meta", children: [isReschedule && rescheduleContext ? (_jsxs("div", { className: "bw-details-meta-row bw-details-meta-row--strike", children: [_jsx("span", { className: "bw-details-meta-icon", children: _jsx(CalendarIcon, {}) }), _jsxs("div", { className: "bw-details-meta-text", children: [_jsx("span", { className: "bw-details-meta-label", children: t('summaryFormerTime') }), _jsx("span", { className: "bw-details-meta-value", children: formatFormerSlot(rescheduleContext.formerStartTime, rescheduleContext.formerEndTime, intlLocale) })] })] })) : null, selectedDate && selectedSlot ? (_jsxs("div", { className: "bw-details-meta-row", children: [_jsx("span", { className: "bw-details-meta-icon", children: _jsx(CalendarIcon, {}) }), _jsxs("div", { className: "bw-details-meta-text", children: [_jsx("span", { className: "bw-details-meta-label", children: isReschedule ? t('summaryNewTime') : t('summaryWhen') }), _jsxs("span", { className: "bw-details-meta-value", children: [formatReadableDate(selectedDate, intlLocale), _jsx("br", {}), formatTimeLabel(selectedSlot.time, intlLocale), " \u2013 ", formatTimeLabel(selectedSlot.endTime, intlLocale)] })] })] })) : null, _jsxs("div", { className: "bw-details-meta-row", children: [_jsx("span", { className: "bw-details-meta-icon", children: _jsx(ClockIcon, {}) }), _jsx("span", { className: "bw-details-meta-value", children: formatDuration(selectedService.durationMinutes) })] }), _jsxs("div", { className: "bw-details-meta-row", children: [_jsx("span", { className: "bw-details-meta-icon", children: _jsx(UserIcon, {}) }), _jsx("span", { className: "bw-details-meta-value", children: selectedHeldStaff?.name ?? selectedStaff?.name ?? t('providerAny') })] }), _jsxs("div", { className: "bw-details-meta-row", children: [_jsx("span", { className: "bw-details-meta-icon", children: _jsx(GlobeIcon, {}) }), _jsx("span", { className: "bw-details-meta-value", children: selectedHeldStaff?.timezone ?? selectedStaff?.timezone ?? setup?.workspaceTimezone ?? setup?.staff?.[0]?.timezone ?? 'UTC' })] }), _jsxs("div", { className: "bw-details-meta-row", children: [_jsx("span", { className: "bw-details-meta-icon", "aria-hidden": "true", children: "$" }), _jsxs("div", { className: "bw-details-meta-text", children: [_jsx("span", { className: "bw-details-meta-label", children: isQuoteLoading ? t('summaryCalculating') : t('summaryEstimatedTotal') }), _jsx("span", { className: "bw-details-meta-value", children: formatServicePrice(selectedService, quote, intlLocale) })] })] }), holdSecondsRemaining !== null ? (_jsxs("div", { className: "bw-details-meta-row bw-details-meta-row--hold", "aria-live": "polite", children: [_jsx("span", { className: "bw-details-meta-icon", children: _jsx(ClockIcon, {}) }), _jsxs("div", { className: "bw-details-meta-text", children: [_jsx("span", { className: "bw-details-meta-label", children: t('summaryReservationHold') }), _jsx("span", { className: "bw-details-meta-value bw-details-hold", children: formatHoldCountdown(holdSecondsRemaining) })] })] })) : null] })] })) : null }), _jsx("div", { className: "bw-details-form", children: _jsxs("div", { className: "bw-form bw-form--details", children: [serviceWarning ? _jsx(ServiceWarningCallout, { warning: serviceWarning }) : null, renderIntakeAndContact('bw-intake-d', '-d'), renderNotesField('bw-notes-d', isReschedule ? t('notesLabelReschedule') : t('notesLabel'), isReschedule ? t('notesPlaceholderReschedule') : t('notesPlaceholder')), error ? _jsx("div", { className: "bw-error", children: error }) : null, renderSubmitHelp(), !payment && (forcedState === 'payment-full' || forcedState === 'payment-deposit') ? (_jsx(PaymentPanel, { service: selectedService, mode: forcedState === 'payment-full' ? 'full' : 'deposit' })) : null, payment ? (_jsx(StripePaymentBlock, { payment: payment, appointmentId: paymentAppointmentId, onSuccess: () => {
+                                                    setSuccess(t('successPaymentReceived'));
+                                                    setPayment(null);
+                                                }, onError: setError })) : (_jsxs("button", { type: "button", className: `bw-confirm-btn${!canSubmit || isQuoteLoading ? ' is-disabled' : ''}`, "aria-disabled": !canSubmit || isQuoteLoading, onClick: handleConfirmAttempt, children: [_jsx("span", { children: isSubmitting
+                                                            ? isReschedule
+                                                                ? t('btnRescheduling')
+                                                                : t('btnBooking')
+                                                            : forcedState === 'payment-full'
+                                                                ? t('btnPayAndConfirm', { price: formatPrice(selectedService, intlLocale) })
+                                                                : forcedState === 'payment-deposit'
+                                                                    ? t('btnPayDepositAndConfirm')
+                                                                    : isReschedule
+                                                                        ? t('btnConfirmReschedule')
+                                                                        : selectedServiceRequiresPayment
+                                                                            ? t('btnContinueToPayment')
+                                                                            : t('btnConfirmBooking') }), !isSubmitting ? _jsx(ArrowRightIcon, {}) : null] }))] }) })] })] }), _jsx("div", { className: "bw-footer", children: _jsxs("div", { className: "bw-footer-btns", children: [mobileStep > 1 ? (_jsx("button", { type: "button", className: "bw-footer-back", onClick: () => {
+                                    setMobileStep((step) => {
+                                        // Async services skip step 2 going backward too.
+                                        // Step 3 → step 1 instead of step 3 → step 2.
+                                        if (step === 3 && !selectedServiceRequiresSlot)
+                                            return 1;
+                                        return Math.max(1, step - 1);
+                                    });
                                 }, children: _jsx(ArrowLeftIcon, {}) })) : null, mobileStep < 4 ? (_jsxs("button", { type: "button", className: "bw-footer-next", disabled: (mobileStep === 1 && !canAdvanceStep1) ||
                                     (mobileStep === 2 && !canAdvanceStep2) ||
-                                    (mobileStep === 3 && !canAdvanceStep3), onClick: () => setMobileStep((step) => Math.min(4, step + 1)), children: [_jsx("span", { children: "Next" }), _jsx(ArrowRightIcon, {})] })) : payment ? (_jsx("div", { className: "bw-footer-payment-slot", ref: setMobilePaymentActionTarget })) : (_jsxs("button", { type: "button", className: "bw-footer-next", disabled: !canSubmit || isQuoteLoading, onClick: () => void handleConfirmBooking(), children: [_jsx("span", { children: isSubmitting
+                                    (mobileStep === 3 && !canAdvanceStep3), onClick: () => setMobileStep((step) => {
+                                    // Async services skip step 2 (no date/time picker).
+                                    // Step 1 → step 3 → step 4.
+                                    if (step === 1 && !selectedServiceRequiresSlot)
+                                        return 3;
+                                    return Math.min(4, step + 1);
+                                }), children: [_jsx("span", { children: t('btnNext') }), _jsx(ArrowRightIcon, {})] })) : payment ? (_jsx("div", { className: "bw-footer-payment-slot", ref: setMobilePaymentActionTarget })) : (_jsxs("button", { type: "button", className: `bw-footer-next${!canSubmit || isQuoteLoading ? ' is-disabled' : ''}`, "aria-disabled": !canSubmit || isQuoteLoading, onClick: handleConfirmAttempt, children: [_jsx("span", { children: isSubmitting
                                             ? isReschedule
-                                                ? 'Rescheduling...'
-                                                : 'Booking...'
+                                                ? t('btnRescheduling')
+                                                : t('btnBooking')
                                             : isReschedule
-                                                ? 'Confirm Reschedule'
+                                                ? t('btnConfirmReschedule')
                                                 : selectedServiceRequiresPayment
-                                                    ? 'Continue to payment'
-                                                    : 'Confirm Booking' }), !isSubmitting ? _jsx(ArrowRightIcon, {}) : null] }))] })] })] }));
+                                                    ? t('btnContinueToPayment')
+                                                    : t('btnConfirmBooking') }), !isSubmitting ? _jsx(ArrowRightIcon, {}) : null] }))] }) })] }, bookingFlowKey) }));
 }
 /* Payment panel — design proposal for the pay-before-booking flow.
  * Renders inside the desktop details form (and mobile step-4 form
@@ -1007,22 +1124,24 @@ export function BookingWidgetPanel({ title, description, mobileHeader, mode = 'c
  *      .bw-pay-card-slot is what gets replaced by <PaymentElement />.
  */
 function PaymentPanel({ service, mode, }) {
+    const { t, locale } = useTranslation();
     if (!service)
         return null;
-    const formatter = currencyFormatter(service.currency);
+    const formatter = currencyFormatter(service.currency, localeToIntl(locale));
     const total = service.priceCents / 100;
     // Deposit defaults to 30% of total when no explicit depositCents
     // is set on the service. Real flow reads `service.depositCents`.
     const depositToday = mode === 'full' ? total : Math.round(total * 0.3 * 100) / 100;
     const dueAtVisit = mode === 'full' ? 0 : Math.round((total - depositToday) * 100) / 100;
-    return (_jsxs("div", { className: "bw-pay", children: [_jsxs("div", { className: "bw-pay-summary", children: [_jsx("div", { className: "bw-pay-summary-header", children: "Summary" }), _jsxs("div", { className: "bw-pay-summary-row", children: [_jsx("span", { children: service.name }), _jsx("span", { className: "bw-pay-summary-val", children: formatter.format(total) })] }), _jsx("div", { className: "bw-pay-summary-divider" }), _jsxs("div", { className: "bw-pay-summary-row", children: [_jsx("span", { children: "Subtotal" }), _jsx("span", { className: "bw-pay-summary-val", children: formatter.format(total) })] }), _jsxs("div", { className: "bw-pay-summary-row bw-pay-summary-row--muted", children: [_jsx("span", { children: "Tax" }), _jsx("span", { className: "bw-pay-summary-val", children: formatter.format(0) })] }), _jsxs("div", { className: "bw-pay-summary-row bw-pay-summary-row--total", children: [_jsx("span", { children: "Total" }), _jsx("span", { className: "bw-pay-summary-val", children: formatter.format(total) })] }), _jsx("div", { className: "bw-pay-summary-divider" }), _jsxs("div", { className: "bw-pay-summary-row bw-pay-summary-row--strong", children: [_jsx("span", { children: "Charged today" }), _jsx("span", { className: "bw-pay-summary-val", children: formatter.format(depositToday) })] }), mode === 'deposit' ? (_jsxs("div", { className: "bw-pay-summary-row bw-pay-summary-row--muted", children: [_jsx("span", { children: "Due at visit" }), _jsx("span", { className: "bw-pay-summary-val", children: formatter.format(dueAtVisit) })] })) : null] }), _jsxs("div", { className: "bw-pay-card", children: [_jsx("label", { className: "bw-label", children: "Card details" }), _jsx("div", { className: "bw-pay-card-slot", children: _jsxs("div", { className: "bw-pay-card-stub", children: [_jsxs("div", { className: "bw-pay-card-stub-row", children: [_jsx("span", { className: "bw-pay-card-stub-label", children: "Card number" }), _jsx("span", { className: "bw-pay-card-stub-value", children: "1234 1234 1234 1234" })] }), _jsxs("div", { className: "bw-pay-card-stub-grid", children: [_jsx("div", { className: "bw-pay-card-stub-row", children: _jsx("span", { className: "bw-pay-card-stub-label", children: "MM / YY" }) }), _jsx("div", { className: "bw-pay-card-stub-row", children: _jsx("span", { className: "bw-pay-card-stub-label", children: "CVC" }) }), _jsx("div", { className: "bw-pay-card-stub-row", children: _jsx("span", { className: "bw-pay-card-stub-label", children: "ZIP" }) })] })] }) }), _jsxs("p", { className: "bw-pay-secure", children: [_jsx("span", { "aria-hidden": "true", children: "\uD83D\uDD12" }), " Payments are processed securely by Stripe."] })] })] }));
+    return (_jsxs("div", { className: "bw-pay", children: [_jsxs("div", { className: "bw-pay-summary", children: [_jsx("div", { className: "bw-pay-summary-header", children: t('paymentHeader') }), _jsxs("div", { className: "bw-pay-summary-row", children: [_jsx("span", { children: pickLocaleField(service, 'name', locale) ?? service.name }), _jsx("span", { className: "bw-pay-summary-val", children: formatter.format(total) })] }), _jsx("div", { className: "bw-pay-summary-divider" }), _jsxs("div", { className: "bw-pay-summary-row", children: [_jsx("span", { children: t('paymentSubtotal') }), _jsx("span", { className: "bw-pay-summary-val", children: formatter.format(total) })] }), _jsxs("div", { className: "bw-pay-summary-row bw-pay-summary-row--muted", children: [_jsx("span", { children: t('paymentTax') }), _jsx("span", { className: "bw-pay-summary-val", children: formatter.format(0) })] }), _jsxs("div", { className: "bw-pay-summary-row bw-pay-summary-row--total", children: [_jsx("span", { children: t('paymentTotal') }), _jsx("span", { className: "bw-pay-summary-val", children: formatter.format(total) })] }), _jsx("div", { className: "bw-pay-summary-divider" }), _jsxs("div", { className: "bw-pay-summary-row bw-pay-summary-row--strong", children: [_jsx("span", { children: t('paymentChargedToday') }), _jsx("span", { className: "bw-pay-summary-val", children: formatter.format(depositToday) })] }), mode === 'deposit' ? (_jsxs("div", { className: "bw-pay-summary-row bw-pay-summary-row--muted", children: [_jsx("span", { children: t('paymentDueAtVisit') }), _jsx("span", { className: "bw-pay-summary-val", children: formatter.format(dueAtVisit) })] })) : null] }), _jsxs("div", { className: "bw-pay-card", children: [_jsx("label", { className: "bw-label", children: t('paymentCardDetails') }), _jsx("div", { className: "bw-pay-card-slot", children: _jsxs("div", { className: "bw-pay-card-stub", children: [_jsxs("div", { className: "bw-pay-card-stub-row", children: [_jsx("span", { className: "bw-pay-card-stub-label", children: t('paymentCardNumber') }), _jsx("span", { className: "bw-pay-card-stub-value", children: "1234 1234 1234 1234" })] }), _jsxs("div", { className: "bw-pay-card-stub-grid", children: [_jsx("div", { className: "bw-pay-card-stub-row", children: _jsx("span", { className: "bw-pay-card-stub-label", children: t('paymentExpiry') }) }), _jsx("div", { className: "bw-pay-card-stub-row", children: _jsx("span", { className: "bw-pay-card-stub-label", children: t('paymentCvc') }) }), _jsx("div", { className: "bw-pay-card-stub-row", children: _jsx("span", { className: "bw-pay-card-stub-label", children: t('paymentZip') }) })] })] }) }), _jsxs("p", { className: "bw-pay-secure", children: [_jsx("span", { "aria-hidden": "true", children: "\uD83D\uDD12" }), " ", t('paymentSecureNote')] })] })] }));
 }
 function IntakeFormFields({ form, responses, onChange, idPrefix, mode, }) {
+    const { locale } = useTranslation();
     if (!form || form.sections.length === 0)
         return null;
     return (_jsx("div", { className: "bw-intake", children: form.sections
             .filter((section) => !section.showWhenPath || section.showWhenPath === mode)
-            .map((section) => (_jsxs("div", { className: "bw-intake-section", children: [_jsx("div", { className: "bw-intake-title", children: section.titleEs ?? section.title ?? section.titleEn ?? section.id }), _jsx("div", { className: "bw-form-fields", children: section.fields.map((field) => (_jsx(IntakeField, { field: field, value: responses[field.id], onChange: (value) => onChange(field.id, value), idPrefix: `${idPrefix}-${section.id}` }, field.id))) })] }, section.id))) }));
+            .map((section) => (_jsxs("div", { className: "bw-intake-section", children: [_jsx("div", { className: "bw-intake-title", children: pickLocaleField(section, 'title', locale) ?? section.id }), _jsx("div", { className: "bw-form-fields", children: section.fields.map((field) => (_jsx(IntakeField, { field: field, value: responses[field.id], onChange: (value) => onChange(field.id, value), idPrefix: `${idPrefix}-${section.id}` }, field.id))) })] }, section.id))) }));
 }
 function areRequiredIntakeFieldsComplete(form, responses, mode) {
     return form.sections
@@ -1034,57 +1153,57 @@ function areRequiredIntakeFieldsComplete(form, responses, mode) {
         return isRequiredIntakeFieldComplete(field, responses[field.id], minItems);
     }));
 }
-function getSubmitBlockers({ selectedService, selectedServiceRequiresSlot, selectedDate, selectedSlot, holdId, isIntakeComplete, intakeResponses, selectedServicePath, quote, customerName, customerEmail, }) {
+function getSubmitBlockers({ selectedService, selectedServiceRequiresSlot, selectedDate, selectedSlot, holdId, isIntakeComplete, intakeResponses, selectedServicePath, quote, customerName, customerEmail, t, locale = DEFAULT_LOCALE, }) {
     const blockers = [];
     if (selectedServiceRequiresSlot && (!selectedDate || !selectedSlot || !holdId)) {
-        blockers.push('Date and time');
+        blockers.push(t('blockerDateTime'));
     }
     if (!customerName.trim())
-        blockers.push('Contact: Full name');
+        blockers.push(t('blockerContactName'));
     if (!customerEmail.trim()) {
-        blockers.push('Contact: Email');
+        blockers.push(t('blockerContactEmail'));
     }
     else if (!isValidEmailAddress(customerEmail)) {
-        blockers.push('Contact: Enter a valid email address');
+        blockers.push(t('blockerContactEmailInvalid'));
     }
     if (!isIntakeComplete && selectedService.intakeForm) {
-        blockers.push(...getMissingRequiredIntakeLabels(selectedService.intakeForm, intakeResponses, selectedServicePath));
+        blockers.push(...getMissingRequiredIntakeLabels(selectedService.intakeForm, intakeResponses, selectedServicePath, t, locale));
     }
     if (selectedService.pricingMode === 'calculated' &&
         isIntakeComplete &&
         !quote) {
-        blockers.push('Calculated price');
+        blockers.push(t('blockerCalculatedPrice'));
     }
     return Array.from(new Set(blockers));
 }
 function isValidEmailAddress(value) {
     return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim());
 }
-function getMissingRequiredIntakeLabels(form, responses, mode) {
+function getMissingRequiredIntakeLabels(form, responses, mode, t, locale = DEFAULT_LOCALE) {
     const missing = [];
     for (const section of form.sections) {
         if (section.showWhenPath && section.showWhenPath !== mode)
             continue;
-        const sectionLabel = getIntakeSectionLabel(section);
+        const sectionLabel = getIntakeSectionLabel(section, locale);
         for (const field of section.fields) {
             const minItems = field.type === 'repeatable-group' && field.id === 'boxes'
                 ? Math.max(1, Math.round(readFiniteNumber(responses.box_count, 1)))
                 : undefined;
-            collectMissingIntakeFieldLabels(field, responses[field.id], sectionLabel, missing, minItems);
+            collectMissingIntakeFieldLabels(field, responses[field.id], sectionLabel, missing, t, locale, minItems);
         }
     }
     return missing;
 }
-function collectMissingIntakeFieldLabels(field, value, sectionLabel, missing, minItems) {
+function collectMissingIntakeFieldLabels(field, value, sectionLabel, missing, t, locale, minItems) {
     if (!field.required)
         return;
     if (field.type !== 'repeatable-group') {
         if (!isRequiredIntakeFieldComplete(field, value)) {
-            missing.push(`${sectionLabel}: ${getIntakeFieldLabel(field)}`);
+            missing.push(`${sectionLabel}: ${getIntakeFieldLabel(field, locale)}`);
         }
         return;
     }
-    const fieldLabel = getIntakeFieldLabel(field);
+    const fieldLabel = getIntakeFieldLabel(field, locale);
     const items = Array.isArray(value) ? value : [];
     const requiredItemCount = Math.max(minItems ?? 1, items.length || 1);
     if (items.length < requiredItemCount) {
@@ -1099,16 +1218,16 @@ function collectMissingIntakeFieldLabels(field, value, sectionLabel, missing, mi
             if (!child.required)
                 continue;
             if (!isRequiredIntakeFieldComplete(child, record[child.id])) {
-                missing.push(`${sectionLabel}: Caja ${index + 1} ${getIntakeFieldLabel(child)}`);
+                missing.push(`${sectionLabel}: ${t('repeatItemLabel', { index: index + 1 })} ${getIntakeFieldLabel(child, locale)}`);
             }
         }
     }
 }
-function getIntakeSectionLabel(section) {
-    return section.titleEs ?? section.title ?? section.titleEn ?? section.id;
+function getIntakeSectionLabel(section, locale = DEFAULT_LOCALE) {
+    return pickLocaleField(section, 'title', locale) ?? section.id;
 }
-function getIntakeFieldLabel(field) {
-    return field.labelEs ?? field.label ?? field.labelEn ?? field.id;
+function getIntakeFieldLabel(field, locale = DEFAULT_LOCALE) {
+    return pickLocaleField(field, 'label', locale) ?? field.id;
 }
 function isRequiredIntakeFieldComplete(field, value, minItems) {
     if (!field.required)
@@ -1135,6 +1254,62 @@ function isRequiredIntakeFieldComplete(field, value, minItems) {
     }
     return typeof value === 'string' && value.trim().length > 0;
 }
+function formatIntakeValue(field, value, locale, t) {
+    if (field.type === 'checkbox') {
+        return value === true ? t('reviewYes') : t('reviewNo');
+    }
+    if (field.type === 'select') {
+        const option = (field.options ?? []).find((opt) => opt.value === value);
+        if (option) {
+            return (pickLocaleField(option, 'label', locale) ??
+                option.label ??
+                String(value));
+        }
+    }
+    if (typeof value === 'string') {
+        const trimmed = value.trim();
+        return trimmed.length > 0 ? trimmed : t('reviewNotProvided');
+    }
+    if (typeof value === 'number')
+        return String(value);
+    return t('reviewNotProvided');
+}
+function buildIntakeReviewRows(form, responses, servicePath, locale, t) {
+    if (!form)
+        return [];
+    const rows = [];
+    for (const section of form.sections) {
+        if (section.showWhenPath && section.showWhenPath !== servicePath)
+            continue;
+        for (const field of section.fields) {
+            if (field.type === 'repeatable-group') {
+                const items = Array.isArray(responses[field.id]) ? responses[field.id] : [];
+                items.forEach((item, index) => {
+                    const record = item && typeof item === 'object' && !Array.isArray(item)
+                        ? item
+                        : {};
+                    const itemLabel = t('repeatItemLabel', { index: index + 1 });
+                    (field.fields ?? []).forEach((child) => {
+                        rows.push({
+                            key: `${field.id}-${index}-${child.id}`,
+                            label: `${itemLabel} · ${getIntakeFieldLabel(child, locale)}`,
+                            value: formatIntakeValue(child, record[child.id], locale, t),
+                        });
+                    });
+                });
+                continue;
+            }
+            const isMultiline = field.type === 'textarea';
+            rows.push({
+                key: field.id,
+                label: getIntakeFieldLabel(field, locale),
+                value: formatIntakeValue(field, responses[field.id], locale, t),
+                multiline: isMultiline,
+            });
+        }
+    }
+    return rows;
+}
 function readFiniteNumber(value, fallback) {
     if (typeof value === 'number' && Number.isFinite(value))
         return value;
@@ -1145,26 +1320,194 @@ function readFiniteNumber(value, fallback) {
     }
     return fallback;
 }
+/**
+ * Custom select that replaces the native <select>. The native control
+ * renders differently on every OS/browser (macOS dark-mode picker,
+ * Windows Chrome OS picker, etc.) and breaks the widget's visual
+ * language. This implementation matches the .bw-field input chrome,
+ * is fully keyboard-navigable (arrows, Home/End, Enter, Space, Escape,
+ * Tab), respects prefers-reduced-motion, and uses the WAI-ARIA
+ * combobox + listbox pattern for screen reader support.
+ */
+function IntakeSelect({ id, value, onChange, options, placeholder, required, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const [placement, setPlacement] = useState('below');
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const listRef = useRef(null);
+    const listboxId = `${id}-listbox`;
+    /**
+     * Decide which side to open the menu on. If the space below the
+     * trigger isn't enough to fit the menu, and there's more space
+     * above, flip the menu above the trigger. Runs at every open
+     * (desktop AND mobile) — handles both the desktop near-footer
+     * case and the mobile near-bottom-of-widget case.
+     *
+     * The menu's CSS max-height is `min(280px, 60svh)`. We compute
+     * the same effective max here so the flip decision tracks the
+     * real available space — important on short phones where 60svh
+     * is much smaller than 280px.
+     */
+    function computePlacement() {
+        if (typeof window === 'undefined')
+            return 'below';
+        const triggerEl = triggerRef.current;
+        if (!triggerEl)
+            return 'below';
+        const rect = triggerEl.getBoundingClientRect();
+        const effectiveMenuHeight = Math.min(280, window.innerHeight * 0.6);
+        const padding = 16;
+        const spaceBelow = window.innerHeight - rect.bottom - padding;
+        const spaceAbove = rect.top - padding;
+        if (spaceBelow < effectiveMenuHeight && spaceAbove > spaceBelow) {
+            return 'above';
+        }
+        return 'below';
+    }
+    const currentIndex = options.findIndex((option) => option.value === value);
+    const currentLabel = currentIndex >= 0 ? options[currentIndex].label : placeholder;
+    function open(initialIndex) {
+        if (isOpen)
+            return;
+        setPlacement(computePlacement());
+        setIsOpen(true);
+        const start = initialIndex !== undefined
+            ? initialIndex
+            : currentIndex >= 0
+                ? currentIndex
+                : 0;
+        setFocusedIndex(Math.max(0, Math.min(options.length - 1, start)));
+    }
+    function close({ refocus = true } = {}) {
+        setIsOpen(false);
+        setFocusedIndex(-1);
+        if (refocus && triggerRef.current)
+            triggerRef.current.focus();
+    }
+    function selectAt(index) {
+        const option = options[index];
+        if (!option)
+            return;
+        onChange(option.value);
+        close();
+    }
+    // Outside-click close. Listens on mousedown so the click on the
+    // trigger itself doesn't immediately fire close + reopen.
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        function handleDown(event) {
+            if (rootRef.current && !rootRef.current.contains(event.target)) {
+                close({ refocus: false });
+            }
+        }
+        document.addEventListener('mousedown', handleDown);
+        return () => document.removeEventListener('mousedown', handleDown);
+    }, [isOpen]);
+    // Keep the keyboard-focused option in view as the user arrows
+    // through. block: 'nearest' avoids unnecessary scroll jumps.
+    useEffect(() => {
+        if (!isOpen || focusedIndex < 0 || !listRef.current)
+            return;
+        const optionEl = listRef.current.querySelector(`[data-option-index="${focusedIndex}"]`);
+        optionEl?.scrollIntoView({ block: 'nearest' });
+    }, [focusedIndex, isOpen]);
+    function handleTriggerKeyDown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                open(event.key === 'ArrowUp' ? options.length - 1 : undefined);
+                break;
+            case 'Home':
+                event.preventDefault();
+                open(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                open(options.length - 1);
+                break;
+        }
+    }
+    function handleListKeyDown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                setFocusedIndex((current) => current >= options.length - 1 ? 0 : current + 1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                setFocusedIndex((current) => current <= 0 ? options.length - 1 : current - 1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                setFocusedIndex(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                setFocusedIndex(options.length - 1);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (focusedIndex >= 0)
+                    selectAt(focusedIndex);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                close();
+                break;
+            case 'Tab':
+                // Close + let the browser move focus naturally.
+                close({ refocus: false });
+                break;
+        }
+    }
+    const hasValue = currentIndex >= 0;
+    return (_jsxs("div", { className: "bw-select", ref: rootRef, children: [_jsxs("button", { ref: triggerRef, type: "button", id: id, className: `bw-select-trigger${isOpen ? ' is-open' : ''}${hasValue ? ' has-value' : ''}`, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-required": required ? true : undefined, onClick: () => (isOpen ? close({ refocus: false }) : open()), onKeyDown: handleTriggerKeyDown, children: [_jsx("span", { className: `bw-select-value${hasValue ? '' : ' is-placeholder'}`, children: currentLabel }), _jsx("span", { className: "bw-select-chevron", "aria-hidden": "true", children: _jsx(ChevronDownIcon, {}) })] }), isOpen ? (_jsx("ul", { id: listboxId, role: "listbox", tabIndex: -1, "aria-activedescendant": focusedIndex >= 0 ? `${id}-option-${focusedIndex}` : undefined, className: `bw-select-menu${placement === 'above' ? ' is-above' : ''}`, onKeyDown: handleListKeyDown, 
+                // Prevent the trigger from losing focus on click; we
+                // manage focus ourselves via close({ refocus: true }).
+                onMouseDown: (event) => event.preventDefault(), ref: (node) => {
+                    listRef.current = node;
+                    if (node)
+                        node.focus();
+                }, children: options.map((option, index) => {
+                    const isSelected = option.value === value;
+                    const isFocused = index === focusedIndex;
+                    return (_jsxs("li", { id: `${id}-option-${index}`, "data-option-index": index, role: "option", "aria-selected": isSelected, className: `bw-select-option${isSelected ? ' is-active' : ''}${isFocused ? ' is-focused' : ''}`, onMouseEnter: () => setFocusedIndex(index), onClick: () => selectAt(index), children: [_jsx("span", { className: "bw-select-option-label", children: option.label }), isSelected ? (_jsx("span", { className: "bw-select-option-check", "aria-hidden": "true", children: _jsx(CheckIcon, {}) })) : null] }, option.value));
+                }) })) : null] }));
+}
 function IntakeField({ field, value, onChange, idPrefix, }) {
+    const { t, locale } = useTranslation();
     const id = `${idPrefix}-${field.id}`;
-    const label = field.labelEs ?? field.label ?? field.labelEn ?? field.id;
+    const label = pickLocaleField(field, 'label', locale) ?? field.id;
     const stringValue = typeof value === 'string' || typeof value === 'number' ? String(value) : '';
     if (field.type === 'repeatable-group') {
         const items = Array.isArray(value) && value.length > 0 ? value : [{}];
         return (_jsxs("div", { className: "bw-field bw-field--wide bw-repeatable", children: [_jsx("label", { children: label }), items.map((item, index) => {
                     const record = item && typeof item === 'object' && !Array.isArray(item) ? item : {};
-                    return (_jsxs("div", { className: "bw-repeatable-item", children: [_jsxs("div", { className: "bw-repeatable-head", children: [_jsxs("span", { children: ["Caja ", index + 1] }), items.length > 1 ? (_jsx("button", { type: "button", className: "bw-link-btn", onClick: () => onChange(items.filter((_, itemIndex) => itemIndex !== index)), children: "Quitar" })) : null] }), _jsx("div", { className: "bw-form-fields", children: (field.fields ?? []).map((child) => (_jsx(IntakeField, { field: child, value: record[child.id], idPrefix: `${id}-${index}`, onChange: (nextValue) => {
+                    return (_jsxs("div", { className: "bw-repeatable-item", children: [_jsxs("div", { className: "bw-repeatable-head", children: [_jsx("span", { children: t('repeatItemLabel', { index: index + 1 }) }), items.length > 1 ? (_jsx("button", { type: "button", className: "bw-link-btn", onClick: () => onChange(items.filter((_, itemIndex) => itemIndex !== index)), children: t('repeatRemove') })) : null] }), _jsx("div", { className: "bw-form-fields", children: (field.fields ?? []).map((child) => (_jsx(IntakeField, { field: child, value: record[child.id], idPrefix: `${id}-${index}`, onChange: (nextValue) => {
                                         const nextItems = [...items];
                                         nextItems[index] = { ...record, [child.id]: nextValue };
                                         onChange(nextItems);
                                     } }, child.id))) })] }, index));
-                }), _jsx("button", { type: "button", className: "bw-secondary-btn", onClick: () => onChange([...items, {}]), children: "Agregar otra caja" })] }));
+                }), _jsx("button", { type: "button", className: "bw-secondary-btn", onClick: () => onChange([...items, {}]), children: t('repeatAdd') })] }));
     }
     if (field.type === 'checkbox') {
         return (_jsxs("div", { className: "bw-field bw-field--wide bw-checkbox-field", children: [_jsxs("label", { htmlFor: id, children: [_jsx("input", { id: id, type: "checkbox", checked: value === true, onChange: (event) => onChange(event.target.checked) }), _jsxs("span", { children: [label, field.required ? ' *' : ''] })] }), field.helpText ? _jsx("p", { className: "bw-help", children: field.helpText }) : null] }));
     }
     if (field.type === 'select') {
-        return (_jsxs("div", { className: "bw-field", children: [_jsxs("label", { htmlFor: id, children: [label, field.required ? _jsx("span", { className: "bw-required", children: " *" }) : null] }), _jsxs("select", { id: id, value: stringValue, required: field.required, onChange: (event) => onChange(event.target.value), children: [_jsx("option", { value: "", children: "Selecciona" }), (field.options ?? []).map((option) => (_jsx("option", { value: option.value, children: option.labelEs ?? option.labelEn ?? option.label }, option.value)))] }), field.helpText ? _jsx("p", { className: "bw-help", children: field.helpText }) : null] }));
+        const options = (field.options ?? []).map((option) => ({
+            value: option.value,
+            label: (pickLocaleField(option, 'label', locale) ??
+                option.labelEn ??
+                option.label) ||
+                option.value,
+        }));
+        return (_jsxs("div", { className: "bw-field", children: [_jsxs("label", { htmlFor: id, children: [label, field.required ? _jsx("span", { className: "bw-required", children: " *" }) : null] }), _jsx(IntakeSelect, { id: id, value: stringValue, onChange: onChange, options: options, placeholder: t('selectFieldPlaceholder'), required: field.required }), field.helpText ? _jsx("p", { className: "bw-help", children: field.helpText }) : null] }));
     }
     if (field.type === 'textarea') {
         return (_jsxs("div", { className: "bw-field bw-field--wide", children: [_jsxs("label", { htmlFor: id, children: [label, field.required ? _jsx("span", { className: "bw-required", children: " *" }) : null] }), _jsx("textarea", { id: id, rows: 3, required: field.required, value: stringValue, placeholder: field.placeholder, onChange: (event) => onChange(event.target.value) }), field.helpText ? _jsx("p", { className: "bw-help", children: field.helpText }) : null] }));
@@ -1184,6 +1527,7 @@ function StripePaymentBlock({ payment, appointmentId, showInlineButton = true, a
         }, children: _jsx(StripePaymentForm, { amountCents: payment.amountCents, currency: payment.currency, appointmentId: appointmentId, showInlineButton: showInlineButton, actionTarget: actionTarget, onSuccess: onSuccess, onError: onError }) }));
 }
 function StripePaymentForm({ amountCents, currency, appointmentId, showInlineButton = true, actionTarget, onSuccess, onError, }) {
+    const { t, locale } = useTranslation();
     const stripe = useStripe();
     const elements = useElements();
     const [isPaying, setIsPaying] = useState(false);
@@ -1205,34 +1549,34 @@ function StripePaymentForm({ amountCents, currency, appointmentId, showInlineBut
         }
         onSuccess();
     }
-    const renderPayButton = () => (_jsxs("button", { type: "button", className: "bw-confirm-btn", disabled: !stripe || !elements || isPaying, onClick: () => void handlePay(), children: [_jsx("span", { children: isPaying ? 'Procesando...' : 'Pagar y confirmar' }), !isPaying ? _jsx(ArrowRightIcon, {}) : null] }));
-    return (_jsxs("div", { className: "bw-pay", children: [_jsx("div", { className: "bw-pay-summary", children: _jsxs("div", { className: "bw-pay-summary-row bw-pay-summary-row--strong", children: [_jsx("span", { children: "Total due today" }), _jsx("span", { className: "bw-pay-summary-val", children: currencyFormatter(currency).format(amountCents / 100) })] }) }), _jsxs("div", { className: "bw-pay-card", children: [_jsx("label", { className: "bw-label", children: "Pago seguro" }), _jsx("div", { className: "bw-pay-card-slot", children: _jsx(PaymentElement, {}) })] }), showInlineButton ? renderPayButton() : null, actionTarget ? createPortal(renderPayButton(), actionTarget) : null] }));
+    const renderPayButton = () => (_jsxs("button", { type: "button", className: "bw-confirm-btn", disabled: !stripe || !elements || isPaying, onClick: () => void handlePay(), children: [_jsx("span", { children: isPaying ? t('paymentProcessing') : t('paymentPayAndConfirm') }), !isPaying ? _jsx(ArrowRightIcon, {}) : null] }));
+    return (_jsxs("div", { className: "bw-pay", children: [_jsx("div", { className: "bw-pay-summary", children: _jsxs("div", { className: "bw-pay-summary-row bw-pay-summary-row--strong", children: [_jsx("span", { children: t('paymentTotalDueToday') }), _jsx("span", { className: "bw-pay-summary-val", children: currencyFormatter(currency, localeToIntl(locale)).format(amountCents / 100) })] }) }), _jsxs("div", { className: "bw-pay-card", children: [_jsx("label", { className: "bw-label", children: t('paymentSecureLabel') }), _jsx("div", { className: "bw-pay-card-slot", children: _jsx(PaymentElement, {}) })] }), showInlineButton ? renderPayButton() : null, actionTarget ? createPortal(renderPayButton(), actionTarget) : null] }));
 }
 function ServiceWarningCallout({ warning }) {
     return (_jsxs("div", { className: "bw-service-warning", role: "alert", children: [_jsx("div", { className: "bw-service-warning-icon", "aria-hidden": "true", children: _jsx(WarningIcon, {}) }), _jsxs("div", { className: "bw-service-warning-copy", children: [_jsx("div", { className: "bw-service-warning-title", children: warning.title }), _jsx("p", { children: warning.body }), warning.linkHref && warning.linkLabel ? (_jsx("a", { href: warning.linkHref, className: "bw-service-warning-link", children: warning.linkLabel })) : null] })] }));
 }
-function formatPrice(service) {
+function formatPrice(service, locale = 'en-US') {
     if (!service)
         return '';
-    return formatServicePrice(service);
+    return formatServicePrice(service, undefined, locale);
 }
-function formatServicePrice(service, quote) {
+function formatServicePrice(service, quote, locale = 'en-US') {
     if (service.pricingMode === 'calculated') {
         if (quote) {
-            return currencyFormatter(quote.currency).format(quote.totalCents / 100);
+            return currencyFormatter(quote.currency, locale).format(quote.totalCents / 100);
         }
         return 'Price calculated after details';
     }
-    return currencyFormatter(service.currency).format(service.priceCents / 100);
+    return currencyFormatter(service.currency, locale).format(service.priceCents / 100);
 }
-function getServiceWarning(service, mode) {
+function getServiceWarning(service, mode, locale = DEFAULT_LOCALE) {
     if (!service || mode !== 'async')
         return null;
     const warning = readRecord(service.publicCopy?.remoteWarning);
     if (!warning)
         return null;
-    const title = readString(warning.titleEs) ?? readString(warning.title);
-    const body = readString(warning.bodyEs) ?? readString(warning.body);
+    const title = pickLocaleField(warning, 'title', locale);
+    const body = pickLocaleField(warning, 'body', locale);
     if (!title || !body)
         return null;
     return {
@@ -1250,16 +1594,11 @@ function readRecord(value) {
 function readString(value) {
     return typeof value === 'string' && value.trim() ? value : null;
 }
-function BookingWidgetSkeleton() {
-    // Mirrors the live widget's DOM at first load so the chrome
-    // doesn't reflow when real content arrives. Three-column body on
-    // desktop (services / calendar / slots), single-column on mobile.
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "bw-header", children: _jsx("div", { className: "bw-skel bw-skel--title" }) }), _jsx("div", { className: "bw-content", children: _jsxs("div", { className: "bw-body bw-skel-body", children: [_jsx("div", { className: "bw-col bw-col--left", children: _jsx("div", { className: "bw-step-1", children: _jsxs("div", { className: "bw-service-picker", children: [_jsx("div", { className: "bw-skel bw-skel--label" }), [
-                                            { rows: 1 },
-                                            { rows: 2 },
-                                            { rows: 1 },
-                                        ].map((group, groupIndex) => (_jsxs("div", { className: "bw-skel-svc-group", children: [_jsx("div", { className: "bw-skel bw-skel--svc-category" }), Array.from({ length: group.rows }).map((_, rowIndex) => (_jsxs("div", { className: "bw-skel-svc-row", children: [_jsx("div", { className: "bw-skel bw-skel--svc-image" }), _jsxs("div", { className: "bw-skel-svc-info", children: [_jsx("div", { className: "bw-skel bw-skel--svc-name" }), _jsx("div", { className: "bw-skel bw-skel--svc-desc" }), _jsx("div", { className: "bw-skel bw-skel--svc-meta" })] })] }, rowIndex)))] }, groupIndex)))] }) }) }), _jsx("div", { className: "bw-col bw-col--center", children: _jsxs("div", { className: "bw-cal-card bw-skel-cal-card", children: [_jsxs("div", { className: "bw-skel-cal-header", children: [_jsx("div", { className: "bw-skel bw-skel--cal-month" }), _jsxs("div", { className: "bw-skel-cal-navs", children: [_jsx("div", { className: "bw-skel bw-skel--cal-nav" }), _jsx("div", { className: "bw-skel bw-skel--cal-nav" })] })] }), _jsx("div", { className: "bw-skel-cal-dows", children: Array.from({ length: 7 }).map((_, index) => (_jsx("div", { className: "bw-skel bw-skel--cal-dow" }, index))) }), _jsx("div", { className: "bw-skel-cal-grid", children: Array.from({ length: 42 }).map((_, index) => (_jsx("div", { className: "bw-skel bw-skel--cal-day" }, index))) }), _jsx("div", { className: "bw-skel bw-skel--cal-tz" })] }) }), _jsx("div", { className: "bw-col bw-col--right", children: _jsxs("div", { className: "bw-pane--slots", children: [_jsx("div", { className: "bw-skel bw-skel--slots-heading" }), _jsx("div", { className: "bw-time-slots bw-time-slots--skeleton", children: Array.from({ length: 8 }).map((_, index) => (_jsx("div", { className: "bw-skel bw-skel--slot" }, index))) })] }) })] }) })] }));
-}
+// BookingWidgetSkeleton was a hand-built first-load ghost that
+// constantly drifted out of sync with the real layout. Replaced by
+// boneyard-js: BookingWidgetPanel wraps its main render in
+// <Skeleton name="booking-widget"> and `./bones/registry` ships
+// pre-captured bones JSON regenerated via `npx boneyard-js build`.
 function AvailabilitySkeleton() {
     // Reuses .bw-time-slots so the skeleton inherits the same layout
     // overrides as the real slots — vertical 1-col on desktop (via the
@@ -1273,10 +1612,10 @@ function AvailabilitySkeleton() {
  * the backend stores absolute ms timestamps so this renders correctly
  * for the host's calendar.
  */
-function formatFormerSlot(startMs, endMs) {
+function formatFormerSlot(startMs, endMs, locale = 'en-US') {
     const start = new Date(startMs);
     const end = new Date(endMs);
-    const dateLabel = start.toLocaleDateString([], {
+    const dateLabel = start.toLocaleDateString(locale, {
         weekday: 'short',
         month: 'short',
         day: 'numeric',
@@ -1285,7 +1624,7 @@ function formatFormerSlot(startMs, endMs) {
         hour: 'numeric',
         minute: '2-digit',
     };
-    return `${dateLabel} · ${start.toLocaleTimeString([], timeOpts)} – ${end.toLocaleTimeString([], timeOpts)}`;
+    return `${dateLabel} · ${start.toLocaleTimeString(locale, timeOpts)} – ${end.toLocaleTimeString(locale, timeOpts)}`;
 }
 /**
  * Possessive form of a name. "Eric Lan" → "Eric Lan's", "James" →
@@ -1301,18 +1640,18 @@ function formatPossessive(name) {
         return `${trimmed}'`;
     return `${trimmed}'s`;
 }
-function mobileStepTitle(step) {
+function mobileStepTitle(step, t) {
     switch (step) {
         case 1:
-            return 'Choose a service';
+            return t('stepChooseService');
         case 2:
-            return 'Pick a provider';
+            return t('stepPickDateTime');
         case 3:
-            return 'Pick a date & time';
+            return t('stepYourDetails');
         case 4:
-            return 'Your details';
+            return t('stepReviewConfirm');
         default:
-            return 'Booking';
+            return t('stepBooking');
     }
 }
 function formatDuration(minutes) {
@@ -1322,8 +1661,8 @@ function formatDuration(minutes) {
     }
     return `${minutes} min`;
 }
-function currencyFormatter(currency) {
-    return new Intl.NumberFormat('en-US', {
+function currencyFormatter(currency, locale = 'en-US') {
+    return new Intl.NumberFormat(locale, {
         style: 'currency',
         currency: currency || 'USD',
         minimumFractionDigits: 0,
@@ -1356,26 +1695,28 @@ function formatDateKey(date) {
     const day = `${date.getDate()}`.padStart(2, '0');
     return `${year}-${month}-${day}`;
 }
-function formatMonthLabel(date) {
-    return new Intl.DateTimeFormat('en-US', {
-        month: 'long',
-        year: 'numeric',
-    }).format(date);
+function formatMonthLabel(date, locale = 'en-US') {
+    // Use a simple "Month YYYY" shape across locales. Default Spanish
+    // formatting yields "mayo de 2026" (lowercased, with "de"), which
+    // we don't want — strip both for a tighter calendar header.
+    const month = new Intl.DateTimeFormat(locale, { month: 'long' }).format(date);
+    const capitalizedMonth = month.charAt(0).toUpperCase() + month.slice(1);
+    return `${capitalizedMonth} ${date.getFullYear()}`;
 }
-function formatReadableDate(dateKey) {
-    return new Intl.DateTimeFormat('en-US', {
+function formatReadableDate(dateKey, locale = 'en-US') {
+    return new Intl.DateTimeFormat(locale, {
         weekday: 'short',
         month: 'short',
         day: 'numeric',
     }).format(new Date(`${dateKey}T00:00:00`));
 }
-function formatTimeLabel(time) {
+function formatTimeLabel(time, locale = 'en-US') {
     const [hourString, minuteString] = time.split(':');
     const hour = Number(hourString);
     const minute = Number(minuteString);
     const date = new Date();
     date.setHours(hour, minute, 0, 0);
-    return new Intl.DateTimeFormat('en-US', {
+    return new Intl.DateTimeFormat(locale, {
         hour: 'numeric',
         minute: '2-digit',
     }).format(date);
@@ -1405,13 +1746,13 @@ function buildCalendarDays(month) {
 function sameMonth(left, right) {
     return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth();
 }
-function getMonthOptions(currentMonth, total) {
+function getMonthOptions(currentMonth, total, locale = 'en-US') {
     const start = startOfMonth(new Date());
     return Array.from({ length: total }, (_, index) => {
         const date = addMonths(start, index);
         return {
             value: optionCurrentValue(date),
-            label: formatMonthLabel(date),
+            label: formatMonthLabel(date, locale),
             date,
             isCurrent: sameMonth(date, currentMonth),
         };
@@ -1431,15 +1772,14 @@ function findFirstAvailableDate(availabilityByDate, month) {
         .sort();
     return dates[0] ?? null;
 }
-async function prefetchAvailability({ client, siteSlug, selectedServiceId, selectedStaffId, calendarMonth, cacheRef, }) {
-    const requestKey = getAvailabilityCacheKey(siteSlug, selectedServiceId, selectedStaffId, calendarMonth);
+async function prefetchAvailability({ client, siteSlug, selectedServiceId, calendarMonth, cacheRef, }) {
+    const requestKey = getAvailabilityCacheKey(siteSlug, selectedServiceId, calendarMonth);
     if (cacheRef.current.has(requestKey)) {
         return;
     }
     const result = await client.getPublicAvailableSlots({
         siteSlug,
         serviceId: selectedServiceId,
-        staffMemberId: selectedStaffId ?? undefined,
         startDate: formatDateKey(calendarMonth),
         endDate: formatDateKey(endOfMonth(calendarMonth)),
     });
@@ -1449,8 +1789,8 @@ async function prefetchAvailability({ client, siteSlug, selectedServiceId, selec
     }
     cacheRef.current.set(requestKey, nextMap);
 }
-function getAvailabilityCacheKey(siteSlug, serviceId, staffId, month) {
-    return `${siteSlug}:${serviceId}:${staffId ?? 'any'}:${optionCurrentValue(month)}`;
+function getAvailabilityCacheKey(siteSlug, serviceId, month) {
+    return `${siteSlug}:${serviceId}:${optionCurrentValue(month)}`;
 }
 function formatHoldCountdown(totalSeconds) {
     const minutes = Math.floor(totalSeconds / 60);