@idkwebsites/components 0.1.7 → 0.1.14

package/dist/index.cjs

@@ -136,29 +136,97 @@ function useTenant() {
 }
 
 // src/core/hooks/useServices.ts
+var import_react3 = require("react");
 var import_react_query3 = require("@tanstack/react-query");
-function useServices() {
+function buildQuery(params) {
+  if (!params) return "";
+  const searchParams = new URLSearchParams();
+  const categories = Array.isArray(params.category) ? params.category : params.category ? [params.category] : [];
+  if (categories.length) searchParams.set("category", categories.join(","));
+  if (params.staffId) searchParams.set("staffId", params.staffId);
+  if (typeof params.isActive === "boolean") searchParams.set("isActive", String(params.isActive));
+  if (typeof params.minPrice === "number") searchParams.set("minPrice", String(params.minPrice));
+  if (typeof params.maxPrice === "number") searchParams.set("maxPrice", String(params.maxPrice));
+  if (params.search) searchParams.set("search", params.search);
+  if (params.ids?.length) searchParams.set("ids", params.ids.join(","));
+  if (typeof params.limit === "number") searchParams.set("limit", String(params.limit));
+  if (params.sort) searchParams.set("sort", params.sort);
+  if (params.order) searchParams.set("order", params.order);
+  return searchParams.toString();
+}
+function useServices(params) {
   const config = usePlatformConfig();
+  const queryString = (0, import_react3.useMemo)(() => buildQuery(params), [
+    params?.category,
+    params?.staffId,
+    params?.isActive,
+    params?.minPrice,
+    params?.maxPrice,
+    params?.search,
+    params?.ids,
+    params?.limit,
+    params?.sort,
+    params?.order
+  ]);
+  const enabled = params?.enabled ?? true;
   return (0, import_react_query3.useQuery)({
-    queryKey: ["idk", "services"],
-    queryFn: () => apiRequest(config, "/services")
+    queryKey: ["idk", "services", queryString],
+    queryFn: () => apiRequest(
+      config,
+      queryString ? `/services?${queryString}` : "/services"
+    ),
+    enabled
   });
 }
 
 // src/core/hooks/useTeam.ts
+var import_react4 = require("react");
 var import_react_query4 = require("@tanstack/react-query");
-function useTeam() {
+function buildQuery2(params) {
+  if (!params) return "";
+  const searchParams = new URLSearchParams();
+  const roles = Array.isArray(params.role) ? params.role : params.role ? [params.role] : [];
+  if (roles.length) searchParams.set("role", roles.join(","));
+  if (typeof params.isActive === "boolean") searchParams.set("isActive", String(params.isActive));
+  if (typeof params.acceptsNewBookings === "boolean") {
+    searchParams.set("acceptsNewBookings", String(params.acceptsNewBookings));
+  }
+  if (params.search) searchParams.set("search", params.search);
+  if (params.ids?.length) searchParams.set("ids", params.ids.join(","));
+  if (params.serviceId) searchParams.set("serviceId", params.serviceId);
+  if (typeof params.limit === "number") searchParams.set("limit", String(params.limit));
+  if (params.sort) searchParams.set("sort", params.sort);
+  if (params.order) searchParams.set("order", params.order);
+  return searchParams.toString();
+}
+function useTeam(params) {
   const config = usePlatformConfig();
+  const queryString = (0, import_react4.useMemo)(() => buildQuery2(params), [
+    params?.role,
+    params?.isActive,
+    params?.acceptsNewBookings,
+    params?.search,
+    params?.ids,
+    params?.serviceId,
+    params?.limit,
+    params?.sort,
+    params?.order
+  ]);
+  const enabled = params?.enabled ?? true;
   return (0, import_react_query4.useQuery)({
-    queryKey: ["idk", "team"],
-    queryFn: () => apiRequest(config, "/team")
+    queryKey: ["idk", "team", queryString],
+    queryFn: () => apiRequest(
+      config,
+      queryString ? `/team?${queryString}` : "/team"
+    ),
+    enabled
   });
 }
 
 // src/core/hooks/useAvailability.ts
-var import_react3 = require("react");
+var import_react5 = require("react");
 var import_react_query5 = require("@tanstack/react-query");
-function buildQuery(params) {
+function buildQuery3(params) {
   const searchParams = new URLSearchParams();
   searchParams.set("serviceId", params.serviceId);
   if (params.staffId) searchParams.set("staffId", params.staffId);
@@ -170,8 +238,8 @@ function buildQuery(params) {
 }
 function useAvailability(params) {
   const config = usePlatformConfig();
-  const queryString = (0, import_react3.useMemo)(
-    () => buildQuery(params),
+  const queryString = (0, import_react5.useMemo)(
+    () => buildQuery3(params),
     [params.serviceId, params.staffId, params.startDate, params.endDate, params.date, params.days]
   );
   const enabled = params.enabled ?? Boolean(params.serviceId);
@@ -221,6 +289,7 @@ function ServiceCard({
   className,
   showDescription = true,
   showPrice = true,
+  showImage = false,
   onSelect
 }) {
   const handleClick = () => {
@@ -234,6 +303,7 @@ function ServiceCard({
       role: onSelect ? "button" : void 0,
       tabIndex: onSelect ? 0 : void 0,
       children: [
+        showImage && service.image?.url ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "idk-card__media", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: service.image.url, alt: service.name }) }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "idk-card__header", children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "idk-card__title", children: service.name }),
           showPrice && typeof service.price === "number" && service.price > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "idk-card__price", children: [
@@ -262,14 +332,31 @@ function ServicesList({
   className,
   showDescription,
   showPrice,
+  showImage,
+  query,
+  filter,
+  sort,
+  limit,
+  emptyMessage = "No services available.",
+  loadingMessage = "Loading services...",
   onSelect
 }) {
-  const { data, isLoading, error } = useServices();
+  const { data, isLoading, error } = useServices(query);
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "idk-state", children: "Loading services..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "idk-state", children: loadingMessage });
   }
-  if (error || !data?.services?.length) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "idk-state", children: "No services available." });
+  let services = data?.services ? [...data.services] : [];
+  if (filter) {
+    services = services.filter(filter);
+  }
+  if (sort) {
+    services = services.sort(sort);
+  }
+  if (typeof limit === "number") {
+    services = services.slice(0, Math.max(0, limit));
+  }
+  if (error || services.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "idk-state", children: emptyMessage });
   }
   const gridStyle = layout === "grid" ? { gridTemplateColumns: `repeat(${Math.max(1, columns)}, minmax(0, 1fr))` } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -281,12 +368,13 @@ function ServicesList({
         className
       ].filter(Boolean).join(" "),
       style: gridStyle,
-      children: data.services.map((service) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      children: services.map((service) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         ServiceCard,
         {
           service,
           showDescription,
           showPrice,
+          showImage,
           onSelect
         },
         service.id
@@ -295,52 +383,145 @@ function ServicesList({
   );
 }
 
-// src/components/TeamMember.tsx
+// src/lib/linkify.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var LINK_REGEX = /((https?:\/\/|www\.)[^\s]+|[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}|(?:[a-z0-9-]+\.)+[a-z]{2,}(?:\/[^\s]*)?)/gi;
+function buildHref(raw) {
+  if (raw.includes("@") && !raw.startsWith("http")) {
+    return `mailto:${raw}`;
+  }
+  if (raw.startsWith("http://") || raw.startsWith("https://")) {
+    return raw;
+  }
+  if (raw.startsWith("www.")) {
+    return `https://${raw}`;
+  }
+  return `https://${raw}`;
+}
+function trimTrailingPunctuation(value) {
+  let text = value;
+  let trailing = "";
+  while (text && /[),.!?:;]+$/.test(text)) {
+    trailing = text.slice(-1) + trailing;
+    text = text.slice(0, -1);
+  }
+  return { text, trailing };
+}
+function renderLinkedText(text) {
+  if (!text) return null;
+  const matches = Array.from(text.matchAll(LINK_REGEX));
+  if (matches.length === 0) return text;
+  const nodes = [];
+  let lastIndex = 0;
+  matches.forEach((match, index) => {
+    const matchText = match[0];
+    const start = match.index ?? 0;
+    if (start > lastIndex) {
+      nodes.push(text.slice(lastIndex, start));
+    }
+    const { text: cleanText, trailing } = trimTrailingPunctuation(matchText);
+    if (cleanText) {
+      const href = buildHref(cleanText);
+      nodes.push(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", children: cleanText }, `link-${start}-${index}`)
+      );
+    }
+    if (trailing) {
+      nodes.push(trailing);
+    }
+    lastIndex = start + matchText.length;
+  });
+  if (lastIndex < text.length) {
+    nodes.push(text.slice(lastIndex));
+  }
+  return nodes;
+}
+
+// src/components/TeamMember.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function TeamMember({
   member,
   className,
   showRole = true,
-  showEmail = false
+  showEmail = false,
+  showBio = false,
+  layout = "card",
+  imagePosition = "left"
 }) {
   const initials = member.name?.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: ["idk-card", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "idk-team__avatar", children: member.photo?.url ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { src: member.photo.url, alt: member.name }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: initials }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "idk-team__info", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "idk-card__title", children: member.name }),
-      showRole ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "idk-card__description", children: member.role || "Staff" }) : null,
-      showEmail ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "idk-card__meta", children: member.email }) : null
+  const avatar = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "idk-team__avatar", children: member.photo?.url ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: member.photo.url, alt: member.name }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: initials }) });
+  if (layout === "profile") {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: ["idk-team__profile", className].filter(Boolean).join(" "), children: [
+      imagePosition === "left" ? avatar : null,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "idk-team__info", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "idk-card__title", children: member.name }),
+        showRole ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "idk-card__description", children: member.role || "Staff" }) : null,
+        showBio && member.bio ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "idk-team__bio", children: renderLinkedText(member.bio) }) : null,
+        showEmail ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "idk-card__meta", children: member.email }) : null
+      ] }),
+      imagePosition === "right" ? avatar : null
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: ["idk-card", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "idk-team__avatar", children: member.photo?.url ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: member.photo.url, alt: member.name }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: initials }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "idk-team__info", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "idk-card__title", children: member.name }),
+      showRole ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "idk-card__description", children: member.role || "Staff" }) : null,
+      showBio && member.bio ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "idk-team__bio", children: renderLinkedText(member.bio) }) : null,
+      showEmail ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "idk-card__meta", children: member.email }) : null
     ] })
   ] });
 }
 
 // src/components/TeamGrid.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function TeamGrid({
   columns = 3,
   className,
   showRole,
-  showEmail
+  showEmail,
+  showBio,
+  layout = "card",
+  imagePosition = "left",
+  query,
+  filter,
+  sort,
+  limit,
+  emptyMessage = "No team members available.",
+  loadingMessage = "Loading team..."
 }) {
-  const { data, isLoading, error } = useTeam();
+  const { data, isLoading, error } = useTeam(query);
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "idk-state", children: "Loading team..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "idk-state", children: loadingMessage });
+  }
+  let members = data?.team ? [...data.team] : [];
+  if (filter) {
+    members = members.filter(filter);
+  }
+  if (sort) {
+    members = members.sort(sort);
+  }
+  if (typeof limit === "number") {
+    members = members.slice(0, Math.max(0, limit));
   }
-  if (error || !data?.team?.length) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "idk-state", children: "No team members available." });
+  if (error || members.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "idk-state", children: emptyMessage });
   }
   const gridStyle = { gridTemplateColumns: `repeat(${Math.max(1, columns)}, minmax(0, 1fr))` };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       className: ["idk-team", className].filter(Boolean).join(" "),
       style: gridStyle,
-      children: data.team.map((member) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      children: members.map((member) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         TeamMember,
         {
           member,
           showRole,
-          showEmail
+          showEmail,
+          showBio,
+          layout,
+          imagePosition
         },
         member.id
       ))
@@ -349,9 +530,9 @@ function TeamGrid({
 }
 
 // src/components/ContactForm.tsx
-var import_react4 = require("react");
+var import_react6 = require("react");
 var import_react_query7 = require("@tanstack/react-query");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var DEFAULT_FIELDS = ["name", "email", "phone", "message"];
 function ContactForm({
   fields = DEFAULT_FIELDS,
@@ -362,7 +543,7 @@ function ContactForm({
   onError
 }) {
   const config = usePlatformConfig();
-  const [formState, setFormState] = (0, import_react4.useState)({
+  const [formState, setFormState] = (0, import_react6.useState)({
     name: "",
     email: "",
     phone: "",
@@ -397,10 +578,10 @@ function ContactForm({
       formType
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("form", { className: ["idk-form", className].filter(Boolean).join(" "), onSubmit: handleSubmit, children: [
-    fields.includes("name") && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "idk-form__field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Name" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { className: ["idk-form", className].filter(Boolean).join(" "), onSubmit: handleSubmit, children: [
+    fields.includes("name") && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "idk-form__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "input",
         {
           value: formState.name,
@@ -409,9 +590,9 @@ function ContactForm({
         }
       )
     ] }),
-    fields.includes("email") && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "idk-form__field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Email" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    fields.includes("email") && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "idk-form__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Email" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "input",
         {
           type: "email",
@@ -421,9 +602,9 @@ function ContactForm({
         }
       )
     ] }),
-    fields.includes("phone") && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "idk-form__field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Phone" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    fields.includes("phone") && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "idk-form__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Phone" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "input",
         {
           value: formState.phone,
@@ -431,9 +612,9 @@ function ContactForm({
         }
       )
     ] }),
-    fields.includes("subject") && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "idk-form__field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Subject" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    fields.includes("subject") && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "idk-form__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Subject" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "input",
         {
           value: formState.subject,
@@ -441,9 +622,9 @@ function ContactForm({
         }
       )
     ] }),
-    fields.includes("message") && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "idk-form__field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Message" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    fields.includes("message") && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "idk-form__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Message" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "textarea",
         {
           value: formState.message,
@@ -453,227 +634,942 @@ function ContactForm({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "submit", className: "idk-button", disabled: mutation.isPending, children: mutation.isPending ? "Sending..." : submitLabel }),
-    mutation.isError ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "idk-form__error", children: "Something went wrong. Please try again." }) : null,
-    mutation.isSuccess ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "idk-form__success", children: "Thanks! We'll be in touch soon." }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "submit", className: "idk-button", disabled: mutation.isPending, children: mutation.isPending ? "Sending..." : submitLabel }),
+    mutation.isError ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "idk-form__error", children: "Something went wrong. Please try again." }) : null,
+    mutation.isSuccess ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "idk-form__success", children: "Thanks! We'll be in touch soon." }) : null
   ] });
 }
 
 // src/components/BookingWidget.tsx
-var import_react5 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var parseDateOnly = (value) => {
+  if (!value) return null;
+  const normalized = value.includes("T") ? value.split("T")[0] : value;
+  const parsed = /* @__PURE__ */ new Date(`${normalized}T00:00:00`);
+  return Number.isNaN(parsed.getTime()) ? null : parsed;
+};
+var addDays = (dateStr, days) => {
+  const parsed = parseDateOnly(dateStr);
+  if (!parsed) return dateStr;
+  parsed.setDate(parsed.getDate() + days);
+  return parsed.toISOString().slice(0, 10);
+};
 function BookingWidget({
   className,
   showStaffSelection = true,
-  onSuccess
+  onSuccess,
+  services,
+  servicesQuery,
+  teamQuery,
+  serviceFilter,
+  teamFilter,
+  title = "Book an Appointment",
+  subtitle,
+  autoAdvanceOnSelect = false,
+  scrollToStep = true,
+  scrollOffset = 96,
+  enableServiceSearch = true,
+  serviceSearchPlaceholder = "Search services",
+  enableCategoryFilter = false,
+  categoryLabel = "All categories",
+  serviceListMaxHeight,
+  serviceLayout = "list",
+  serviceColumns = 2,
+  servicePageSize = 10,
+  showServicePagination,
+  staffLayout = "grid",
+  staffColumns = 2,
+  showAnyStaffOption = true,
+  staffPageSize = 8,
+  showStaffPagination,
+  timeLayout = "split",
+  availabilityDays: availabilityDaysProp = 7,
+  enableDatePaging = true,
+  datePickerMode = "list",
+  calendarVariant = "default",
+  maxAdvanceMonths = 3,
+  disabledWeekdays = [],
+  showFullyBookedLabel = true
 }) {
-  const { data: servicesData, isLoading: servicesLoading } = useServices();
-  const { data: teamData } = useTeam();
+  const resolvedServicesQuery = (0, import_react7.useMemo)(
+    () => services ? { ...servicesQuery, enabled: false } : servicesQuery,
+    [services, servicesQuery]
+  );
+  const { data: servicesData, isLoading: servicesLoading } = useServices(resolvedServicesQuery);
+  const { data: teamData } = useTeam(teamQuery);
   const createBooking = useCreateBooking();
-  const [step, setStep] = (0, import_react5.useState)("service");
-  const [selectedService, setSelectedService] = (0, import_react5.useState)(null);
-  const [selectedStaff, setSelectedStaff] = (0, import_react5.useState)(null);
-  const [selectedDate, setSelectedDate] = (0, import_react5.useState)(null);
-  const [selectedTime, setSelectedTime] = (0, import_react5.useState)(null);
-  const [selectedEndTime, setSelectedEndTime] = (0, import_react5.useState)(null);
-  const [details, setDetails] = (0, import_react5.useState)({
+  const widgetRef = (0, import_react7.useRef)(null);
+  const [step, setStep] = (0, import_react7.useState)("service");
+  const [selectedService, setSelectedService] = (0, import_react7.useState)(null);
+  const [selectedStaff, setSelectedStaff] = (0, import_react7.useState)(null);
+  const [selectedDate, setSelectedDate] = (0, import_react7.useState)(null);
+  const [selectedTime, setSelectedTime] = (0, import_react7.useState)(null);
+  const [selectedEndTime, setSelectedEndTime] = (0, import_react7.useState)(null);
+  const [serviceSearch, setServiceSearch] = (0, import_react7.useState)("");
+  const [categoryFilter, setCategoryFilter] = (0, import_react7.useState)("all");
+  const [servicePage, setServicePage] = (0, import_react7.useState)(1);
+  const [staffPage, setStaffPage] = (0, import_react7.useState)(1);
+  const [availabilityDays, setAvailabilityDays] = (0, import_react7.useState)(
+    Math.max(1, availabilityDaysProp)
+  );
+  const [availabilityStartDate, setAvailabilityStartDate] = (0, import_react7.useState)(
+    () => (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)
+  );
+  const [calendarMonth, setCalendarMonth] = (0, import_react7.useState)(() => {
+    const now = /* @__PURE__ */ new Date();
+    return new Date(now.getFullYear(), now.getMonth(), 1);
+  });
+  const [bookingError, setBookingError] = (0, import_react7.useState)(null);
+  const [details, setDetails] = (0, import_react7.useState)({
     name: "",
     email: "",
     phone: "",
     notes: ""
   });
-  const staffOptions = (0, import_react5.useMemo)(() => {
+  const servicesList = (0, import_react7.useMemo)(() => {
+    const list = services ? [...services] : servicesData?.services ? [...servicesData.services] : [];
+    return serviceFilter ? list.filter(serviceFilter) : list;
+  }, [services, servicesData, serviceFilter]);
+  const categories = (0, import_react7.useMemo)(() => {
+    const set = /* @__PURE__ */ new Set();
+    servicesList.forEach((service) => {
+      if (service.category) {
+        set.add(service.category);
+      }
+    });
+    return Array.from(set).sort();
+  }, [servicesList]);
+  const filteredServices = (0, import_react7.useMemo)(() => {
+    const search = serviceSearch.trim().toLowerCase();
+    return servicesList.filter((service) => {
+      const matchesSearch = !search || service.name.toLowerCase().includes(search) || (service.description || "").toLowerCase().includes(search) || (service.category || "").toLowerCase().includes(search);
+      const matchesCategory = categoryFilter === "all" ? true : service.category === categoryFilter;
+      return matchesSearch && matchesCategory;
+    });
+  }, [servicesList, serviceSearch, categoryFilter]);
+  (0, import_react7.useEffect)(() => {
+    setServicePage(1);
+  }, [serviceSearch, categoryFilter]);
+  (0, import_react7.useEffect)(() => {
+    setStaffPage(1);
+  }, [selectedService?.id, teamData, teamFilter]);
+  const pagedServices = (0, import_react7.useMemo)(() => {
+    const pageSize = Math.max(1, servicePageSize);
+    return filteredServices.slice(0, pageSize * servicePage);
+  }, [filteredServices, servicePage, servicePageSize]);
+  const hasMoreServices = filteredServices.length > pagedServices.length;
+  const shouldPaginate = showServicePagination ?? hasMoreServices;
+  const staffOptions = (0, import_react7.useMemo)(() => {
     if (!selectedService) return [];
     if (selectedService.assignedStaff && selectedService.assignedStaff.length > 0) {
-      return selectedService.assignedStaff;
+      const assigned = selectedService.assignedStaff;
+      return teamFilter ? assigned.filter(teamFilter) : assigned;
     }
-    return teamData?.team || [];
-  }, [selectedService, teamData]);
+    const teamList = teamData?.team || [];
+    return teamFilter ? teamList.filter(teamFilter) : teamList;
+  }, [selectedService, teamData, teamFilter]);
+  const pagedStaff = (0, import_react7.useMemo)(() => {
+    const pageSize = Math.max(1, staffPageSize);
+    return staffOptions.slice(0, pageSize * staffPage);
+  }, [staffOptions, staffPage, staffPageSize]);
+  const hasMoreStaff = staffOptions.length > pagedStaff.length;
+  const shouldPaginateStaff = showStaffPagination ?? hasMoreStaff;
+  const availabilityEndDate = (0, import_react7.useMemo)(
+    () => addDays(availabilityStartDate, Math.max(1, availabilityDays) - 1),
+    [availabilityStartDate, availabilityDays]
+  );
   const availability = useAvailability({
     serviceId: selectedService?.id || "",
     staffId: selectedStaff?.id,
-    days: 7,
+    startDate: availabilityStartDate,
+    endDate: availabilityEndDate,
     enabled: Boolean(selectedService)
   });
+  const timeZone = availability.data?.timeZone || "America/Chicago";
+  const safeTimeZone = (0, import_react7.useMemo)(() => {
+    if (!timeZone) return void 0;
+    try {
+      new Intl.DateTimeFormat("en-US", { timeZone }).format(/* @__PURE__ */ new Date());
+      return timeZone;
+    } catch {
+      return void 0;
+    }
+  }, [timeZone]);
+  const timeZoneLabel = (0, import_react7.useMemo)(() => {
+    if (timeZone) return timeZone;
+    try {
+      return Intl.DateTimeFormat().resolvedOptions().timeZone;
+    } catch {
+      return "Local time";
+    }
+  }, [timeZone]);
+  const dateLabelFormatter = (0, import_react7.useMemo)(
+    () => new Intl.DateTimeFormat("en-US", {
+      weekday: "short",
+      month: "short",
+      day: "numeric"
+    }),
+    []
+  );
+  const dateHeadingFormatter = (0, import_react7.useMemo)(
+    () => new Intl.DateTimeFormat("en-US", {
+      weekday: "long",
+      month: "long",
+      day: "numeric"
+    }),
+    []
+  );
+  const timeFormatter = (0, import_react7.useMemo)(
+    () => new Intl.DateTimeFormat("en-US", {
+      timeZone: safeTimeZone,
+      hour: "numeric",
+      minute: "2-digit"
+    }),
+    [safeTimeZone]
+  );
   const requiresStaff = showStaffSelection || selectedService?.requiresStaffSelection || selectedService?.schedulingType === "customer-choice";
+  const canSkipStaff = !selectedService?.requiresStaffSelection;
+  const totalSteps = requiresStaff ? 4 : 3;
+  const stepNumber = (() => {
+    if (step === "service") return 1;
+    if (step === "staff") return 2;
+    if (step === "time") return requiresStaff ? 3 : 2;
+    if (step === "details") return requiresStaff ? 4 : 3;
+    return totalSteps;
+  })();
+  const scrollToTop = (0, import_react7.useCallback)(() => {
+    if (!scrollToStep || !widgetRef.current) return;
+    const top = widgetRef.current.getBoundingClientRect().top + window.scrollY;
+    window.scrollTo({
+      top: Math.max(0, top - scrollOffset),
+      behavior: "smooth"
+    });
+  }, [scrollToStep, scrollOffset]);
+  const resetSelections = () => {
+    setSelectedStaff(null);
+    setSelectedDate(null);
+    setSelectedTime(null);
+    setSelectedEndTime(null);
+    setBookingError(null);
+  };
+  const parseDateTime = (value, fallbackDate) => {
+    if (!value) return null;
+    const direct = new Date(value);
+    if (!Number.isNaN(direct.getTime())) return direct;
+    if (fallbackDate) {
+      const normalized = fallbackDate.includes("T") ? fallbackDate.split("T")[0] : fallbackDate;
+      const combined = /* @__PURE__ */ new Date(`${normalized}T${value}`);
+      if (!Number.isNaN(combined.getTime())) return combined;
+    }
+    return null;
+  };
+  const formatDateLabel = (date) => {
+    const parsed = parseDateOnly(date);
+    if (!parsed) return date;
+    try {
+      return dateLabelFormatter.format(parsed);
+    } catch {
+      return date;
+    }
+  };
+  const formatDateHeading = (date) => {
+    const parsed = parseDateOnly(date);
+    if (!parsed) return date;
+    try {
+      return dateHeadingFormatter.format(parsed);
+    } catch {
+      return date;
+    }
+  };
+  const formatTimeLabel = (iso) => {
+    const parsed = parseDateTime(iso, selectedDate);
+    if (!parsed) return iso;
+    try {
+      return timeFormatter.format(parsed);
+    } catch {
+      return parsed.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" });
+    }
+  };
+  const formatDuration = (minutes) => {
+    if (!Number.isFinite(minutes)) return "";
+    if (minutes < 60) return `${minutes} min`;
+    const hours = Math.floor(minutes / 60);
+    const remaining = minutes % 60;
+    return remaining === 0 ? `${hours} hr${hours > 1 ? "s" : ""}` : `${hours} hr ${remaining} min`;
+  };
+  const todayString = (0, import_react7.useMemo)(() => (/* @__PURE__ */ new Date()).toISOString().slice(0, 10), []);
+  const todayDate = (0, import_react7.useMemo)(() => {
+    const now = /* @__PURE__ */ new Date();
+    now.setHours(0, 0, 0, 0);
+    return now;
+  }, []);
+  const disabledWeekdaysSet = (0, import_react7.useMemo)(() => new Set(disabledWeekdays), [disabledWeekdays]);
+  const getMonthStart = (0, import_react7.useCallback)((date) => {
+    return new Date(date.getFullYear(), date.getMonth(), 1);
+  }, []);
+  const getMonthEnd = (0, import_react7.useCallback)((date) => {
+    return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+  }, []);
+  const getMonthDays = (0, import_react7.useCallback)(
+    (date) => {
+      const start = getMonthStart(date);
+      const end = getMonthEnd(date);
+      const days = [];
+      const startDay = start.getDay();
+      for (let i = startDay; i > 0; i -= 1) {
+        const d = new Date(start);
+        d.setDate(start.getDate() - i);
+        days.push({ date: d.toISOString().slice(0, 10), isCurrentMonth: false });
+      }
+      for (let day = 1; day <= end.getDate(); day += 1) {
+        const d = new Date(date.getFullYear(), date.getMonth(), day);
+        days.push({ date: d.toISOString().slice(0, 10), isCurrentMonth: true });
+      }
+      const remainder = 7 - (days.length % 7 || 7);
+      for (let i = 1; i <= remainder; i += 1) {
+        const d = new Date(end);
+        d.setDate(end.getDate() + i);
+        days.push({ date: d.toISOString().slice(0, 10), isCurrentMonth: false });
+      }
+      return days;
+    },
+    [getMonthEnd, getMonthStart]
+  );
+  const maxAdvanceDate = (0, import_react7.useMemo)(() => {
+    if (!maxAdvanceMonths || maxAdvanceMonths <= 0) return null;
+    const maxMonth = new Date(todayDate.getFullYear(), todayDate.getMonth() + maxAdvanceMonths - 1, 1);
+    return getMonthEnd(maxMonth);
+  }, [getMonthEnd, maxAdvanceMonths, todayDate]);
+  const maxAdvanceMonthStart = (0, import_react7.useMemo)(() => {
+    if (!maxAdvanceMonths || maxAdvanceMonths <= 0) return null;
+    return new Date(todayDate.getFullYear(), todayDate.getMonth() + maxAdvanceMonths - 1, 1);
+  }, [maxAdvanceMonths, todayDate]);
+  const handlePrevDates = () => {
+    if (availabilityStartDate <= todayString) return;
+    setAvailabilityStartDate((prev) => addDays(prev, -availabilityDays));
+    setSelectedDate(null);
+    setSelectedTime(null);
+    setSelectedEndTime(null);
+    setBookingError(null);
+  };
+  const handleNextDates = () => {
+    if (maxAdvanceDate) {
+      const nextStart = parseDateOnly(addDays(availabilityStartDate, availabilityDays));
+      if (nextStart && nextStart > maxAdvanceDate) {
+        return;
+      }
+    }
+    setAvailabilityStartDate((prev) => addDays(prev, availabilityDays));
+    setSelectedDate(null);
+    setSelectedTime(null);
+    setSelectedEndTime(null);
+    setBookingError(null);
+  };
+  const handlePrevMonth = () => {
+    setCalendarMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1));
+    setSelectedDate(null);
+    setSelectedTime(null);
+    setSelectedEndTime(null);
+    setBookingError(null);
+  };
+  const handleNextMonth = () => {
+    if (maxAdvanceMonthStart) {
+      const nextMonth = new Date(calendarMonth.getFullYear(), calendarMonth.getMonth() + 1, 1);
+      if (nextMonth > maxAdvanceMonthStart) return;
+    }
+    setCalendarMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1));
+    setSelectedDate(null);
+    setSelectedTime(null);
+    setSelectedEndTime(null);
+    setBookingError(null);
+  };
+  (0, import_react7.useEffect)(() => {
+    if (step !== "time") return;
+    if (!availability.data?.dates?.length) return;
+    const matches = selectedDate ? availability.data.dates.some((entry) => entry.date === selectedDate) : false;
+    if (matches) return;
+    setSelectedDate(availability.data.dates[0].date);
+  }, [step, availability.data, selectedDate]);
+  (0, import_react7.useEffect)(() => {
+    if (!selectedService) return;
+    if (datePickerMode === "calendar") {
+      const now = /* @__PURE__ */ new Date();
+      setCalendarMonth(new Date(now.getFullYear(), now.getMonth(), 1));
+      return;
+    }
+    setAvailabilityStartDate((/* @__PURE__ */ new Date()).toISOString().slice(0, 10));
+    setAvailabilityDays(Math.max(1, availabilityDaysProp));
+  }, [selectedService?.id, selectedStaff?.id, availabilityDaysProp, datePickerMode]);
+  (0, import_react7.useEffect)(() => {
+    if (datePickerMode !== "calendar") return;
+    const start = getMonthStart(calendarMonth);
+    const end = getMonthEnd(calendarMonth);
+    const startString = start.toISOString().slice(0, 10);
+    const daysInMonth = end.getDate();
+    setAvailabilityStartDate(startString);
+    setAvailabilityDays(daysInMonth);
+  }, [calendarMonth, datePickerMode, getMonthEnd, getMonthStart]);
+  const handleBack = () => {
+    if (step === "service") return;
+    if (step === "staff") {
+      setStep("service");
+    } else if (step === "time") {
+      if (requiresStaff) {
+        setStep("staff");
+      } else {
+        setStep("service");
+      }
+    } else if (step === "details") {
+      setStep("time");
+    } else if (step === "done") {
+      setStep("details");
+    }
+    setBookingError(null);
+    scrollToTop();
+  };
+  const handleServiceContinue = () => {
+    if (!selectedService) return;
+    if (requiresStaff) {
+      setStep("staff");
+    } else {
+      setStep("time");
+    }
+    scrollToTop();
+  };
+  const handleStaffContinue = () => {
+    if (!canSkipStaff && !selectedStaff) return;
+    setStep("time");
+    scrollToTop();
+  };
+  const handleTimeContinue = () => {
+    if (!selectedTime || !selectedEndTime) return;
+    setStep("details");
+    scrollToTop();
+  };
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!selectedService || !selectedDate || !selectedTime || !selectedEndTime) return;
-    const start = /* @__PURE__ */ new Date(`${selectedDate}T${selectedTime}:00`);
-    const end = /* @__PURE__ */ new Date(`${selectedDate}T${selectedEndTime}:00`);
-    const result = await createBooking.mutateAsync({
-      serviceId: selectedService.id,
-      staffId: selectedStaff?.id,
-      startTime: start.toISOString(),
-      endTime: end.toISOString(),
-      customerName: details.name,
-      customerEmail: details.email,
-      customerPhone: details.phone || void 0,
-      customerNotes: details.notes || void 0
-    });
-    setStep("done");
-    onSuccess?.(result?.booking);
+    const start = parseDateTime(selectedTime, selectedDate);
+    const end = parseDateTime(selectedEndTime, selectedDate);
+    if (!start || !end) {
+      setBookingError("Please select a valid time slot.");
+      return;
+    }
+    try {
+      setBookingError(null);
+      const result = await createBooking.mutateAsync({
+        serviceId: selectedService.id,
+        staffId: selectedStaff?.id,
+        startTime: start.toISOString(),
+        endTime: end.toISOString(),
+        customerName: details.name,
+        customerEmail: details.email,
+        customerPhone: details.phone || void 0,
+        customerNotes: details.notes || void 0
+      });
+      setStep("done");
+      onSuccess?.(result?.booking);
+      scrollToTop();
+    } catch (error) {
+      setBookingError(
+        error instanceof Error ? error.message : "Unable to complete booking. Please try again."
+      );
+    }
   };
-  if (servicesLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "idk-state", children: "Loading booking options..." });
+  const isServicesLoading = services ? false : servicesLoading;
+  if (isServicesLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "Loading booking options..." });
   }
-  if (!servicesData?.services?.length) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "idk-state", children: "No services available." });
+  if (!servicesList.length) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "No services available." });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: ["idk-booking", className].filter(Boolean).join(" "), children: [
-    step === "service" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "idk-booking__step", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { children: "Select a service" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "idk-services idk-services--list", children: servicesData.services.map((service) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-        "button",
-        {
-          type: "button",
-          className: "idk-card idk-card--clickable",
-          onClick: () => {
-            setSelectedService(service);
-            if (requiresStaff) {
-              setStep("staff");
-            } else {
-              setStep("time");
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      ref: widgetRef,
+      className: ["idk-booking", className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__title-wrap", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "idk-booking__title", children: title }),
+            subtitle ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "idk-booking__subtitle", children: subtitle }) : null
+          ] }),
+          step !== "service" && step !== "done" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "idk-link", onClick: handleBack, children: "Back" }) : null
+        ] }),
+        step !== "done" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__progress", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+            "Step ",
+            stepNumber,
+            " of ",
+            totalSteps
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-booking__bar", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "div",
+            {
+              className: "idk-booking__bar-fill",
+              style: { width: `${stepNumber / totalSteps * 100}%` }
             }
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "idk-card__header", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "idk-card__title", children: service.name }),
-              typeof service.price === "number" && service.price > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "idk-card__price", children: [
-                "$",
-                (service.price / 100).toFixed(2)
-              ] }) : null
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "idk-card__meta", children: [
-              service.duration,
-              " min"
+          ) })
+        ] }) : null,
+        step === "service" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__step", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { children: "Select a service" }),
+          enableServiceSearch || enableCategoryFilter ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__filters", children: [
+            enableServiceSearch ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "input",
+              {
+                type: "search",
+                value: serviceSearch,
+                onChange: (event) => setServiceSearch(event.target.value),
+                placeholder: serviceSearchPlaceholder
+              }
+            ) : null,
+            enableCategoryFilter && categories.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              "select",
+              {
+                value: categoryFilter,
+                onChange: (event) => setCategoryFilter(event.target.value),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "all", children: categoryLabel }),
+                  categories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: category, children: category }, category))
+                ]
+              }
+            ) : null
+          ] }) : null,
+          filteredServices.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "No services match your filters." }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "div",
+            {
+              className: [
+                "idk-services",
+                serviceLayout === "grid" ? "idk-services--grid" : "idk-services--list"
+              ].join(" "),
+              style: {
+                ...serviceLayout === "grid" ? { gridTemplateColumns: `repeat(${Math.max(1, serviceColumns)}, minmax(0, 1fr))` } : void 0,
+                ...serviceListMaxHeight ? { maxHeight: serviceListMaxHeight, overflow: "auto" } : void 0
+              },
+              children: pagedServices.map((service) => {
+                const isSelected = selectedService?.id === service.id;
+                return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    className: ["idk-card", "idk-card--clickable", isSelected ? "is-active" : ""].join(" "),
+                    onClick: () => {
+                      setSelectedService(service);
+                      resetSelections();
+                      if (autoAdvanceOnSelect) {
+                        if (requiresStaff) {
+                          setStep("staff");
+                        } else {
+                          setStep("time");
+                        }
+                        scrollToTop();
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-card__header", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-card__title", children: service.name }),
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "idk-card__aside", children: [
+                          isSelected ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-card__check", children: "\u2713" }) : null,
+                          typeof service.price === "number" && service.price > 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "idk-card__price", children: [
+                            "$",
+                            (service.price / 100).toFixed(2)
+                          ] }) : null
+                        ] })
+                      ] }),
+                      service.description ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-card__description", children: service.description }) : null,
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-card__meta", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: formatDuration(service.duration) }),
+                        service.category ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-pill", children: service.category }) : null
+                      ] })
+                    ]
+                  },
+                  service.id
+                );
+              })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__actions", children: [
+            shouldPaginate ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "idk-button idk-button--ghost",
+                onClick: () => setServicePage((prev) => prev + 1),
+                disabled: !hasMoreServices,
+                children: hasMoreServices ? "Show more services" : "All services shown"
+              }
+            ) : null,
+            selectedService && !autoAdvanceOnSelect ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "idk-button", onClick: handleServiceContinue, children: "Continue" }) : null
+          ] })
+        ] }),
+        step === "staff" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__step", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { children: "Select a team member" }),
+          staffOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "No team members available." }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            "div",
+            {
+              className: [
+                "idk-team",
+                staffLayout === "grid" ? "idk-team--grid" : "idk-team--list"
+              ].join(" "),
+              style: staffLayout === "grid" ? { gridTemplateColumns: `repeat(${Math.max(1, staffColumns)}, minmax(0, 1fr))` } : void 0,
+              children: [
+                showAnyStaffOption && canSkipStaff ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    className: ["idk-card", "idk-card--clickable", !selectedStaff ? "is-active" : ""].join(" "),
+                    onClick: () => {
+                      setSelectedStaff(null);
+                      setSelectedDate(null);
+                      setSelectedTime(null);
+                      setSelectedEndTime(null);
+                      if (autoAdvanceOnSelect) {
+                        setStep("time");
+                        scrollToTop();
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-card__header", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-card__title", children: "Any Available" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-card__badge", children: "Recommended" })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "idk-card__description", children: "We'll match you with the first available stylist." })
+                    ]
+                  },
+                  "any-staff"
+                ) : null,
+                pagedStaff.map((staff) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: ["idk-card", "idk-card--clickable", selectedStaff?.id === staff.id ? "is-active" : ""].join(" "),
+                    onClick: () => {
+                      setSelectedStaff(staff);
+                      setSelectedDate(null);
+                      setSelectedTime(null);
+                      setSelectedEndTime(null);
+                      setBookingError(null);
+                      if (autoAdvanceOnSelect) {
+                        setStep("time");
+                        scrollToTop();
+                      }
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-team__card", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-team__avatar", children: staff.photo?.url ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: staff.photo.url, alt: staff.name }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: staff.name.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase() }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-card__title", children: staff.name }),
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-card__meta", children: staff.role || "Staff" }),
+                        staff.bio ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "idk-card__description", children: renderLinkedText(staff.bio) }) : null
+                      ] })
+                    ] })
+                  },
+                  staff.id
+                ))
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__actions", children: [
+            shouldPaginateStaff ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "idk-button idk-button--ghost",
+                onClick: () => setStaffPage((prev) => hasMoreStaff ? prev + 1 : 1),
+                disabled: !hasMoreStaff && staffPage === 1,
+                children: hasMoreStaff ? "Show more staff" : staffPage > 1 ? "Show fewer staff" : "All staff shown"
+              }
+            ) : null,
+            canSkipStaff ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "idk-link",
+                onClick: () => {
+                  setSelectedStaff(null);
+                  setStep("time");
+                  scrollToTop();
+                },
+                children: "Continue without selecting"
+              }
+            ) : null,
+            !autoAdvanceOnSelect ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "idk-button",
+                onClick: handleStaffContinue,
+                disabled: !canSkipStaff && !selectedStaff,
+                children: "Continue"
+              }
+            ) : null
+          ] })
+        ] }),
+        step === "time" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__step", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { children: "Select a time" }),
+          availability.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "Loading availability..." }) : availability.data ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: ["idk-availability", timeLayout === "split" ? "idk-availability--split" : ""].join(" "), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-availability__dates", children: datePickerMode === "calendar" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              "div",
+              {
+                className: [
+                  "idk-calendar",
+                  calendarVariant === "compact" ? "idk-calendar--compact" : ""
+                ].filter(Boolean).join(" "),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-calendar__header", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        className: "idk-button idk-button--ghost",
+                        onClick: handlePrevMonth,
+                        disabled: calendarMonth <= getMonthStart(todayDate),
+                        children: "Previous"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-calendar__title", children: new Intl.DateTimeFormat("en-US", {
+                      month: "long",
+                      year: "numeric"
+                    }).format(calendarMonth) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        className: "idk-button idk-button--ghost",
+                        onClick: handleNextMonth,
+                        disabled: Boolean(maxAdvanceMonthStart && calendarMonth >= maxAdvanceMonthStart),
+                        children: "Next"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-calendar__weekdays", children: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((label) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: label }, label)) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-calendar__grid", children: getMonthDays(calendarMonth).map((day) => {
+                    const entry = availability.data?.dates?.find(
+                      (item) => item.date === day.date
+                    );
+                    const hasAvailable = entry?.slots?.some((slot) => slot.available) ?? false;
+                    const dateValue = parseDateOnly(day.date);
+                    const isPast = dateValue ? dateValue < todayDate : false;
+                    const isBeyondMax = maxAdvanceDate ? dateValue ? dateValue > maxAdvanceDate : false : false;
+                    const weekday = dateValue ? dateValue.getDay() : null;
+                    const isDisabledWeekday = weekday !== null ? disabledWeekdaysSet.has(weekday) : false;
+                    const isBlocked = Boolean(entry) && !hasAvailable;
+                    const isDisabled = !entry || isPast || isBeyondMax || isBlocked || isDisabledWeekday;
+                    const isActive = selectedDate === day.date;
+                    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                      "button",
+                      {
+                        type: "button",
+                        className: [
+                          "idk-calendar__day",
+                          day.isCurrentMonth ? "" : "is-muted",
+                          hasAvailable ? "is-available" : "",
+                          isBlocked ? "is-blocked" : "",
+                          isDisabledWeekday ? "is-disabled" : "",
+                          isActive ? "is-active" : ""
+                        ].filter(Boolean).join(" "),
+                        disabled: isDisabled,
+                        onClick: () => {
+                          setSelectedDate(day.date);
+                          setSelectedTime(null);
+                          setSelectedEndTime(null);
+                          setBookingError(null);
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: day.date.split("-")[2] }),
+                          showFullyBookedLabel && isBlocked && day.isCurrentMonth ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-calendar__label", children: calendarVariant === "compact" ? "Full" : "Fully booked" }) : null
+                        ]
+                      },
+                      day.date
+                    );
+                  }) })
+                ]
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+              enableDatePaging ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-availability__nav", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "idk-button idk-button--ghost",
+                    onClick: handlePrevDates,
+                    disabled: availabilityStartDate <= todayString,
+                    children: "Previous"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "idk-button idk-button--ghost",
+                    onClick: handleNextDates,
+                    children: "Next"
+                  }
+                )
+              ] }) : null,
+              availability.data.dates.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: entry.date === selectedDate ? "is-active" : void 0,
+                  onClick: () => {
+                    setSelectedDate(entry.date);
+                    setSelectedTime(null);
+                    setSelectedEndTime(null);
+                    setBookingError(null);
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-date-chip__day", children: formatDateLabel(entry.date) })
+                },
+                entry.date
+              ))
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-availability__panel", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-availability__panel-header", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-availability__panel-title", children: selectedDate ? formatDateHeading(selectedDate) : availability.data.dates[0]?.date ? formatDateHeading(availability.data.dates[0].date) : "Select a date" }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-availability__panel-subtitle", children: timeZoneLabel })
+              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-availability__slots", children: (() => {
+                const activeEntry = selectedDate ? availability.data.dates.find((entry) => entry.date === selectedDate) : availability.data.dates[0];
+                if (!activeEntry) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "Select a date to see times." });
+                const slots = (activeEntry.slots || []).filter((slot) => slot.available);
+                if (slots.length === 0) {
+                  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "No available times for this date." });
+                }
+                return slots.map((slot, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: slot.time === selectedTime ? "is-active" : void 0,
+                    onClick: () => {
+                      const date = selectedDate || activeEntry.date;
+                      setSelectedDate(date || null);
+                      setSelectedTime(slot.time);
+                      setSelectedEndTime(slot.endTime);
+                      setBookingError(null);
+                      if (autoAdvanceOnSelect) {
+                        setStep("details");
+                        scrollToTop();
+                      }
+                    },
+                    children: formatTimeLabel(slot.time)
+                  },
+                  `${activeEntry.date}-${slot.time}-${slot.endTime}-${index}`
+                ));
+              })() })
             ] })
-          ]
-        },
-        service.id
-      )) })
-    ] }),
-    step === "staff" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "idk-booking__step", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { children: "Select a team member" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "idk-team", children: staffOptions.map((staff) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-        "button",
-        {
-          type: "button",
-          className: "idk-card idk-card--clickable",
-          onClick: () => {
-            setSelectedStaff(staff);
-            setStep("time");
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "idk-card__title", children: staff.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "idk-card__meta", children: staff.role || "Staff" })
-          ]
-        },
-        staff.id
-      )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "button",
-        {
-          type: "button",
-          className: "idk-link",
-          onClick: () => {
-            setSelectedStaff(null);
-            setStep("time");
-          },
-          children: "Continue without selecting"
-        }
-      )
-    ] }),
-    step === "time" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "idk-booking__step", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { children: "Select a time" }),
-      availability.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "idk-state", children: "Loading availability..." }) : availability.data ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "idk-availability", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "idk-availability__dates", children: availability.data.dates.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "button",
-          {
-            type: "button",
-            className: entry.date === selectedDate ? "is-active" : void 0,
-            onClick: () => {
-              setSelectedDate(entry.date);
-              setSelectedTime(null);
-              setSelectedEndTime(null);
-            },
-            children: entry.date
-          },
-          entry.date
-        )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "idk-availability__slots", children: (availability.data.dates.find((entry) => entry.date === selectedDate)?.slots || availability.data.dates[0]?.slots || []).filter((slot) => slot.available).map((slot) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "button",
-          {
-            type: "button",
-            className: slot.time === selectedTime ? "is-active" : void 0,
-            onClick: () => {
-              const date = selectedDate || availability.data?.dates[0]?.date;
-              setSelectedDate(date || null);
-              setSelectedTime(slot.time);
-              setSelectedEndTime(slot.endTime);
-              setStep("details");
-            },
-            children: slot.time
-          },
-          `${slot.time}-${slot.endTime}`
-        )) })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "idk-state", children: "No availability found." })
-    ] }),
-    step === "details" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { className: "idk-form", onSubmit: handleSubmit, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { children: "Your details" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "idk-form__field", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Name" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "input",
-          {
-            value: details.name,
-            onChange: (event) => setDetails((prev) => ({ ...prev, name: event.target.value })),
-            required: true
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "idk-form__field", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Email" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "input",
-          {
-            type: "email",
-            value: details.email,
-            onChange: (event) => setDetails((prev) => ({ ...prev, email: event.target.value })),
-            required: true
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "idk-form__field", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Phone" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "input",
-          {
-            value: details.phone,
-            onChange: (event) => setDetails((prev) => ({ ...prev, phone: event.target.value }))
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "idk-form__field", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Notes" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "textarea",
-          {
-            rows: 4,
-            value: details.notes,
-            onChange: (event) => setDetails((prev) => ({ ...prev, notes: event.target.value }))
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "submit", className: "idk-button", disabled: createBooking.isPending, children: createBooking.isPending ? "Booking..." : "Confirm booking" })
-    ] }),
-    step === "done" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "idk-state", children: "Booking confirmed. You'll receive a confirmation email shortly." })
-  ] });
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "No availability found." }),
+          !autoAdvanceOnSelect ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-booking__actions", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "idk-button",
+              onClick: handleTimeContinue,
+              disabled: !selectedTime || !selectedEndTime,
+              children: "Continue"
+            }
+          ) }) : null
+        ] }),
+        step === "details" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("form", { className: "idk-form", onSubmit: handleSubmit, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { children: "Your details" }),
+          bookingError ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-booking__error", children: bookingError }) : null,
+          selectedService && selectedTime ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__summary", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-booking__summary-label", children: "Service" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: selectedService.name })
+            ] }),
+            selectedStaff ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-booking__summary-label", children: "Staff" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: selectedStaff.name })
+            ] }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-booking__summary-label", children: "When" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { children: [
+                formatDateHeading(selectedDate || ""),
+                " \xB7 ",
+                formatTimeLabel(selectedTime)
+              ] })
+            ] }),
+            selectedService.price ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-booking__summary-label", children: "Price" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { children: [
+                "$",
+                (selectedService.price / 100).toFixed(2)
+              ] })
+            ] }) : null
+          ] }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "idk-form__field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Name" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "input",
+              {
+                value: details.name,
+                onChange: (event) => setDetails((prev) => ({ ...prev, name: event.target.value })),
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "idk-form__field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Email" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "input",
+              {
+                type: "email",
+                value: details.email,
+                onChange: (event) => setDetails((prev) => ({ ...prev, email: event.target.value })),
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "idk-form__field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Phone" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "input",
+              {
+                value: details.phone,
+                onChange: (event) => setDetails((prev) => ({ ...prev, phone: event.target.value }))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "idk-form__field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Notes" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "textarea",
+              {
+                rows: 4,
+                value: details.notes,
+                onChange: (event) => setDetails((prev) => ({ ...prev, notes: event.target.value }))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "submit", className: "idk-button", disabled: createBooking.isPending, children: createBooking.isPending ? "Booking..." : "Confirm booking" })
+        ] }),
+        step === "done" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__done", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-booking__done-title", children: "Booking confirmed!" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "idk-booking__done-text", children: "We'll send a confirmation email shortly with your appointment details." }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "idk-link",
+              onClick: () => {
+                setStep("service");
+                setSelectedService(null);
+                resetSelections();
+                setDetails({ name: "", email: "", phone: "", notes: "" });
+                scrollToTop();
+              },
+              children: "Book another appointment"
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 
 // src/components/AvailabilityPicker.tsx
-var import_react6 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function AvailabilityPicker({
   serviceId,
   staffId,
@@ -682,8 +1578,8 @@ function AvailabilityPicker({
   className,
   onSelect
 }) {
-  const [selectedDate, setSelectedDate] = (0, import_react6.useState)(date || null);
-  const [selectedTime, setSelectedTime] = (0, import_react6.useState)(null);
+  const [selectedDate, setSelectedDate] = (0, import_react8.useState)(date || null);
+  const [selectedTime, setSelectedTime] = (0, import_react8.useState)(null);
   const { data, isLoading } = useAvailability({
     serviceId,
     staffId,
@@ -691,15 +1587,15 @@ function AvailabilityPicker({
     days
   });
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "Loading availability..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "idk-state", children: "Loading availability..." });
   }
   if (!data?.dates?.length) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "No availability found." });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime8.jsxs)("div", { className: ["idk-availability", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-availability__dates", children: data.dates.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  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)(
       "button",
       {
         type: "button",
@@ -712,7 +1608,7 @@ function AvailabilityPicker({
       },
       entry.date
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-availability__slots", children: activeSlots.filter((slot) => slot.available).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "No slots available." }) : activeSlots.filter((slot) => slot.available).map((slot) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__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)(
       "button",
       {
         type: "button",
@@ -735,22 +1631,22 @@ function AvailabilityPicker({
 }
 
 // src/components/ServicePicker.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function ServicePicker({
   services,
   selectedId,
   onSelect,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: services.map((service) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  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)(
     "button",
     {
       type: "button",
       className: selectedId === service.id ? "is-active" : void 0,
       onClick: () => onSelect?.(service),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: service.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("small", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: service.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("small", { children: [
           service.duration,
           " min"
         ] })
@@ -761,22 +1657,22 @@ function ServicePicker({
 }
 
 // src/components/StaffPicker.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function StaffPicker({
   staff,
   selectedId,
   onSelect,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: staff.map((member) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  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)(
     "button",
     {
       type: "button",
       className: selectedId === member.id ? "is-active" : void 0,
       onClick: () => onSelect?.(member),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: member.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("small", { children: member.role || "Staff" })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: member.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("small", { children: member.role || "Staff" })
       ]
     },
     member.id
@@ -784,14 +1680,14 @@ function StaffPicker({
 }
 
 // src/components/DatePicker.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function DatePicker({
   dates,
   selectedDate,
   onSelect,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: dates.map((date) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  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)(
     "button",
     {
       type: "button",
@@ -804,14 +1700,14 @@ function DatePicker({
 }
 
 // src/components/TimePicker.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function TimePicker({
   slots,
   selectedTime,
   onSelect,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: slots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  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)(
     "button",
     {
       type: "button",