@asksable/site-connector 0.1.6 → 0.3.0

package/dist/booking-widget.js

@@ -1,41 +1,160 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { useSableSiteClient, useSableSiteConfig } from './provider.js';
-const MOBILE_PROGRESS_STEPS = [1, 2, 3, 4];
-export function BookingWidgetPanel({ title, description, mobileHeader, }) {
+import { createPortal } from 'react-dom';
+import { loadStripe } from '@stripe/stripe-js';
+import { Elements, PaymentElement, useElements, useStripe } from '@stripe/react-stripe-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}`;
+    const cached = stripePromises.get(key);
+    if (cached)
+        return cached;
+    const promise = loadStripe(publishableKey, { stripeAccount: connectAccountId });
+    stripePromises.set(key, promise);
+    return promise;
+}
+function isDevRuntime() {
+    const env = import.meta.env;
+    return env?.DEV === true || env?.MODE === 'development';
+}
+function hasIntakeFormSections(service) {
+    return (service?.intakeForm?.sections?.length ?? 0) > 0;
+}
+function findCalculatedServiceMissingIntake(setup) {
+    return setup.services.find((service) => service.pricingMode === 'calculated' && !hasIntakeFormSections(service));
+}
+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';
+    // Reschedule summary holds longer values (full former-time
+    // sentence, "Signature Color Refresh") that the widget's default
+    // single-line ellipsis truncates. We override per-row inline so
+    // create mode is unchanged.
+    const summaryValStyle = isReschedule
+        ? {
+            whiteSpace: 'normal',
+            overflow: 'visible',
+            textOverflow: 'clip',
+            wordBreak: 'normal',
+            overflowWrap: 'anywhere',
+        }
+        : 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);
-    const [selectedServiceId, setSelectedServiceId] = useState(null);
-    const [selectedStaffId, setSelectedStaffId] = useState(null);
+    // In reschedule mode the service is locked to the original
+    // appointment's service. We seed selection from rescheduleContext
+    // up front so the calendar/slot fetch fires without the user
+    // needing to click anything.
+    const [selectedServiceId, setSelectedServiceId] = useState(() => rescheduleContext?.serviceId ?? null);
+    const [selectedStaffId, setSelectedStaffId] = useState(() => rescheduleContext?.staffMemberId ?? null);
     const [calendarMonth, setCalendarMonth] = useState(() => startOfMonth(new Date()));
     const [availabilityByDate, setAvailabilityByDate] = useState(new Map());
     const [isAvailabilityLoading, setIsAvailabilityLoading] = useState(false);
     const [selectedDate, setSelectedDate] = useState(null);
     const [selectedSlot, setSelectedSlot] = useState(null);
     const [pendingSlotKey, setPendingSlotKey] = useState(null);
+    // Service picker is progressive: full list shows initially, collapses
+    // to a single "selected service" card once a service is picked, then
+    // the provider section reveals below. Click Change on the card flips
+    // back to full list. Reschedule mode skips the collapse since the
+    // service is locked from rescheduleContext at mount.
+    const [isEditingService, setIsEditingService] = useState(false);
     const [holdId, setHoldId] = useState(null);
     const [holdExpiresAt, setHoldExpiresAt] = useState(null);
     const [heldStaffId, setHeldStaffId] = useState(null);
-    const [customerName, setCustomerName] = useState('');
-    const [customerEmail, setCustomerEmail] = useState('');
-    const [customerPhone, setCustomerPhone] = useState('');
+    // Pre-fill contact fields from the original booking when
+    // rescheduling. Editable, since a user might want to fix typos at
+    // the same time, but the reschedule flow doesn't actually overwrite
+    // them — the host's mutation only patches the time fields.
+    const [customerName, setCustomerName] = useState(() => rescheduleContext?.customerName ?? '');
+    const [customerEmail, setCustomerEmail] = useState(() => rescheduleContext?.customerEmail ?? '');
+    const [customerPhone, setCustomerPhone] = useState(() => rescheduleContext?.customerPhone ?? '');
     const [customerNotes, setCustomerNotes] = useState('');
+    const [intakeResponses, setIntakeResponses] = useState({});
+    const [quote, setQuote] = useState(null);
+    const [isQuoteLoading, setIsQuoteLoading] = useState(false);
+    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);
+    const [mobilePaymentActionTarget, setMobilePaymentActionTarget] = useState(null);
+    // Two-step desktop flow: 'slots' shows the available-times list,
+    // 'details' shows the customer form + summary + confirm. Picking a
+    // slot auto-advances to details with a crossfade matching Sable's
+    // popup rule (250ms expo ease-out in, 150ms ease-out out). Back
+    // button in details returns to slots and releases the hold.
+    const [viewState, setViewState] = useState('slots');
+    // Dev-only: force viewState to 'details' when previewing a payment
+    // variant, since the payment panel renders inside the details form.
+    useEffect(() => {
+        if (__devForceState === 'payment-full' || __devForceState === 'payment-deposit') {
+            setViewState('details');
+        }
+    }, [__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
+    // height anchor of the desktop layout. We measure it on resize and
+    // expose --bw-cal-h on the .bw root so the left (services) and
+    // right (slots) columns can cap their internal scrollers to match,
+    // keeping all three columns the same visual height regardless of
+    // service-list length or slot count.
+    const calCardRef = useRef(null);
+    const widgetRootRef = useRef(null);
+    useEffect(() => {
+        const card = calCardRef.current;
+        const root = widgetRootRef.current;
+        if (!card || !root)
+            return;
+        const observer = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (!entry)
+                return;
+            const height = Math.round(entry.contentRect.height);
+            root.style.setProperty('--bw-cal-h', `${height}px`);
+        });
+        observer.observe(card);
+        return () => observer.disconnect();
+    }, [setup]);
     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);
@@ -45,8 +164,14 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
             if (cancelled) {
                 return;
             }
+            const missingIntake = findCalculatedServiceMissingIntake(result);
+            if (missingIntake && isDevRuntime()) {
+                throw new Error(`Calculated service "${missingIntake.name}" is missing intakeForm.sections. Shipping services must provide an intakeForm instead of falling back to the generic contact form.`);
+            }
             setSetup(result);
-            setSelectedServiceId((current) => current || result.services[0]?._id || null);
+            // Don't auto-select a service in create mode — let the user
+            // actively pick one. Reschedule mode pre-seeds via the
+            // useState initializer above so this preserves that.
             setError(null);
         })
             .catch((nextError) => {
@@ -63,20 +188,91 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
             cancelled = true;
         };
     }, [client, siteSlug]);
-    useEffect(() => {
-        function handleDocumentClick(event) {
-            if (!staffMenuRef.current?.contains(event.target)) {
-                setStaffOpen(false);
+    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, locale), [selectedService, selectedServicePath, locale]);
+    const selectedServiceRequiresPayment = selectedService?.requiresPayment === true;
+    const trimmedCustomerEmail = customerEmail.trim();
+    const isCustomerEmailValid = trimmedCustomerEmail.length > 0 && isValidEmailAddress(trimmedCustomerEmail);
+    const showCustomerEmailError = trimmedCustomerEmail.length > 0 && !isCustomerEmailValid;
+    // In reschedule mode we pre-select the original service but keep
+    // the full list visible — the admin may legitimately need to
+    // switch service when rescheduling (e.g. customer asked for a
+    // shorter visit alongside the time change).
+    const visibleServices = useMemo(() => {
+        if (!setup)
+            return [];
+        return setup.services;
+    }, [setup]);
+    const serviceGroups = useMemo(() => {
+        if (!setup || visibleServices.length === 0)
+            return [];
+        const categoriesById = new Map((setup.categories ?? []).map((c) => [c._id, c]));
+        const groups = new Map();
+        const uncategorizedKey = '__uncategorized__';
+        for (const service of visibleServices) {
+            const category = service.categoryId != null
+                ? categoriesById.get(service.categoryId) ?? null
+                : null;
+            const key = category?._id ?? uncategorizedKey;
+            const existing = groups.get(key);
+            if (existing) {
+                existing.services.push(service);
+            }
+            else {
+                groups.set(key, {
+                    key,
+                    categoryName: category?.name ?? null,
+                    services: [service],
+                });
             }
         }
-        if (staffOpen) {
-            document.addEventListener('mousedown', handleDocumentClick);
+        // Order: categories by their configured sortOrder, then any
+        // uncategorized bucket at the end.
+        const orderedCategoryKeys = (setup.categories ?? []).map((c) => c._id);
+        const ordered = [];
+        for (const id of orderedCategoryKeys) {
+            const g = groups.get(id);
+            if (g)
+                ordered.push(g);
         }
-        return () => {
-            document.removeEventListener('mousedown', handleDocumentClick);
-        };
-    }, [staffOpen]);
-    const selectedService = useMemo(() => setup?.services.find((service) => service._id === selectedServiceId) ?? null, [selectedServiceId, setup]);
+        const uncategorized = groups.get(uncategorizedKey);
+        if (uncategorized)
+            ordered.push(uncategorized);
+        // If the workspace has no categories at all, return a single
+        // group with no header so the picker still reads as one list.
+        if (ordered.length === 1 && ordered[0].categoryName === null) {
+            return ordered;
+        }
+        return ordered;
+    }, [setup, visibleServices]);
+    // Original service / staff display names (looked up against the
+    // loaded setup), used in the reschedule summary's "Former …" rows.
+    // These render only when the user changes the corresponding field
+    // away from the original — picking only a new time leaves them
+    // hidden, so the summary stays clean for the common case.
+    const formerService = useMemo(() => {
+        if (!isReschedule || !rescheduleContext || !setup)
+            return null;
+        return (setup.services.find((s) => s._id === rescheduleContext.serviceId) ?? null);
+    }, [isReschedule, rescheduleContext, setup]);
+    const formerStaffName = useMemo(() => {
+        if (!isReschedule || !rescheduleContext?.staffMemberId || !setup) {
+            return null;
+        }
+        return (setup.staff.find((s) => s._id === rescheduleContext.staffMemberId)
+            ?.name ?? null);
+    }, [isReschedule, rescheduleContext, setup]);
+    const serviceChanged = isReschedule &&
+        rescheduleContext != null &&
+        selectedServiceId !== rescheduleContext.serviceId;
+    const staffChanged = isReschedule &&
+        rescheduleContext != null &&
+        (selectedStaffId ?? null) !== (rescheduleContext.staffMemberId ?? null);
     const availableStaff = useMemo(() => {
         if (!setup || !selectedService) {
             return [];
@@ -84,13 +280,18 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
         return setup.staff.filter((staffMember) => selectedService.assignedStaffIds.includes(staffMember._id));
     }, [selectedService, setup]);
     useEffect(() => {
+        // Wait for availableStaff to populate before clearing — otherwise
+        // a pre-seeded staffMemberId (e.g. from rescheduleContext) gets
+        // wiped on the first render before the staff list arrives.
+        if (availableStaff.length === 0)
+            return;
         if (selectedStaffId && !availableStaff.some((staffMember) => staffMember._id === selectedStaffId)) {
             setSelectedStaffId(null);
         }
     }, [availableStaff, selectedStaffId]);
     const selectedStaff = useMemo(() => availableStaff.find((staffMember) => staffMember._id === selectedStaffId) ?? null, [availableStaff, selectedStaffId]);
     useEffect(() => {
-        if (!selectedServiceId) {
+        if (!selectedServiceId || selectedService?.publicBookingMode === 'async') {
             setAvailabilityByDate(new Map());
             setSelectedDate(null);
             return;
@@ -98,7 +299,14 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
         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);
@@ -116,7 +324,6 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
             .getPublicAvailableSlots({
             siteSlug,
             serviceId: selectedServiceId,
-            staffMemberId: selectedStaffId ?? undefined,
             startDate: monthStart,
             endDate: monthEnd,
         })
@@ -143,7 +350,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
             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(() => {
@@ -154,9 +361,9 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
         return () => {
             cancelled = true;
         };
-    }, [calendarMonth, client, selectedDate, selectedServiceId, selectedStaffId, siteSlug]);
+    }, [calendarMonth, client, selectedDate, selectedService?.publicBookingMode, selectedServiceId, selectedStaffId, siteSlug]);
     useEffect(() => {
-        if (!selectedServiceId) {
+        if (!selectedServiceId || selectedService?.publicBookingMode === 'async') {
             return;
         }
         const nextMonth = addMonths(calendarMonth, 1);
@@ -164,18 +371,71 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
             client,
             siteSlug,
             selectedServiceId,
-            selectedStaffId,
             calendarMonth: nextMonth,
             cacheRef: availabilityCacheRef,
         });
-    }, [calendarMonth, client, selectedServiceId, selectedStaffId, siteSlug]);
+    }, [calendarMonth, client, selectedService?.publicBookingMode, selectedServiceId, selectedStaffId, siteSlug]);
     useEffect(() => {
         setSelectedSlot(null);
         setPendingSlotKey(null);
         setHeldStaffId(null);
         setSuccess(null);
         setError(null);
-    }, [selectedDate, selectedServiceId, selectedStaffId]);
+        setPayment(null);
+        setPaymentAppointmentId(null);
+        if (selectedService?.publicBookingMode === 'async') {
+            setViewState('details');
+            // 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');
+        }
+    }, [selectedDate, selectedService?.publicBookingMode, selectedServiceId, selectedStaffId]);
+    useEffect(() => {
+        setIntakeResponses({});
+        setQuote(null);
+    }, [selectedServiceId]);
+    useEffect(() => {
+        if (!selectedServiceId ||
+            selectedService?.pricingMode !== 'calculated' ||
+            !isIntakeComplete) {
+            setQuote(null);
+            setIsQuoteLoading(false);
+            return;
+        }
+        let cancelled = false;
+        setIsQuoteLoading(true);
+        const handle = window.setTimeout(() => {
+            void client
+                .quotePublicBooking({
+                siteSlug,
+                serviceId: selectedServiceId,
+                intakeResponses,
+            })
+                .then((nextQuote) => {
+                if (!cancelled) {
+                    setQuote(nextQuote);
+                    setError(null);
+                }
+            })
+                .catch((nextError) => {
+                if (!cancelled) {
+                    setError(nextError instanceof Error ? nextError.message : 'Unable to calculate price.');
+                }
+            })
+                .finally(() => {
+                if (!cancelled)
+                    setIsQuoteLoading(false);
+            });
+        }, 300);
+        return () => {
+            cancelled = true;
+            window.clearTimeout(handle);
+        };
+    }, [client, intakeResponses, isIntakeComplete, selectedService?.pricingMode, selectedServiceId, siteSlug]);
     useEffect(() => {
         return () => {
             if (!holdId) {
@@ -225,9 +485,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
             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));
@@ -242,13 +500,39 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
                 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;
@@ -259,16 +543,174 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
         }, 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]);
-    const canAdvanceStep1 = true;
-    const canAdvanceStep2 = Boolean(selectedService);
-    const canAdvanceStep3 = Boolean(selectedDate && selectedSlot);
-    const canSubmit = Boolean(selectedService && selectedDate && selectedSlot && holdId && customerName.trim() && customerEmail.trim()) &&
-        !isSubmitting;
+    // Mobile 4-step gates. canAdvanceStepN = "the user can move PAST
+    // step N to step N+1". Step 1 (service) requires a pick. Step 2
+    // 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 = 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
+    // locations share the same handlers and state, so picking a slot in
+    // either place updates the widget identically. CSS hides the wrong
+    // copy per breakpoint via .bw-slots-mobile / .bw-slots-desktop.
+    // Re-mount the slots wrapper whenever the inputs that affect the
+    // slot list change so the CSS enter animation fires (.bw-slots-fade
+    // + 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: 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 ? 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 &&
+        (selectedService.pricingMode !== 'calculated' || quote) &&
+        customerName.trim() &&
+        isCustomerEmailValid) && !isSubmitting;
+    const submitBlockers = selectedService
+        ? getSubmitBlockers({
+            selectedService,
+            selectedServiceRequiresSlot,
+            selectedDate,
+            selectedSlot,
+            holdId,
+            isIntakeComplete,
+            intakeResponses,
+            selectedServicePath,
+            quote,
+            customerName,
+            customerEmail,
+            t,
+            locale,
+        })
+        : [];
+    function handleNotesInput(event) {
+        setCustomerNotes(event.currentTarget.value);
+    }
+    function renderNotesField(id, label, placeholder) {
+        return (_jsxs("div", { className: "bw-field bw-field--notes", children: [_jsx("label", { htmlFor: id, children: label }), _jsx("textarea", { id: id, rows: 3, maxLength: 500, value: customerNotes, onChange: handleNotesInput, onInput: handleNotesInput, placeholder: placeholder }), _jsxs("span", { className: "bw-char-count", "aria-live": "polite", children: [customerNotes.length, "/500"] })] }));
+    }
+    function renderSubmitHelp() {
+        if (!selectedService || canSubmit || payment || isSubmitting)
+            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 ? 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: [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 }));
+    }
+    function renderIntakeAndContact(idPrefix, idSuffix) {
+        const intakeFields = renderIntakeFields(idPrefix);
+        const contactFields = renderContactFields(idSuffix);
+        // 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) {
+            void client
+                .releasePublicBookingHold({ siteSlug, holdId, sessionToken })
+                .catch(() => undefined);
+        }
+        setSelectedServiceId(service._id);
+        setIsEditingService(false);
+        setPayment(null);
+        setPaymentAppointmentId(null);
+        if (service.publicBookingMode === 'async') {
+            setSelectedDate(null);
+            setSelectedSlot(null);
+            setHoldId(null);
+            setHoldExpiresAt(null);
+            setHeldStaffId(null);
+            setViewState('details');
+            // 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) {
         if (!selectedServiceId || !selectedDate) {
             return;
@@ -284,7 +726,7 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
         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);
@@ -313,6 +755,11 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
             setHoldExpiresAt(result.expiresAt);
             setHeldStaffId(reservationStaffId);
             setError(null);
+            // Auto-advance the desktop right pane to the details/form view
+            // once the hold is reserved. Mobile flow keeps the existing
+            // step-based navigation; this state change is harmless there
+            // because mobile CSS forces the details pane visible regardless.
+            setViewState('details');
         }
         catch (nextError) {
             setSelectedSlot(previousSlot);
@@ -320,32 +767,110 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
             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() {
+        if (holdId) {
+            await client
+                .releasePublicBookingHold({ siteSlug, holdId, sessionToken })
+                .catch(() => undefined);
         }
+        setSelectedSlot(null);
+        setHoldId(null);
+        setHoldExpiresAt(null);
+        setHeldStaffId(null);
+        setPendingSlotKey(null);
+        setViewState('slots');
+    }
+    function handleBackToServicePicker() {
+        setSelectedServiceId(null);
+        setSelectedDate(null);
+        setSelectedSlot(null);
+        setHoldId(null);
+        setHoldExpiresAt(null);
+        setHeldStaffId(null);
+        setPendingSlotKey(null);
+        setIsEditingService(false);
+        setPayment(null);
+        setPaymentAppointmentId(null);
+        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 || !selectedDate || !selectedSlot || !holdId) {
+        if (!selectedServiceId ||
+            !selectedService ||
+            (selectedServiceRequiresSlot && (!selectedDate || !selectedSlot || !holdId))) {
             return;
         }
         setIsSubmitting(true);
         setError(null);
+        const newStartTime = selectedDate && selectedSlot
+            ? Date.parse(`${selectedDate}T${selectedSlot.time}:00`)
+            : Date.now();
+        const newEndTime = selectedDate && selectedSlot
+            ? Date.parse(`${selectedDate}T${selectedSlot.endTime}:00`)
+            : newStartTime + selectedService.durationMinutes * 60 * 1000;
+        // Reschedule mode bypasses the public-create flow entirely.
+        // Service / staff / customer are already attached to the
+        // original appointment, so the host (admin path) or magic-link
+        // signed customer (public path) only needs to dispatch the new
+        // start/end. The hold is released as a courtesy since the slot
+        // is being committed via a different mutation that re-runs the
+        // conflict check itself.
+        if (isReschedule && onRescheduleSubmit) {
+            try {
+                await onRescheduleSubmit({ newStartTime, newEndTime });
+                setSuccess(t('successRescheduleConfirmed'));
+                setMobileStep(4);
+            }
+            catch (nextError) {
+                setError(nextError instanceof Error
+                    ? nextError.message
+                    : 'Unable to reschedule. Please try again.');
+            }
+            finally {
+                setIsSubmitting(false);
+            }
+            return;
+        }
         try {
-            await client.createPublicBooking({
+            const created = await client.createPublicBooking({
                 siteSlug,
                 serviceId: selectedServiceId,
-                staffMemberId: heldStaffId ?? selectedStaffId ?? selectedSlot.availableStaffIds[0],
-                startTime: Date.parse(`${selectedDate}T${selectedSlot.time}:00`),
-                endTime: Date.parse(`${selectedDate}T${selectedSlot.endTime}:00`),
-                timezone: selectedHeldStaff?.timezone ?? availableStaff[0]?.timezone ?? 'UTC',
+                staffMemberId: selectedServiceRequiresSlot
+                    ? heldStaffId ?? selectedStaffId ?? selectedSlot?.availableStaffIds[0]
+                    : undefined,
+                startTime: newStartTime,
+                endTime: newEndTime,
+                timezone: selectedHeldStaff?.timezone ?? availableStaff[0]?.timezone ?? setup?.workspaceTimezone ?? 'UTC',
                 deliveryMethod: selectedService.deliveryMethods[0] ?? 'in-person',
                 customerName: customerName.trim(),
                 customerEmail: customerEmail.trim(),
                 customerPhone: customerPhone.trim() || undefined,
                 customerNotes: customerNotes.trim() || undefined,
-                bookingHoldId: holdId,
-                bookingSessionToken: sessionToken,
+                intakeResponses,
+                quotedTotalCents: quote?.totalCents,
+                bookingHoldId: selectedServiceRequiresSlot ? holdId : undefined,
+                bookingSessionToken: selectedServiceRequiresSlot ? sessionToken : undefined,
             });
-            setSuccess('Booking confirmed.');
+            if (created.payment) {
+                setPayment(created.payment);
+                setPaymentAppointmentId(created.appointmentId);
+                setError(null);
+                return;
+            }
+            setSuccess(t('successBookingConfirmed'));
             setSelectedSlot(null);
             setPendingSlotKey(null);
             setHoldId(null);
@@ -355,164 +880,789 @@ export function BookingWidgetPanel({ title, description, mobileHeader, }) {
             setCustomerEmail('');
             setCustomerPhone('');
             setCustomerNotes('');
+            setIntakeResponses({});
+            setQuote(null);
+            setPayment(null);
+            setPaymentAppointmentId(null);
             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." }) }));
-    }
-    if (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: "You're All Set!" }), _jsx("p", { className: "bw-done-text", children: "Your booking request has been submitted. We'll follow up using the email you provided if anything needs confirmation." }), _jsx("button", { type: "button", className: "bw-btn-primary", onClick: () => {
-                            setSuccess(null);
-                            setSelectedDate(findFirstAvailableDate(availabilityByDate, calendarMonth));
-                        }, children: "Book another visit" })] }) }));
-    }
-    return (_jsxs("section", { className: "bw", 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 || 'Schedule your visit' }), _jsx("h2", { className: "bw-title bw-title--mobile", children: 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] }), _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("label", { className: "bw-label", children: "Select Specialist" }), _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 ? (_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 available specialist' }), _jsx("span", { className: "bw-staff-trigger-desc", children: selectedStaff ? selectedStaff.timezone : 'First available team member' })] })] }), _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 specialist 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 specialist" })] })] }), 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: _jsx("span", { className: "bw-staff-initials", children: getInitials(staffMember.name) }) }), _jsxs("span", { className: "bw-staff-option-info", children: [_jsx("span", { className: "bw-staff-option-name", children: staffMember.name }), _jsx("span", { className: "bw-staff-option-desc", children: staffMember.timezone })] })] }, staffMember._id)))] })] })) : null] }), _jsxs("div", { className: "bw-service-picker", children: [_jsx("div", { className: "bw-section-divider" }), _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: setup.services.map((service) => {
+        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: 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: 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 ? 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: t('successCtaBackHome') }))] }) }));
+    }
+    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
+                                            ? 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("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: () => {
-                                                                        setSelectedServiceId(service._id);
-                                                                        setMobileStep(2);
-                                                                    }, children: [_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 }), _jsx("span", { className: "bw-svc-meta", children: formatDuration(service.durationMinutes) }), service.description ? (_jsx("span", { className: "bw-svc-desc", children: service.description })) : null] }), _jsx("span", { className: "bw-svc-price", children: currencyFormatter(service.currency).format(service.priceCents / 100) })] }, service._id));
-                                                            }) }) }) })] })] }), _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" }), setup.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: () => setSelectedServiceId(service._id), children: [_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 }), _jsx("span", { className: "bw-svc-meta", children: formatDuration(service.durationMinutes) }), service.description ? (_jsx("span", { className: "bw-svc-desc", children: service.description })) : null] }), _jsx("span", { className: "bw-svc-price", children: currencyFormatter(service.currency).format(service.priceCents / 100) })] }), _jsx("div", { className: "bw-row-divider" })] }, service._id));
-                                        })] })] }), _jsx("div", { className: "bw-col bw-col--center", children: _jsxs("div", { className: "bw-cal-card", 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: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].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, selectedService && isAvailabilityLoading ? (_jsx(AvailabilitySkeleton, {})) : null, selectedService && selectedDate && !isAvailabilityLoading ? (selectedDateSlots.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "bw-time-divider" }), _jsx("div", { className: "bw-time-slots", children: selectedDateSlots.map((slot) => {
-                                                    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' : ''}`, 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, _jsxs("div", { className: "bw-timezone", children: [_jsx(GlobeIcon, {}), _jsx("span", { children: selectedHeldStaff?.timezone ?? selectedStaff?.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-form", children: [_jsxs("div", { className: "bw-form-fields", children: [_jsxs("div", { className: "bw-field", children: [_jsxs("label", { htmlFor: "bw-name", children: ["Full name ", _jsx("span", { className: "bw-required", children: "*" })] }), _jsx("input", { id: "bw-name", value: customerName, onChange: (event) => setCustomerName(event.target.value), placeholder: "John Doe" })] }), _jsxs("div", { className: "bw-field", children: [_jsxs("label", { htmlFor: "bw-email", children: ["Email ", _jsx("span", { className: "bw-required", children: "*" })] }), _jsx("input", { id: "bw-email", type: "email", value: customerEmail, onChange: (event) => setCustomerEmail(event.target.value), placeholder: "jane@example.com" })] }), _jsxs("div", { className: "bw-field", children: [_jsx("label", { htmlFor: "bw-phone", children: "Phone" }), _jsx("input", { id: "bw-phone", value: customerPhone, onChange: (event) => setCustomerPhone(event.target.value), placeholder: "+1 (555) 000-0000" })] })] }), _jsxs("div", { className: "bw-field bw-field--notes", children: [_jsx("label", { htmlFor: "bw-notes", children: "Additional notes" }), _jsx("textarea", { id: "bw-notes", rows: 3, maxLength: 500, value: customerNotes, onChange: (event) => setCustomerNotes(event.target.value), placeholder: "Any preferences or special requests..." }), _jsxs("span", { className: "bw-char-count", children: [customerNotes.length, "/500"] })] }), selectedService ? (_jsxs("div", { className: "bw-summary", children: [_jsx("span", { className: "bw-summary-title", children: "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, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Service" }), _jsx("span", { className: "bw-summary-val", children: selectedService.name })] }), _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Specialist" }), _jsx("span", { className: "bw-summary-val", 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", children: formatReadableDate(selectedDate) })] })) : null, selectedSlot ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Time" }), _jsx("span", { className: "bw-summary-val", children: formatTimeLabel(selectedSlot.time) })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Duration" }), _jsx("span", { className: "bw-summary-val", children: formatDuration(selectedService.durationMinutes) })] }), _jsxs("div", { className: "bw-summary-row bw-summary-total", children: [_jsx("span", { children: "Estimated total" }), _jsx("span", { className: "bw-summary-val", children: currencyFormatter(selectedService.currency).format(selectedService.priceCents / 100) })] })] })] })) : null, error ? _jsx("div", { className: "bw-error", children: error }) : null, _jsxs("button", { type: "button", className: "bw-confirm-btn", disabled: !canSubmit, onClick: () => void handleConfirmBooking(), children: [_jsx("span", { children: isSubmitting ? 'Booking...' : '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: "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, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Service" }), _jsx("span", { className: "bw-summary-val", children: selectedService.name })] }), _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Specialist" }), _jsx("span", { className: "bw-summary-val", 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", children: formatReadableDate(selectedDate) })] })) : null, selectedSlot ? (_jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Time" }), _jsx("span", { className: "bw-summary-val", children: formatTimeLabel(selectedSlot.time) })] })) : null, _jsxs("div", { className: "bw-summary-row", children: [_jsx("span", { children: "Duration" }), _jsx("span", { className: "bw-summary-val", children: formatDuration(selectedService.durationMinutes) })] }), _jsxs("div", { className: "bw-summary-row bw-summary-total", children: [_jsx("span", { children: "Estimated total" }), _jsx("span", { className: "bw-summary-val", children: currencyFormatter(selectedService.currency).format(selectedService.priceCents / 100) })] })] })] })) : null, _jsxs("div", { className: "bw-footer-btns", children: [mobileStep > 1 ? (_jsx("button", { type: "button", className: "bw-footer-back", onClick: () => setMobileStep((step) => Math.max(1, step - 1)), children: _jsx(ArrowLeftIcon, {}) })) : null, mobileStep < 4 ? (_jsxs("button", { type: "button", className: "bw-footer-next", disabled: (mobileStep === 1 && !canAdvanceStep1) ||
+                                                                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, {})] })) : (_jsxs("button", { type: "button", className: "bw-footer-next", disabled: !canSubmit, onClick: () => void handleConfirmBooking(), children: [_jsx("span", { children: isSubmitting ? 'Booking...' : 'Confirm Booking' }), !isSubmitting ? _jsx(ArrowRightIcon, {}) : null] }))] })] })] }));
+                                    (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
+                                                ? t('btnRescheduling')
+                                                : t('btnBooking')
+                                            : isReschedule
+                                                ? t('btnConfirmReschedule')
+                                                : selectedServiceRequiresPayment
+                                                    ? 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
+ * once wired) when the selected service has paymentMode === 'full'
+ * or 'deposit'. Visuals only today: real implementation will mount
+ * a Stripe PaymentElement inside .bw-pay-card-slot and gate the
+ * Confirm CTA on a successful charge. Deposit mode shows the split
+ * (charged today vs at-visit) so the customer sees what's actually
+ * coming out of their card now.
+ *
+ * TODO(eric): Eric is adding a Stripe widget to the LEFT side of
+ * the details view (alongside the summary, not the form). When you
+ * pick this up:
+ *   1. Move/replace this PaymentPanel into the left summary pane
+ *      (.bw-details-summary) so the Stripe Element sits where the
+ *      customer reads what they're paying for. The right form pane
+ *      stays as-is — name/email/phone/notes only.
+ *   2. Backend gap: getPublicBookingSetup currently strips the
+ *      payment fields. Surface paymentMode, depositCents,
+ *      requiresPayment, and the workspace's Stripe Connect account
+ *      handle (so the PaymentElement can be configured against the
+ *      right tenant) in the public response + the
+ *      PublicBookingSetup type.
+ *   3. Mount Elements provider scoped to the widget; create a
+ *      PaymentIntent on hold success (server-side mutation pinned
+ *      to the bookingHoldId so the amount can't be tampered with).
+ *   4. Gate createPublicAppointment behind paymentIntent.status
+ *      === 'succeeded'. On failure: keep the hold for one retry.
+ *   5. Confirm CTA copy already branches on forcedState — wire the
+ *      same branch on the real `service.requiresPayment` field.
+ *   6. Visual reference: this PaymentPanel + the dev preview pills
+ *      ('Pay full' / 'Pay deposit') in dev/booking-widget-preview
+ *      show the design intent for the summary card layout. Reuse
+ *      the .bw-pay-summary chrome on the left side; the
+ *      .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, 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: 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: 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
+        .filter((section) => !section.showWhenPath || section.showWhenPath === mode)
+        .every((section) => section.fields.every((field) => {
+        const minItems = field.type === 'repeatable-group' && field.id === 'boxes'
+            ? Math.max(1, Math.round(readFiniteNumber(responses.box_count, 1)))
+            : undefined;
+        return isRequiredIntakeFieldComplete(field, responses[field.id], minItems);
+    }));
+}
+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(t('blockerDateTime'));
+    }
+    if (!customerName.trim())
+        blockers.push(t('blockerContactName'));
+    if (!customerEmail.trim()) {
+        blockers.push(t('blockerContactEmail'));
+    }
+    else if (!isValidEmailAddress(customerEmail)) {
+        blockers.push(t('blockerContactEmailInvalid'));
+    }
+    if (!isIntakeComplete && selectedService.intakeForm) {
+        blockers.push(...getMissingRequiredIntakeLabels(selectedService.intakeForm, intakeResponses, selectedServicePath, t, locale));
+    }
+    if (selectedService.pricingMode === 'calculated' &&
+        isIntakeComplete &&
+        !quote) {
+        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, t, locale = DEFAULT_LOCALE) {
+    const missing = [];
+    for (const section of form.sections) {
+        if (section.showWhenPath && section.showWhenPath !== mode)
+            continue;
+        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, t, locale, minItems);
+        }
+    }
+    return missing;
+}
+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, locale)}`);
+        }
+        return;
+    }
+    const fieldLabel = getIntakeFieldLabel(field, locale);
+    const items = Array.isArray(value) ? value : [];
+    const requiredItemCount = Math.max(minItems ?? 1, items.length || 1);
+    if (items.length < requiredItemCount) {
+        missing.push(`${sectionLabel}: ${fieldLabel}`);
+    }
+    for (let index = 0; index < requiredItemCount; index += 1) {
+        const item = items[index];
+        const record = item && typeof item === 'object' && !Array.isArray(item)
+            ? item
+            : {};
+        for (const child of field.fields ?? []) {
+            if (!child.required)
+                continue;
+            if (!isRequiredIntakeFieldComplete(child, record[child.id])) {
+                missing.push(`${sectionLabel}: ${t('repeatItemLabel', { index: index + 1 })} ${getIntakeFieldLabel(child, locale)}`);
+            }
+        }
+    }
+}
+function getIntakeSectionLabel(section, locale = DEFAULT_LOCALE) {
+    return pickLocaleField(section, 'title', locale) ?? section.id;
+}
+function getIntakeFieldLabel(field, locale = DEFAULT_LOCALE) {
+    return pickLocaleField(field, 'label', locale) ?? field.id;
+}
+function isRequiredIntakeFieldComplete(field, value, minItems) {
+    if (!field.required)
+        return true;
+    if (field.type === 'checkbox') {
+        return value === true;
+    }
+    if (field.type === 'repeatable-group') {
+        if (!Array.isArray(value) || value.length < (minItems ?? 1))
+            return false;
+        return value.every((item) => {
+            const record = item && typeof item === 'object' && !Array.isArray(item)
+                ? item
+                : {};
+            return (field.fields ?? []).every((child) => isRequiredIntakeFieldComplete(child, record[child.id]));
+        });
+    }
+    if (field.type === 'number') {
+        if (typeof value === 'number')
+            return Number.isFinite(value);
+        if (typeof value === 'string')
+            return value.trim().length > 0 && Number.isFinite(Number(value));
+        return false;
+    }
+    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;
+    if (typeof value === 'string' && value.trim()) {
+        const parsed = Number(value);
+        if (Number.isFinite(parsed))
+            return parsed;
+    }
+    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 = 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: [_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: 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') {
+        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] }));
+    }
+    return (_jsxs("div", { className: "bw-field", children: [_jsxs("label", { htmlFor: id, children: [label, field.required ? _jsx("span", { className: "bw-required", children: " *" }) : null] }), _jsx("input", { id: id, type: field.type === 'email' ? 'email' : field.type === 'number' ? 'number' : 'text', min: field.min, max: field.max, required: field.required, value: stringValue, placeholder: field.placeholder, onChange: (event) => {
+                    onChange(field.type === 'number'
+                        ? event.target.value === ''
+                            ? ''
+                            : Number(event.target.value)
+                        : event.target.value);
+                } }), field.helpText ? _jsx("p", { className: "bw-help", children: field.helpText }) : null] }));
 }
-function BookingWidgetSkeleton() {
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "bw-header", children: [_jsx("div", { className: "bw-skel bw-skel--title" }), _jsx("div", { className: "bw-skel bw-skel--text bw-skel--text-lg" })] }), _jsxs("div", { className: "bw-body bw-skel-desktop", children: [_jsxs("div", { className: "bw-col", children: [_jsx("div", { className: "bw-skel bw-skel--input" }), _jsx("div", { className: "bw-skel-list", children: Array.from({ length: 5 }).map((_, index) => (_jsx("div", { className: "bw-skel bw-skel--card" }, index))) })] }), _jsxs("div", { className: "bw-col", children: [_jsx("div", { className: "bw-skel bw-skel--calendar" }), _jsx("div", { className: "bw-skel-slots", children: _jsx("div", { className: "bw-skel-slots-grid", children: Array.from({ length: 8 }).map((_, index) => (_jsx("div", { className: "bw-skel bw-skel--slot" }, index))) }) })] }), _jsxs("div", { className: "bw-col", children: [_jsx("div", { className: "bw-skel bw-skel--input" }), _jsx("div", { className: "bw-skel bw-skel--input" }), _jsx("div", { className: "bw-skel bw-skel--input" }), _jsx("div", { className: "bw-skel bw-skel--textarea" })] })] }), _jsxs("div", { className: "bw-skel-mobile", children: [_jsx("div", { className: "bw-skel bw-skel--title" }), _jsx("div", { className: "bw-skel bw-skel--input" }), _jsx("div", { className: "bw-skel bw-skel--card" }), _jsx("div", { className: "bw-skel bw-skel--card" }), _jsx("div", { className: "bw-skel bw-skel--card" })] })] }));
+function StripePaymentBlock({ payment, appointmentId, showInlineButton = true, actionTarget, onSuccess, onError, }) {
+    const stripePromise = useMemo(() => getStripePromise(payment.publishableKey, payment.connectAccountId), [payment.connectAccountId, payment.publishableKey]);
+    return (_jsx(Elements, { stripe: stripePromise, options: {
+            clientSecret: payment.clientSecret,
+        }, 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);
+    async function handlePay() {
+        if (!stripe || !elements)
+            return;
+        setIsPaying(true);
+        const result = await stripe.confirmPayment({
+            elements,
+            confirmParams: {
+                return_url: `${window.location.origin}${window.location.pathname}?appointment_id=${appointmentId ?? ''}`,
+            },
+            redirect: 'if_required',
+        });
+        setIsPaying(false);
+        if (result.error) {
+            onError(result.error.message ?? 'Payment failed. Please try again.');
+            return;
+        }
+        onSuccess();
+    }
+    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, locale = 'en-US') {
+    if (!service)
+        return '';
+    return formatServicePrice(service, undefined, locale);
+}
+function formatServicePrice(service, quote, locale = 'en-US') {
+    if (service.pricingMode === 'calculated') {
+        if (quote) {
+            return currencyFormatter(quote.currency, locale).format(quote.totalCents / 100);
+        }
+        return 'Price calculated after details';
+    }
+    return currencyFormatter(service.currency, locale).format(service.priceCents / 100);
+}
+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 = pickLocaleField(warning, 'title', locale);
+    const body = pickLocaleField(warning, 'body', locale);
+    if (!title || !body)
+        return null;
+    return {
+        title,
+        body,
+        linkHref: readString(warning.linkHref) ?? undefined,
+        linkLabel: readString(warning.linkLabelEs) ?? readString(warning.linkLabel) ?? undefined,
+    };
+}
+function readRecord(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value))
+        return null;
+    return value;
+}
+function readString(value) {
+    return typeof value === 'string' && value.trim() ? value : null;
+}
+// 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() {
-    return (_jsx("div", { className: "bw-skel-slots", children: _jsx("div", { className: "bw-skel-slots-grid", children: Array.from({ length: 8 }).map((_, index) => (_jsx("div", { className: "bw-skel bw-skel--slot" }, index))) }) }));
+    // Reuses .bw-time-slots so the skeleton inherits the same layout
+    // overrides as the real slots — vertical 1-col on desktop (via the
+    // .bw-slots-desktop scope), 4-col grid on mobile (default). Pill
+    // dimensions match the rendered .bw-slot.
+    return (_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))) }));
 }
-function mobileStepTitle(step) {
+/**
+ * Compact "Wed, May 6 · 3:00 PM – 5:00 PM" label used in reschedule
+ * summary's "Former time" row. Uses local timezone of the browser;
+ * the backend stores absolute ms timestamps so this renders correctly
+ * for the host's calendar.
+ */
+function formatFormerSlot(startMs, endMs, locale = 'en-US') {
+    const start = new Date(startMs);
+    const end = new Date(endMs);
+    const dateLabel = start.toLocaleDateString(locale, {
+        weekday: 'short',
+        month: 'short',
+        day: 'numeric',
+    });
+    const timeOpts = {
+        hour: 'numeric',
+        minute: '2-digit',
+    };
+    return `${dateLabel} · ${start.toLocaleTimeString(locale, timeOpts)} – ${end.toLocaleTimeString(locale, timeOpts)}`;
+}
+/**
+ * Possessive form of a name. "Eric Lan" → "Eric Lan's", "James" →
+ * "James'". Splits on the full string's last char so single-name
+ * customers (and last-name-only handles, etc.) still resolve cleanly.
+ */
+function formatPossessive(name) {
+    const trimmed = name.trim();
+    if (!trimmed)
+        return trimmed;
+    const last = trimmed[trimmed.length - 1];
+    if (last === 's' || last === 'S')
+        return `${trimmed}'`;
+    return `${trimmed}'s`;
+}
+function mobileStepTitle(step, t) {
     switch (step) {
         case 1:
-            return 'Schedule your visit';
+            return t('stepChooseService');
         case 2:
-            return 'Select your service';
+            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) {
     if (minutes >= 60 && minutes % 60 === 0) {
-        return `${minutes / 60} hr`;
+        const hours = minutes / 60;
+        return `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
     }
     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,
@@ -545,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);
@@ -594,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),
         };
@@ -620,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)),
     });
@@ -638,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);
@@ -667,10 +1818,22 @@ function ArrowRightIcon() {
 function CheckIcon() {
     return iconPath('M20 6 9 17l-5-5');
 }
+function XIcon() {
+    return iconPath('M18 6 6 18M6 6l12 12');
+}
+function WarningIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" }), _jsx("path", { d: "M12 9v4" }), _jsx("path", { d: "M12 17h.01" })] }));
+}
 function UserIcon() {
     return iconPath('M20 21a8 8 0 0 0-16 0m8-10a4 4 0 1 0 0-8 4 4 0 0 0 0 8');
 }
 function GlobeIcon() {
     return iconPath('M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 0c2.5 2.7 4 6.2 4 10s-1.5 7.3-4 10c-2.5-2.7-4-6.2-4-10s1.5-7.3 4-10ZM2 12h20');
 }
+function CalendarIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }), _jsx("path", { d: "M16 2v4M8 2v4M3 10h18" })] }));
+}
+function ClockIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 6v6l4 2" })] }));
+}
 //# sourceMappingURL=booking-widget.js.map