@idkwebsites/components 0.1.17 → 0.1.19

package/dist/index.cjs

@@ -1,8 +1,10 @@
 "use strict";
 "use client";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -23,6 +33,7 @@ var src_exports = {};
 __export(src_exports, {
   AvailabilityPicker: () => AvailabilityPicker,
   BookingWidget: () => BookingWidget,
+  BookingWidgetPanel: () => BookingWidgetPanel,
   ContactForm: () => ContactForm,
   DatePicker: () => DatePicker,
   PlatformProvider: () => PlatformProvider,
@@ -1711,9 +1722,876 @@ function BookingWidget({
   ] });
 }
 
-// src/components/AvailabilityPicker.tsx
+// src/components/BookingWidgetPanel.tsx
 var import_react9 = require("react");
+var import_react_dom = require("react-dom");
+var import_lucide_react = require("lucide-react");
+var import_framer_motion = require("framer-motion");
+var import_smooth_scrollbar = __toESM(require("smooth-scrollbar"), 1);
+var import_overscroll = __toESM(require("smooth-scrollbar/plugins/overscroll"), 1);
 var import_jsx_runtime9 = require("react/jsx-runtime");
+import_smooth_scrollbar.default.use(import_overscroll.default);
+var DEFAULT_STEP_TITLES = [
+  "Schedule your visit",
+  "Select your service",
+  "Pick a date & time",
+  "Your details"
+];
+var DEFAULT_CATEGORY_ICONS = {
+  hair: import_lucide_react.Scissors,
+  cut: import_lucide_react.Scissors,
+  barber: import_lucide_react.Scissors,
+  styling: import_lucide_react.Scissors,
+  skin: import_lucide_react.Sparkles,
+  facial: import_lucide_react.Sparkles,
+  beauty: import_lucide_react.Sparkles,
+  massage: import_lucide_react.Heart,
+  wellness: import_lucide_react.Heart,
+  spa: import_lucide_react.Heart,
+  nail: import_lucide_react.Palette,
+  color: import_lucide_react.Palette,
+  manicure: import_lucide_react.Palette,
+  pedicure: import_lucide_react.Palette
+};
+function getCategoryIcon(name, overrides) {
+  const map = { ...DEFAULT_CATEGORY_ICONS, ...overrides };
+  const lower = name.toLowerCase();
+  for (const [kw, Icon] of Object.entries(map)) {
+    if (lower.includes(kw)) return Icon;
+  }
+  return import_lucide_react.CircleDot;
+}
+function getInitials(name) {
+  return name.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase();
+}
+function truncate(str, max) {
+  return str.length > max ? str.slice(0, max) + "\u2026" : str;
+}
+function DefaultMenuIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.Menu, { size: 20 });
+}
+function DefaultCloseIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.X, { size: 20 });
+}
+function DefaultLink({ href, className, onClick, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("a", { href, className, onClick, children });
+}
+function BookingWidgetPanel({
+  navLinks = [],
+  menuIcon,
+  closeIcon,
+  categoryIcons,
+  stepTitles,
+  linkComponent: LinkComp = DefaultLink
+} = {}) {
+  const widgetRef = (0, import_react9.useRef)(null);
+  const formRef = (0, import_react9.useRef)(null);
+  const catScrollRef = (0, import_react9.useRef)(null);
+  const svcScrollbarRef = (0, import_react9.useRef)(null);
+  const rightScrollRef = (0, import_react9.useRef)(null);
+  const staffTriggerRef = (0, import_react9.useRef)(null);
+  const mobileBodyRef = (0, import_react9.useRef)(null);
+  const mobileScrollbarRef = (0, import_react9.useRef)(null);
+  const portalRef = (0, import_react9.useRef)(null);
+  const [mobileStep, setMobileStep] = (0, import_react9.useState)(1);
+  const [monthOpen, setMonthOpen] = (0, import_react9.useState)(false);
+  const [staffOpen, setStaffOpen] = (0, import_react9.useState)(false);
+  const [navOpen, setNavOpen] = (0, import_react9.useState)(false);
+  const [localStaff, setLocalStaff] = (0, import_react9.useState)(null);
+  const { data, isLoading: servicesLoading, error: servicesError } = useServices();
+  const { data: teamData } = useTeam();
+  const allStaff = teamData?.team || [];
+  const bw = useBookingWidget({
+    widgetRef,
+    services: data?.services,
+    autoAdvanceOnSelect: false,
+    scrollToStep: false,
+    datePickerMode: "calendar",
+    calendarVariant: "default",
+    enableCategoryFilter: true,
+    enableServiceSearch: false,
+    showStaffSelection: true,
+    showAnyStaffOption: true,
+    maxAdvanceMonths: 3,
+    servicePageSize: 50
+  });
+  const todayStr = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+  (0, import_react9.useEffect)(() => {
+    if (bw.isAvailabilityLoading || !bw.selectedService || !bw.availabilityByDate) return;
+    if (bw.selectedDate) return;
+    for (const day of bw.calendarDays) {
+      if (!day.isCurrentMonth || day.date < todayStr) continue;
+      const entry = bw.availabilityByDate.get(day.date);
+      if (entry && entry.slots?.some((s) => s.available)) {
+        bw.selectDate(day.date);
+        break;
+      }
+    }
+  }, [bw.isAvailabilityLoading, bw.selectedService?.id, bw.availabilityByDate, bw.selectedDate]);
+  const hasCategories = bw.categories.length >= 1;
+  const hasMultipleCategories = bw.categories.length > 1;
+  (0, import_react9.useEffect)(() => {
+    if (hasCategories && bw.categoryFilter === "all") {
+      bw.setCategoryFilter(bw.categories[0]);
+    }
+  }, [bw.categories.length]);
+  (0, import_react9.useEffect)(() => {
+    if (localStaff && !bw.selectedStaff) {
+      bw.selectStaff(localStaff);
+    }
+  }, [bw.selectedStaff, localStaff]);
+  const isReady = !servicesLoading && !bw.isServicesLoading && !!data?.services?.length && bw.step !== "done";
+  (0, import_react9.useEffect)(() => {
+    if (!isReady) return;
+    const mq = window.matchMedia("(min-width: 1025px)");
+    const scrollbars = [];
+    const opts = {
+      damping: 0.08,
+      continuousScrolling: true,
+      alwaysShowTracks: false,
+      plugins: {
+        overscroll: { effect: "bounce", damping: 0.15, maxOverscroll: 80 }
+      }
+    };
+    const init = () => {
+      scrollbars.forEach((sb) => sb.destroy());
+      scrollbars.length = 0;
+      if (mq.matches && catScrollRef.current) {
+        scrollbars.push(import_smooth_scrollbar.default.init(catScrollRef.current, opts));
+      }
+      if (mq.matches && rightScrollRef.current) {
+        scrollbars.push(import_smooth_scrollbar.default.init(rightScrollRef.current, opts));
+      }
+    };
+    requestAnimationFrame(init);
+    mq.addEventListener("change", init);
+    return () => {
+      mq.removeEventListener("change", init);
+      scrollbars.forEach((sb) => sb.destroy());
+    };
+  }, [isReady, mobileStep]);
+  const initSvcScrollbar = (el) => {
+    if (!el || typeof window !== "undefined" && window.matchMedia("(max-width: 1024px)").matches) {
+      if (svcScrollbarRef.current) {
+        try {
+          svcScrollbarRef.current.destroy();
+        } catch {
+        }
+        svcScrollbarRef.current = null;
+      }
+      return;
+    }
+    if (svcScrollbarRef.current && svcScrollbarRef.current.containerEl === el) {
+      svcScrollbarRef.current.update();
+      return;
+    }
+    if (svcScrollbarRef.current) {
+      try {
+        svcScrollbarRef.current.destroy();
+      } catch {
+      }
+      svcScrollbarRef.current = null;
+    }
+    svcScrollbarRef.current = import_smooth_scrollbar.default.init(el, {
+      damping: 0.08,
+      continuousScrolling: true,
+      alwaysShowTracks: false,
+      plugins: {
+        overscroll: { effect: "bounce", damping: 0.15, maxOverscroll: 80 }
+      }
+    });
+  };
+  (0, import_react9.useEffect)(() => {
+    if (!isReady) return;
+    const mq = window.matchMedia("(max-width: 1024px)");
+    const init = () => {
+      if (mobileScrollbarRef.current) {
+        try {
+          mobileScrollbarRef.current.destroy();
+        } catch {
+        }
+        mobileScrollbarRef.current = null;
+      }
+      if (mq.matches && mobileBodyRef.current) {
+        mobileScrollbarRef.current = import_smooth_scrollbar.default.init(mobileBodyRef.current, {
+          damping: 0.08,
+          continuousScrolling: false,
+          alwaysShowTracks: false,
+          plugins: {
+            overscroll: { effect: "bounce", damping: 0.15, maxOverscroll: 80 }
+          }
+        });
+      }
+    };
+    requestAnimationFrame(init);
+    mq.addEventListener("change", init);
+    return () => {
+      mq.removeEventListener("change", init);
+      if (mobileScrollbarRef.current) {
+        try {
+          mobileScrollbarRef.current.destroy();
+        } catch {
+        }
+        mobileScrollbarRef.current = null;
+      }
+    };
+  }, [isReady]);
+  (0, import_react9.useEffect)(() => {
+    if (mobileScrollbarRef.current) {
+      mobileScrollbarRef.current.scrollTo(0, 0, 0);
+      mobileScrollbarRef.current.update();
+    }
+  }, [mobileStep]);
+  const formatPrice = (cents) => {
+    const d = cents / 100;
+    return d % 1 === 0 ? `$${d.toFixed(0)}` : `$${d.toFixed(2)}`;
+  };
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
+    bw.submitBooking(e);
+  };
+  const canAdvanceStep1 = bw.categoryFilter !== "all";
+  const canAdvanceStep2 = !!bw.selectedService;
+  const canAdvanceStep3 = !!bw.selectedTime;
+  const canSubmit = !!bw.selectedService && !!bw.selectedTime && !bw.isSubmitting;
+  const selectedStaff = localStaff;
+  const isServiceForStaff = (svc) => {
+    if (!selectedStaff) return true;
+    if (!svc.assignedStaff?.length) return true;
+    return svc.assignedStaff.some((s) => s.id === selectedStaff.id);
+  };
+  const staffFilteredServices = bw.pagedServices.filter(isServiceForStaff);
+  if (servicesLoading || bw.isServicesLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw", ref: widgetRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-header", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-skel bw-skel--text", style: { width: 220, height: 28 } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-body bw-skel-desktop", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-col bw-col--left", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-skel bw-skel--text", style: { width: 100, height: 12, marginBottom: 10 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-skel bw-skel--card", style: { height: 52 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-skel bw-skel--text", style: { width: 100, height: 12, marginTop: 20, marginBottom: 10 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-skel-list", children: [...Array(3)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-skel bw-skel--card", style: { height: 56 } }, i)) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-col bw-col--center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-skel bw-skel--calendar", style: { height: "100%" } }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-col bw-col--right", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-skel-list", children: [
+          [...Array(3)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-skel bw-skel--input" }, i)),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-skel bw-skel--input", style: { height: 80 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-skel bw-skel--card", style: { height: 48, marginTop: 16 } })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-skel-mobile", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-skel bw-skel--text", style: { width: 100, height: 12, marginBottom: 10 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-skel bw-skel--card", style: { height: 52 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-skel bw-skel--text", style: { width: 100, height: 12, marginTop: 24, marginBottom: 10 } }),
+        [...Array(4)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-skel bw-skel--card", style: { height: 52 } }, i)),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-skel bw-skel--card", style: { height: 48, marginTop: "auto" } })
+      ] })
+    ] });
+  }
+  if (servicesError) {
+    const message = servicesError instanceof Error ? servicesError.message : "Unable to load services.";
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw", ref: widgetRef, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-empty", children: [
+      "Booking is unavailable right now. ",
+      message
+    ] }) });
+  }
+  if (!data?.services?.length) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw", ref: widgetRef, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-empty", children: "No services are configured yet." }) });
+  }
+  if (bw.step === "done") {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw", ref: widgetRef, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-done", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-done-icon", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.Check, { size: 28, strokeWidth: 2.5 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "bw-done-title", children: "You're All Set!" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "bw-done-text", children: "We've received your booking request. You'll get a confirmation email shortly with all the details." }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { className: "bw-btn-primary", onClick: bw.reset, children: "Book Another Visit" })
+    ] }) });
+  }
+  const renderServiceRow = (svc, variant = "inline") => {
+    const sel = bw.selectedService?.id === svc.id;
+    const imgUrl = svc.image?.url;
+    const desc = svc.description;
+    if (variant === "full") {
+      const duration = svc.duration != null ? bw.formatDuration(svc.duration) : null;
+      const hasImg = !!imgUrl;
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        "button",
+        {
+          className: `bw-svc-row bw-svc-row--full ${hasImg ? "bw-svc-row--has-img" : ""} ${sel ? "is-active" : ""}`,
+          onClick: () => bw.selectService(svc),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: `bw-check bw-check--lg ${sel ? "is-checked" : ""}`, children: sel && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.Check, { size: 12 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "bw-svc-info", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-svc-name", children: svc.name }),
+              duration && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-svc-meta", children: duration }),
+              desc && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-svc-desc", children: desc })
+            ] }),
+            hasImg ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "bw-svc-img", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("img", { src: imgUrl, alt: svc.name }),
+              svc.price != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-svc-badge", children: formatPrice(Number(svc.price)) })
+            ] }) : svc.price != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-svc-price", children: formatPrice(Number(svc.price)) })
+          ]
+        },
+        svc.id
+      );
+    }
+    const meta = [
+      svc.duration != null ? bw.formatDuration(svc.duration) : null,
+      svc.price != null ? formatPrice(Number(svc.price)) : null
+    ].filter(Boolean).join(" \xB7 ");
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "button",
+      {
+        className: `bw-svc-row ${sel ? "is-active" : ""}`,
+        onClick: () => bw.selectService(svc),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: `bw-check ${sel ? "is-checked" : ""}`, children: sel && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.Check, { size: 11 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "bw-svc-info", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-svc-name", children: svc.name }),
+            meta && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-svc-meta", children: meta }),
+            desc && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-svc-desc", children: desc })
+          ] }),
+          imgUrl && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-svc-thumb", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("img", { src: imgUrl, alt: svc.name }) })
+        ]
+      },
+      svc.id
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw", ref: widgetRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-topbar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-dots", children: Array.from({ length: 4 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `bw-dot ${mobileStep > i ? "is-filled" : ""}` }, i)) }),
+      navLinks.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "button",
+        {
+          className: "bw-topbar-menu",
+          onClick: () => setNavOpen((o) => !o),
+          "aria-label": navOpen ? "Close menu" : "Open menu",
+          children: navOpen ? closeIcon || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DefaultCloseIcon, {}) : menuIcon || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DefaultMenuIcon, {})
+        }
+      )
+    ] }),
+    navLinks.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_framer_motion.AnimatePresence, { children: navOpen && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_framer_motion.motion.div,
+      {
+        className: "bw-nav-overlay",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.2 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("nav", { className: "bw-nav", children: navLinks.map((link) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          LinkComp,
+          {
+            href: link.href,
+            className: "bw-nav-link",
+            onClick: () => setNavOpen(false),
+            children: link.label
+          },
+          link.href
+        )) })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: "bw-title bw-title--desktop", children: "Schedule your visit" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: "bw-title bw-title--mobile", children: (stepTitles || DEFAULT_STEP_TITLES)[mobileStep - 1] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-body", "data-mobile-step": mobileStep, ref: mobileBodyRef, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-body-inner", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-col bw-col--left", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-step-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "bw-label", children: "Select Specialist" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-staff-dropdown", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              "button",
+              {
+                ref: staffTriggerRef,
+                className: `bw-staff-trigger${selectedStaff ? " has-value" : ""}`,
+                onClick: () => setStaffOpen((o) => !o),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_framer_motion.AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    import_framer_motion.motion.span,
+                    {
+                      className: "bw-staff-trigger-content",
+                      initial: { opacity: 0 },
+                      animate: { opacity: 1 },
+                      exit: { opacity: 0 },
+                      transition: { duration: 0.15 },
+                      children: selectedStaff ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-staff-avatar", children: selectedStaff.photo?.url ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("img", { src: selectedStaff.photo.url, alt: selectedStaff.name }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-staff-initials", children: getInitials(selectedStaff.name) }) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "bw-staff-trigger-info", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-staff-trigger-name", children: selectedStaff.name }),
+                          selectedStaff.bio && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-staff-trigger-desc", children: truncate(selectedStaff.bio, 40) })
+                        ] })
+                      ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-staff-avatar bw-staff-avatar--placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.User, { size: 14 }) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-staff-trigger-info", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-staff-trigger-name", children: "Any available specialist" }) })
+                      ] })
+                    },
+                    selectedStaff?.id ?? "any"
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.ChevronDown, { size: 16, className: "bw-staff-trigger-chevron" })
+                ]
+              }
+            ),
+            portalRef.current && (0, import_react_dom.createPortal)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_framer_motion.AnimatePresence, { children: staffOpen && (() => {
+                const rect = staffTriggerRef.current?.getBoundingClientRect();
+                return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    import_framer_motion.motion.div,
+                    {
+                      className: "bw-staff-overlay",
+                      onClick: () => setStaffOpen(false),
+                      initial: { opacity: 0 },
+                      animate: { opacity: 1 },
+                      exit: { opacity: 0 },
+                      transition: { duration: 0.15 }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                    import_framer_motion.motion.div,
+                    {
+                      className: "bw-staff-list",
+                      initial: { opacity: 0, y: -8 },
+                      animate: { opacity: 1, y: 0 },
+                      exit: { opacity: 0, y: -8 },
+                      transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },
+                      style: rect ? {
+                        top: rect.bottom + 4,
+                        left: rect.left,
+                        width: rect.width
+                      } : void 0,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                          "button",
+                          {
+                            className: `bw-staff-option${!selectedStaff ? " is-active" : ""}`,
+                            onClick: () => {
+                              setLocalStaff(null);
+                              bw.selectStaff(null);
+                              bw.selectService(null);
+                              setStaffOpen(false);
+                            },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-staff-avatar bw-staff-avatar--placeholder", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.User, { size: 14 }) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "bw-staff-option-info", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-staff-option-name", children: "Any Available" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-staff-option-desc", children: "First available specialist" })
+                              ] })
+                            ]
+                          }
+                        ),
+                        allStaff.map((member) => {
+                          const active = selectedStaff?.id === member.id;
+                          const photoUrl = member.photo?.url;
+                          return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                            "button",
+                            {
+                              className: `bw-staff-option${active ? " is-active" : ""}`,
+                              onClick: () => {
+                                setLocalStaff(member);
+                                bw.selectStaff(member);
+                                bw.selectService(null);
+                                setStaffOpen(false);
+                              },
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-staff-avatar", children: photoUrl ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("img", { src: photoUrl, alt: member.name }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-staff-initials", children: getInitials(member.name) }) }),
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "bw-staff-option-info", children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-staff-option-name", children: member.name }),
+                                  member.bio && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-staff-option-desc", children: truncate(member.bio, 60) })
+                                ] })
+                              ]
+                            },
+                            member.id
+                          );
+                        })
+                      ]
+                    }
+                  )
+                ] });
+              })() }),
+              portalRef.current
+            )
+          ] }),
+          hasMultipleCategories && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "bw-label", children: "Select Category" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-cat-scroll", ref: catScrollRef, children: bw.categories.map((cat, catIdx) => {
+              const active = bw.categoryFilter === cat;
+              const Icon = getCategoryIcon(cat, categoryIcons);
+              const catServices = (data?.services || []).filter((s) => s.category === cat).filter(isServiceForStaff);
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                  "button",
+                  {
+                    className: `bw-cat-card${active ? " is-active" : ""}`,
+                    onClick: () => bw.setCategoryFilter(active ? "all" : cat),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { size: 20, className: "bw-cat-icon" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-cat-name", children: cat }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        import_framer_motion.motion.span,
+                        {
+                          className: "bw-cat-chevron",
+                          animate: { rotate: active ? 90 : 0 },
+                          transition: { duration: 0.2, ease: "easeOut" },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.ChevronRight, { size: 16 })
+                        }
+                      ),
+                      active && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-cat-check", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.Check, { size: 12 }) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "div",
+                  {
+                    className: `bw-svc-scroll ${active ? "is-open" : ""}`,
+                    ref: (el) => {
+                      if (!el) return;
+                      if (active) {
+                        const wrap = el.querySelector(".bw-svc-scroll-wrap");
+                        if (wrap) requestAnimationFrame(() => initSvcScrollbar(wrap));
+                      } else {
+                        if (svcScrollbarRef.current) {
+                          svcScrollbarRef.current.scrollTo(0, 0, 0);
+                          try {
+                            svcScrollbarRef.current.destroy();
+                          } catch {
+                          }
+                          svcScrollbarRef.current = null;
+                        }
+                      }
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-svc-scroll-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-svc-scroll-inner", children: catServices.length ? catServices.map((svc) => renderServiceRow(svc)) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "bw-no-services", children: "No services available" }) }) })
+                  }
+                )
+              ] }, cat);
+            }) })
+          ] }),
+          !hasMultipleCategories && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-svc-scroll is-open", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-svc-scroll-wrap", ref: (el) => {
+            if (el) requestAnimationFrame(() => initSvcScrollbar(el));
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-svc-scroll-inner", children: staffFilteredServices.length ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+            staffFilteredServices.map((svc) => renderServiceRow(svc)),
+            bw.hasMoreServices && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { className: "bw-load-more", onClick: bw.loadMoreServices, children: "Show more services" })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "bw-no-services", children: "No services available" }) }) }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-step-2", children: [
+          bw.categoryFilter !== "all" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "bw-step-2-heading", children: bw.categoryFilter }),
+          staffFilteredServices.length ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+            staffFilteredServices.map((svc) => renderServiceRow(svc, "full")),
+            bw.hasMoreServices && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { className: "bw-load-more", onClick: bw.loadMoreServices, children: "Show more services" })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "bw-no-services", children: "No services available" })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-col bw-col--center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-cal-card", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-cal-header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-month-dropdown", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              "button",
+              {
+                className: "bw-month-btn",
+                onClick: () => setMonthOpen((o) => !o),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: bw.monthOptions.find(
+                    (o) => o.value === `${bw.calendarMonth.getFullYear()}-${String(bw.calendarMonth.getMonth() + 1).padStart(2, "0")}`
+                  )?.label ?? "Select month" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.ChevronDown, { size: 14 })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_framer_motion.AnimatePresence, { children: monthOpen && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                import_framer_motion.motion.div,
+                {
+                  className: "bw-month-overlay",
+                  onClick: () => setMonthOpen(false),
+                  initial: { opacity: 0 },
+                  animate: { opacity: 1 },
+                  exit: { opacity: 0 },
+                  transition: { duration: 0.15 }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                import_framer_motion.motion.div,
+                {
+                  className: "bw-month-list",
+                  initial: { opacity: 0, y: -8 },
+                  animate: { opacity: 1, y: 0 },
+                  exit: { opacity: 0, y: -8 },
+                  transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },
+                  children: bw.monthOptions.map((opt) => {
+                    const cur = `${bw.calendarMonth.getFullYear()}-${String(bw.calendarMonth.getMonth() + 1).padStart(2, "0")}`;
+                    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      "button",
+                      {
+                        className: `bw-month-option${opt.value === cur ? " is-active" : ""}`,
+                        onClick: () => {
+                          bw.handleMonthSelect(opt.value);
+                          setMonthOpen(false);
+                        },
+                        children: opt.label
+                      },
+                      opt.value
+                    );
+                  })
+                }
+              )
+            ] }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-cal-navs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { className: "bw-cal-nav", onClick: bw.handlePrevMonth, "aria-label": "Previous month", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.ChevronLeft, { size: 18 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "button",
+              {
+                className: "bw-cal-nav",
+                onClick: bw.handleNextMonth,
+                disabled: bw.maxAdvanceMonthStart ? bw.calendarMonth >= bw.maxAdvanceMonthStart : false,
+                "aria-label": "Next month",
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.ChevronRight, { size: 18 })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_framer_motion.AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          import_framer_motion.motion.div,
+          {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition: { duration: 0.15 },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-cal-weekdays", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((d) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: d }, d)) }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-cal-grid", children: bw.calendarDays.map((day, i) => {
+                const dateStr = day.date;
+                const dateObj = /* @__PURE__ */ new Date(dateStr + "T00:00:00");
+                const avail = bw.availabilityByDate?.get(dateStr);
+                const isAvailable = avail && avail.slots?.some((s) => s.available);
+                const isSelected = bw.selectedDate === dateStr;
+                const isToday = dateStr === todayStr;
+                const isPast = dateStr < todayStr;
+                const isBeyondMax = bw.maxAdvanceDate ? dateStr > bw.maxAdvanceDate.toISOString().split("T")[0] : false;
+                const isDisabled = !day.isCurrentMonth || isPast || isBeyondMax;
+                return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "button",
+                  {
+                    className: [
+                      "bw-cal-day",
+                      !day.isCurrentMonth && "is-outside",
+                      isSelected && "is-selected",
+                      isAvailable && !isDisabled && "is-available",
+                      isToday && "is-today",
+                      isDisabled && "is-disabled",
+                      !isAvailable && day.isCurrentMonth && !isPast && !isBeyondMax && "is-blocked"
+                    ].filter(Boolean).join(" "),
+                    disabled: isDisabled || !isAvailable || isSelected,
+                    onClick: () => {
+                      bw.selectDate(dateStr);
+                      bw.selectTime("", "");
+                    },
+                    children: dateObj.getDate()
+                  },
+                  i
+                );
+              }) })
+            ]
+          },
+          `${bw.calendarMonth.getFullYear()}-${bw.calendarMonth.getMonth()}`
+        ) }),
+        !bw.selectedService && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "bw-cal-prompt", children: "Please select a service to see availability." }),
+        bw.selectedService && bw.isAvailabilityLoading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-skel-slots", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-skel-slots-grid", children: [...Array(8)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-skel bw-skel--slot" }, i)) }) }),
+        bw.selectedService && bw.selectedDate && !bw.isAvailabilityLoading && (() => {
+          const dateAvail = bw.availabilityByDate?.get(bw.selectedDate);
+          const slots = dateAvail?.slots?.filter((s) => s.available) || [];
+          if (!slots.length) {
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "bw-no-slots", children: "No available times for this date." });
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-time-divider" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-time-slots", children: slots.map((slot, idx) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "button",
+              {
+                className: `bw-slot ${bw.selectedTime === slot.time ? "is-active" : ""}`,
+                onClick: () => bw.selectTime(slot.time, slot.endTime),
+                children: bw.formatTimeLabel(slot.time)
+              },
+              idx
+            )) })
+          ] });
+        })(),
+        bw.timeZoneLabel && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-timezone", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.Globe, { size: 14 }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: bw.timeZoneLabel })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-col bw-col--right", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-right-scroll", ref: rightScrollRef, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-right-inner", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("form", { className: "bw-form", ref: formRef, onSubmit: handleFormSubmit, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-form-fields", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { htmlFor: "bw-name", children: [
+              "Full name ",
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-required", children: "*" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "input",
+              {
+                id: "bw-name",
+                type: "text",
+                required: true,
+                placeholder: "John",
+                value: bw.details.name,
+                onChange: (e) => bw.setDetails((p) => ({ ...p, name: e.target.value }))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { htmlFor: "bw-email", children: [
+              "Email ",
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-required", children: "*" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "input",
+              {
+                id: "bw-email",
+                type: "email",
+                required: true,
+                placeholder: "jane@example.com",
+                value: bw.details.email,
+                onChange: (e) => bw.setDetails((p) => ({ ...p, email: e.target.value }))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { htmlFor: "bw-phone", children: "Phone" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "input",
+              {
+                id: "bw-phone",
+                type: "tel",
+                placeholder: "+1 (555) 000-0000",
+                value: bw.details.phone,
+                onChange: (e) => bw.setDetails((p) => ({ ...p, phone: e.target.value }))
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-field bw-field--notes", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { htmlFor: "bw-notes", children: "Additional notes" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "textarea",
+            {
+              id: "bw-notes",
+              placeholder: "Any preferences or special requests...",
+              rows: 3,
+              maxLength: 500,
+              style: { resize: "none" },
+              value: bw.details.notes,
+              onChange: (e) => bw.setDetails((p) => ({ ...p, notes: e.target.value }))
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "bw-char-count", children: [
+            bw.details.notes?.length || 0,
+            "/500"
+          ] })
+        ] }),
+        bw.selectedService && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-summary", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-summary-title", children: "Booking Summary" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-summary-rows", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-summary-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Service" }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-summary-val", children: bw.selectedService.name })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-summary-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Specialist" }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-summary-val", children: selectedStaff?.name || "Any Available" })
+            ] }),
+            bw.selectedDate && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-summary-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Date" }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-summary-val", children: bw.formatDateLabel(bw.selectedDate) })
+            ] }),
+            bw.selectedTime && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-summary-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Time" }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-summary-val", children: bw.formatTimeLabel(bw.selectedTime) })
+            ] }),
+            bw.selectedService.duration != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-summary-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Duration" }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-summary-val", children: bw.formatDuration(bw.selectedService.duration) })
+            ] }),
+            bw.selectedService.price != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-summary-row bw-summary-total", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Estimated total" }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-summary-val", children: formatPrice(Number(bw.selectedService.price)) })
+            ] })
+          ] })
+        ] }),
+        bw.bookingError && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "bw-error", children: bw.bookingError }),
+        !canSubmit && !bw.isSubmitting && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "bw-confirm-hint", children: !bw.selectedService ? "Please select a service to confirm booking." : !bw.selectedTime ? "Please select a time to confirm booking." : "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", { type: "submit", className: "bw-confirm-btn", disabled: !canSubmit, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: bw.isSubmitting ? "Booking..." : "Confirm Booking" }),
+          !bw.isSubmitting && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.ArrowRight, { size: 16 })
+        ] })
+      ] }) }) }) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-footer", children: [
+      mobileStep === 4 && bw.selectedService && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-footer-summary", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-summary-title", children: "Booking Summary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-summary-rows", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-summary-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Service" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-summary-val", children: bw.selectedService.name })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-summary-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Specialist" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-summary-val", children: selectedStaff?.name || "Any Available" })
+          ] }),
+          bw.selectedDate && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-summary-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Date" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-summary-val", children: bw.formatDateLabel(bw.selectedDate) })
+          ] }),
+          bw.selectedTime && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-summary-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Time" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-summary-val", children: bw.formatTimeLabel(bw.selectedTime) })
+          ] }),
+          bw.selectedService.price != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-summary-row bw-summary-total", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Estimated total" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "bw-summary-val", children: formatPrice(Number(bw.selectedService.price)) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bw-footer-btns", children: [
+        mobileStep > 1 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "button",
+          {
+            className: "bw-footer-back",
+            onClick: () => setMobileStep((s) => s - 1),
+            "aria-label": "Go back",
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.ArrowLeft, { size: 20 })
+          }
+        ),
+        mobileStep < 4 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "button",
+          {
+            className: "bw-footer-next",
+            disabled: mobileStep === 1 && !canAdvanceStep1 || mobileStep === 2 && !canAdvanceStep2 || mobileStep === 3 && !canAdvanceStep3,
+            onClick: () => setMobileStep((s) => s + 1),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Next" }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.ArrowRight, { size: 16 })
+            ]
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "button",
+          {
+            className: "bw-footer-next",
+            disabled: !canSubmit,
+            onClick: () => formRef.current?.requestSubmit(),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: bw.isSubmitting ? "Booking..." : "Confirm Booking" }),
+              !bw.isSubmitting && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react.ArrowRight, { size: 16 })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: portalRef, className: "bw-portal" })
+  ] });
+}
+
+// src/components/AvailabilityPicker.tsx
+var import_react10 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function AvailabilityPicker({
   serviceId,
   staffId,
@@ -1722,8 +2600,8 @@ function AvailabilityPicker({
   className,
   onSelect
 }) {
-  const [selectedDate, setSelectedDate] = (0, import_react9.useState)(date || null);
-  const [selectedTime, setSelectedTime] = (0, import_react9.useState)(null);
+  const [selectedDate, setSelectedDate] = (0, import_react10.useState)(date || null);
+  const [selectedTime, setSelectedTime] = (0, import_react10.useState)(null);
   const { data, isLoading } = useAvailability({
     serviceId,
     staffId,
@@ -1731,15 +2609,15 @@ function AvailabilityPicker({
     days
   });
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "idk-state", children: "Loading availability..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "idk-state", children: "Loading availability..." });
   }
   if (!data?.dates?.length) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "idk-state", children: "No availability found." });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "idk-state", children: "No availability found." });
   }
   const activeDate = selectedDate || data.dates[0]?.date;
   const activeSlots = data.dates.find((entry) => entry.date === activeDate)?.slots || [];
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: ["idk-availability", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "idk-availability__dates", children: data.dates.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: ["idk-availability", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "idk-availability__dates", children: data.dates.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "button",
       {
         type: "button",
@@ -1752,7 +2630,7 @@ function AvailabilityPicker({
       },
       entry.date
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "idk-availability__slots", children: activeSlots.filter((slot) => slot.available).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "idk-state", children: "No slots available." }) : activeSlots.filter((slot) => slot.available).map((slot) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "idk-availability__slots", children: activeSlots.filter((slot) => slot.available).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "idk-state", children: "No slots available." }) : activeSlots.filter((slot) => slot.available).map((slot) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "button",
       {
         type: "button",
@@ -1775,22 +2653,22 @@ function AvailabilityPicker({
 }
 
 // src/components/ServicePicker.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function ServicePicker({
   services,
   selectedId,
   onSelect,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: services.map((service) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: services.map((service) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "button",
     {
       type: "button",
       className: selectedId === service.id ? "is-active" : void 0,
       onClick: () => onSelect?.(service),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: service.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("small", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: service.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("small", { children: [
           service.duration,
           " min"
         ] })
@@ -1801,22 +2679,22 @@ function ServicePicker({
 }
 
 // src/components/StaffPicker.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function StaffPicker({
   staff,
   selectedId,
   onSelect,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: staff.map((member) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: staff.map((member) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "button",
     {
       type: "button",
       className: selectedId === member.id ? "is-active" : void 0,
       onClick: () => onSelect?.(member),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: member.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("small", { children: member.role || "Staff" })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: member.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("small", { children: member.role || "Staff" })
       ]
     },
     member.id
@@ -1824,14 +2702,14 @@ function StaffPicker({
 }
 
 // src/components/DatePicker.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function DatePicker({
   dates,
   selectedDate,
   onSelect,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: dates.map((date) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: dates.map((date) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "button",
     {
       type: "button",
@@ -1844,14 +2722,14 @@ function DatePicker({
 }
 
 // src/components/TimePicker.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function TimePicker({
   slots,
   selectedTime,
   onSelect,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: slots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: slots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "button",
     {
       type: "button",
@@ -1867,6 +2745,7 @@ function TimePicker({
 0 && (module.exports = {
   AvailabilityPicker,
   BookingWidget,
+  BookingWidgetPanel,
   ContactForm,
   DatePicker,
   PlatformProvider,