@sonordev/site-kit 6.5.0 → 7.0.0

package/dist/chunk-OO2GZ272.js

@@ -0,0 +1,1241 @@
+'use client';
+import { detectTimezone, releaseSlotHold, fetchBookingTypeDetails, fetchBookingTypes, fetchAvailability, createSlotHold, createBooking, formatDuration, formatDate, formatTime, prepareMeeting } from './chunk-M4ZY2FVB.js';
+import { useState, useRef, useMemo, useCallback, useEffect, useId } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function MeetingFormatStep({ options, busy, format, address, onFormatChange, onAddressChange, onContinue, onBack }) {
+  const id = useId();
+  const choices = [
+    { value: "virtual", label: "Virtual", description: "Meet online with a Google Meet link." },
+    { value: "office", label: "Come to us", description: "Meet in person at our office." },
+    { value: "client_location", label: "We come to you", description: `We can meet at your location within about ${options.travel_radius_miles} miles of our office.` }
+  ];
+  return /* @__PURE__ */ jsxs("form", { onSubmit: (e) => {
+    e.preventDefault();
+    if (format) onContinue(format, format === "client_location" ? address : void 0);
+  }, className: "bw-step sk-meeting-step", children: [
+    onBack && /* @__PURE__ */ jsx("button", { type: "button", className: "bw-back sk-meeting-change", onClick: onBack, disabled: busy, children: "\u2190 Change service" }),
+    /* @__PURE__ */ jsx("h2", { className: "bw-heading", children: "How would you like to meet?" }),
+    /* @__PURE__ */ jsxs("fieldset", { disabled: busy, className: "sk-meeting-choices", children: [
+      /* @__PURE__ */ jsx("legend", { className: "sk-meeting-legend", children: "Meeting format" }),
+      choices.map((choice) => /* @__PURE__ */ jsxs("label", { className: `sk-meeting-choice ${format === choice.value ? "sk-meeting-selected" : ""}`, children: [
+        /* @__PURE__ */ jsx("input", { type: "radio", name: `${id}-format`, value: choice.value, checked: format === choice.value, onChange: () => onFormatChange(choice.value), required: true }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          /* @__PURE__ */ jsx("strong", { children: choice.label }),
+          /* @__PURE__ */ jsx("span", { children: choice.description })
+        ] })
+      ] }, choice.value))
+    ] }),
+    format === "office" && /* @__PURE__ */ jsxs("div", { className: "sk-meeting-address", children: [
+      /* @__PURE__ */ jsx("p", { children: options.office_address }),
+      /* @__PURE__ */ jsx("p", { children: options.office_instructions }),
+      /* @__PURE__ */ jsx("a", { href: `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(options.office_address)}`, target: "_blank", rel: "noopener noreferrer", children: "Get directions" })
+    ] }),
+    format === "client_location" && /* @__PURE__ */ jsxs("fieldset", { disabled: busy, className: "bw-form sk-meeting-fields", children: [
+      /* @__PURE__ */ jsx("legend", { children: "Your meeting address" }),
+      [
+        ["street", "Street address", "street-address"],
+        ["unit", "Suite or unit (optional)", "address-line2"],
+        ["city", "City", "address-level2"],
+        ["region", "State or region", "address-level1"],
+        ["postalCode", "Postal code", "postal-code"],
+        ["country", "Country", "country-name"]
+      ].map(([key, label, autocomplete]) => /* @__PURE__ */ jsxs("div", { className: "bw-field", children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: `${id}-${key}`, children: label }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: `${id}-${key}`,
+            value: address[key],
+            required: key !== "unit",
+            maxLength: 200,
+            autoComplete: autocomplete,
+            onChange: (e) => onAddressChange({ ...address, [key]: e.target.value })
+          }
+        )
+      ] }, key)),
+      /* @__PURE__ */ jsxs("div", { className: "bw-field", children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: `${id}-notes`, children: "Parking or access notes (optional)" }),
+        /* @__PURE__ */ jsx("textarea", { id: `${id}-notes`, value: address.notes, maxLength: 2e3, onChange: (e) => onAddressChange({ ...address, notes: e.target.value }) })
+      ] }),
+      options.travel_review_required && /* @__PURE__ */ jsx("p", { children: "We\u2019ll reserve your requested time and confirm after checking travel arrangements." })
+    ] }),
+    /* @__PURE__ */ jsx("button", { className: "bw-submit", type: "submit", disabled: !format || busy, children: busy ? "Checking meeting details\u2026" : "Choose a time" }),
+    /* @__PURE__ */ jsx("style", { children: `
+      .sk-meeting-choices { border: 0; padding: 0; margin: 20px 0; display: grid; gap: 10px; }
+      .sk-meeting-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+      .sk-meeting-choice { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--sk-border); border-radius: var(--sk-radius); cursor: pointer; background: var(--sk-surface); }
+      .sk-meeting-choice input { margin-top: 4px; accent-color: var(--sk-primary); }
+      .sk-meeting-choice strong { display: block; color: var(--sk-text-primary); }
+      .sk-meeting-choice span span { display: block; margin-top: 4px; font-size: 14px; color: var(--sk-text-secondary); }
+      .sk-meeting-selected { border-color: var(--sk-primary); background: var(--sk-primary-light); }
+      .sk-meeting-address { padding: 16px; background: var(--sk-surface); border-radius: var(--sk-radius); margin-bottom: 16px; white-space: pre-wrap; }
+      .sk-meeting-address a { display: inline-block; margin-top: 8px; color: var(--sk-primary); }
+      .sk-meeting-fields { border: 0; padding: 0; margin-bottom: 20px; }
+      .sk-meeting-fields legend { margin-bottom: 12px; font-weight: 600; }
+      .sk-meeting-step .bw-submit { width: 100%; }
+    ` })
+  ] });
+}
+function CalendarPlusIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx("rect", { x: "1.5", y: "2.5", width: "13", height: "12", rx: "1.5", stroke: "currentColor", strokeWidth: "1.2" }),
+    /* @__PURE__ */ jsx("path", { d: "M1.5 6.5H14.5", stroke: "currentColor", strokeWidth: "1.2" }),
+    /* @__PURE__ */ jsx("path", { d: "M5 1V4M11 1V4", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 9V12M6.5 10.5H9.5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" })
+  ] });
+}
+function AddToCalendar({ result }) {
+  if (result.booking.status === "pending") return null;
+  if (result.invitation === "google") {
+    const host = result.booking.hostName?.trim();
+    return /* @__PURE__ */ jsx("p", { className: "bw-invite-notice", children: host ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      "Your calendar invite is on its way from ",
+      /* @__PURE__ */ jsx("strong", { children: host }),
+      "."
+    ] }) : "Your calendar invite is on its way." });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("p", { className: "bw-cal-links-label", children: "Add to your calendar" }),
+    /* @__PURE__ */ jsxs("div", { className: "bw-cal-links", children: [
+      /* @__PURE__ */ jsxs("a", { href: result.calendarLinks.google, target: "_blank", rel: "noopener noreferrer", className: "bw-cal-link", children: [
+        /* @__PURE__ */ jsx(CalendarPlusIcon, {}),
+        " Google"
+      ] }),
+      /* @__PURE__ */ jsxs("a", { href: result.calendarLinks.outlook, target: "_blank", rel: "noopener noreferrer", className: "bw-cal-link", children: [
+        /* @__PURE__ */ jsx(CalendarPlusIcon, {}),
+        " Outlook"
+      ] }),
+      /* @__PURE__ */ jsxs("a", { href: result.calendarLinks.ics, download: true, className: "bw-cal-link", children: [
+        /* @__PURE__ */ jsx(CalendarPlusIcon, {}),
+        " iCal"
+      ] })
+    ] })
+  ] });
+}
+
+// src/sync/booking-flow.ts
+function expiredBookingContext(meeting, hold, now = Date.now()) {
+  if (hold) return Date.parse(hold.expiresAt) <= now ? "hold" : null;
+  return meeting && Date.parse(meeting.expiresAt) <= now ? "meeting" : null;
+}
+function bookingRecoveryFromError(error) {
+  const message = error instanceof Error ? error.message : "";
+  if (/meeting details expired|choose how you.d like to meet first/i.test(message)) return "meeting";
+  if (/time reservation expired|invalid slot hold|meeting details changed/i.test(message)) return "hold";
+  return null;
+}
+var DEFAULT_API_URL = "https://api.sonor.io";
+var DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isBeforeDay(a, b) {
+  const ac = new Date(a.getFullYear(), a.getMonth(), a.getDate());
+  const bc = new Date(b.getFullYear(), b.getMonth(), b.getDate());
+  return ac < bc;
+}
+function calendarDays(year, month) {
+  const first = new Date(year, month, 1);
+  const last = new Date(year, month + 1, 0);
+  const cells = [];
+  for (let i = 0; i < first.getDay(); i++) cells.push(null);
+  for (let d = 1; d <= last.getDate(); d++) cells.push(new Date(year, month, d));
+  return cells;
+}
+function toLocalDateStr(d) {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+function ChevronLeft() {
+  return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M12.5 15L7.5 10L12.5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function ChevronRight() {
+  return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M7.5 5L12.5 10L7.5 15", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function ClockIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.2" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 4.5V8L10 10", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] });
+}
+function GlobeIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.2" }),
+    /* @__PURE__ */ jsx("path", { d: "M1.5 8H14.5", stroke: "currentColor", strokeWidth: "1.2" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 1.5C9.66 3.34 10.61 5.62 10.61 8C10.61 10.38 9.66 12.66 8 14.5C6.34 12.66 5.39 10.38 5.39 8C5.39 5.62 6.34 3.34 8 1.5Z", stroke: "currentColor", strokeWidth: "1.2" })
+  ] });
+}
+function CheckCircleIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "56", height: "56", viewBox: "0 0 56 56", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "28", cy: "28", r: "28", fill: "var(--sk-primary)" }),
+    /* @__PURE__ */ jsx("path", { d: "M18 28.5L24.5 35L38 21.5", stroke: "white", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] });
+}
+function ArrowLeftIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M10 3L5 8L10 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function SpinnerIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "bw-spinner", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeDasharray: "50.265", strokeDashoffset: "25", opacity: "0.3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeDasharray: "50.265", strokeDashoffset: "37.7" })
+  ] });
+}
+function BookingWidget({
+  orgSlug,
+  apiKey: propApiKey,
+  apiUrl: propApiUrl,
+  bookingTypeSlug,
+  timezone: propTimezone,
+  className = "",
+  daysToShow = 60,
+  onBookingComplete,
+  onError,
+  hideTypeSelector = false,
+  autoSelectFirstDay = true,
+  styles = {}
+}) {
+  const apiKey = propApiKey || (typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0);
+  const apiUrl = propApiUrl || (typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ : void 0) || DEFAULT_API_URL;
+  const [step, setStep] = useState(bookingTypeSlug ? "datetime" : "type");
+  const [loading, setLoading] = useState(false);
+  const [slotsLoading, setSlotsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [bookingTypes, setBookingTypes] = useState([]);
+  const [selectedType, setSelectedType] = useState(null);
+  const [viewMonth, setViewMonth] = useState(() => /* @__PURE__ */ new Date());
+  const [selectedDate, setSelectedDate] = useState(null);
+  const [slots, setSlots] = useState([]);
+  const [selectedSlot, setSelectedSlot] = useState(null);
+  const [confirmedSlot, setConfirmedSlot] = useState(false);
+  const [hold, setHold] = useState(null);
+  const [guestInfo, setGuestInfo] = useState({ name: "", email: "" });
+  const [bookingResult, setBookingResult] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [meeting, setMeeting] = useState(null);
+  const [meetingFormat, setMeetingFormat] = useState(null);
+  const [meetingAddress, setMeetingAddress] = useState({ street: "", city: "", region: "", postalCode: "", country: "United States", unit: "", notes: "" });
+  const [recovery, setRecovery] = useState(null);
+  const [sessionId] = useState(() => `bw-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+  const requestRef = useRef(0);
+  const busyRef = useRef(false);
+  const bookingInFlightRef = useRef(false);
+  const holdRef = useRef(null);
+  const onErrorRef = useRef(onError);
+  onErrorRef.current = onError;
+  const [autoProbing, setAutoProbing] = useState(false);
+  const probeRef = useRef(0);
+  const prefetchedRef = useRef(null);
+  const slotsRef = useRef(null);
+  const today = useMemo(() => {
+    const d = /* @__PURE__ */ new Date();
+    d.setHours(0, 0, 0, 0);
+    return d;
+  }, []);
+  const timezone = useMemo(() => propTimezone || detectTimezone(), [propTimezone]);
+  const shortTz = useMemo(() => {
+    try {
+      const parts = Intl.DateTimeFormat("en-US", { timeZone: timezone, timeZoneName: "short" }).formatToParts(/* @__PURE__ */ new Date());
+      return parts.find((p) => p.type === "timeZoneName")?.value || timezone;
+    } catch {
+      return timezone;
+    }
+  }, [timezone]);
+  const days = useMemo(() => calendarDays(viewMonth.getFullYear(), viewMonth.getMonth()), [viewMonth]);
+  const maxDate = useMemo(() => {
+    const d = new Date(today);
+    d.setDate(d.getDate() + daysToShow);
+    return d;
+  }, [today, daysToShow]);
+  const setActiveHold = useCallback((value) => {
+    holdRef.current = value;
+    setHold(value);
+  }, []);
+  const resetScheduling = useCallback((nextStep, clearMeeting = false) => {
+    ++requestRef.current;
+    const previous = holdRef.current;
+    setActiveHold(null);
+    if (previous) releaseSlotHold(previous.holdId, apiUrl, apiKey).catch(() => {
+    });
+    setSelectedDate(null);
+    setSelectedSlot(null);
+    setConfirmedSlot(false);
+    setSlots([]);
+    setSlotsLoading(false);
+    prefetchedRef.current = null;
+    if (clearMeeting) setMeeting(null);
+    setRecovery(null);
+    setError(null);
+    setStep(nextStep);
+  }, [apiUrl, apiKey, setActiveHold]);
+  const reportRequestError = useCallback((err) => {
+    setRecovery(bookingRecoveryFromError(err));
+    setError(err.message);
+    onErrorRef.current?.(err);
+  }, []);
+  useEffect(() => () => {
+    ++requestRef.current;
+    if (holdRef.current && !bookingInFlightRef.current) {
+      releaseSlotHold(holdRef.current.holdId, apiUrl, apiKey).catch(() => {
+      });
+    }
+    holdRef.current = null;
+  }, [apiUrl, apiKey]);
+  useEffect(() => {
+    let cancelled = false;
+    ++requestRef.current;
+    busyRef.current = false;
+    bookingInFlightRef.current = false;
+    resetScheduling(bookingTypeSlug ? "datetime" : "type", true);
+    setSelectedType(null);
+    setMeetingFormat(null);
+    setBookingResult(null);
+    setSubmitting(false);
+    if (bookingTypeSlug) {
+      setLoading(true);
+      fetchBookingTypeDetails(bookingTypeSlug, orgSlug, apiUrl, apiKey).then((type) => {
+        if (!cancelled) {
+          setSelectedType(type);
+          setStep(type.meeting_options ? "format" : "datetime");
+        }
+      }).catch((err) => {
+        if (!cancelled) reportRequestError(err);
+      }).finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    } else {
+      setLoading(true);
+      fetchBookingTypes(orgSlug, apiUrl, apiKey).then((types) => {
+        if (!cancelled) setBookingTypes(types.filter((t) => t.is_active));
+      }).catch((err) => {
+        if (!cancelled) reportRequestError(err);
+      }).finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    }
+    return () => {
+      cancelled = true;
+      ++requestRef.current;
+    };
+  }, [orgSlug, apiKey, bookingTypeSlug, apiUrl, resetScheduling, reportRequestError]);
+  useEffect(() => {
+    if (!selectedDate || !selectedType || selectedType.meeting_options && !meeting) return;
+    const dateStr = toLocalDateStr(selectedDate);
+    setSelectedSlot(null);
+    setConfirmedSlot(false);
+    const prefetched = prefetchedRef.current;
+    if (prefetched && prefetched.dateStr === dateStr) {
+      prefetchedRef.current = null;
+      setSlots(prefetched.slots);
+      setSlotsLoading(false);
+      return;
+    }
+    let cancelled = false;
+    setSlotsLoading(true);
+    setSlots([]);
+    fetchAvailability(selectedType.slug, dateStr, orgSlug, apiUrl, apiKey, timezone, void 0, meeting?.meetingToken).then((s) => {
+      if (!cancelled) setSlots(s.filter((slot) => slot.available));
+    }).catch((err) => {
+      if (!cancelled) reportRequestError(err);
+    }).finally(() => {
+      if (!cancelled) setSlotsLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedDate, selectedType, orgSlug, apiKey, apiUrl, timezone, reportRequestError, meeting]);
+  useEffect(() => {
+    if (!autoSelectFirstDay || !selectedType || selectedDate || step !== "datetime" || recovery || selectedType.meeting_options && !meeting) return;
+    const probeId = ++probeRef.current;
+    let cancelled = false;
+    const PROBE_DAYS = 14;
+    const startOffset = Math.floor((selectedType.min_notice_hours || 0) / 24);
+    (async () => {
+      setAutoProbing(true);
+      try {
+        for (let i = startOffset; i < startOffset + PROBE_DAYS; i++) {
+          const d = new Date(today);
+          d.setDate(d.getDate() + i);
+          if (d > maxDate) break;
+          const dateStr = toLocalDateStr(d);
+          const s = await fetchAvailability(selectedType.slug, dateStr, orgSlug, apiUrl, apiKey, timezone, void 0, meeting?.meetingToken);
+          if (cancelled || probeRef.current !== probeId) return;
+          const open = s.filter((slot) => slot.available);
+          if (open.length > 0) {
+            prefetchedRef.current = { dateStr, slots: open };
+            setViewMonth(new Date(d.getFullYear(), d.getMonth(), 1));
+            setSelectedDate(d);
+            return;
+          }
+        }
+      } catch (err) {
+        if (!cancelled && bookingRecoveryFromError(err)) reportRequestError(err);
+      } finally {
+        if (!cancelled && probeRef.current === probeId) setAutoProbing(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+      setAutoProbing(false);
+    };
+  }, [autoSelectFirstDay, selectedType, selectedDate, orgSlug, apiKey, apiUrl, timezone, today, maxDate, step, meeting, recovery, reportRequestError]);
+  useEffect(() => {
+    if (step !== "datetime" && step !== "form" || loading || submitting) return;
+    const expiry = hold?.expiresAt || meeting?.expiresAt;
+    if (!expiry || !Number.isFinite(Date.parse(expiry))) return;
+    const checkExpiry = () => {
+      const expired = expiredBookingContext(meeting, hold);
+      if (!busyRef.current && expired) setRecovery(expired);
+    };
+    const timer = setTimeout(checkExpiry, Math.max(0, Date.parse(expiry) - Date.now()));
+    window.addEventListener("focus", checkExpiry);
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener("focus", checkExpiry);
+    };
+  }, [meeting, hold, step, loading, submitting]);
+  const handleSlotSelect = useCallback((slot) => {
+    if (busyRef.current) return;
+    setSelectedSlot(slot);
+    setConfirmedSlot(false);
+  }, []);
+  const handleSlotConfirm = useCallback(async () => {
+    if (!selectedType || !selectedSlot || busyRef.current || recovery) return;
+    const expired = expiredBookingContext(meeting, null);
+    if (expired) {
+      setRecovery(expired);
+      return;
+    }
+    const requestId = ++requestRef.current;
+    busyRef.current = true;
+    setLoading(true);
+    setError(null);
+    try {
+      const previous = holdRef.current;
+      setActiveHold(null);
+      if (previous) await releaseSlotHold(previous.holdId, apiUrl, apiKey).catch(() => {
+      });
+      if (requestId !== requestRef.current) return;
+      const newHold = await createSlotHold(
+        {
+          meetingToken: meeting?.meetingToken,
+          org: apiKey ? void 0 : orgSlug,
+          bookingType: selectedType.slug,
+          slotStart: selectedSlot.start,
+          slotEnd: selectedSlot.end,
+          hostId: selectedSlot.hostId || "",
+          sessionId
+        },
+        apiUrl,
+        apiKey
+      );
+      if (requestId !== requestRef.current) {
+        await releaseSlotHold(newHold.holdId, apiUrl, apiKey).catch(() => {
+        });
+        return;
+      }
+      setActiveHold(newHold);
+      setConfirmedSlot(true);
+      setStep("form");
+    } catch (err) {
+      if (requestId === requestRef.current) reportRequestError(err);
+    } finally {
+      if (requestId === requestRef.current) {
+        busyRef.current = false;
+        setLoading(false);
+      }
+    }
+  }, [selectedType, selectedSlot, apiUrl, apiKey, meeting, sessionId, orgSlug, recovery, setActiveHold, reportRequestError]);
+  const handleBookingSubmit = useCallback(async (e) => {
+    e.preventDefault();
+    if (!selectedType || !selectedSlot || busyRef.current || recovery) return;
+    const expired = expiredBookingContext(meeting, hold);
+    if (expired) {
+      setRecovery(expired);
+      return;
+    }
+    const requestId = ++requestRef.current;
+    busyRef.current = true;
+    bookingInFlightRef.current = true;
+    setSubmitting(true);
+    setError(null);
+    try {
+      const result = await createBooking(
+        {
+          meetingToken: meeting?.meetingToken,
+          org: apiKey ? void 0 : orgSlug,
+          bookingType: selectedType.slug,
+          scheduledAt: selectedSlot.start,
+          hostId: selectedSlot.hostId || "",
+          name: guestInfo.name,
+          email: guestInfo.email,
+          phone: guestInfo.phone,
+          message: guestInfo.notes,
+          source: "main-site",
+          timezone,
+          holdId: hold?.holdId,
+          sessionId,
+          sourceUrl: typeof window !== "undefined" ? window.location.href : void 0
+        },
+        apiUrl,
+        apiKey
+      );
+      if (requestId !== requestRef.current) return;
+      setActiveHold(null);
+      setBookingResult(result);
+      setStep("success");
+      onBookingComplete?.(result);
+    } catch (err) {
+      if (requestId === requestRef.current) reportRequestError(err);
+      else if (hold) releaseSlotHold(hold.holdId, apiUrl, apiKey).catch(() => {
+      });
+    } finally {
+      if (requestId === requestRef.current) {
+        busyRef.current = false;
+        bookingInFlightRef.current = false;
+        setSubmitting(false);
+      }
+    }
+  }, [selectedType, selectedSlot, guestInfo, timezone, hold, apiUrl, apiKey, onBookingComplete, meeting, sessionId, orgSlug, recovery, setActiveHold, reportRequestError]);
+  const chooseFormat = async (format, address) => {
+    if (!selectedType || busyRef.current) return;
+    const requestId = ++requestRef.current;
+    busyRef.current = true;
+    setLoading(true);
+    setError(null);
+    try {
+      const prepared = await prepareMeeting(selectedType.slug, format, address, orgSlug, apiUrl, apiKey);
+      if (requestId !== requestRef.current) return;
+      setMeeting(prepared);
+      setRecovery(null);
+      setSelectedDate(null);
+      setSelectedSlot(null);
+      prefetchedRef.current = null;
+      setStep("datetime");
+    } catch (err) {
+      if (requestId === requestRef.current) reportRequestError(err);
+    } finally {
+      if (requestId === requestRef.current) {
+        busyRef.current = false;
+        setLoading(false);
+      }
+    }
+  };
+  const changeFormat = () => {
+    if (!busyRef.current) resetScheduling("format", true);
+  };
+  const changeService = () => {
+    if (busyRef.current) return;
+    resetScheduling("type", true);
+    setSelectedType(null);
+    setMeetingFormat(null);
+  };
+  const recoverReservation = () => {
+    if (busyRef.current) return;
+    const needsMeeting = recovery === "meeting" || expiredBookingContext(meeting, null) === "meeting";
+    resetScheduling(needsMeeting ? "format" : "datetime", needsMeeting);
+  };
+  const displayType = selectedType ? {
+    ...selectedType,
+    ...meeting ? { location_type: meeting.location_type, location_details: meeting.location_details, location_instructions: meeting.location_instructions } : {},
+    ...bookingResult ? {
+      location_type: bookingResult.booking.location_type || selectedType.location_type,
+      location_details: bookingResult.booking.location_details,
+      location_instructions: bookingResult.booking.location_instructions,
+      video_link: bookingResult.booking.video_link
+    } : {}
+  } : null;
+  const isPending = bookingResult?.booking.status === "pending";
+  const canGoPrev = viewMonth.getFullYear() > today.getFullYear() || viewMonth.getMonth() > today.getMonth();
+  const canGoNext = viewMonth < maxDate;
+  const goMonth = (dir) => {
+    if (busyRef.current) return;
+    setViewMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + dir, 1));
+  };
+  const groupedSlots = useMemo(() => {
+    const morning = [];
+    const afternoon = [];
+    const evening = [];
+    for (const s of slots) {
+      const h = new Date(s.start).getHours();
+      if (h < 12) morning.push(s);
+      else if (h < 17) afternoon.push(s);
+      else evening.push(s);
+    }
+    return { morning, afternoon, evening };
+  }, [slots]);
+  const cssVars = {
+    "--sk-primary": styles.primaryColor || "#0069ff",
+    "--sk-primary-hover": styles.primaryColor ? `color-mix(in srgb, ${styles.primaryColor} 90%, black)` : "#0055d4",
+    "--sk-primary-light": styles.primaryColor ? `color-mix(in srgb, ${styles.primaryColor} 12%, ${styles.backgroundColor || "white"})` : "#e8f1ff",
+    "--sk-bg": styles.backgroundColor || "#ffffff",
+    "--sk-bg-elevated": styles.elevatedColor || "#f9fafb",
+    "--sk-surface": styles.surfaceColor || "#f3f4f6",
+    "--sk-text-primary": styles.textPrimary || "#1a1a1a",
+    "--sk-text-secondary": styles.textSecondary || "#6b7280",
+    "--sk-text-tertiary": styles.textTertiary || "#9ca3af",
+    "--sk-border": styles.borderColor || "#e5e7eb",
+    "--sk-error": "#dc2626",
+    "--sk-success": "#047857",
+    "--sk-warning": "#b45309",
+    "--sk-radius": styles.borderRadius || "8px",
+    "--sk-font": styles.fontFamily || "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    "--sk-input-border": styles.inputBorderColor || styles.borderColor || "#e5e7eb",
+    "--sk-input-focus-ring": styles.primaryColor ? `color-mix(in srgb, ${styles.primaryColor} 12%, ${styles.backgroundColor || "white"})` : "#e8f1ff"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `bw-root ${className}`, style: cssVars, children: [
+    error && !recovery && /* @__PURE__ */ jsxs("div", { className: "bw-error", role: "alert", children: [
+      /* @__PURE__ */ jsx("span", { children: error }),
+      /* @__PURE__ */ jsx("button", { onClick: () => setError(null), "aria-label": "Dismiss error", children: "\xD7" })
+    ] }),
+    recovery && /* @__PURE__ */ jsxs("div", { className: "sk-booking-recovery", role: "alert", children: [
+      /* @__PURE__ */ jsxs("p", { children: [
+        recovery === "meeting" ? "Your meeting details need to be checked again." : "Your time reservation expired. Choose a time to continue.",
+        " Your entered details are saved."
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "bw-submit", onClick: recoverReservation, disabled: loading || submitting, children: recovery === "meeting" ? "Review meeting details" : "Choose another time" })
+    ] }),
+    step === "type" && !hideTypeSelector && /* @__PURE__ */ jsxs("div", { className: "bw-step bw-fade-in", children: [
+      /* @__PURE__ */ jsx("h2", { className: "bw-heading", children: "Select a Service" }),
+      loading ? /* @__PURE__ */ jsxs("div", { className: "bw-loading", children: [
+        /* @__PURE__ */ jsx(SpinnerIcon, {}),
+        " Loading services..."
+      ] }) : /* @__PURE__ */ jsx("div", { className: "bw-type-list", children: bookingTypes.map((type) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "bw-type-card",
+          onClick: () => {
+            if (!busyRef.current) {
+              resetScheduling(type.meeting_options ? "format" : "datetime", true);
+              setSelectedType(type);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "bw-type-name", children: type.name }),
+            type.description && /* @__PURE__ */ jsx("span", { className: "bw-type-desc", children: type.description }),
+            /* @__PURE__ */ jsxs("span", { className: "bw-type-meta", children: [
+              /* @__PURE__ */ jsx(ClockIcon, {}),
+              " ",
+              formatDuration(type.duration_minutes),
+              type.price_cents ? ` \xB7 $${(type.price_cents / 100).toFixed(2)}` : " \xB7 Free",
+              getLocationDisplay(type) ? ` \xB7 ${getLocationDisplay(type).label}` : ""
+            ] })
+          ]
+        },
+        type.id
+      )) })
+    ] }),
+    step === "format" && selectedType?.meeting_options && /* @__PURE__ */ jsx(
+      MeetingFormatStep,
+      {
+        options: selectedType.meeting_options,
+        busy: loading,
+        format: meetingFormat,
+        address: meetingAddress,
+        onFormatChange: setMeetingFormat,
+        onAddressChange: setMeetingAddress,
+        onContinue: chooseFormat,
+        onBack: !bookingTypeSlug && !hideTypeSelector ? changeService : void 0
+      }
+    ),
+    selectedType?.meeting_options && (step === "datetime" || step === "form") && /* @__PURE__ */ jsx("button", { type: "button", className: "bw-back sk-meeting-change", onClick: changeFormat, disabled: loading || submitting, children: "\u2190 Change meeting format" }),
+    step === "datetime" && selectedType && /* @__PURE__ */ jsxs("div", { className: "bw-step bw-fade-in", children: [
+      /* @__PURE__ */ jsxs("div", { className: "bw-info-header", children: [
+        !bookingTypeSlug && !hideTypeSelector && /* @__PURE__ */ jsx("button", { className: "bw-back", onClick: changeService, disabled: loading, "aria-label": "Change service", children: /* @__PURE__ */ jsx(ArrowLeftIcon, {}) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h2", { className: "bw-heading", children: selectedType.name }),
+          /* @__PURE__ */ jsxs("div", { className: "bw-meta-row", children: [
+            /* @__PURE__ */ jsxs("span", { className: "bw-badge", children: [
+              /* @__PURE__ */ jsx(ClockIcon, {}),
+              " ",
+              formatDuration(selectedType.duration_minutes)
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "bw-badge", children: [
+              /* @__PURE__ */ jsx(GlobeIcon, {}),
+              " ",
+              shortTz
+            ] }),
+            /* @__PURE__ */ jsx(LocationBadge, { type: displayType })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "bw-datetime-layout", children: [
+        /* @__PURE__ */ jsxs("div", { className: "bw-calendar", children: [
+          /* @__PURE__ */ jsxs("div", { className: "bw-cal-header", children: [
+            /* @__PURE__ */ jsx("button", { className: "bw-cal-nav", onClick: () => goMonth(-1), disabled: !canGoPrev || loading || !!recovery, "aria-label": "Previous month", children: /* @__PURE__ */ jsx(ChevronLeft, {}) }),
+            /* @__PURE__ */ jsxs("span", { className: "bw-cal-title", children: [
+              MONTHS[viewMonth.getMonth()],
+              " ",
+              viewMonth.getFullYear()
+            ] }),
+            /* @__PURE__ */ jsx("button", { className: "bw-cal-nav", onClick: () => goMonth(1), disabled: !canGoNext || loading || !!recovery, "aria-label": "Next month", children: /* @__PURE__ */ jsx(ChevronRight, {}) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "bw-cal-weekdays", children: DAYS.map((d) => /* @__PURE__ */ jsx("span", { className: "bw-cal-wd", children: d }, d)) }),
+          /* @__PURE__ */ jsx("div", { className: "bw-cal-grid", children: days.map((date, i) => {
+            if (!date) return /* @__PURE__ */ jsx("span", { className: "bw-cal-empty" }, `e-${i}`);
+            const past = isBeforeDay(date, today);
+            const future = date > maxDate;
+            const disabled = past || future || loading || !!recovery;
+            const sel = selectedDate && isSameDay(date, selectedDate);
+            const isToday = isSameDay(date, today);
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: `bw-cal-day${sel ? " selected" : ""}${isToday ? " today" : ""}${disabled ? " disabled" : ""}`,
+                onClick: () => {
+                  if (!disabled && !busyRef.current) setSelectedDate(date);
+                },
+                disabled,
+                "aria-label": date.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" }),
+                "aria-pressed": sel || void 0,
+                children: date.getDate()
+              },
+              date.toISOString()
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: `bw-times${selectedDate ? " visible" : ""}`, ref: slotsRef, children: !selectedDate ? autoProbing ? /* @__PURE__ */ jsxs("div", { className: "bw-times-skeleton", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("div", { className: "bw-skel-line" }),
+          [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx("div", { className: "bw-skel-slot" }, i))
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "bw-times-placeholder", children: [
+          /* @__PURE__ */ jsx(CalendarPlusIcon, {}),
+          /* @__PURE__ */ jsx("span", { children: "Select a date to view available times" })
+        ] }) : slotsLoading ? /* @__PURE__ */ jsxs("div", { className: "bw-times-skeleton", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("div", { className: "bw-skel-line" }),
+          [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx("div", { className: "bw-skel-slot" }, i))
+        ] }) : slots.length === 0 ? /* @__PURE__ */ jsx("div", { className: "bw-times-empty", children: "No available times on this date. Try another day." }) : /* @__PURE__ */ jsxs("div", { className: "bw-times-scroll", children: [
+          /* @__PURE__ */ jsx("p", { className: "bw-times-date", children: selectedDate.toLocaleDateString("en-US", { weekday: "long", month: "short", day: "numeric" }) }),
+          groupedSlots.morning.length > 0 && /* @__PURE__ */ jsxs("div", { className: "bw-time-group", children: [
+            /* @__PURE__ */ jsx("span", { className: "bw-time-label", children: "Morning" }),
+            groupedSlots.morning.map((slot) => /* @__PURE__ */ jsx(TimeButton, { slot, selected: selectedSlot?.start === slot.start, confirmed: confirmedSlot && selectedSlot?.start === slot.start, onClick: () => handleSlotSelect(slot), onConfirm: handleSlotConfirm, timezone, loading: loading || !!recovery }, slot.start))
+          ] }),
+          groupedSlots.afternoon.length > 0 && /* @__PURE__ */ jsxs("div", { className: "bw-time-group", children: [
+            /* @__PURE__ */ jsx("span", { className: "bw-time-label", children: "Afternoon" }),
+            groupedSlots.afternoon.map((slot) => /* @__PURE__ */ jsx(TimeButton, { slot, selected: selectedSlot?.start === slot.start, confirmed: confirmedSlot && selectedSlot?.start === slot.start, onClick: () => handleSlotSelect(slot), onConfirm: handleSlotConfirm, timezone, loading: loading || !!recovery }, slot.start))
+          ] }),
+          groupedSlots.evening.length > 0 && /* @__PURE__ */ jsxs("div", { className: "bw-time-group", children: [
+            /* @__PURE__ */ jsx("span", { className: "bw-time-label", children: "Evening" }),
+            groupedSlots.evening.map((slot) => /* @__PURE__ */ jsx(TimeButton, { slot, selected: selectedSlot?.start === slot.start, confirmed: confirmedSlot && selectedSlot?.start === slot.start, onClick: () => handleSlotSelect(slot), onConfirm: handleSlotConfirm, timezone, loading: loading || !!recovery }, slot.start))
+          ] }),
+          (groupedSlots.afternoon.length > 0 || groupedSlots.evening.length > 0) && /* @__PURE__ */ jsx("p", { className: "bw-times-scroll-hint", children: "Scroll for more times" })
+        ] }) })
+      ] })
+    ] }),
+    step === "form" && selectedType && selectedSlot && /* @__PURE__ */ jsxs("div", { className: "bw-step bw-fade-in", children: [
+      /* @__PURE__ */ jsxs("div", { className: "bw-info-header", children: [
+        /* @__PURE__ */ jsx("button", { className: "bw-back", onClick: recoverReservation, disabled: submitting, "aria-label": "Choose another time", children: /* @__PURE__ */ jsx(ArrowLeftIcon, {}) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h2", { className: "bw-heading", children: "Your Details" }),
+          /* @__PURE__ */ jsxs("div", { className: "bw-meta-row", children: [
+            /* @__PURE__ */ jsxs("span", { className: "bw-badge", children: [
+              /* @__PURE__ */ jsx(ClockIcon, {}),
+              " ",
+              formatDuration(selectedType.duration_minutes)
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "bw-badge-accent", children: [
+              formatDate(selectedSlot.start, timezone),
+              " \xB7 ",
+              formatTime(selectedSlot.start, timezone)
+            ] }),
+            /* @__PURE__ */ jsx(LocationBadge, { type: displayType })
+          ] })
+        ] })
+      ] }),
+      hold && !recovery && /* @__PURE__ */ jsxs("div", { className: "bw-hold-notice", children: [
+        /* @__PURE__ */ jsx(SpinnerIcon, {}),
+        " Slot held for you. Complete your details to confirm."
+      ] }),
+      /* @__PURE__ */ jsx(LocationRow, { type: displayType, meetingFormat: meeting?.format }),
+      meeting?.requires_review && /* @__PURE__ */ jsx("p", { children: "We\u2019ll confirm your visit after reviewing travel arrangements." }),
+      /* @__PURE__ */ jsxs("form", { onSubmit: handleBookingSubmit, className: "bw-form", children: [
+        /* @__PURE__ */ jsxs("div", { className: "bw-field", children: [
+          /* @__PURE__ */ jsxs("label", { htmlFor: "bw-name", children: [
+            "Name ",
+            /* @__PURE__ */ jsx("span", { className: "bw-req", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: "bw-name",
+              type: "text",
+              required: true,
+              readOnly: submitting,
+              value: guestInfo.name,
+              onChange: (e) => setGuestInfo((p) => ({ ...p, name: e.target.value })),
+              placeholder: "Jane Smith",
+              autoComplete: "name"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bw-field", children: [
+          /* @__PURE__ */ jsxs("label", { htmlFor: "bw-email", children: [
+            "Email ",
+            /* @__PURE__ */ jsx("span", { className: "bw-req", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: "bw-email",
+              type: "email",
+              required: true,
+              readOnly: submitting,
+              value: guestInfo.email,
+              onChange: (e) => setGuestInfo((p) => ({ ...p, email: e.target.value })),
+              placeholder: "jane@example.com",
+              autoComplete: "email"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bw-field", children: [
+          /* @__PURE__ */ jsxs("label", { htmlFor: "bw-phone", children: [
+            "Phone ",
+            meeting?.format === "client_location" && /* @__PURE__ */ jsx("span", { className: "bw-req", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              required: meeting?.format === "client_location",
+              readOnly: submitting,
+              id: "bw-phone",
+              type: "tel",
+              value: guestInfo.phone || "",
+              onChange: (e) => setGuestInfo((p) => ({ ...p, phone: e.target.value })),
+              placeholder: "(555) 123-4567",
+              autoComplete: "tel"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bw-field", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "bw-notes", children: "Notes" }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              id: "bw-notes",
+              readOnly: submitting,
+              value: guestInfo.notes || "",
+              onChange: (e) => setGuestInfo((p) => ({ ...p, notes: e.target.value })),
+              placeholder: "Anything you'd like us to know...",
+              rows: 3
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("button", { type: "submit", className: "bw-submit", disabled: submitting || !!recovery || !guestInfo.name || !guestInfo.email, children: submitting ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(SpinnerIcon, {}),
+          " Confirming..."
+        ] }) : meeting?.requires_review ? "Request meeting" : "Confirm booking" })
+      ] })
+    ] }),
+    step === "success" && bookingResult && /* @__PURE__ */ jsxs("div", { className: "bw-step bw-fade-in bw-success", children: [
+      /* @__PURE__ */ jsx("div", { className: "bw-success-icon", children: /* @__PURE__ */ jsx(CheckCircleIcon, {}) }),
+      /* @__PURE__ */ jsx("h2", { className: "bw-heading", children: isPending ? "Meeting request received" : "You\u2019re booked!" }),
+      /* @__PURE__ */ jsxs("div", { className: "bw-details-card", children: [
+        /* @__PURE__ */ jsxs("div", { className: "bw-detail-row", children: [
+          /* @__PURE__ */ jsx("span", { className: "bw-detail-label", children: "When" }),
+          /* @__PURE__ */ jsxs("span", { className: "bw-detail-value", children: [
+            formatDate(selectedSlot?.start || bookingResult.booking.scheduledAt || "", timezone),
+            /* @__PURE__ */ jsx("br", {}),
+            formatTime(selectedSlot?.start || bookingResult.booking.scheduledAt || "", timezone),
+            " (",
+            shortTz,
+            ")"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bw-detail-row", children: [
+          /* @__PURE__ */ jsx("span", { className: "bw-detail-label", children: "Duration" }),
+          /* @__PURE__ */ jsx("span", { className: "bw-detail-value", children: formatDuration(selectedType?.duration_minutes ?? bookingResult.booking.durationMinutes ?? 0) })
+        ] }),
+        bookingResult.booking.hostName && /* @__PURE__ */ jsxs("div", { className: "bw-detail-row", children: [
+          /* @__PURE__ */ jsx("span", { className: "bw-detail-label", children: "With" }),
+          /* @__PURE__ */ jsx("span", { className: "bw-detail-value", children: bookingResult.booking.hostName })
+        ] }),
+        /* @__PURE__ */ jsx(LocationRow, { type: displayType, meetingFormat: meeting?.format })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "bw-email-notice", children: [
+        isPending ? "We\u2019ll send your confirmation to " : "Your meeting details will arrive at ",
+        /* @__PURE__ */ jsx("strong", { children: guestInfo.email }),
+        "."
+      ] }),
+      /* @__PURE__ */ jsx(AddToCalendar, { result: bookingResult }),
+      (bookingResult.rescheduleUrl || bookingResult.cancelUrl) && /* @__PURE__ */ jsxs("p", { className: "bw-manage-links", children: [
+        "Need to change it?",
+        " ",
+        bookingResult.rescheduleUrl && /* @__PURE__ */ jsx("a", { href: bookingResult.rescheduleUrl, target: "_blank", rel: "noopener noreferrer", children: "Reschedule" }),
+        bookingResult.rescheduleUrl && bookingResult.cancelUrl && " \xB7 ",
+        bookingResult.cancelUrl && /* @__PURE__ */ jsx("a", { href: bookingResult.cancelUrl, target: "_blank", rel: "noopener noreferrer", children: "Cancel" })
+      ] }),
+      (bookingResult.confirmationCode || bookingResult.booking.confirmationCode) && /* @__PURE__ */ jsxs("p", { className: "bw-conf-code", children: [
+        "Confirmation code: ",
+        /* @__PURE__ */ jsx("strong", { children: bookingResult.confirmationCode || bookingResult.booking.confirmationCode })
+      ] })
+    ] }),
+    loading && step === "datetime" && !selectedType && /* @__PURE__ */ jsxs("div", { className: "bw-loading", children: [
+      /* @__PURE__ */ jsx(SpinnerIcon, {}),
+      " Loading..."
+    ] }),
+    /* @__PURE__ */ jsx("style", { children: WIDGET_CSS })
+  ] });
+}
+function getLocationDisplay(type) {
+  if (!type) return null;
+  const details = type.location_details?.trim() || void 0;
+  switch (type.location_type) {
+    case "in_person":
+      return {
+        kind: "in_person",
+        label: "In person",
+        detail: details,
+        mapUrl: details ? `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(details)}` : void 0
+      };
+    case "phone":
+      return { kind: "phone", label: "Phone call", detail: details ? `We'll call you at ${details}` : "We'll call you" };
+    case "custom":
+      return { kind: "custom", label: details || "See details" };
+    case "virtual":
+    default:
+      return { kind: "virtual", label: "Video call", detail: type.video_link };
+  }
+}
+function LocationBadge({ type }) {
+  const loc = getLocationDisplay(type);
+  if (!loc) return null;
+  return /* @__PURE__ */ jsxs("span", { className: "bw-badge", children: [
+    /* @__PURE__ */ jsx(MapPinIcon, {}),
+    " ",
+    loc.label
+  ] });
+}
+function LocationRow({ type, meetingFormat }) {
+  const loc = getLocationDisplay(type);
+  if (!loc) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "bw-detail-row", children: [
+    /* @__PURE__ */ jsx("span", { className: "bw-detail-label", children: "Where" }),
+    /* @__PURE__ */ jsxs("span", { className: "bw-detail-value", children: [
+      loc.label,
+      loc.detail ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("br", {}),
+        loc.kind === "virtual" ? /* @__PURE__ */ jsx("a", { href: loc.detail, target: "_blank", rel: "noopener noreferrer", children: "Join Google Meet" }) : loc.detail
+      ] }) : null,
+      type?.location_instructions && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("br", {}),
+        /* @__PURE__ */ jsx("span", { style: { whiteSpace: "pre-wrap" }, children: type.location_instructions })
+      ] }),
+      loc.mapUrl && meetingFormat !== "client_location" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("br", {}),
+        /* @__PURE__ */ jsx("a", { href: loc.mapUrl, target: "_blank", rel: "noopener noreferrer", className: "bw-where-link", children: "Get directions \u2192" })
+      ] }) : null,
+      loc.kind === "virtual" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("br", {}),
+        /* @__PURE__ */ jsx("span", { className: "bw-where-muted", children: "Video link is in your confirmation email." })
+      ] }) : null
+    ] })
+  ] });
+}
+function MapPinIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "10", r: "3" })
+  ] });
+}
+function TimeButton({
+  slot,
+  selected,
+  confirmed,
+  onClick,
+  onConfirm,
+  timezone,
+  loading
+}) {
+  if (selected && !confirmed) {
+    return /* @__PURE__ */ jsxs("div", { className: "bw-time-btn-wrap selected", children: [
+      /* @__PURE__ */ jsx("span", { className: "bw-time-text", children: formatTime(slot.start, timezone) }),
+      /* @__PURE__ */ jsx("button", { className: "bw-time-confirm", onClick: onConfirm, disabled: loading, children: loading ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : "Confirm" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("button", { className: `bw-time-btn${selected ? " selected" : ""}`, onClick, disabled: loading, children: formatTime(slot.start, timezone) });
+}
+var WIDGET_CSS = `
+/* \u2500\u2500 Base \u2500\u2500 */
+.bw-root {
+  font-family: var(--sk-font);
+  color: var(--sk-text-primary);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+  isolation: isolate;
+}
+.bw-root *, .bw-root *::before, .bw-root *::after { box-sizing: border-box; }
+
+/* \u2500\u2500 Animation \u2500\u2500 */
+@keyframes bw-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+@keyframes bw-spin { to { transform: rotate(360deg); } }
+@keyframes bw-shimmer { to { background-position: -200% 0; } }
+.bw-fade-in { animation: bw-fade-in 0.25s ease-out; }
+.bw-spinner { animation: bw-spin 0.8s linear infinite; }
+
+/* \u2500\u2500 Accessibility \u2500\u2500 */
+.bw-root :is(button, a):focus-visible { outline: 2px solid var(--sk-primary); outline-offset: 2px; }
+@media (prefers-reduced-motion: reduce) {
+  .bw-fade-in, .bw-skel-slot, .bw-skel-line { animation: none; }
+}
+
+/* \u2500\u2500 Loading skeleton (time slots) \u2500\u2500 */
+.bw-skel-line {
+  height: 14px; width: 70%; margin-bottom: 14px; border-radius: 4px;
+  background: linear-gradient(90deg, var(--sk-surface) 25%, var(--sk-bg-elevated) 50%, var(--sk-surface) 75%);
+  background-size: 200% 100%; animation: bw-shimmer 1.1s linear infinite;
+}
+.bw-skel-slot {
+  height: 44px; margin-bottom: 6px; border-radius: var(--sk-radius);
+  background: linear-gradient(90deg, var(--sk-surface) 25%, var(--sk-bg-elevated) 50%, var(--sk-surface) 75%);
+  background-size: 200% 100%; animation: bw-shimmer 1.1s linear infinite;
+}
+
+/* \u2500\u2500 Error \u2500\u2500 */
+.bw-error {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  background: color-mix(in srgb, var(--sk-error) 10%, var(--sk-bg));
+  border: 1px solid color-mix(in srgb, var(--sk-error) 35%, var(--sk-bg));
+  color: var(--sk-error);
+  padding: 10px 14px; border-radius: var(--sk-radius); margin-bottom: 16px; font-size: 0.875rem;
+}
+.bw-error button { background: none; border: none; color: inherit; cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 0; }
+.sk-booking-recovery { padding: 16px; margin-bottom: 16px; border: 1px solid var(--sk-border); border-radius: var(--sk-radius); background: var(--sk-surface); color: var(--sk-text-primary); }
+.sk-booking-recovery p { margin: 0 0 12px; font-size: 0.875rem; }
+.sk-booking-recovery .bw-submit { width: auto; }
+.bw-back:disabled { cursor: wait; opacity: 0.55; }
+
+/* \u2500\u2500 Headings \u2500\u2500 */
+.bw-heading { font-size: 1.125rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
+.bw-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
+.bw-badge {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 0.8125rem; color: var(--sk-text-secondary); font-weight: 400;
+}
+.bw-badge-accent {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 0.8125rem; color: var(--sk-primary); font-weight: 500;
+}
+
+/* \u2500\u2500 Info Header \u2500\u2500 */
+.bw-info-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 20px; }
+.bw-back {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--sk-border);
+  background: var(--sk-bg); cursor: pointer; color: var(--sk-text-secondary); flex-shrink: 0; margin-top: 1px;
+  transition: all 0.15s;
+}
+.bw-back.sk-meeting-change { width: auto; height: auto; min-height: 36px; padding: 8px 12px; border-radius: var(--sk-radius); margin-bottom: 12px; font-size: 0.8125rem; }
+.bw-back:hover { background: var(--sk-surface); border-color: var(--sk-border); }
+
+/* \u2500\u2500 Loading \u2500\u2500 */
+.bw-loading {
+  display: flex; align-items: center; justify-content: center; gap: 8px;
+  padding: 32px; color: var(--sk-text-secondary); font-size: 0.875rem;
+}
+
+/* \u2500\u2500 Type Selection \u2500\u2500 */
+.bw-type-list { display: flex; flex-direction: column; gap: 10px; }
+.bw-type-card {
+  display: flex; flex-direction: column; text-align: left; gap: 4px;
+  padding: 16px; border: 1.5px solid var(--sk-border); border-radius: var(--sk-radius);
+  background: var(--sk-bg); cursor: pointer; transition: all 0.15s;
+}
+.bw-type-card:hover { border-color: var(--sk-primary); box-shadow: 0 0 0 3px var(--sk-primary-light); }
+.bw-type-name { font-weight: 600; font-size: 0.9375rem; }
+.bw-type-desc { color: var(--sk-text-secondary); font-size: 0.8125rem; }
+.bw-type-meta { display: flex; align-items: center; gap: 4px; font-size: 0.8125rem; color: var(--sk-text-tertiary); margin-top: 4px; }
+
+/* \u2500\u2500 Date-Time Layout \u2500\u2500 */
+.bw-datetime-layout {
+  display: flex; gap: 0; border-top: 1px solid var(--sk-border); padding-top: 16px;
+}
+@media (max-width: 559px) {
+  .bw-datetime-layout { flex-direction: column; }
+}
+@media (min-width: 560px) {
+  .bw-datetime-layout { min-height: 400px; }
+  .bw-calendar { flex: 1 1 auto; padding-right: 16px; border-right: 1px solid var(--sk-border); }
+  .bw-times { width: 180px; flex-shrink: 0; padding-left: 16px; }
+}
+
+/* \u2500\u2500 Calendar \u2500\u2500 */
+.bw-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+.bw-cal-title { font-weight: 600; font-size: 0.9375rem; color: var(--sk-text-primary); }
+.bw-cal-nav {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; border-radius: 50%; border: none;
+  background: transparent; cursor: pointer; color: var(--sk-text-primary); transition: background 0.15s;
+}
+.bw-cal-nav:hover:not(:disabled) { background: var(--sk-surface); }
+.bw-cal-nav:disabled { opacity: 0.25; cursor: default; }
+
+.bw-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; text-align: center; margin-bottom: 4px; }
+.bw-cal-wd { font-size: 0.6875rem; font-weight: 600; color: var(--sk-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 0; }
+
+.bw-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
+.bw-cal-empty { aspect-ratio: 1; }
+.bw-cal-day {
+  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
+  border: none; background: none; border-radius: 50%;
+  font-size: 0.8125rem; font-weight: 500; cursor: pointer;
+  color: var(--sk-text-primary); transition: all 0.15s; position: relative;
+}
+.bw-cal-day:hover:not(.disabled):not(.selected) { background: var(--sk-surface); }
+.bw-cal-day.today:not(.selected)::after {
+  content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
+  width: 4px; height: 4px; border-radius: 50%; background: var(--sk-primary);
+}
+.bw-cal-day.selected {
+  background: var(--sk-primary); color: #fff; font-weight: 600;
+}
+/* Past / out-of-range: visible on light and dark parent pages */
+.bw-root button.bw-cal-day.disabled {
+  color: var(--sk-text-tertiary);
+  cursor: default;
+  opacity: 1;
+}
+
+/* \u2500\u2500 Time Slots \u2500\u2500 */
+.bw-times { transition: opacity 0.2s; }
+.bw-times:not(.visible) { opacity: 0.5; }
+.bw-times.visible { opacity: 1; }
+.bw-times-placeholder {
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
+  height: 100%; min-height: 160px; color: var(--sk-text-tertiary); font-size: 0.8125rem; text-align: center; padding: 16px;
+}
+.bw-times-empty {
+  display: flex; align-items: center; justify-content: center;
+  height: 100%; min-height: 160px; color: var(--sk-text-tertiary); font-size: 0.8125rem; text-align: center; padding: 16px;
+}
+.bw-times-scroll { overflow-y: auto; max-height: 400px; overflow-x: hidden; }
+.bw-times-date { font-weight: 600; font-size: 0.8125rem; color: var(--sk-text-primary); margin: 0 0 12px 0; }
+.bw-time-group { margin-bottom: 16px; }
+.bw-times-scroll-hint {
+  font-size: 0.6875rem; color: var(--sk-text-tertiary); text-align: center; margin: 8px 0 0 0; padding-bottom: 8px;
+}
+.bw-time-label { display: block; font-size: 0.6875rem; font-weight: 600; color: var(--sk-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
+
+.bw-time-btn {
+  display: block; width: 100%; min-height: 44px;
+  padding: 10px 12px; margin-bottom: 6px;
+  border: 1.5px solid var(--sk-border); border-radius: var(--sk-radius);
+  background: var(--sk-bg); cursor: pointer;
+  font-size: 0.875rem; font-weight: 500; color: var(--sk-primary); text-align: center;
+  transition: all 0.15s;
+}
+.bw-time-btn:hover:not(:disabled) {
+  border-color: var(--sk-primary); background: var(--sk-primary-light);
+}
+.bw-time-btn.selected {
+  border-color: var(--sk-primary); background: var(--sk-primary); color: #fff;
+}
+.bw-time-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.bw-time-btn-wrap {
+  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
+  border: 1.5px solid var(--sk-primary); border-radius: var(--sk-radius); overflow: hidden;
+  animation: bw-fade-in 0.15s ease-out;
+}
+.bw-time-btn-wrap .bw-time-text {
+  flex: 1; padding: 10px 12px; font-size: 0.875rem; font-weight: 500; color: var(--sk-text-primary); text-align: center;
+  background: var(--sk-primary-light);
+}
+.bw-time-confirm {
+  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
+  min-height: 44px; padding: 10px 16px; border: none;
+  background: var(--sk-primary); color: #fff;
+  font-size: 0.8125rem; font-weight: 600; cursor: pointer;
+  transition: background 0.15s;
+}
+.bw-time-confirm:hover:not(:disabled) { background: var(--sk-primary-hover); }
+.bw-time-confirm:disabled { opacity: 0.7; cursor: not-allowed; }
+
+/* \u2500\u2500 Form \u2500\u2500 */
+.bw-hold-notice {
+  display: flex; align-items: center; gap: 8px;
+  background: var(--sk-primary-light); color: var(--sk-primary);
+  padding: 10px 14px; border-radius: var(--sk-radius);
+  font-size: 0.8125rem; font-weight: 500; margin-bottom: 20px;
+}
+.bw-form { display: flex; flex-direction: column; gap: 16px; }
+.bw-field label {
+  display: block; font-size: 0.8125rem; font-weight: 500; color: var(--sk-text-primary); margin-bottom: 4px;
+}
+.bw-req { color: var(--sk-error); }
+.bw-field input, .bw-field textarea {
+  display: block; width: 100%;
+  padding: 10px 12px; border: 1.5px solid var(--sk-input-border); border-radius: var(--sk-radius);
+  font-size: 0.9375rem; font-family: inherit; color: var(--sk-text-primary); background: var(--sk-bg);
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.bw-field input::placeholder, .bw-field textarea::placeholder { color: var(--sk-text-tertiary); }
+.bw-field input:focus, .bw-field textarea:focus {
+  outline: none; border-color: var(--sk-primary);
+  box-shadow: 0 0 0 3px var(--sk-input-focus-ring);
+}
+.bw-submit {
+  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+  width: 100%; min-height: 48px; padding: 14px; margin-top: 4px;
+  background: var(--sk-primary); color: #fff; border: none;
+  border-radius: var(--sk-radius); font-size: 0.9375rem; font-weight: 600;
+  cursor: pointer; transition: background 0.15s;
+}
+.bw-submit:hover:not(:disabled) { background: var(--sk-primary-hover); }
+.bw-submit:disabled { opacity: 0.55; cursor: not-allowed; }
+
+/* \u2500\u2500 Success \u2500\u2500 */
+.bw-success { text-align: center; }
+.bw-success-icon { margin: 0 auto 16px; width: 56px; height: 56px; animation: bw-fade-in 0.4s ease-out; }
+.bw-conf-code {
+  display: inline-block; font-family: 'SF Mono', 'Fira Code', monospace;
+  background: var(--sk-surface); padding: 6px 14px; border-radius: 6px;
+  font-size: 0.8125rem; color: var(--sk-text-secondary); margin: 4px 0 20px; letter-spacing: 0.04em;
+}
+
+.bw-details-card {
+  text-align: left; background: var(--sk-bg-elevated); border: 1px solid var(--sk-border);
+  border-radius: var(--sk-radius); padding: 16px; margin-bottom: 20px;
+}
+.bw-detail-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--sk-border); }
+.bw-detail-row:last-child { border-bottom: none; }
+.bw-detail-label { width: 70px; flex-shrink: 0; font-size: 0.8125rem; color: var(--sk-text-tertiary); font-weight: 500; }
+.bw-detail-value { font-size: 0.875rem; font-weight: 500; color: var(--sk-text-primary); }
+
+.bw-cal-links-label { font-size: 0.8125rem; color: var(--sk-text-secondary); margin: 0 0 8px 0; }
+.bw-cal-links { display: flex; gap: 8px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }
+.bw-cal-link {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 8px 14px; border: 1.5px solid var(--sk-border); border-radius: var(--sk-radius);
+  text-decoration: none; color: var(--sk-text-primary); font-size: 0.8125rem; font-weight: 500;
+  transition: all 0.15s;
+}
+.bw-cal-link:hover { border-color: var(--sk-primary); color: var(--sk-primary); }
+.bw-invite-notice { font-size: 0.8125rem; color: var(--sk-text-secondary); margin: 0 0 20px 0; }
+.bw-invite-notice strong { color: var(--sk-text-primary); font-weight: 500; }
+
+.bw-email-notice { font-size: 0.8125rem; color: var(--sk-text-tertiary); margin: 0 0 16px 0; }
+.bw-email-notice strong { color: var(--sk-text-primary); font-weight: 500; }
+.bw-where-link { color: var(--sk-primary, #14B8A6); text-decoration: none; font-weight: 500; }
+.bw-where-muted { color: var(--sk-text-tertiary); font-size: 0.8125rem; }
+.bw-manage-links { font-size: 0.8125rem; color: var(--sk-text-tertiary); margin: 12px 0 0 0; }
+.bw-manage-links a { color: var(--sk-primary, #14B8A6); text-decoration: none; font-weight: 500; }
+`;
+var BookingWidget_default = BookingWidget;
+
+export { BookingWidget, BookingWidget_default };