@uptrademedia/site-kit 1.0.24 → 1.0.26

package/dist/index.mjs

@@ -1815,70 +1815,89 @@ ${moduleConfigs.join("\n")}
 
 // src/sync/api.ts
 var DEFAULT_API_URL = "https://api.uptrademedia.com";
-async function fetchBookingTypes(orgSlug, apiUrl = DEFAULT_API_URL) {
-  const response = await fetch(`${apiUrl}/sync/public/${orgSlug}/types`);
+function getApiConfig3() {
+  const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || DEFAULT_API_URL : DEFAULT_API_URL;
+  const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
+  return { apiUrl, apiKey };
+}
+function buildHeaders(apiKey, isPost = false) {
+  const headers = {};
+  if (isPost) headers["Content-Type"] = "application/json";
+  if (apiKey) headers["x-api-key"] = apiKey;
+  return headers;
+}
+async function fetchBookingTypes(orgSlug, apiUrl, apiKey) {
+  const cfg = getApiConfig3();
+  const url = apiUrl || cfg.apiUrl;
+  const key = apiKey || cfg.apiKey;
+  const endpoint = key ? `${url}/sync/widget/types` : `${url}/sync/public/${orgSlug}/types`;
+  const response = await fetch(endpoint, { headers: buildHeaders(key) });
   if (!response.ok) {
     throw new Error(`Failed to fetch booking types: ${response.statusText}`);
   }
   const data = await response.json();
   return data.types || [];
 }
-async function fetchBookingTypeDetails(orgSlug, typeSlug, apiUrl = DEFAULT_API_URL) {
-  const response = await fetch(`${apiUrl}/sync/public/${orgSlug}/types/${typeSlug}`);
+async function fetchBookingTypeDetails(typeSlug, orgSlug, apiUrl, apiKey) {
+  const cfg = getApiConfig3();
+  const url = apiUrl || cfg.apiUrl;
+  const key = apiKey || cfg.apiKey;
+  const endpoint = key ? `${url}/sync/widget/types/${typeSlug}` : `${url}/sync/public/${orgSlug}/types/${typeSlug}`;
+  const response = await fetch(endpoint, { headers: buildHeaders(key) });
   if (!response.ok) {
     throw new Error(`Failed to fetch booking type: ${response.statusText}`);
   }
   return response.json();
 }
-async function fetchAvailability(orgSlug, typeSlug, date, apiUrl = DEFAULT_API_URL, timezone, hostId) {
+async function fetchAvailability(typeSlug, date, orgSlug, apiUrl, apiKey, timezone, hostId) {
+  const cfg = getApiConfig3();
+  const url = apiUrl || cfg.apiUrl;
+  const key = apiKey || cfg.apiKey;
   const params = new URLSearchParams({ date });
   if (timezone) params.append("timezone", timezone);
   if (hostId) params.append("hostId", hostId);
-  const response = await fetch(
-    `${apiUrl}/sync/public/${orgSlug}/availability/${typeSlug}?${params}`
-  );
+  const endpoint = key ? `${url}/sync/widget/availability/${typeSlug}?${params}` : `${url}/sync/public/${orgSlug}/availability/${typeSlug}?${params}`;
+  const response = await fetch(endpoint, { headers: buildHeaders(key) });
   if (!response.ok) {
     throw new Error(`Failed to fetch availability: ${response.statusText}`);
   }
   const data = await response.json();
   return data.slots || [];
 }
-async function createSlotHold(bookingTypeId, startTime, hostId, guestTimezone, apiUrl = DEFAULT_API_URL) {
-  const response = await fetch(`${apiUrl}/sync/public/hold`, {
+async function createSlotHold(holdData, apiUrl, apiKey) {
+  const cfg = getApiConfig3();
+  const url = apiUrl || cfg.apiUrl;
+  const key = apiKey || cfg.apiKey;
+  const endpoint = key ? `${url}/sync/widget/hold` : `${url}/sync/public/hold`;
+  const response = await fetch(endpoint, {
     method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({
-      booking_type_id: bookingTypeId,
-      start_time: startTime,
-      host_id: hostId,
-      guest_timezone: guestTimezone
-    })
+    headers: buildHeaders(key, true),
+    body: JSON.stringify(holdData)
   });
   if (!response.ok) {
     throw new Error(`Failed to hold slot: ${response.statusText}`);
   }
   return response.json();
 }
-async function releaseSlotHold(holdId, apiUrl = DEFAULT_API_URL) {
-  await fetch(`${apiUrl}/sync/public/hold/${holdId}`, {
-    method: "DELETE"
+async function releaseSlotHold(holdId, apiUrl, apiKey) {
+  const cfg = getApiConfig3();
+  const url = apiUrl || cfg.apiUrl;
+  const key = apiKey || cfg.apiKey;
+  const endpoint = key ? `${url}/sync/widget/hold/${holdId}` : `${url}/sync/public/hold/${holdId}`;
+  await fetch(endpoint, {
+    method: "DELETE",
+    headers: buildHeaders(key)
   });
 }
-async function createBooking(bookingTypeId, startTime, guest, timezone, hostId, holdId, apiUrl = DEFAULT_API_URL) {
-  const response = await fetch(`${apiUrl}/sync/public/booking`, {
+async function createBooking(bookingData, apiUrl, apiKey) {
+  const cfg = getApiConfig3();
+  const url = apiUrl || cfg.apiUrl;
+  const key = apiKey || cfg.apiKey;
+  const endpoint = key ? `${url}/sync/widget/booking` : `${url}/sync/public/booking`;
+  const response = await fetch(endpoint, {
     method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({
-      booking_type_id: bookingTypeId,
-      start_time: startTime,
-      guest_name: guest.name,
-      guest_email: guest.email,
-      guest_phone: guest.phone,
-      guest_notes: guest.notes,
-      timezone,
-      host_id: hostId,
-      hold_id: holdId
-    })
+    headers: buildHeaders(key, true),
+    body: JSON.stringify(bookingData)
   });
   if (!response.ok) {
     const errorData = await response.json().catch(() => ({}));
@@ -1886,7 +1905,7 @@ async function createBooking(bookingTypeId, startTime, guest, timezone, hostId,
   }
   return response.json();
 }
-async function fetchAvailableDates(orgSlug, typeSlug, startDate, endDate, apiUrl = DEFAULT_API_URL, timezone) {
+async function fetchAvailableDates(typeSlug, startDate, endDate, orgSlug, apiUrl, apiKey, timezone) {
   const availableDates = [];
   const start = new Date(startDate);
   const end = new Date(endDate);
@@ -1894,7 +1913,7 @@ async function fetchAvailableDates(orgSlug, typeSlug, startDate, endDate, apiUrl
   while (current <= end) {
     const dateStr = current.toISOString().split("T")[0];
     try {
-      const slots = await fetchAvailability(orgSlug, typeSlug, dateStr, apiUrl, timezone);
+      const slots = await fetchAvailability(typeSlug, dateStr, orgSlug, apiUrl, apiKey, timezone);
       if (slots.some((s) => s.available)) {
         availableDates.push(dateStr);
       }
@@ -1942,87 +1961,183 @@ function formatDuration(minutes) {
   return `${hours}h ${mins}m`;
 }
 var DEFAULT_API_URL2 = "https://api.uptrademedia.com";
+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 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(--bw-primary)" }),
+    /* @__PURE__ */ jsx("path", { d: "M18 28.5L24.5 35L38 21.5", stroke: "white", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] });
+}
+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 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,
-  apiUrl = DEFAULT_API_URL2,
+  apiKey: propApiKey,
+  apiUrl: propApiUrl,
   bookingTypeSlug,
   timezone: propTimezone,
   className = "",
-  daysToShow = 14,
+  daysToShow = 60,
   onBookingComplete,
   onError,
   hideTypeSelector = false,
   styles: styles2 = {}
 }) {
+  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_URL2;
   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 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 availableDates = useMemo(() => {
-    const dates = [];
-    const today = /* @__PURE__ */ new Date();
-    today.setHours(0, 0, 0, 0);
-    for (let i = 0; i < daysToShow; i++) {
-      const date = new Date(today);
-      date.setDate(date.getDate() + i);
-      if (date.getDay() !== 0 && date.getDay() !== 6) {
-        dates.push(date);
-      }
+  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;
     }
-    return dates;
-  }, [daysToShow]);
+  }, [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]);
   useEffect(() => {
     if (bookingTypeSlug) {
-      fetchBookingTypeDetails(orgSlug, bookingTypeSlug, apiUrl).then((type) => {
+      setLoading(true);
+      fetchBookingTypeDetails(bookingTypeSlug, orgSlug, apiUrl, apiKey).then((type) => {
         setSelectedType(type);
         setStep("datetime");
       }).catch((err) => {
         setError(err.message);
         onError?.(err);
-      });
+      }).finally(() => setLoading(false));
     } else {
-      fetchBookingTypes(orgSlug, apiUrl).then((types) => setBookingTypes(types.filter((t) => t.is_active))).catch((err) => {
+      setLoading(true);
+      fetchBookingTypes(orgSlug, apiUrl, apiKey).then((types) => setBookingTypes(types.filter((t) => t.is_active))).catch((err) => {
         setError(err.message);
         onError?.(err);
-      });
+      }).finally(() => setLoading(false));
     }
-  }, [orgSlug, bookingTypeSlug, apiUrl, onError]);
+  }, [orgSlug, apiKey, bookingTypeSlug, apiUrl, onError]);
   useEffect(() => {
     if (!selectedDate || !selectedType) return;
     const dateStr = selectedDate.toISOString().split("T")[0];
-    setLoading(true);
+    setSlotsLoading(true);
     setSlots([]);
     setSelectedSlot(null);
-    fetchAvailability(orgSlug, selectedType.slug, dateStr, apiUrl, timezone).then((s) => setSlots(s.filter((slot) => slot.available))).catch((err) => {
+    setConfirmedSlot(false);
+    fetchAvailability(selectedType.slug, dateStr, orgSlug, apiUrl, apiKey, timezone).then((s) => setSlots(s.filter((slot) => slot.available))).catch((err) => {
       setError(err.message);
       onError?.(err);
-    }).finally(() => setLoading(false));
-  }, [selectedDate, selectedType, orgSlug, apiUrl, timezone, onError]);
-  const handleSlotSelect = useCallback(async (slot) => {
-    if (!selectedType) return;
-    if (hold) {
-      await releaseSlotHold(hold.holdId, apiUrl).catch(() => {
-      });
-    }
+    }).finally(() => setSlotsLoading(false));
+  }, [selectedDate, selectedType, orgSlug, apiKey, apiUrl, timezone, onError]);
+  const handleSlotSelect = useCallback((slot) => {
     setSelectedSlot(slot);
+    setConfirmedSlot(false);
+  }, []);
+  const handleSlotConfirm = useCallback(async () => {
+    if (!selectedType || !selectedSlot) return;
+    if (hold) await releaseSlotHold(hold.holdId, apiUrl, apiKey).catch(() => {
+    });
     setLoading(true);
     try {
       const newHold = await createSlotHold(
-        selectedType.id,
-        slot.start,
-        slot.hostId,
-        timezone,
-        apiUrl
+        {
+          bookingType: selectedType.slug,
+          slotStart: selectedSlot.start,
+          slotEnd: selectedSlot.end,
+          hostId: selectedSlot.hostId || "",
+          sessionId: `bw-${Date.now()}`
+        },
+        apiUrl,
+        apiKey
       );
       setHold(newHold);
+      setConfirmedSlot(true);
       setStep("form");
     } catch (err) {
       setError(err.message);
@@ -2030,21 +2145,30 @@ function BookingWidget({
     } finally {
       setLoading(false);
     }
-  }, [selectedType, hold, timezone, apiUrl, onError]);
+  }, [selectedType, selectedSlot, hold, timezone, apiUrl, apiKey, onError]);
   const handleBookingSubmit = useCallback(async (e) => {
     e.preventDefault();
     if (!selectedType || !selectedSlot) return;
-    setLoading(true);
+    setSubmitting(true);
     setError(null);
     try {
       const result = await createBooking(
-        selectedType.id,
-        selectedSlot.start,
-        guestInfo,
-        timezone,
-        selectedSlot.hostId,
-        hold?.holdId,
-        apiUrl
+        {
+          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: `bw-${Date.now()}`,
+          sourceUrl: typeof window !== "undefined" ? window.location.href : void 0
+        },
+        apiUrl,
+        apiKey
       );
       setBookingResult(result);
       setStep("success");
@@ -2053,576 +2177,538 @@ function BookingWidget({
       setError(err.message);
       onError?.(err);
     } finally {
-      setLoading(false);
+      setSubmitting(false);
     }
-  }, [selectedType, selectedSlot, guestInfo, timezone, hold, apiUrl, onBookingComplete, onError]);
+  }, [selectedType, selectedSlot, guestInfo, timezone, hold, apiUrl, apiKey, onBookingComplete, onError]);
   useEffect(() => {
     return () => {
-      if (hold) {
-        releaseSlotHold(hold.holdId, apiUrl).catch(() => {
-        });
-      }
+      if (hold) releaseSlotHold(hold.holdId, apiUrl, apiKey).catch(() => {
+      });
     };
-  }, [hold, apiUrl]);
+  }, [hold, apiUrl, apiKey]);
+  const canGoPrev = viewMonth.getFullYear() > today.getFullYear() || viewMonth.getMonth() > today.getMonth();
+  const canGoNext = viewMonth < maxDate;
+  const goMonth = (dir) => {
+    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 = {
-    "--booking-primary": styles2.primaryColor || "#4bbf39",
-    "--booking-radius": styles2.borderRadius || "8px",
-    "--booking-font": styles2.fontFamily || "inherit"
+    "--bw-primary": styles2.primaryColor || "#0069ff",
+    "--bw-primary-light": styles2.primaryColor ? `color-mix(in srgb, ${styles2.primaryColor} 12%, white)` : "#e8f1ff",
+    "--bw-primary-hover": styles2.primaryColor ? `color-mix(in srgb, ${styles2.primaryColor} 90%, black)` : "#0055d4",
+    "--bw-radius": styles2.borderRadius || "8px",
+    "--bw-font": styles2.fontFamily || "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `uptrade-booking-widget ${className}`,
-      style: cssVars,
-      children: [
-        error && /* @__PURE__ */ jsxs("div", { className: "uptrade-booking-error", children: [
-          error,
-          /* @__PURE__ */ jsx("button", { onClick: () => setError(null), children: "Dismiss" })
-        ] }),
-        step === "type" && !hideTypeSelector && /* @__PURE__ */ jsxs("div", { className: "uptrade-booking-types", children: [
-          /* @__PURE__ */ jsx("h3", { className: "uptrade-booking-title", children: "Select a Service" }),
-          /* @__PURE__ */ jsx("div", { className: "uptrade-booking-type-list", children: bookingTypes.map((type) => /* @__PURE__ */ jsxs(
-            "button",
-            {
-              className: "uptrade-booking-type-card",
-              onClick: () => {
-                setSelectedType(type);
-                setStep("datetime");
-              },
-              children: [
-                /* @__PURE__ */ jsx("div", { className: "uptrade-booking-type-name", children: type.name }),
-                type.description && /* @__PURE__ */ jsx("div", { className: "uptrade-booking-type-desc", children: type.description }),
-                /* @__PURE__ */ jsxs("div", { className: "uptrade-booking-type-meta", children: [
-                  /* @__PURE__ */ jsx("span", { children: formatDuration(type.duration_minutes) }),
-                  type.price_cents ? /* @__PURE__ */ jsxs("span", { children: [
-                    "$",
-                    (type.price_cents / 100).toFixed(2)
-                  ] }) : /* @__PURE__ */ jsx("span", { children: "Free" })
-                ] })
-              ]
-            },
-            type.id
-          )) })
-        ] }),
-        step === "datetime" && selectedType && /* @__PURE__ */ jsxs("div", { className: "uptrade-booking-datetime", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: "uptrade-booking-back",
-              onClick: () => {
-                if (bookingTypeSlug) return;
-                setSelectedType(null);
-                setStep("type");
-              },
-              disabled: !!bookingTypeSlug,
-              children: "\u2190 Back"
-            }
-          ),
-          /* @__PURE__ */ jsx("h3", { className: "uptrade-booking-title", children: selectedType.name }),
-          /* @__PURE__ */ jsxs("p", { className: "uptrade-booking-subtitle", children: [
-            formatDuration(selectedType.duration_minutes),
-            " \u2022 ",
-            selectedType.location_type
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "uptrade-booking-dates", children: [
-            /* @__PURE__ */ jsx("h4", { children: "Select a Date" }),
-            /* @__PURE__ */ jsx("div", { className: "uptrade-booking-date-grid", children: availableDates.map((date) => {
-              const dateStr = date.toISOString().split("T")[0];
-              const isSelected = selectedDate?.toISOString().split("T")[0] === dateStr;
-              return /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  className: `uptrade-booking-date ${isSelected ? "selected" : ""}`,
-                  onClick: () => setSelectedDate(date),
-                  children: [
-                    /* @__PURE__ */ jsx("span", { className: "uptrade-booking-date-day", children: date.toLocaleDateString("en-US", { weekday: "short" }) }),
-                    /* @__PURE__ */ jsx("span", { className: "uptrade-booking-date-num", children: date.getDate() })
-                  ]
-                },
-                dateStr
-              );
-            }) })
+  return /* @__PURE__ */ jsxs("div", { className: `bw-root ${className}`, style: cssVars, children: [
+    error && /* @__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" })
+    ] }),
+    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: () => {
+            setSelectedType(type);
+            setStep("datetime");
+          },
+          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"
+            ] })
+          ]
+        },
+        type.id
+      )) })
+    ] }),
+    step === "datetime" && selectedType && /* @__PURE__ */ jsxs("div", { className: "bw-step bw-fade-in", children: [
+      /* @__PURE__ */ jsxs("div", { className: "bw-info-header", children: [
+        !bookingTypeSlug && /* @__PURE__ */ jsx("button", { className: "bw-back", onClick: () => {
+          setSelectedType(null);
+          setStep("type");
+        }, 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__ */ 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, "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, "aria-label": "Next month", children: /* @__PURE__ */ jsx(ChevronRight, {}) })
           ] }),
-          selectedDate && /* @__PURE__ */ jsxs("div", { className: "uptrade-booking-times", children: [
-            /* @__PURE__ */ jsx("h4", { children: "Select a Time" }),
-            loading ? /* @__PURE__ */ jsx("div", { className: "uptrade-booking-loading", children: "Loading available times..." }) : slots.length === 0 ? /* @__PURE__ */ jsx("div", { className: "uptrade-booking-empty", children: "No times available on this date" }) : /* @__PURE__ */ jsx("div", { className: "uptrade-booking-time-grid", children: slots.map((slot) => /* @__PURE__ */ jsx(
+          /* @__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;
+            const sel = selectedDate && isSameDay(date, selectedDate);
+            const isToday = isSameDay(date, today);
+            return /* @__PURE__ */ jsx(
               "button",
               {
-                className: `uptrade-booking-time ${selectedSlot?.start === slot.start ? "selected" : ""}`,
-                onClick: () => handleSlotSelect(slot),
-                disabled: loading,
-                children: formatTime(slot.start, timezone)
+                className: `bw-cal-day${sel ? " selected" : ""}${isToday ? " today" : ""}${disabled ? " disabled" : ""}`,
+                onClick: () => !disabled && setSelectedDate(date),
+                disabled,
+                "aria-label": date.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" }),
+                "aria-pressed": sel || void 0,
+                children: date.getDate()
               },
-              slot.start
-            )) })
-          ] })
+              date.toISOString()
+            );
+          }) })
         ] }),
-        step === "form" && selectedType && selectedSlot && /* @__PURE__ */ jsxs("div", { className: "uptrade-booking-form", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: "uptrade-booking-back",
-              onClick: () => setStep("datetime"),
-              children: "\u2190 Back"
-            }
-          ),
-          /* @__PURE__ */ jsx("h3", { className: "uptrade-booking-title", children: "Your Information" }),
-          /* @__PURE__ */ jsxs("p", { className: "uptrade-booking-subtitle", children: [
-            selectedType.name,
-            " on ",
-            formatDate2(selectedSlot.start, timezone),
-            " at ",
-            formatTime(selectedSlot.start, timezone)
+        /* @__PURE__ */ jsx("div", { className: `bw-times${selectedDate ? " visible" : ""}`, ref: slotsRef, children: !selectedDate ? /* @__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-loading", children: [
+          /* @__PURE__ */ jsx(SpinnerIcon, {}),
+          " Loading times..."
+        ] }) : 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 }, slot.start))
           ] }),
-          hold && /* @__PURE__ */ jsxs("p", { className: "uptrade-booking-hold-notice", children: [
-            "This time is held for you for ",
-            Math.floor((new Date(hold.expiresAt).getTime() - Date.now()) / 6e4),
-            " minutes"
+          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 }, slot.start))
           ] }),
-          /* @__PURE__ */ jsxs("form", { onSubmit: handleBookingSubmit, children: [
-            /* @__PURE__ */ jsxs("div", { className: "uptrade-booking-field", children: [
-              /* @__PURE__ */ jsx("label", { htmlFor: "guest-name", children: "Name *" }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  id: "guest-name",
-                  type: "text",
-                  required: true,
-                  value: guestInfo.name,
-                  onChange: (e) => setGuestInfo((prev) => ({ ...prev, name: e.target.value })),
-                  placeholder: "Your full name"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "uptrade-booking-field", children: [
-              /* @__PURE__ */ jsx("label", { htmlFor: "guest-email", children: "Email *" }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  id: "guest-email",
-                  type: "email",
-                  required: true,
-                  value: guestInfo.email,
-                  onChange: (e) => setGuestInfo((prev) => ({ ...prev, email: e.target.value })),
-                  placeholder: "your@email.com"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "uptrade-booking-field", children: [
-              /* @__PURE__ */ jsx("label", { htmlFor: "guest-phone", children: "Phone" }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  id: "guest-phone",
-                  type: "tel",
-                  value: guestInfo.phone || "",
-                  onChange: (e) => setGuestInfo((prev) => ({ ...prev, phone: e.target.value })),
-                  placeholder: "(555) 123-4567"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "uptrade-booking-field", children: [
-              /* @__PURE__ */ jsx("label", { htmlFor: "guest-notes", children: "Additional Notes" }),
-              /* @__PURE__ */ jsx(
-                "textarea",
-                {
-                  id: "guest-notes",
-                  value: guestInfo.notes || "",
-                  onChange: (e) => setGuestInfo((prev) => ({ ...prev, notes: e.target.value })),
-                  placeholder: "Anything you'd like us to know...",
-                  rows: 3
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "submit",
-                className: "uptrade-booking-submit",
-                disabled: loading,
-                children: loading ? "Booking..." : "Confirm Booking"
-              }
-            )
+          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 }, slot.start))
           ] })
-        ] }),
-        step === "success" && bookingResult && /* @__PURE__ */ jsxs("div", { className: "uptrade-booking-success", children: [
-          /* @__PURE__ */ jsx("div", { className: "uptrade-booking-success-icon", children: "\u2713" }),
-          /* @__PURE__ */ jsx("h3", { className: "uptrade-booking-title", children: "Booking Confirmed!" }),
-          /* @__PURE__ */ jsxs("p", { className: "uptrade-booking-confirmation-code", children: [
-            "Confirmation: ",
-            bookingResult.booking.confirmationCode
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "uptrade-booking-details", children: [
-            /* @__PURE__ */ jsxs("p", { children: [
-              /* @__PURE__ */ jsx("strong", { children: "When:" }),
-              " ",
-              formatDate2(bookingResult.booking.scheduledAt, timezone),
-              " at ",
-              formatTime(bookingResult.booking.scheduledAt, timezone)
-            ] }),
-            /* @__PURE__ */ jsxs("p", { children: [
-              /* @__PURE__ */ jsx("strong", { children: "Duration:" }),
+        ] }) })
+      ] })
+    ] }),
+    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: () => setStep("datetime"), 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(bookingResult.booking.durationMinutes)
+              formatDuration(selectedType.duration_minutes)
             ] }),
-            bookingResult.booking.hostName && /* @__PURE__ */ jsxs("p", { children: [
-              /* @__PURE__ */ jsx("strong", { children: "With:" }),
-              " ",
-              bookingResult.booking.hostName
+            /* @__PURE__ */ jsxs("span", { className: "bw-badge-accent", children: [
+              formatDate2(selectedSlot.start, timezone),
+              " \xB7 ",
+              formatTime(selectedSlot.start, timezone)
             ] })
+          ] })
+        ] })
+      ] }),
+      hold && /* @__PURE__ */ jsxs("div", { className: "bw-hold-notice", children: [
+        /* @__PURE__ */ jsx(SpinnerIcon, {}),
+        " Slot held for you \u2014 complete your details to confirm."
+      ] }),
+      /* @__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__ */ jsxs("div", { className: "uptrade-booking-calendar-links", children: [
-            /* @__PURE__ */ jsx("p", { children: "Add to calendar:" }),
-            /* @__PURE__ */ jsxs("div", { className: "uptrade-booking-calendar-buttons", children: [
-              /* @__PURE__ */ jsx(
-                "a",
-                {
-                  href: bookingResult.calendarLinks.google,
-                  target: "_blank",
-                  rel: "noopener noreferrer",
-                  className: "uptrade-booking-calendar-btn",
-                  children: "Google"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "a",
-                {
-                  href: bookingResult.calendarLinks.outlook,
-                  target: "_blank",
-                  rel: "noopener noreferrer",
-                  className: "uptrade-booking-calendar-btn",
-                  children: "Outlook"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "a",
-                {
-                  href: bookingResult.calendarLinks.ics,
-                  download: true,
-                  className: "uptrade-booking-calendar-btn",
-                  children: "Download .ics"
-                }
-              )
-            ] })
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: "bw-name",
+              type: "text",
+              required: true,
+              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("p", { className: "uptrade-booking-email-notice", children: "A confirmation email has been sent to your email address." })
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: "bw-email",
+              type: "email",
+              required: true,
+              value: guestInfo.email,
+              onChange: (e) => setGuestInfo((p) => ({ ...p, email: e.target.value })),
+              placeholder: "jane@example.com",
+              autoComplete: "email"
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsx("style", { children: `
-        .uptrade-booking-widget {
-          font-family: var(--booking-font);
-          max-width: 480px;
-          margin: 0 auto;
-          padding: 24px;
-          border: 1px solid #e5e5e5;
-          border-radius: var(--booking-radius);
-          background: #fff;
-        }
-        
-        .uptrade-booking-error {
-          background: #fef2f2;
-          border: 1px solid #fecaca;
-          color: #b91c1c;
-          padding: 12px;
-          border-radius: var(--booking-radius);
-          margin-bottom: 16px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        }
-        
-        .uptrade-booking-error button {
-          background: none;
-          border: none;
-          color: inherit;
-          cursor: pointer;
-          text-decoration: underline;
-        }
-        
-        .uptrade-booking-title {
-          font-size: 1.25rem;
-          font-weight: 600;
-          margin: 0 0 8px 0;
-        }
-        
-        .uptrade-booking-subtitle {
-          color: #666;
-          margin: 0 0 16px 0;
-        }
-        
-        .uptrade-booking-back {
-          background: none;
-          border: none;
-          color: var(--booking-primary);
-          cursor: pointer;
-          padding: 0;
-          margin-bottom: 16px;
-          font-size: 0.875rem;
-        }
-        
-        .uptrade-booking-back:disabled {
-          display: none;
-        }
-        
-        .uptrade-booking-type-list {
-          display: flex;
-          flex-direction: column;
-          gap: 12px;
-        }
-        
-        .uptrade-booking-type-card {
-          text-align: left;
-          padding: 16px;
-          border: 1px solid #e5e5e5;
-          border-radius: var(--booking-radius);
-          background: #fff;
-          cursor: pointer;
-          transition: border-color 0.2s, box-shadow 0.2s;
-        }
-        
-        .uptrade-booking-type-card:hover {
-          border-color: var(--booking-primary);
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--booking-primary) 15%, transparent);
-        }
-        
-        .uptrade-booking-type-name {
-          font-weight: 600;
-          margin-bottom: 4px;
-        }
-        
-        .uptrade-booking-type-desc {
-          color: #666;
-          font-size: 0.875rem;
-          margin-bottom: 8px;
-        }
-        
-        .uptrade-booking-type-meta {
-          display: flex;
-          gap: 12px;
-          font-size: 0.75rem;
-          color: #888;
-        }
-        
-        .uptrade-booking-date-grid {
-          display: flex;
-          gap: 8px;
-          flex-wrap: wrap;
-          margin-bottom: 24px;
-        }
-        
-        .uptrade-booking-date {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          padding: 8px 12px;
-          border: 1px solid #e5e5e5;
-          border-radius: var(--booking-radius);
-          background: #fff;
-          cursor: pointer;
-          transition: all 0.2s;
-        }
-        
-        .uptrade-booking-date:hover {
-          border-color: var(--booking-primary);
-        }
-        
-        .uptrade-booking-date.selected {
-          background: var(--booking-primary);
-          border-color: var(--booking-primary);
-          color: #fff;
-        }
-        
-        .uptrade-booking-date-day {
-          font-size: 0.625rem;
-          text-transform: uppercase;
-        }
-        
-        .uptrade-booking-date-num {
-          font-size: 1.125rem;
-          font-weight: 600;
-        }
-        
-        .uptrade-booking-time-grid {
-          display: grid;
-          grid-template-columns: repeat(3, 1fr);
-          gap: 8px;
-        }
-        
-        .uptrade-booking-time {
-          padding: 10px;
-          border: 1px solid #e5e5e5;
-          border-radius: var(--booking-radius);
-          background: #fff;
-          cursor: pointer;
-          font-size: 0.875rem;
-          transition: all 0.2s;
-        }
-        
-        .uptrade-booking-time:hover:not(:disabled) {
-          border-color: var(--booking-primary);
-        }
-        
-        .uptrade-booking-time.selected {
-          background: var(--booking-primary);
-          border-color: var(--booking-primary);
-          color: #fff;
-        }
-        
-        .uptrade-booking-time:disabled {
-          opacity: 0.5;
-          cursor: not-allowed;
-        }
-        
-        .uptrade-booking-loading,
-        .uptrade-booking-empty {
-          text-align: center;
-          padding: 24px;
-          color: #666;
-        }
-        
-        .uptrade-booking-hold-notice {
-          background: #fef3c7;
-          border: 1px solid #fcd34d;
-          color: #92400e;
-          padding: 8px 12px;
-          border-radius: var(--booking-radius);
-          font-size: 0.875rem;
-          margin-bottom: 16px;
-        }
-        
-        .uptrade-booking-field {
-          margin-bottom: 16px;
-        }
-        
-        .uptrade-booking-field label {
-          display: block;
-          margin-bottom: 4px;
-          font-size: 0.875rem;
-          font-weight: 500;
-        }
-        
-        .uptrade-booking-field input,
-        .uptrade-booking-field textarea {
-          width: 100%;
-          padding: 10px 12px;
-          border: 1px solid #e5e5e5;
-          border-radius: var(--booking-radius);
-          font-size: 1rem;
-          font-family: inherit;
-        }
-        
-        .uptrade-booking-field input:focus,
-        .uptrade-booking-field textarea:focus {
-          outline: none;
-          border-color: var(--booking-primary);
-          box-shadow: 0 0 0 3px color-mix(in srgb, var(--booking-primary) 15%, transparent);
-        }
-        
-        .uptrade-booking-submit {
-          width: 100%;
-          padding: 14px;
-          background: var(--booking-primary);
-          color: #fff;
-          border: none;
-          border-radius: var(--booking-radius);
-          font-size: 1rem;
-          font-weight: 600;
-          cursor: pointer;
-          transition: opacity 0.2s;
-        }
-        
-        .uptrade-booking-submit:hover:not(:disabled) {
-          opacity: 0.9;
-        }
-        
-        .uptrade-booking-submit:disabled {
-          opacity: 0.5;
-          cursor: not-allowed;
-        }
-        
-        .uptrade-booking-success {
-          text-align: center;
-        }
-        
-        .uptrade-booking-success-icon {
-          width: 64px;
-          height: 64px;
-          margin: 0 auto 16px;
-          background: var(--booking-primary);
-          color: #fff;
-          border-radius: 50%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-size: 2rem;
-        }
-        
-        .uptrade-booking-confirmation-code {
-          font-family: monospace;
-          background: #f5f5f5;
-          padding: 8px 16px;
-          border-radius: var(--booking-radius);
-          display: inline-block;
-          margin-bottom: 24px;
-        }
-        
-        .uptrade-booking-details {
-          text-align: left;
-          background: #f9f9f9;
-          padding: 16px;
-          border-radius: var(--booking-radius);
-          margin-bottom: 24px;
-        }
-        
-        .uptrade-booking-details p {
-          margin: 0 0 8px 0;
-        }
-        
-        .uptrade-booking-details p:last-child {
-          margin-bottom: 0;
-        }
-        
-        .uptrade-booking-calendar-links {
-          margin-bottom: 24px;
-        }
-        
-        .uptrade-booking-calendar-buttons {
-          display: flex;
-          gap: 8px;
-          justify-content: center;
-          margin-top: 8px;
-        }
-        
-        .uptrade-booking-calendar-btn {
-          padding: 8px 16px;
-          border: 1px solid #e5e5e5;
-          border-radius: var(--booking-radius);
-          text-decoration: none;
-          color: #333;
-          font-size: 0.875rem;
-          transition: all 0.2s;
-        }
-        
-        .uptrade-booking-calendar-btn:hover {
-          border-color: var(--booking-primary);
-          color: var(--booking-primary);
-        }
-        
-        .uptrade-booking-email-notice {
-          color: #666;
-          font-size: 0.875rem;
-        }
-        
-        h4 {
-          font-size: 0.875rem;
-          font-weight: 600;
-          margin: 0 0 12px 0;
-          color: #666;
-        }
-      ` })
-      ]
-    }
-  );
+        /* @__PURE__ */ jsxs("div", { className: "bw-field", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "bw-phone", children: "Phone" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              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",
+              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 || !guestInfo.name || !guestInfo.email, children: submitting ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(SpinnerIcon, {}),
+          " Confirming..."
+        ] }) : "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: "You\u2019re Booked!" }),
+      /* @__PURE__ */ jsx("p", { className: "bw-conf-code", children: bookingResult.booking.confirmationCode }),
+      /* @__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: [
+            formatDate2(bookingResult.booking.scheduledAt, timezone),
+            /* @__PURE__ */ jsx("br", {}),
+            formatTime(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(bookingResult.booking.durationMinutes) })
+        ] }),
+        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("p", { className: "bw-cal-links-label", children: "Add to your calendar" }),
+      /* @__PURE__ */ jsxs("div", { className: "bw-cal-links", children: [
+        /* @__PURE__ */ jsxs("a", { href: bookingResult.calendarLinks.google, target: "_blank", rel: "noopener noreferrer", className: "bw-cal-link", children: [
+          /* @__PURE__ */ jsx(CalendarPlusIcon, {}),
+          " Google"
+        ] }),
+        /* @__PURE__ */ jsxs("a", { href: bookingResult.calendarLinks.outlook, target: "_blank", rel: "noopener noreferrer", className: "bw-cal-link", children: [
+          /* @__PURE__ */ jsx(CalendarPlusIcon, {}),
+          " Outlook"
+        ] }),
+        /* @__PURE__ */ jsxs("a", { href: bookingResult.calendarLinks.ics, download: true, className: "bw-cal-link", children: [
+          /* @__PURE__ */ jsx(CalendarPlusIcon, {}),
+          " iCal"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "bw-email-notice", children: [
+        "A confirmation email has been sent to ",
+        /* @__PURE__ */ jsx("strong", { children: guestInfo.email }),
+        "."
+      ] })
+    ] }),
+    loading && step === "datetime" && !selectedType && /* @__PURE__ */ jsxs("div", { className: "bw-loading", children: [
+      /* @__PURE__ */ jsx(SpinnerIcon, {}),
+      " Loading..."
+    ] }),
+    /* @__PURE__ */ jsx("style", { children: WIDGET_CSS })
+  ] });
+}
+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(--bw-font);
+  color: #1a1a1a;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+}
+.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); } }
+.bw-fade-in { animation: bw-fade-in 0.25s ease-out; }
+.bw-spinner { animation: bw-spin 0.8s linear infinite; }
+
+/* \u2500\u2500 Error \u2500\u2500 */
+.bw-error {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
+  padding: 10px 14px; border-radius: var(--bw-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; }
+
+/* \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: #6b7280; font-weight: 400;
+}
+.bw-badge-accent {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 0.8125rem; color: var(--bw-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 #e5e7eb;
+  background: #fff; cursor: pointer; color: #4b5563; flex-shrink: 0; margin-top: 1px;
+  transition: all 0.15s;
+}
+.bw-back:hover { background: #f3f4f6; border-color: #d1d5db; }
+
+/* \u2500\u2500 Loading \u2500\u2500 */
+.bw-loading {
+  display: flex; align-items: center; justify-content: center; gap: 8px;
+  padding: 32px; color: #6b7280; 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 #e5e7eb; border-radius: var(--bw-radius);
+  background: #fff; cursor: pointer; transition: all 0.15s;
+}
+.bw-type-card:hover { border-color: var(--bw-primary); box-shadow: 0 0 0 3px var(--bw-primary-light); }
+.bw-type-name { font-weight: 600; font-size: 0.9375rem; }
+.bw-type-desc { color: #6b7280; font-size: 0.8125rem; }
+.bw-type-meta { display: flex; align-items: center; gap: 4px; font-size: 0.8125rem; color: #9ca3af; margin-top: 4px; }
+
+/* \u2500\u2500 Date-Time Layout \u2500\u2500 */
+.bw-datetime-layout {
+  display: flex; gap: 0; border-top: 1px solid #f0f0f0; padding-top: 16px;
 }
+@media (max-width: 559px) {
+  .bw-datetime-layout { flex-direction: column; }
+}
+@media (min-width: 560px) {
+  .bw-datetime-layout { min-height: 340px; }
+  .bw-calendar { flex: 1 1 auto; padding-right: 16px; border-right: 1px solid #f0f0f0; }
+  .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; }
+.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: #374151; transition: background 0.15s;
+}
+.bw-cal-nav:hover:not(:disabled) { background: #f3f4f6; }
+.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: #9ca3af; 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: #1a1a1a; transition: all 0.15s; position: relative;
+}
+.bw-cal-day:hover:not(.disabled):not(.selected) { background: #f3f4f6; }
+.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(--bw-primary);
+}
+.bw-cal-day.selected {
+  background: var(--bw-primary); color: #fff; font-weight: 600;
+}
+.bw-cal-day.disabled { color: #d1d5db; cursor: default; }
+
+/* \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: #9ca3af; 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: #9ca3af; font-size: 0.8125rem; text-align: center; padding: 16px;
+}
+.bw-times-scroll { overflow-y: auto; max-height: 340px; }
+.bw-times-date { font-weight: 600; font-size: 0.8125rem; color: #374151; margin: 0 0 12px 0; }
+.bw-time-group { margin-bottom: 16px; }
+.bw-time-label { display: block; font-size: 0.6875rem; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
+
+.bw-time-btn {
+  display: block; width: 100%;
+  padding: 10px 12px; margin-bottom: 6px;
+  border: 1.5px solid #e5e7eb; border-radius: var(--bw-radius);
+  background: #fff; cursor: pointer;
+  font-size: 0.875rem; font-weight: 500; color: var(--bw-primary); text-align: center;
+  transition: all 0.15s;
+}
+.bw-time-btn:hover:not(:disabled) {
+  border-color: var(--bw-primary); background: var(--bw-primary-light);
+}
+.bw-time-btn.selected {
+  border-color: var(--bw-primary); background: var(--bw-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(--bw-primary); border-radius: var(--bw-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: #374151; text-align: center;
+  background: var(--bw-primary-light);
+}
+.bw-time-confirm {
+  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
+  padding: 10px 16px; border: none;
+  background: var(--bw-primary); color: #fff;
+  font-size: 0.8125rem; font-weight: 600; cursor: pointer;
+  transition: background 0.15s;
+}
+.bw-time-confirm:hover:not(:disabled) { background: var(--bw-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(--bw-primary-light); color: var(--bw-primary);
+  padding: 10px 14px; border-radius: var(--bw-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: #374151; margin-bottom: 4px;
+}
+.bw-req { color: #ef4444; }
+.bw-field input, .bw-field textarea {
+  display: block; width: 100%;
+  padding: 10px 12px; border: 1.5px solid #e5e7eb; border-radius: var(--bw-radius);
+  font-size: 0.9375rem; font-family: inherit; color: #1a1a1a; background: #fff;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.bw-field input::placeholder, .bw-field textarea::placeholder { color: #c0c5cc; }
+.bw-field input:focus, .bw-field textarea:focus {
+  outline: none; border-color: var(--bw-primary);
+  box-shadow: 0 0 0 3px var(--bw-primary-light);
+}
+.bw-submit {
+  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+  width: 100%; padding: 14px; margin-top: 4px;
+  background: var(--bw-primary); color: #fff; border: none;
+  border-radius: var(--bw-radius); font-size: 0.9375rem; font-weight: 600;
+  cursor: pointer; transition: background 0.15s;
+}
+.bw-submit:hover:not(:disabled) { background: var(--bw-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: #f3f4f6; padding: 6px 14px; border-radius: 6px;
+  font-size: 0.8125rem; color: #6b7280; margin: 4px 0 20px; letter-spacing: 0.04em;
+}
+
+.bw-details-card {
+  text-align: left; background: #f9fafb; border: 1px solid #f0f0f0;
+  border-radius: var(--bw-radius); padding: 16px; margin-bottom: 20px;
+}
+.bw-detail-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
+.bw-detail-row:last-child { border-bottom: none; }
+.bw-detail-label { width: 70px; flex-shrink: 0; font-size: 0.8125rem; color: #9ca3af; font-weight: 500; }
+.bw-detail-value { font-size: 0.875rem; font-weight: 500; color: #374151; }
+
+.bw-cal-links-label { font-size: 0.8125rem; color: #6b7280; 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 #e5e7eb; border-radius: var(--bw-radius);
+  text-decoration: none; color: #374151; font-size: 0.8125rem; font-weight: 500;
+  transition: all 0.15s;
+}
+.bw-cal-link:hover { border-color: var(--bw-primary); color: var(--bw-primary); }
+
+.bw-email-notice { font-size: 0.8125rem; color: #9ca3af; margin: 0; }
+.bw-email-notice strong { color: #374151; font-weight: 500; }
+`;
 
 export { AffiliateCard, AffiliatesWidget, BookingWidget, ExperimentConversion, SetupAssistant, SignalBridge, SignalExperiment, SiteKitProvider, createBooking, createSlotHold, detectTimezone, fetchAffiliates, fetchAvailability, fetchAvailableDates, fetchBookingTypeDetails, fetchBookingTypes, formatDate2 as formatBookingDate, formatTime as formatBookingTime, formatDuration, getTrackingUrl, releaseSlotHold, useAffiliates, useExperimentVariant, useSignal, useSignalConfig, useSignalEvent, useSignalExperiment, useSignalOutcome, useSiteKit };
 //# sourceMappingURL=index.mjs.map