@anker-in/ui 0.1.4 → 0.1.8

package/dist/index.mjs

@@ -1,19 +1,18 @@
 import React2, { createContext, useContext, useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Text, Link } from '@anker-in/headless-ui';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import IndexBar from 'antd-mobile/es/components/index-bar';
 import List from 'antd-mobile/es/components/list';
 import 'antd-mobile/es/components/index-bar/index-bar.css';
 import 'antd-mobile/es/components/list/list.css';
-import { Swiper, SwiperSlide } from 'swiper/react';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
 import { theme, ConfigProvider, Calendar, Select } from 'antd';
 import dayLocaleData from 'dayjs/plugin/localeData';
 import weekday from 'dayjs/plugin/weekday';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
+import { Swiper, SwiperSlide } from 'swiper/react';
 
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
@@ -24,463 +23,66 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var defaultTabs = [
-  { id: "upcoming-events", label: "Upcoming Events" },
-  { id: "find-demoroom", label: "Find Demoroom" },
-  { id: "4-easy-steps", label: "4 Easy Steps" },
-  { id: "faq", label: "FAQ" }
-];
-var HelpNav = ({
-  tabs = defaultTabs,
-  activeTabId: controlledActiveTabId,
-  onTabChange,
-  activeBorderColor = "#3ADB67",
-  className,
-  ...props
-}) => {
-  const [internalActiveTabId, setInternalActiveTabId] = useState(
-    tabs[1]?.id || tabs[0]?.id
-  );
-  const activeTabId = controlledActiveTabId ?? internalActiveTabId;
-  const handleTabClick = (tabId) => {
-    if (!controlledActiveTabId) {
-      setInternalActiveTabId(tabId);
-    }
-    onTabChange?.(tabId);
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "w-full pt-5 flex items-center justify-center gap-8 pb-8",
-        className
-      ),
-      ...props,
-      children: tabs.map((tab) => {
-        const isActive = tab.id === activeTabId;
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => handleTabClick(tab.id),
-            className: cn(
-              "relative text-[#080A0F]",
-              "pb-4",
-              "flex items-center gap-2",
-              "transition-all duration-200",
-              "outline-none focus:outline-none"
-            ),
-            style: {
-              fontSize: "18px",
-              fontWeight: 600,
-              letterSpacing: "-0.36px",
-              lineHeight: "25.2px"
-            },
-            children: [
-              tab.label,
-              isActive && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "absolute bottom-0 left-0 right-0 h-1 rounded-t",
-                  style: {
-                    backgroundColor: activeBorderColor,
-                    height: "4px"
-                  }
-                }
-              )
-            ]
-          },
-          tab.id
-        );
-      })
-    }
-  );
-};
-HelpNav.displayName = "HelpNav";
-var EventCard = ({
-  title,
-  description,
-  backgroundImage,
-  aspectRatio,
-  variant = "medium",
-  buttons = [],
-  subtitle,
-  className,
-  ...props
-}) => {
-  const isLarge = variant === "large";
-  const isMedium = variant === "medium";
-  const isProduct = variant === "product";
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("rounded-3xl overflow-hidden relative", className),
-      style: {
-        backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0,
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        aspectRatio
-      },
-      ...props,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "relative h-full flex flex-col",
-            isLarge && "justify-center pl-8",
-            !isLarge && "justify-end pl-8 pb-8"
-          ),
-          children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx(
-                "h3",
-                {
-                  className: cn(
-                    "font-semibold mb-3",
-                    isLarge && "text-3xl text-gray-900",
-                    isMedium && "text-2xl text-white",
-                    isProduct && "text-2xl text-gray-900"
-                  ),
-                  children: title
-                }
-              ),
-              subtitle && isProduct && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 mb-4", children: subtitle }),
-              description && /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "text-sm leading-relaxed",
-                    isMedium && "text-white/90",
-                    (isLarge || isProduct) && "text-gray-600"
-                  ),
-                  children: description
-                }
-              )
-            ] }),
-            buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-3 mt-6", children: buttons.map((button, index) => /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: button.onClick,
-                className: cn(
-                  "px-6 py-3 rounded-full font-medium text-sm transition-all duration-200",
-                  button.variant === "primary" && "bg-gray-900 text-white hover:bg-gray-800",
-                  button.variant === "secondary" && "bg-white text-gray-900 border border-gray-300 hover:bg-gray-50"
-                ),
-                children: button.label
-              },
-              index
-            )) })
-          ]
-        }
-      )
-    }
-  );
-};
-EventCard.displayName = "EventCard";
 var Title = ({
   title = "",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx("div", { className: cn("w-full"), ...props, children: /* @__PURE__ */ jsx("h2", { className: "text-[48px] font-semibold mb-12 text-[#080A0F]", children: title }) });
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full"), ...props, children: /* @__PURE__ */ jsx("h2", { className: "text-[32px] min-l:text-[48px] font-bold mb-12 text-[#080A0F]", children: title }) });
 };
 Title.displayName = "Title";
-var defaultEvents = [
-  {
-    variant: "large",
-    title: "IFA 2025 Event Name Event Name",
-    description: "Corem ipsum dolor sit amet, consectetur adipiscing elit.",
-    backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
-    buttons: [
-      {
-        label: "Schedule Now",
-        variant: "primary"
-      }
-    ],
-    aspectRatio: "1664 / 640"
-  },
-  {
-    variant: "medium",
-    title: "Local Event Name Local Event Name Local Event Name",
-    description: "Norem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.",
-    backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
-    buttons: [
-      {
-        label: "Schedule Now",
-        variant: "primary"
-      }
-    ],
-    aspectRatio: "824 / 640"
-  },
-  {
-    variant: "product",
-    title: "Anker Prime",
-    subtitle: "Anker Prime 240W GaN Desktop Charger (4 Ports) Feb. 5th - 16th",
-    backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
-    buttons: [
-      {
-        label: "Learn More",
-        variant: "secondary"
-      },
-      {
-        label: "Shop Now",
-        variant: "primary"
-      }
-    ],
-    aspectRatio: "824 / 640"
-  },
-  {
-    variant: "medium",
-    title: "Local Event Name Local Event Name Local Event Name",
-    description: "Norem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.",
-    backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
-    buttons: [
-      {
-        label: "Schedule Now",
-        variant: "primary"
-      }
-    ],
-    aspectRatio: "824 / 640"
-  },
-  {
-    variant: "product",
-    title: "Anker Prime",
-    subtitle: "Anker Prime 240W GaN Desktop Charger (4 Ports) Feb. 5th - 16th",
-    backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
-    buttons: [
-      {
-        label: "Learn More",
-        variant: "secondary"
-      },
-      {
-        label: "Shop Now",
-        variant: "primary"
-      }
-    ],
-    aspectRatio: "824 / 640"
-  }
-];
-var UpcomingEvents = ({
-  title = "Upcoming Events",
-  events = defaultEvents,
-  showViewMore = true,
-  onViewMore,
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), ...props, children: [
-    /* @__PURE__ */ jsx(Title, { title }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-6 mb-[64px]", children: events.map((event, index) => /* @__PURE__ */ jsx("div", { className: cn(index === 0 ? "col-span-2" : ""), children: /* @__PURE__ */ jsx(EventCard, { ...event }) }, index)) }),
-    showViewMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: onViewMore,
-        className: "inline-flex items-center gap-2 text-gray-700 hover:text-gray-900 transition-colors duration-200",
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "text-base font-bold", children: "View More" }),
-          /* @__PURE__ */ jsx(
-            "svg",
-            {
-              width: "16",
-              height: "16",
-              viewBox: "0 0 16 16",
-              fill: "none",
-              xmlns: "http://www.w3.org/2000/svg",
-              className: "transition-transform duration-200 group-hover:translate-y-0.5",
-              children: /* @__PURE__ */ jsx(
-                "path",
-                {
-                  d: "M8 3L8 13M8 13L12 9M8 13L4 9",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
-                }
-              )
-            }
-          )
-        ]
-      }
-    ) })
-  ] });
-};
-UpcomingEvents.displayName = "UpcomingEvents";
-var defaultBannerData = {
-  title: "See it. Touch it. Make it Locally.",
-  subTitle: "Visit your local studio right around the corner.",
-  backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
-  backgroundImageMobile: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
-};
-var Banner = ({
-  data = defaultBannerData,
-  className,
-  style,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn("relative"),
-      style: { aspectRatio: "1920/480", ...style },
-      ...props,
-      children: [
-        data?.backgroundImage && /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: data.backgroundImage,
-            alt: "",
-            className: "inset-0 h-full w-full object-cover"
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "absolute flex flex-col gap-4 justify-center m-auto top-0 bottom-0 left-0 right-0 z-10",
-              className
-            ),
-            children: [
-              /* @__PURE__ */ jsx(
-                Text,
-                {
-                  className: "text-[48px] font-bold text-white leading-[1]",
-                  html: data?.title
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Text,
-                {
-                  className: "text-[18px] font-bold text-white leading-[1.4]",
-                  html: data?.subTitle
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-Banner.displayName = "Banner";
-var BreadCrumbs = ({
-  items,
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center py-6 gap-1 text-[18px]", className), ...props, children: items?.map((item, i) => {
-    const isLast = i === items?.length - 1;
-    return /* @__PURE__ */ jsxs(
-      Link,
-      {
-        className: cn(
-          "flex items-center gap-1 text-[#6D6D6F] no-underline",
-          isLast && "text-[#080A0F]",
-          item?.link ? "cursor-pointer" : "cursor-default hover:text-[#080A0F]"
-        ),
-        href: item?.link,
-        children: [
-          item?.label,
-          !isLast && /* @__PURE__ */ jsx("span", { children: "/" })
-        ]
-      },
-      i
-    );
-  }) });
-};
-BreadCrumbs.displayName = "BreadCrumbs";
-var defaultSteps = [
-  {
-    stepNumber: 1,
-    title: 'Find a demo room you would like to visit, and click "Schedule Now"',
-    description: 'Find a demo room you would like to visit, and click "Schedule Now"',
-    mapImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
-  },
-  {
-    stepNumber: 2,
-    title: "Fill out the form and confirm your time of visit",
-    description: "Fill out the form and confirm your time of visit",
-    mapImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
-  },
-  {
-    stepNumber: 3,
-    title: "Once you arrive at the demo room, scan the QR code to check in",
-    description: "Once you arrive at the demo room, scan the QR code to check in",
-    mapImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
-  },
-  {
-    stepNumber: 4,
-    title: "Have fun!",
-    description: "Have fun!",
-    mapImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
-  }
-];
-var EasySteps = ({
-  title = "Schedule in 4 Easy Steps",
-  steps = defaultSteps,
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), ...props, children: [
-    /* @__PURE__ */ jsx(Title, { title }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-2 gap-6", children: steps.map((step) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "bg-white rounded-2xl overflow-hidden",
-          "border border-gray-200",
-          "hover:shadow-lg transition-shadow duration-200"
-        ),
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "p-6 pb-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
-            /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold text-gray-900", children: [
-              "Step ",
-              step.stepNumber,
-              ":"
-            ] }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-900 font-medium flex-1", children: step.title })
-          ] }) }),
-          /* @__PURE__ */ jsx("div", { className: "relative w-full aspect-[356/220] bg-gray-100", children: /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: step.mapImage,
-              alt: `Step ${step.stepNumber} - ${step.title}`,
-              className: "w-full h-full object-cover"
-            }
-          ) })
-        ]
-      },
-      step.stepNumber
-    )) })
-  ] });
-};
-EasySteps.displayName = "EasySteps";
 var StudioCard = ({
   code,
   name,
   availableTime,
   address,
-  city,
-  state,
-  zipCode,
-  country = "United States",
   euifyMakeModel,
+  distance,
   onSchedule,
+  pageData = {
+    scheduleNow: "Schedule Now",
+    available: "Available",
+    away: "away"
+  },
   className,
+  style,
   ...props
 }) => {
-  const fullAddress = `${address}, ${city}, ${state} ${country} ${zipCode}`;
+  const [isHovered, setIsHovered] = React2.useState(false);
   const handleScheduleClick = () => {
     onSchedule?.(code);
   };
+  const formatDistance = (dist) => {
+    if (dist < 1) {
+      return `${Math.round(dist * 1e3)} m`;
+    }
+    return `${dist.toFixed(1)} km`;
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn(
-        "p-6",
-        "hover:shadow-lg transition-shadow duration-200",
-        className
-      ),
       ...props,
+      className: cn("p-6 cursor-pointer transition-colors duration-200", className),
+      style: {
+        backgroundColor: isHovered ? "#f3f4f6" : "transparent",
+        ...style
+      },
+      onMouseEnter: (e) => {
+        setIsHovered(true);
+        props.onMouseEnter?.(e);
+      },
+      onMouseLeave: (e) => {
+        setIsHovered(false);
+        props.onMouseLeave?.(e);
+      },
       children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-gray-900 mb-4", children: name }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-4", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-gray-900", children: name }),
+          distance !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[#2E8B57] bg-[#E8F5E9] px-3 py-1 rounded-full whitespace-nowrap ml-2", children: [
+            formatDistance(distance),
+            " ",
+            pageData.away
+          ] })
+        ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
           /* @__PURE__ */ jsxs(
             "svg",
@@ -535,7 +137,8 @@ var StudioCard = ({
             }
           ),
           /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600", children: [
-            "Available ",
+            pageData.available,
+            " ",
             availableTime
           ] }) })
         ] }),
@@ -569,7 +172,7 @@ var StudioCard = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: fullAddress }) })
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 break-words", children: address }) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 mb-6", children: [
           /* @__PURE__ */ jsxs(
@@ -629,7 +232,7 @@ var StudioCard = ({
               "hover:bg-gray-900 hover:text-white",
               "transition-all duration-200"
             ),
-            children: "Schedule Now"
+            children: pageData.scheduleNow
           }
         )
       ]
@@ -655,11 +258,18 @@ var defaultLocations = [
 var StudioMap = ({
   googleMapsApiKey,
   locations = defaultLocations,
+  hoveredLocationId,
   defaultCenter = { lat: 39.8283, lng: -98.5795 },
   // US center
   defaultZoom = 4,
   mapHeight = "600px",
   onSchedule,
+  pageData = {
+    apiKeyRequired: "Google Maps API Key is required",
+    loadingMap: "Loading map...",
+    scheduleNow: "Schedule Now",
+    available: "Available"
+  },
   className,
   ...props
 }) => {
@@ -758,13 +368,13 @@ var StudioMap = ({
                     <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
                       <path d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"/>
                     </svg>
-                    <span style="vertical-align: middle;">Available ${location.availableTime}</span>
+                    <span style="vertical-align: middle;">${pageData.available} ${location.availableTime}</span>
                   </div>` : ""}
             <div style="margin-bottom: 8px; color: #666;">
               <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
                 <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
               </svg>
-              <span style="vertical-align: middle;">${location.address}, ${location.city}, ${location.state} ${location.country} ${location.zipCode}</span>
+              <span style="vertical-align: middle;">${location.address}</span>
             </div>
             ${location.euifyMakeModel ? `<div style="margin-bottom: 12px; color: #666;">
                     <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
@@ -788,7 +398,7 @@ var StudioMap = ({
               onmouseover="this.style.background='#333'"
               onmouseout="this.style.background='#000'"
             >
-              Schedule Now
+              ${pageData.scheduleNow}
             </button>
           </div>
         `;
@@ -803,7 +413,7 @@ var StudioMap = ({
               if (btn) {
                 btn.addEventListener("click", () => {
                   if (onSchedule) {
-                    onSchedule(location);
+                    onSchedule(location.id);
                   }
                 });
               }
@@ -824,6 +434,82 @@ var StudioMap = ({
       googleMapRef.current.fitBounds(bounds);
     }
   }, [isLoaded, locations, onSchedule]);
+  React2.useEffect(() => {
+    if (!isLoaded || !googleMapRef.current || !hoveredLocationId) {
+      if (!hoveredLocationId && infoWindowRef.current) {
+        infoWindowRef.current.close();
+      }
+      return;
+    }
+    const location = locations.find((loc) => loc.id === hoveredLocationId);
+    const markerIndex = locations.findIndex(
+      (loc) => loc.id === hoveredLocationId
+    );
+    const marker = markersRef.current[markerIndex];
+    if (location && marker) {
+      const content = `
+        <div style="padding: 16px; max-width: 300px; font-family: system-ui, sans-serif;">
+          <h3 style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600;">${location.name}</h3>
+          ${location.availableTime ? `<div style="margin-bottom: 8px; color: #666;">
+                  <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"/>
+                  </svg>
+                  <span style="vertical-align: middle;">${pageData.available} ${location.availableTime}</span>
+                </div>` : ""}
+          <div style="margin-bottom: 8px; color: #666;">
+            <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
+            </svg>
+            <span style="vertical-align: middle;">${location.address}</span>
+          </div>
+          ${location.euifyMakeModel ? `<div style="margin-bottom: 12px; color: #666;">
+                  <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"/>
+                  </svg>
+                  <span style="vertical-align: middle;">${location.euifyMakeModel}</span>
+                </div>` : ""}
+          <button
+            id="schedule-btn-hover-${location.id}"
+            style="
+              width: 100%;
+              padding: 10px 16px;
+              background: #000;
+              color: #fff;
+              border: none;
+              border-radius: 6px;
+              font-weight: 500;
+              cursor: pointer;
+              font-size: 14px;
+            "
+            onmouseover="this.style.background='#333'"
+            onmouseout="this.style.background='#000'"
+          >
+            ${pageData.scheduleNow}
+          </button>
+        </div>
+      `;
+      if (infoWindowRef.current) {
+        infoWindowRef.current.setContent(content);
+        infoWindowRef.current.open(googleMapRef.current, marker);
+        google.maps.event.addListenerOnce(
+          infoWindowRef.current,
+          "domready",
+          () => {
+            const btn = document.getElementById(
+              `schedule-btn-hover-${location.id}`
+            );
+            if (btn) {
+              btn.addEventListener("click", () => {
+                if (onSchedule) {
+                  onSchedule(location.id);
+                }
+              });
+            }
+          }
+        );
+      }
+    }
+  }, [hoveredLocationId, isLoaded, locations, onSchedule]);
   if (!googleMapsApiKey) {
     return /* @__PURE__ */ jsx(
       "div",
@@ -834,7 +520,7 @@ var StudioMap = ({
         ),
         style: { height: mapHeight },
         ...props,
-        children: /* @__PURE__ */ jsx("p", { className: "text-gray-600", children: "Google Maps API Key is required" })
+        children: /* @__PURE__ */ jsx("p", { className: "text-gray-600", children: pageData.apiKeyRequired })
       }
     );
   }
@@ -847,7 +533,7 @@ var StudioMap = ({
         /* @__PURE__ */ jsx("div", { ref: mapRef, style: { height: mapHeight } }),
         !isLoaded && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gray-100", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
           /* @__PURE__ */ jsx("div", { className: "inline-block animate-spin rounded-full h-8 w-8 border-4 border-gray-300 border-t-gray-900 mb-2" }),
-          /* @__PURE__ */ jsx("p", { className: "text-gray-600", children: "Loading map..." })
+          /* @__PURE__ */ jsx("p", { className: "text-gray-600", children: pageData.loadingMap })
         ] }) })
       ]
     }
@@ -976,7 +662,14 @@ function useQuestionnaire(client, code, questionnaire_id, locale, options) {
   });
   const enabled = options?.enabled !== false;
   useEffect(() => {
-    if (!enabled || !code || !questionnaire_id) return;
+    if (!enabled || !code || !questionnaire_id) {
+      setState({
+        data: null,
+        loading: false,
+        error: null
+      });
+      return;
+    }
     let cancelled = false;
     const fetchData = async () => {
       setState((prev) => ({ ...prev, loading: true, error: null }));
@@ -1132,27 +825,6 @@ var AntdMobileIsolated = ({
 AntdMobileIsolated.displayName = "AntdMobileIsolated";
 
 // src/components/DemoRoom/utils/addressParser.ts
-function parseAddress(address) {
-  const parts = address.split(",").map((part) => part.trim());
-  let country = "United States";
-  let state = "";
-  let city = "";
-  if (parts.length >= 3) {
-    city = parts[1] || "";
-    state = parts[2]?.split(" ")[0] || "";
-    country = parts[3] || country;
-  } else if (parts.length === 2) {
-    city = parts[0] || "";
-    state = parts[1]?.split(" ")[0] || "";
-  } else if (parts.length === 1) {
-    city = parts[0] || "";
-  }
-  return {
-    country: country.trim(),
-    state: state.trim(),
-    city: city.trim()
-  };
-}
 function groupByAlphabet(items) {
   const groups = /* @__PURE__ */ new Map();
   items.forEach((item) => {
@@ -1179,7 +851,15 @@ var LocationFilter = ({
   locations,
   onSelect,
   visible = false,
-  onClose
+  onClose,
+  pageData = {
+    allLocations: "All Locations",
+    clear: "Clear",
+    country: "Country",
+    state: "State",
+    city: "City",
+    noStudiosFound: "No studios found in this location"
+  }
 }) => {
   const [currentLevel, setCurrentLevel] = useState("country");
   const [selectedCountry, setSelectedCountry] = useState();
@@ -1190,7 +870,7 @@ var LocationFilter = ({
     const states = /* @__PURE__ */ new Map();
     const cities = /* @__PURE__ */ new Map();
     locations.forEach((location) => {
-      const { country, state, city } = parseAddress(location.address);
+      const { country, state, city } = location;
       if (country) {
         const existing = countries.get(country);
         countries.set(country, {
@@ -1233,9 +913,7 @@ var LocationFilter = ({
         items = locationData.countries;
         break;
       case "state":
-        items = selectedCountry ? locationData.states.filter(
-          (s) => s.parentCode === selectedCountry
-        ) : [];
+        items = selectedCountry ? locationData.states.filter((s) => s.parentCode === selectedCountry) : [];
         break;
       case "city":
         items = selectedState ? locationData.cities.filter((c) => c.parentCode === selectedState) : [];
@@ -1252,6 +930,7 @@ var LocationFilter = ({
     () => groupByAlphabet(filteredItems),
     [filteredItems]
   );
+  const showIndexBar = filteredItems.length >= 10;
   const handleItemClick = (item) => {
     if (currentLevel === "country") {
       setSelectedCountry(item.code);
@@ -1295,42 +974,30 @@ var LocationFilter = ({
             style: { background: "#F8F8F8" },
             className: "rounded-[12px] rounded-b-none h-[72px] font-bold text-[14px] flex flex-col",
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-[20px] pt-[12px] pb-[8px]", children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    type: "text",
-                    placeholder: "Please enter the search city",
-                    value: searchQuery,
-                    onChange: (e) => setSearchQuery(e.target.value),
-                    className: "flex-1 h-[32px] px-[12px] rounded-[6px] border border-[#E4E5E6] text-[14px] outline-none focus:border-[#2E8B57]"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: onClose,
-                    className: "ml-[12px] w-[24px] h-[24px] flex items-center justify-center",
-                    children: /* @__PURE__ */ jsx(
-                      "svg",
-                      {
-                        xmlns: "http://www.w3.org/2000/svg",
-                        width: "24",
-                        height: "24",
-                        viewBox: "0 0 24 24",
-                        fill: "none",
-                        children: /* @__PURE__ */ jsx(
-                          "path",
-                          {
-                            d: "M6.4 19L5 17.6L10.6 12L5 6.4L6.4 5L12 10.6L17.6 5L19 6.4L13.4 12L19 17.6L17.6 19L12 13.4L6.4 19Z",
-                            fill: "#1D1D1F"
-                          }
-                        )
-                      }
-                    )
-                  }
-                )
-              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end px-[20px] pt-[12px] pb-[8px]", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: onClose,
+                  className: "ml-[12px] w-[24px] h-[24px] flex items-center justify-end",
+                  children: /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "24",
+                      height: "24",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M6.4 19L5 17.6L10.6 12L5 6.4L6.4 5L12 10.6L17.6 5L19 6.4L13.4 12L19 17.6L17.6 19L12 13.4L6.4 19Z",
+                          fill: "#1D1D1F"
+                        }
+                      )
+                    }
+                  )
+                }
+              ) }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center px-[20px] gap-[16px] pb-[8px]", children: [
                 /* @__PURE__ */ jsx(
                   "button",
@@ -1340,7 +1007,7 @@ var LocationFilter = ({
                       "pb-[4px] transition-colors",
                       currentLevel === "country" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]"
                     ),
-                    children: "Country"
+                    children: pageData.country
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -1353,7 +1020,7 @@ var LocationFilter = ({
                       currentLevel === "state" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]",
                       !selectedCountry && "opacity-50 cursor-not-allowed"
                     ),
-                    children: "State"
+                    children: pageData.state
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -1366,55 +1033,69 @@ var LocationFilter = ({
                       currentLevel === "city" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]",
                       !selectedState && "opacity-50 cursor-not-allowed"
                     ),
-                    children: "City"
+                    children: pageData.city
                   }
                 )
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ jsx(AntdMobileIsolated, { style: { height: "calc(100% - 72px)" }, children: /* @__PURE__ */ jsx(IndexBar, { style: { height: "100%" }, children: groupedItems.map((group) => {
+        /* @__PURE__ */ jsx(AntdMobileIsolated, { style: { height: "calc(100% - 72px)" }, children: showIndexBar ? /* @__PURE__ */ jsx(IndexBar, { style: { height: "100%" }, children: groupedItems.map((group) => {
           const { title, items } = group;
           return /* @__PURE__ */ jsx(IndexBar.Panel, { index: title, title, children: /* @__PURE__ */ jsx(List, { children: items.map((item) => /* @__PURE__ */ jsx(
             List.Item,
             {
-              clickable: true,
               onClick: () => handleItemClick(item),
-              extra: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[8px]", children: [
-                /* @__PURE__ */ jsx("span", { className: "text-[#767880] text-[14px]", children: item.count }),
-                /* @__PURE__ */ jsx(
-                  "svg",
-                  {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    width: "16",
-                    height: "16",
-                    viewBox: "0 0 16 16",
-                    fill: "none",
-                    children: /* @__PURE__ */ jsx(
-                      "path",
-                      {
-                        d: "M6.4 12L5.6 11.2L9.06667 7.73333L5.6 4.26667L6.4 3.46667L10.6667 7.73333L6.4 12Z",
-                        fill: "#767880"
-                      }
-                    )
-                  }
-                )
-              ] }),
+              style: { cursor: "pointer" },
               children: item.name
             },
             item.code
           )) }) }, title);
-        }) }) })
+        }) }) : /* @__PURE__ */ jsx("div", { style: { height: "100%", overflow: "auto" }, children: /* @__PURE__ */ jsx(List, { children: filteredItems.map((item) => /* @__PURE__ */ jsx(
+          List.Item,
+          {
+            onClick: () => handleItemClick(item),
+            style: { cursor: "pointer" },
+            children: item.name
+          },
+          item.code
+        )) }) }) })
       ]
     }
   );
 };
 LocationFilter.displayName = "LocationFilter";
-var defaultStudioLocations = [
-  {
+var defaultPageData = {
+  title: "Find a Studio Near You",
+  loadingText: "Loading demo rooms...",
+  errorTitle: "Failed to load demo rooms",
+  locationFilter: {
+    allLocations: "All Locations",
+    clear: "Clear",
+    country: "Country",
+    state: "State",
+    city: "City",
+    noStudiosFound: "No studios found in this location"
+  },
+  studioCard: {
+    scheduleNow: "Schedule Now",
+    available: "Available",
+    away: "away"
+  },
+  map: {
+    apiKeyRequired: "Google Maps API Key is required",
+    loadingMap: "Loading map...",
+    scheduleNow: "Schedule Now",
+    available: "Available"
+  },
+  defaultCountry: "United States",
+  noAvailableTime: "No available time"
+};
+var defaultStudioLocations = [
+  {
     id: "1",
     name: "Design District Demo Room",
-    address: "111 8th St",
+    address: "111 8th St, San Francisco, CA, United States",
     city: "San Francisco",
     state: "CA",
     zipCode: "94108",
@@ -1427,7 +1108,7 @@ var defaultStudioLocations = [
   {
     id: "2",
     name: "Brooklyn Creative Studio",
-    address: "456 Broadway",
+    address: "456 Broadway, Brooklyn, NY, United States",
     city: "Brooklyn",
     state: "NY",
     zipCode: "11211",
@@ -1440,7 +1121,7 @@ var defaultStudioLocations = [
   {
     id: "3",
     name: "Austin Innovation Hub",
-    address: "789 Tech Blvd",
+    address: "789 Tech Blvd, Austin, TX, United States",
     city: "Austin",
     state: "TX",
     zipCode: "78701",
@@ -1453,7 +1134,7 @@ var defaultStudioLocations = [
   {
     id: "4",
     name: "Seattle Maker Space",
-    address: "321 Pine St",
+    address: "321 Pine St, Seattle, WA, United States",
     city: "Seattle",
     state: "WA",
     zipCode: "98101",
@@ -1466,7 +1147,7 @@ var defaultStudioLocations = [
   {
     id: "5",
     name: "Chicago Design Center",
-    address: "654 Michigan Ave",
+    address: "654 Michigan Ave, Chicago, IL, United States",
     city: "Chicago",
     state: "IL",
     zipCode: "60611",
@@ -1479,7 +1160,7 @@ var defaultStudioLocations = [
   {
     id: "6",
     name: "Miami Beach Studio",
-    address: "987 Ocean Drive",
+    address: "987 Ocean Drive, Miami Beach, FL, United States",
     city: "Miami Beach",
     state: "FL",
     zipCode: "33139",
@@ -1492,7 +1173,7 @@ var defaultStudioLocations = [
   {
     id: "7",
     name: "Denver Mountain Studio",
-    address: "147 16th St",
+    address: "147 16th St, Denver, CO, United States",
     city: "Denver",
     state: "CO",
     zipCode: "80202",
@@ -1505,7 +1186,7 @@ var defaultStudioLocations = [
   {
     id: "8",
     name: "Los Angeles Creative Lab",
-    address: "258 Main St",
+    address: "258 Main St, Los Angeles, CA, United States",
     city: "Los Angeles",
     state: "CA",
     zipCode: "90012",
@@ -1523,10 +1204,25 @@ var RoomsList = ({
   teamCode,
   brandWebsite,
   onSchedule,
+  pageData,
   ...props
 }) => {
+  const mergedPageData = useMemo(
+    () => ({
+      ...defaultPageData,
+      ...pageData,
+      locationFilter: {
+        ...defaultPageData.locationFilter,
+        ...pageData?.locationFilter
+      },
+      studioCard: { ...defaultPageData.studioCard, ...pageData?.studioCard },
+      map: { ...defaultPageData.map, ...pageData?.map }
+    }),
+    [pageData]
+  );
   const [showLocationFilter, setShowLocationFilter] = useState(false);
   const [selectedLocation, setSelectedLocation] = useState();
+  const [hoveredRoomId, setHoveredRoomId] = useState(null);
   const {
     data: demoRooms,
     loading,
@@ -1539,37 +1235,25 @@ var RoomsList = ({
   const studioLocations = useMemo(() => {
     if (!demoRooms) return defaultStudioLocations;
     return demoRooms.map((room) => {
-      const timeslots = [
-        {
-          id: 130,
-          start_time: "2026-01-13T09:00:00-05:00",
-          end_time: "2026-01-13T10:00:00-05:00",
-          capacity: 5,
-          booked_count: 2,
-          status: "available"
-        },
-        {
-          id: 131,
-          start_time: "2026-01-13T14:00:00-05:00",
-          end_time: "2026-01-13T15:00:00-05:00",
-          capacity: 5,
-          booked_count: 5,
-          status: "full"
-        }
-      ];
-      const nextAvailableTimeslot = (room.timeslots?.length ? room.timeslots : timeslots)?.find((slot) => slot.status === "available");
-      const { country, state, city } = parseAddress(room.address);
+      const nextAvailableTimeslot = room?.timeslots?.find(
+        (slot) => slot.status === "available"
+      );
+      const country = room.location?.country || mergedPageData.defaultCountry;
+      const state = room.location?.state || "";
+      const city = room.location?.city || "";
+      const addressParts = [room.address, city, state, country].filter(Boolean);
+      const fullAddress = addressParts.join(", ");
       return {
         id: room.code,
         name: room.name,
-        address: room.address,
+        address: fullAddress,
         city,
         state,
         zipCode: "",
         country,
         lat: Number(room.latitude) || 34.0522,
         lng: Number(room.longitude) || -118.2437,
-        availableTime: nextAvailableTimeslot ? `${nextAvailableTimeslot.start_time}` : "No available time",
+        availableTime: nextAvailableTimeslot ? `${nextAvailableTimeslot.start_time}` : mergedPageData.noAvailableTime,
         euifyMakeModel: room?.description
       };
     });
@@ -1577,25 +1261,24 @@ var RoomsList = ({
   const filteredStudioLocations = useMemo(() => {
     if (!selectedLocation) return studioLocations;
     return studioLocations.filter((location) => {
-      const { country, state, city } = parseAddress(location.address);
       if (selectedLocation.city) {
-        return country === selectedLocation.country && state === selectedLocation.state && city === selectedLocation.city;
+        return location.country === selectedLocation.country && location.state === selectedLocation.state && location.city === selectedLocation.city;
       }
       if (selectedLocation.state) {
-        return country === selectedLocation.country && state === selectedLocation.state;
+        return location.country === selectedLocation.country && location.state === selectedLocation.state;
       }
       if (selectedLocation.country) {
-        return country === selectedLocation.country;
+        return location.country === selectedLocation.country;
       }
       return true;
     });
   }, [studioLocations, selectedLocation]);
   const getSelectedLocationName = () => {
-    if (!selectedLocation) return "All Locations";
+    if (!selectedLocation) return mergedPageData.locationFilter.allLocations;
     if (selectedLocation.city) return selectedLocation.city;
     if (selectedLocation.state) return selectedLocation.state;
     if (selectedLocation.country) return selectedLocation.country;
-    return "All Locations";
+    return mergedPageData.locationFilter.allLocations;
   };
   const handleLocationSelect = (selection) => {
     setSelectedLocation(selection);
@@ -1606,20 +1289,20 @@ var RoomsList = ({
   };
   console.log(filteredStudioLocations);
   return /* @__PURE__ */ jsxs("div", { className, ...props, children: [
-    /* @__PURE__ */ jsx(Title, { title: "Find a Studio Near You" }),
-    loading && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[794px]", children: /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx("div", { className: "text-lg font-medium", children: "Loading demo rooms..." }) }) }),
-    error && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[794px]", children: /* @__PURE__ */ jsxs("div", { className: "text-center text-red-600", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-lg font-medium", children: "Failed to load demo rooms" }),
+    /* @__PURE__ */ jsx(Title, { title: mergedPageData.title }),
+    loading && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[794px]", children: /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx("div", { className: "text-lg font-medium", children: mergedPageData.loadingText }) }) }),
+    error && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[794px]", children: /* @__PURE__ */ jsxs("div", { className: "text-center", style: { color: "#FF4D4D" }, children: [
+      /* @__PURE__ */ jsx("div", { className: "text-lg font-medium", children: mergedPageData.errorTitle }),
       /* @__PURE__ */ jsx("div", { className: "text-sm mt-2", children: error.message })
     ] }) }),
-    !loading && !error && /* @__PURE__ */ jsxs("div", { className: "flex h-[794px] overflow-auto gap-4", children: [
+    !loading && !error && /* @__PURE__ */ jsxs("div", { className: "flex h-[794px] gap-4", children: [
       /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "flex-none relative w-[420px]",
+          className: "flex-none relative w-[420px] l:!w-full",
           style: { height: "794px" },
           children: [
-            /* @__PURE__ */ jsxs("div", { className: "rounded-[12px] items-center h-[72px] mb-4 font-bold text-[16px] gap-10 flex bg-white border border-[#E4E5E6] px-[20px] py-[16px]", children: [
+            /* @__PURE__ */ jsx("div", { className: "rounded-[12px] mb-4 bg-white border border-[#E4E5E6] px-[20px] py-[16px]", children: /* @__PURE__ */ jsxs("div", { className: "h-[40px] font-bold text-[16px] gap-10 flex items-center", children: [
               /* @__PURE__ */ jsxs(
                 "button",
                 {
@@ -1652,7 +1335,7 @@ var RoomsList = ({
                 {
                   onClick: handleClearFilter,
                   className: "ml-auto text-[14px] text-[#2E8B57] hover:underline",
-                  children: "Clear"
+                  children: mergedPageData.locationFilter.clear
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "flex text-[#767880] cursor-not-allowed", children: [
@@ -1675,13 +1358,13 @@ var RoomsList = ({
                   }
                 )
               ] })
-            ] }),
+            ] }) }),
             /* @__PURE__ */ jsx(
               "div",
               {
                 style: { maxHeight: "706px", overflow: "auto" },
                 className: "rounded-[12px] bg-white border border-[#E4E5E6]",
-                children: filteredStudioLocations.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[200px] text-[#767880]", children: "No studios found in this location" }) : filteredStudioLocations.map((item) => {
+                children: filteredStudioLocations.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[200px] text-[#767880]", children: mergedPageData.locationFilter.noStudiosFound }) : filteredStudioLocations.map((item) => {
                   return /* @__PURE__ */ jsx(
                     StudioCard,
                     {
@@ -1693,7 +1376,10 @@ var RoomsList = ({
                       state: item?.state,
                       zipCode: item?.zipCode,
                       euifyMakeModel: item?.euifyMakeModel || "",
-                      onSchedule
+                      onSchedule,
+                      onMouseEnter: () => setHoveredRoomId(item.id),
+                      onMouseLeave: () => setHoveredRoomId(null),
+                      pageData: mergedPageData.studioCard
                     },
                     item.id
                   );
@@ -1704,26 +1390,29 @@ var RoomsList = ({
               LocationFilter,
               {
                 locations: studioLocations.map((loc) => ({
-                  address: loc.address,
-                  id: loc.id
+                  id: loc.id,
+                  country: loc.country,
+                  state: loc.state,
+                  city: loc.city
                 })),
                 visible: showLocationFilter,
                 onSelect: handleLocationSelect,
-                onClose: () => setShowLocationFilter(false)
+                onClose: () => setShowLocationFilter(false),
+                pageData: mergedPageData.locationFilter
               }
             )
           ]
         }
       ),
-      googleMapsApiKey && /* @__PURE__ */ jsx("div", { className: cn("flex-1"), children: /* @__PURE__ */ jsx(
+      googleMapsApiKey && /* @__PURE__ */ jsx("div", { className: cn("flex-1 l:!hidden"), children: /* @__PURE__ */ jsx(
         StudioMap,
         {
           googleMapsApiKey,
           locations: filteredStudioLocations,
-          onSchedule: () => {
-            console.log(111);
-          },
-          mapHeight: "794px"
+          hoveredLocationId: hoveredRoomId,
+          onSchedule,
+          mapHeight: "794px",
+          pageData: mergedPageData.map
         }
       ) })
     ] })
@@ -1899,436 +1588,160 @@ function createDemoRoomApi(config) {
 }
 var DemoRoom = ({
   className,
-  layoutClassName = "w-safe11",
+  layoutClassName,
   googleMapsApiKey,
   apiConfig,
   teamCode,
   brandWebsite,
   onSchedule,
+  pageData,
   ...props
 }) => {
   const apiClient = useMemo(
     () => createDemoRoomApi(apiConfig),
     [apiConfig]
   );
-  return /* @__PURE__ */ jsxs("div", { className: cn(className), ...props, children: [
-    /* @__PURE__ */ jsx(Banner, { className: layoutClassName }),
-    /* @__PURE__ */ jsx(
-      BreadCrumbs,
-      {
-        className: layoutClassName,
-        items: [{ label: "Home", link: "/" }, { label: "Demo Room" }]
-      }
-    ),
-    /* @__PURE__ */ jsx(HelpNav, {}),
-    /* @__PURE__ */ jsx(UpcomingEvents, { className: layoutClassName }),
-    /* @__PURE__ */ jsx(
-      RoomsList,
-      {
-        className: layoutClassName,
-        googleMapsApiKey,
-        apiClient,
-        teamCode,
-        brandWebsite,
-        onSchedule
-      }
-    ),
-    /* @__PURE__ */ jsx(EasySteps, { className: layoutClassName })
-  ] });
+  return /* @__PURE__ */ jsx("div", { className: cn(className), ...props, children: /* @__PURE__ */ jsx(
+    RoomsList,
+    {
+      className: layoutClassName,
+      googleMapsApiKey,
+      apiClient,
+      teamCode,
+      brandWebsite,
+      onSchedule,
+      pageData
+    }
+  ) });
 };
 DemoRoom.displayName = "DemoRoom";
-var Navigation;
-var Pagination;
-var Autoplay;
-var swiperVersion = "11+";
-try {
-  const modules = __require("swiper/modules");
-  Navigation = modules.Navigation;
-  Pagination = modules.Pagination;
-  Autoplay = modules.Autoplay;
-  swiperVersion = "11+";
-} catch (e) {
-  try {
-    const SwiperCore = __require("swiper");
-    const SwiperNavigation = __require("swiper/modules/navigation");
-    const SwiperPagination = __require("swiper/modules/pagination");
-    const SwiperAutoplay = __require("swiper/modules/autoplay");
-    const SwiperClass = SwiperCore.default || SwiperCore;
-    if (SwiperClass && SwiperClass.use) {
-      SwiperClass.use([
-        SwiperNavigation.default || SwiperNavigation,
-        SwiperPagination.default || SwiperPagination,
-        SwiperAutoplay.default || SwiperAutoplay
-      ]);
+var QuestionnaireForm = ({
+  questions,
+  onSubmit,
+  pageData,
+  selectedTimeslotId,
+  loading = false,
+  className
+}) => {
+  const [responses, setResponses] = useState({});
+  const [errors, setErrors] = useState({});
+  const [agreements, setAgreements] = useState({});
+  const [agreementError, setAgreementError] = useState("");
+  const getQuestionId = (question) => {
+    return question.id || question.key || "";
+  };
+  const handleChange = (questionId, value) => {
+    setResponses((prev) => ({
+      ...prev,
+      [questionId]: value
+    }));
+    if (errors[questionId]) {
+      setErrors((prev) => {
+        const newErrors = { ...prev };
+        delete newErrors[questionId];
+        return newErrors;
+      });
     }
-    Navigation = SwiperNavigation.default || SwiperNavigation;
-    Pagination = SwiperPagination.default || SwiperPagination;
-    Autoplay = SwiperAutoplay.default || SwiperAutoplay;
-    swiperVersion = "8";
-  } catch (e2) {
-    console.warn("Failed to load swiper modules:", e2);
-  }
-}
-if (typeof window !== "undefined") {
-  try {
-    __require("swiper/css");
-    __require("swiper/css/navigation");
-    __require("swiper/css/pagination");
-  } catch (e) {
-    try {
-      __require("swiper/swiper.min.css");
-      __require("swiper/modules/navigation/navigation.min.css");
-      __require("swiper/modules/pagination/pagination.min.css");
-    } catch (e2) {
-      console.warn("Failed to load swiper styles");
+  };
+  const handleCheckboxChange = (questionId, optionValue, checked) => {
+    const currentValues = responses[questionId] || [];
+    const newValues = checked ? [...currentValues, optionValue] : currentValues.filter((v) => v !== optionValue);
+    handleChange(questionId, newValues);
+  };
+  const handleAgreementChange = (index, checked) => {
+    setAgreements((prev) => ({
+      ...prev,
+      [index]: checked
+    }));
+    if (checked && agreementError) {
+      setAgreementError("");
     }
-  }
-}
-var defaultDescriptions = [
-  "Norem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.",
-  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos."
-];
-var defaultImages = [
-  "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
-  "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
-];
-var DemoRoomDetail = ({
-  apiClient,
-  demoRoomCode,
-  locale,
-  title: titleProp,
-  descriptions: descriptionsProp,
-  devices: devicesProp,
-  address: addressProp,
-  mapsLink,
-  images: imagesProp,
-  className,
-  ...props
-}) => {
-  const {
-    data: demoRoom,
-    loading,
-    error
-  } = useDemoRoom(
-    apiClient,
-    demoRoomCode || "",
-    locale,
-    { enabled: !!apiClient && !!demoRoomCode }
-  );
-  const title = demoRoom?.name || titleProp || "Design District Demo Room";
-  const descriptions = demoRoom?.description ? [demoRoom.description] : descriptionsProp || defaultDescriptions;
-  const devices = demoRoom?.description || devicesProp || "eufyMake E1, eufyMake M5";
-  const address = demoRoom?.address || addressProp || "1111 8th St, San Francisco, CA United States 94108";
-  const images = demoRoom?.images && demoRoom.images.length > 0 ? demoRoom.images : imagesProp || defaultImages;
-  const googleMapsLink = mapsLink || (demoRoom?.latitude && demoRoom?.longitude ? `https://www.google.com/maps/search/?api=1&query=${demoRoom.latitude},${demoRoom.longitude}` : "#");
-  if (loading && apiClient && demoRoomCode) {
-    return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-8 items-start", children: [
-      /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-12 bg-gray-200 rounded animate-pulse" }),
-        /* @__PURE__ */ jsx("div", { className: "h-24 bg-gray-200 rounded animate-pulse" }),
-        /* @__PURE__ */ jsx("div", { className: "h-8 bg-gray-200 rounded animate-pulse" })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "h-[400px] bg-gray-200 rounded-2xl animate-pulse" })
-    ] }) });
-  }
-  if (error && apiClient && demoRoomCode) {
-    return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "text-center text-red-600 py-8", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-lg font-medium", children: "Failed to load demo room details" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm mt-2", children: error.message })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-8 items-start", children: [
-    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsx("h1", { className: "text-[40px] font-bold text-gray-900 leading-tight", children: title }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-4", children: descriptions.map((desc, index) => /* @__PURE__ */ jsx(
-        "p",
-        {
-          className: "text-base text-gray-600 leading-relaxed",
-          children: desc
-        },
-        index
-      )) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-        /* @__PURE__ */ jsxs(
-          "svg",
+  };
+  const validateForm = () => {
+    const newErrors = {};
+    questions.forEach((question) => {
+      if (question.required) {
+        const questionId = getQuestionId(question);
+        const value = responses[questionId];
+        if (!value || Array.isArray(value) && value.length === 0) {
+          newErrors[questionId] = "This field is required";
+        }
+      }
+    });
+    const agrees = pageData?.agrees || [];
+    if (agrees.length > 0) {
+      const allAgreed = agrees.every(
+        (_, index) => agreements[index]
+      );
+      if (!allAgreed) {
+        setAgreementError(
+          "Please agree to all terms and conditions to continue"
+        );
+        setErrors(newErrors);
+        return false;
+      }
+    }
+    setErrors(newErrors);
+    setAgreementError("");
+    return Object.keys(newErrors).length === 0;
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (validateForm()) {
+      onSubmit?.(responses);
+    }
+  };
+  const renderQuestion = (question) => {
+    const questionId = getQuestionId(question);
+    const hasError = !!errors[questionId];
+    switch (question.type) {
+      case "text":
+      case "email":
+      case "tel":
+        return /* @__PURE__ */ jsx(
+          "input",
           {
-            width: "24",
-            height: "24",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            xmlns: "http://www.w3.org/2000/svg",
-            className: "flex-shrink-0 mt-0.5",
+            type: question.type,
+            value: responses[questionId] || "",
+            onChange: (e) => handleChange(questionId, e.target.value),
+            placeholder: question.placeholder,
+            className: cn(
+              "w-full px-4 py-3 rounded-lg border text-base",
+              "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
+              hasError ? "border-red-500" : "border-[#E4E5E6]"
+            )
+          }
+        );
+      case "textarea":
+        return /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            value: responses[questionId] || "",
+            onChange: (e) => handleChange(questionId, e.target.value),
+            placeholder: question.placeholder,
+            rows: 4,
+            className: cn(
+              "w-full px-4 py-3 rounded-lg border text-base resize-none",
+              "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
+              hasError ? "border-red-500" : "border-[#E4E5E6]"
+            )
+          }
+        );
+      case "radio":
+        return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: question?.options?.map((option) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: "flex items-center gap-3 cursor-pointer group",
             children: [
               /* @__PURE__ */ jsx(
-                "rect",
+                "input",
                 {
-                  x: "3",
-                  y: "3",
-                  width: "18",
-                  height: "18",
-                  rx: "2",
-                  stroke: "currentColor",
-                  strokeWidth: "2"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  d: "M8 10H16",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  d: "M8 14H16",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "text-base text-gray-900", children: devices })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-        /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            width: "24",
-            height: "24",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            xmlns: "http://www.w3.org/2000/svg",
-            className: "flex-shrink-0 mt-0.5",
-            children: [
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  d: "M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2Z",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "circle",
-                {
-                  cx: "12",
-                  cy: "9",
-                  r: "2.5",
-                  stroke: "currentColor",
-                  strokeWidth: "2"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: address }),
-          /* @__PURE__ */ jsxs(
-            "a",
-            {
-              href: googleMapsLink,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: "inline-flex items-center gap-1 text-sm text-blue-600 hover:text-blue-700 mt-1 underline",
-              children: [
-                "Open in Google Maps",
-                /* @__PURE__ */ jsx(
-                  "svg",
-                  {
-                    width: "12",
-                    height: "12",
-                    viewBox: "0 0 12 12",
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    children: /* @__PURE__ */ jsx(
-                      "path",
-                      {
-                        d: "M3 9L9 3M9 3H3M9 3V9",
-                        stroke: "currentColor",
-                        strokeWidth: "1.5",
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round"
-                      }
-                    )
-                  }
-                )
-              ]
-            }
-          )
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "relative h-[400px] rounded-2xl overflow-hidden", children: images.length > 0 ? /* @__PURE__ */ jsx(
-      Swiper,
-      {
-        ...swiperVersion === "11+" && Navigation && Pagination && Autoplay ? { modules: [Navigation, Pagination, Autoplay] } : {},
-        spaceBetween: 0,
-        slidesPerView: 1,
-        navigation: true,
-        pagination: { clickable: true },
-        autoplay: {
-          delay: 3e3,
-          disableOnInteraction: false
-        },
-        loop: true,
-        className: "h-full rounded-2xl",
-        children: images.map((img, index) => /* @__PURE__ */ jsx(SwiperSlide, { children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-full bg-gray-100", children: /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: img,
-            alt: `Demo room view ${index + 1}`,
-            className: "w-full h-full object-cover"
-          }
-        ) }) }, index))
-      }
-    ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center rounded-2xl", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-16 h-16 mx-auto mb-3 rounded-full bg-white flex items-center justify-center", children: /* @__PURE__ */ jsxs(
-        "svg",
-        {
-          width: "32",
-          height: "32",
-          viewBox: "0 0 32 32",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg",
-          children: [
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x: "4",
-                y: "8",
-                width: "24",
-                height: "16",
-                rx: "2",
-                stroke: "currentColor",
-                strokeWidth: "2"
-              }
-            ),
-            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "14", r: "2", fill: "currentColor" }),
-            /* @__PURE__ */ jsx(
-              "path",
-              {
-                d: "M28 20L22 14L16 20",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                strokeLinejoin: "round"
-              }
-            )
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx("p", { className: "text-gray-500 text-sm", children: "Demo Room Images" })
-    ] }) }) })
-  ] }) });
-};
-DemoRoomDetail.displayName = "DemoRoomDetail";
-var QuestionnaireForm = ({
-  questions,
-  onSubmit,
-  loading = false,
-  className
-}) => {
-  const [responses, setResponses] = useState({});
-  const [errors, setErrors] = useState({});
-  const getQuestionId = (question) => {
-    return question.id || question.key || "";
-  };
-  const handleChange = (questionId, value) => {
-    setResponses((prev) => ({
-      ...prev,
-      [questionId]: value
-    }));
-    if (errors[questionId]) {
-      setErrors((prev) => {
-        const newErrors = { ...prev };
-        delete newErrors[questionId];
-        return newErrors;
-      });
-    }
-  };
-  const handleCheckboxChange = (questionId, optionValue, checked) => {
-    const currentValues = responses[questionId] || [];
-    const newValues = checked ? [...currentValues, optionValue] : currentValues.filter((v) => v !== optionValue);
-    handleChange(questionId, newValues);
-  };
-  const validateForm = () => {
-    const newErrors = {};
-    questions.forEach((question) => {
-      if (question.required) {
-        const questionId = getQuestionId(question);
-        const value = responses[questionId];
-        if (!value || Array.isArray(value) && value.length === 0) {
-          newErrors[questionId] = "This field is required";
-        }
-      }
-    });
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    if (validateForm()) {
-      onSubmit?.(responses);
-    }
-  };
-  const renderQuestion = (question) => {
-    const questionId = getQuestionId(question);
-    const hasError = !!errors[questionId];
-    switch (question.type) {
-      case "text":
-      case "email":
-      case "tel":
-        return /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: question.type,
-            value: responses[questionId] || "",
-            onChange: (e) => handleChange(questionId, e.target.value),
-            placeholder: question.placeholder,
-            className: cn(
-              "w-full px-4 py-3 rounded-lg border text-base",
-              "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
-              hasError ? "border-red-500" : "border-[#E4E5E6]"
-            )
-          }
-        );
-      case "textarea":
-        return /* @__PURE__ */ jsx(
-          "textarea",
-          {
-            value: responses[questionId] || "",
-            onChange: (e) => handleChange(questionId, e.target.value),
-            placeholder: question.placeholder,
-            rows: 4,
-            className: cn(
-              "w-full px-4 py-3 rounded-lg border text-base resize-none",
-              "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
-              hasError ? "border-red-500" : "border-[#E4E5E6]"
-            )
-          }
-        );
-      case "radio":
-        return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: question?.options?.map((option) => /* @__PURE__ */ jsxs(
-          "label",
-          {
-            className: "flex items-center gap-3 cursor-pointer group",
-            children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "radio",
-                  name: questionId,
-                  value: option.value || option.label,
-                  checked: responses[questionId] === (option.value || option.label),
-                  onChange: (e) => handleChange(questionId, e.target.value),
-                  className: "w-5 h-5 text-[#3ADB67] focus:ring-[#3ADB67] focus:ring-2"
+                  type: "radio",
+                  name: questionId,
+                  value: option.value || option.label,
+                  checked: responses[questionId] === (option.value || option.label),
+                  onChange: (e) => handleChange(questionId, e.target.value),
+                  className: "w-5 h-5 text-[#3ADB67] focus:ring-[#3ADB67] focus:ring-2"
                 }
               ),
               /* @__PURE__ */ jsx("span", { className: "text-base text-gray-900 group-hover:text-[#3ADB67] transition-colors", children: option.label })
@@ -2395,8 +1808,8 @@ var QuestionnaireForm = ({
         return null;
     }
   };
-  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: cn("space-y-6", className), children: [
-    questions?.map((question) => {
+  return /* @__PURE__ */ jsxs("div", { className: "pb-[80px]", children: [
+    questions && questions.length > 0 && /* @__PURE__ */ jsx("div", { className: "bg-white rounded-[12px] border border-[#E4E5E6] p-8", children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, className: cn("space-y-6", className), children: questions.map((question) => {
       const questionId = getQuestionId(question);
       return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxs("label", { className: "block", children: [
@@ -2408,24 +1821,51 @@ var QuestionnaireForm = ({
         ] }),
         renderQuestion(question),
         question.hint && !errors[questionId] && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: question.hint }),
-        errors[questionId] && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-500", children: errors[questionId] })
+        errors[questionId] && /* @__PURE__ */ jsx("p", { className: "text-sm", style: { color: "#FF4D4D" }, children: errors[questionId] })
       ] }, questionId);
-    }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "submit",
-        disabled: loading,
-        className: cn(
-          "w-full px-6 py-4 rounded-full",
-          "bg-[#3ADB67] text-white font-medium text-base",
-          "hover:bg-[#2FC257] transition-colors",
-          "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:ring-offset-2",
-          "disabled:opacity-50 disabled:cursor-not-allowed"
-        ),
-        children: loading ? "Submitting..." : "Submit Booking"
-      }
-    )
+    }) }) }),
+    !!selectedTimeslotId && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center", children: [
+      pageData?.agrees && pageData.agrees.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-4 mt-8", children: [
+        pageData.agrees.map((agreeContent, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              id: `agreement-${index}`,
+              checked: agreements[index] || false,
+              onChange: (e) => handleAgreementChange(index, e.target.checked),
+              className: "w-5 h-5 rounded border-gray-300 text-[#2FC257] focus:ring-[#2FC257] cursor-pointer flex-shrink-0"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: `agreement-${index}`,
+              className: "text-sm text-gray-700 cursor-pointer select-none flex-1 [&_a]:underline [&_a]:text-blue-600 [&_a:hover]:text-blue-700",
+              dangerouslySetInnerHTML: { __html: agreeContent },
+              "aria-label": `Agreement ${index + 1}`
+            }
+          )
+        ] }, index)),
+        agreementError && /* @__PURE__ */ jsx("p", { className: "text-sm mt-2", style: { color: "#FF4D4D" }, children: agreementError })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "submit",
+          disabled: loading,
+          onClick: handleSubmit,
+          className: cn(
+            "w-fit mt-6 px-6 py-4 rounded-full",
+            "bg-[#080A0F] text-white font-medium text-base",
+            "hover:bg-[#2FC257] transition-colors",
+            "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:ring-offset-2",
+            "disabled:opacity-50 disabled:cursor-not-allowed"
+          ),
+          children: loading ? pageData?.submitting || "Submitting..." : pageData?.submit || "Submit Booking"
+        }
+      )
+    ] })
   ] });
 };
 dayjs.extend(dayLocaleData);
@@ -2435,38 +1875,45 @@ var DateTimePicker = ({
   apiClient,
   demoRoomCode,
   timezone,
+  pageData = {
+    scheduleYourVisit: "Schedule Your Visit",
+    timeSlot: "Time Slot",
+    loadingTimeSlots: "Loading time slots...",
+    failedToLoadTimeSlots: "Failed to load time slots",
+    noAvailableTimeSlots: "No available time slots for this date",
+    full: "Full",
+    spotsLeft: "spots left",
+    fillOutForm: "Fill out Form",
+    loadingQuestionnaire: "Loading questionnaire...",
+    bookingFailed: "Booking failed"
+  },
   locale,
   onBookingSuccess
 }) => {
   const { token } = theme.useToken();
   const [selectMonth, setSelectMonth] = useState("");
   const [selectedDate, setSelectedDate] = useState(dayjs());
-  const [selectedTimeslotId, setSelectedTimeslotId] = useState(null);
-  const [showQuestionnaire, setShowQuestionnaire] = useState(false);
-  const { createBooking, loading: bookingLoading, error: bookingError } = useCreateBooking(apiClient);
+  const [selectedTimeslotId, setSelectedTimeslotId] = useState(
+    null
+  );
   const {
-    data: demoRoom
-  } = useDemoRoom(
+    createBooking,
+    loading: bookingLoading,
+    error: bookingError
+  } = useCreateBooking(apiClient);
+  const { data: demoRoom } = useDemoRoom(
     apiClient,
     demoRoomCode || "",
     locale,
     { enabled: !!demoRoomCode }
   );
-  const {
-    data: questionnaire,
-    loading: questionnaireLoading
-  } = useQuestionnaire(
+  const { data: questionnaire, loading: questionnaireLoading } = useQuestionnaire(
     apiClient,
     demoRoomCode || "",
     demoRoom?.questionnaire_id,
     locale,
     { enabled: !!demoRoomCode && !!demoRoom?.questionnaire_id }
   );
-  useEffect(() => {
-    if (questionnaire) {
-      setShowQuestionnaire(true);
-    }
-  }, [questionnaire]);
   const startDate = selectedDate.startOf("month").format("YYYY-MM-DD");
   const endDate = selectedDate.endOf("month").format("YYYY-MM-DD");
   const {
@@ -2506,7 +1953,7 @@ var DateTimePicker = ({
     borderRadius: token.borderRadiusLG
   };
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { className: "text-[48px] py-[64px] font-bold text-center", children: "Schedule Your Visit" }),
+    /* @__PURE__ */ jsx("div", { className: "text-[48px] py-[64px] font-bold text-center", children: pageData.scheduleYourVisit }),
     /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
       /* @__PURE__ */ jsx(
         ConfigProvider,
@@ -2523,13 +1970,8 @@ var DateTimePicker = ({
               }
             }
           },
-          children: /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: wrapperStyle,
-              className: "calendar-custom-cell",
-              children: [
-                /* @__PURE__ */ jsx("style", { children: `
+          children: /* @__PURE__ */ jsxs("div", { style: wrapperStyle, className: "calendar-custom-cell", children: [
+            /* @__PURE__ */ jsx("style", { children: `
               .calendar-custom-cell .ant-picker-cell {
                 padding: 6px !important;
               }
@@ -2564,141 +2006,139 @@ var DateTimePicker = ({
                 line-height: 48px !important;
               }
             ` }),
-                /* @__PURE__ */ jsx(
-                  Calendar,
-                  {
-                    fullscreen: false,
-                    value: selectedDate,
-                    onChange: (date) => setSelectedDate(date),
-                    headerRender: ({ value, onChange }) => {
-                      const year = value.year();
-                      const month = value.month();
-                      const yearOptions = Array.from({ length: 20 }, (_, i) => {
-                        const label = year - 10 + i;
-                        return { label, value: label };
-                      });
-                      const monthOptions = value.localeData().months().map((label, index) => ({
-                        label,
-                        value: index
-                      }));
-                      const monthText = monthOptions?.find((item) => {
-                        return item?.value === month;
-                      });
-                      setSelectMonth(monthText?.label || "");
-                      return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [
-                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                          /* @__PURE__ */ jsx(
-                            Select,
-                            {
-                              value: month,
-                              options: monthOptions,
-                              onChange: (newMonth) => {
-                                const now = value.clone().month(newMonth);
-                                onChange(now);
-                              },
-                              variant: "borderless",
-                              className: "text-2xl font-medium",
-                              popupMatchSelectWidth: false,
-                              style: {
-                                fontSize: "24px",
-                                fontWeight: 500
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            Select,
-                            {
-                              value: year,
-                              options: yearOptions,
-                              onChange: (newYear) => {
-                                const now = value.clone().year(newYear);
-                                onChange(now);
-                              },
-                              variant: "borderless",
-                              className: "text-2xl font-medium",
-                              popupMatchSelectWidth: false,
-                              style: {
-                                fontSize: "24px",
-                                fontWeight: 500
-                              }
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                          /* @__PURE__ */ jsx(
-                            "button",
+            /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                fullscreen: false,
+                value: selectedDate,
+                onChange: (date) => setSelectedDate(date),
+                headerRender: ({ value, onChange }) => {
+                  const year = value.year();
+                  const month = value.month();
+                  const yearOptions = Array.from({ length: 20 }, (_, i) => {
+                    const label = year - 10 + i;
+                    return { label, value: label };
+                  });
+                  const monthOptions = value.localeData().months().map((label, index) => ({
+                    label,
+                    value: index
+                  }));
+                  const monthText = monthOptions?.find((item) => {
+                    return item?.value === month;
+                  });
+                  setSelectMonth(monthText?.label || "");
+                  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                      /* @__PURE__ */ jsx(
+                        Select,
+                        {
+                          value: month,
+                          options: monthOptions,
+                          onChange: (newMonth) => {
+                            const now = value.clone().month(newMonth);
+                            onChange(now);
+                          },
+                          variant: "borderless",
+                          className: "text-2xl font-medium",
+                          popupMatchSelectWidth: false,
+                          style: {
+                            fontSize: "24px",
+                            fontWeight: 500
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Select,
+                        {
+                          value: year,
+                          options: yearOptions,
+                          onChange: (newYear) => {
+                            const now = value.clone().year(newYear);
+                            onChange(now);
+                          },
+                          variant: "borderless",
+                          className: "text-2xl font-medium",
+                          popupMatchSelectWidth: false,
+                          style: {
+                            fontSize: "24px",
+                            fontWeight: 500
+                          }
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => {
+                            const newDate = value.subtract(1, "month");
+                            onChange(newDate);
+                          },
+                          className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
+                          children: /* @__PURE__ */ jsx(
+                            "svg",
                             {
-                              onClick: () => {
-                                const newDate = value.subtract(1, "month");
-                                onChange(newDate);
-                              },
-                              className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
+                              width: "20",
+                              height: "20",
+                              viewBox: "0 0 20 20",
+                              fill: "none",
+                              xmlns: "http://www.w3.org/2000/svg",
                               children: /* @__PURE__ */ jsx(
-                                "svg",
+                                "path",
                                 {
-                                  width: "20",
-                                  height: "20",
-                                  viewBox: "0 0 20 20",
-                                  fill: "none",
-                                  xmlns: "http://www.w3.org/2000/svg",
-                                  children: /* @__PURE__ */ jsx(
-                                    "path",
-                                    {
-                                      d: "M12 16L6 10L12 4",
-                                      stroke: "currentColor",
-                                      strokeWidth: "2",
-                                      strokeLinecap: "round",
-                                      strokeLinejoin: "round"
-                                    }
-                                  )
+                                  d: "M12 16L6 10L12 4",
+                                  stroke: "currentColor",
+                                  strokeWidth: "2",
+                                  strokeLinecap: "round",
+                                  strokeLinejoin: "round"
                                 }
                               )
                             }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            "button",
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => {
+                            const newDate = value.add(1, "month");
+                            onChange(newDate);
+                          },
+                          className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
+                          children: /* @__PURE__ */ jsx(
+                            "svg",
                             {
-                              onClick: () => {
-                                const newDate = value.add(1, "month");
-                                onChange(newDate);
-                              },
-                              className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
+                              width: "20",
+                              height: "20",
+                              viewBox: "0 0 20 20",
+                              fill: "none",
+                              xmlns: "http://www.w3.org/2000/svg",
                               children: /* @__PURE__ */ jsx(
-                                "svg",
+                                "path",
                                 {
-                                  width: "20",
-                                  height: "20",
-                                  viewBox: "0 0 20 20",
-                                  fill: "none",
-                                  xmlns: "http://www.w3.org/2000/svg",
-                                  children: /* @__PURE__ */ jsx(
-                                    "path",
-                                    {
-                                      d: "M8 4L14 10L8 16",
-                                      stroke: "currentColor",
-                                      strokeWidth: "2",
-                                      strokeLinecap: "round",
-                                      strokeLinejoin: "round"
-                                    }
-                                  )
+                                  d: "M8 4L14 10L8 16",
+                                  stroke: "currentColor",
+                                  strokeWidth: "2",
+                                  strokeLinecap: "round",
+                                  strokeLinejoin: "round"
                                 }
                               )
                             }
                           )
-                        ] })
-                      ] });
-                    },
-                    onPanelChange
-                  }
-                )
-              ]
-            }
-          )
+                        }
+                      )
+                    ] })
+                  ] });
+                },
+                onPanelChange
+              }
+            )
+          ] })
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "bg-white p-[24px] rounded-[12px] flex-1", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
-          "Time Slot",
+          pageData.timeSlot,
           /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
             /* @__PURE__ */ jsx(
               "button",
@@ -2739,105 +2179,412 @@ var DateTimePicker = ({
                 children: /* @__PURE__ */ jsx(
                   "svg",
                   {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    width: "24",
-                    height: "24",
-                    viewBox: "0 0 24 24",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "24",
+                    height: "24",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M8.29289 5.29289C8.68342 4.90237 9.31643 4.90237 9.70696 5.29289L15.707 11.2929C16.0975 11.6834 16.0975 12.3164 15.707 12.707L9.70696 18.707C9.31643 19.0975 8.68342 19.0975 8.29289 18.707C7.90237 18.3164 7.90237 17.6834 8.29289 17.2929L13.5859 11.9999L8.29289 6.70696C7.90237 6.31643 7.90237 5.68342 8.29289 5.29289Z",
+                        fill: "#1D1D1F"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 mt-[40px] gap-4", children: timeslotsLoading ? /* @__PURE__ */ jsx("div", { className: "col-span-2 text-center text-[#767880] py-8", children: pageData.loadingTimeSlots }) : timeslotsError ? /* @__PURE__ */ jsx("div", { className: "col-span-2 text-center text-red-600 py-8", children: pageData.failedToLoadTimeSlots }) : dayTimeslots.length === 0 ? /* @__PURE__ */ jsx("div", { className: "col-span-2 text-center text-[#767880] py-8", children: pageData.noAvailableTimeSlots }) : dayTimeslots.map((slot) => {
+          const isAvailable = slot.status === "available";
+          const isFull = slot.status === "full";
+          const isSelected = selectedTimeslotId === slot.id;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              disabled: !isAvailable,
+              onClick: () => {
+                if (isAvailable) {
+                  setSelectedTimeslotId(slot.id);
+                }
+              },
+              className: `
+                      rounded-[20px] w-full flex items-center justify-center gap-4 h-[76px]
+                      border text-center transition-colors
+                      ${isSelected ? "border-[#3ADB67] bg-[#3ADB67] text-white cursor-pointer" : isAvailable ? "border-[#E4E5E6] hover:border-[#3ADB67] hover:bg-[#3ADB67] cursor-pointer" : "border-[#E4E5E6] bg-[#F5F5F5] text-[#BDBDBD] cursor-not-allowed"}
+                    `,
+              children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+                /* @__PURE__ */ jsx("div", { children: formatTimeslot(slot) }),
+                isFull && /* @__PURE__ */ jsx("div", { className: "text-xs text-[#BDBDBD] mt-1", children: pageData.full }),
+                isAvailable && !isSelected && /* @__PURE__ */ jsxs("div", { className: "text-xs text-[#767880] mt-1", children: [
+                  slot.capacity - slot.booked_count,
+                  " ",
+                  pageData.spotsLeft
+                ] }),
+                isAvailable && isSelected && /* @__PURE__ */ jsxs("div", { className: "text-xs text-white mt-1", children: [
+                  slot.capacity - slot.booked_count,
+                  " ",
+                  pageData.spotsLeft
+                ] })
+              ] })
+            },
+            slot.id
+          );
+        }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-12", children: [
+      !!questionnaire?.questions?.length && /* @__PURE__ */ jsx("div", { className: "text-[48px] font-bold text-center mb-8", children: pageData.fillOutForm }),
+      questionnaireLoading ? /* @__PURE__ */ jsx("div", { className: "text-center text-[#767880] py-8", children: pageData.loadingQuestionnaire }) : /* @__PURE__ */ jsx(
+        QuestionnaireForm,
+        {
+          questions: questionnaire?.questions || [],
+          loading: bookingLoading,
+          pageData,
+          selectedTimeslotId,
+          onSubmit: async (responses) => {
+            try {
+              const customerName = responses.name || responses.customer_name || "";
+              const customerEmail = responses.email || responses.customer_email || "";
+              const customerPhone = responses.phone || responses.customer_phone_number || "";
+              const customerPhoneCode = responses.phone_code || responses.customer_phone_code || "+1";
+              if (selectedTimeslotId) {
+                const result = await createBooking({
+                  demoroom_code: demoRoomCode,
+                  timeslot_id: selectedTimeslotId,
+                  questionnaire_id: questionnaire?.id,
+                  questionnaire_response: responses,
+                  customer_name: customerName,
+                  customer_email: customerEmail,
+                  customer_phone_code: customerPhoneCode,
+                  customer_phone_number: customerPhone
+                });
+                if (result && onBookingSuccess) {
+                  onBookingSuccess(result?.cancel_token);
+                }
+              }
+            } catch (error) {
+              console.error("Booking creation failed:", error);
+            }
+          }
+        }
+      )
+    ] })
+  ] });
+};
+var DateTimePicker_default = DateTimePicker;
+var Navigation;
+var Pagination;
+var Autoplay;
+var swiperVersion = "11+";
+try {
+  const modules = __require("swiper/modules");
+  Navigation = modules.Navigation;
+  Pagination = modules.Pagination;
+  Autoplay = modules.Autoplay;
+  swiperVersion = "11+";
+} catch (e) {
+  try {
+    const SwiperCore = __require("swiper");
+    const SwiperNavigation = __require("swiper/modules/navigation");
+    const SwiperPagination = __require("swiper/modules/pagination");
+    const SwiperAutoplay = __require("swiper/modules/autoplay");
+    const SwiperClass = SwiperCore.default || SwiperCore;
+    if (SwiperClass && SwiperClass.use) {
+      SwiperClass.use([
+        SwiperNavigation.default || SwiperNavigation,
+        SwiperPagination.default || SwiperPagination,
+        SwiperAutoplay.default || SwiperAutoplay
+      ]);
+    }
+    Navigation = SwiperNavigation.default || SwiperNavigation;
+    Pagination = SwiperPagination.default || SwiperPagination;
+    Autoplay = SwiperAutoplay.default || SwiperAutoplay;
+    swiperVersion = "8";
+  } catch (e2) {
+    console.warn("Failed to load swiper modules:", e2);
+  }
+}
+if (typeof window !== "undefined") {
+  try {
+    __require("swiper/css");
+    __require("swiper/css/navigation");
+    __require("swiper/css/pagination");
+  } catch (e) {
+    try {
+      __require("swiper/swiper.min.css");
+      __require("swiper/modules/navigation/navigation.min.css");
+      __require("swiper/modules/pagination/pagination.min.css");
+    } catch (e2) {
+      console.warn("Failed to load swiper styles");
+    }
+  }
+}
+var defaultDescriptions = [
+  "Norem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.",
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos."
+];
+var defaultImages = [
+  "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
+  "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
+];
+var DemoRoomDetail = ({
+  apiClient,
+  demoRoomCode,
+  locale,
+  title: titleProp,
+  descriptions: descriptionsProp,
+  devices: devicesProp,
+  address: addressProp,
+  mapsLink,
+  images: imagesProp,
+  pageData = {
+    loadingText: "Loading...",
+    errorTitle: "Failed to load demo room details",
+    openInGoogleMaps: "Open in Google Maps",
+    demoRoomImages: "Demo Room Images"
+  },
+  className,
+  ...props
+}) => {
+  const {
+    data: demoRoom,
+    loading,
+    error
+  } = useDemoRoom(
+    apiClient,
+    demoRoomCode || "",
+    locale,
+    { enabled: !!apiClient && !!demoRoomCode }
+  );
+  const title = demoRoom?.name || titleProp || "Design District Demo Room";
+  const descriptions = demoRoom?.description ? [demoRoom.description] : descriptionsProp || defaultDescriptions;
+  const devices = demoRoom?.description || devicesProp || "eufyMake E1, eufyMake M5";
+  const address = demoRoom?.address || addressProp || "1111 8th St, San Francisco, CA United States 94108";
+  const images = demoRoom?.images && demoRoom.images.length > 0 ? demoRoom.images : imagesProp || defaultImages;
+  const googleMapsLink = mapsLink || (() => {
+    if (demoRoom?.latitude && demoRoom?.longitude) {
+      return `https://www.google.com/maps/search/?api=1&query=${demoRoom.latitude},${demoRoom.longitude}`;
+    } else {
+      return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`;
+    }
+  })();
+  if (loading && apiClient && demoRoomCode) {
+    return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-8 items-start", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-12 bg-gray-200 rounded animate-pulse" }),
+        /* @__PURE__ */ jsx("div", { className: "h-24 bg-gray-200 rounded animate-pulse" }),
+        /* @__PURE__ */ jsx("div", { className: "h-8 bg-gray-200 rounded animate-pulse" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "h-[400px] bg-gray-200 rounded-2xl animate-pulse" })
+    ] }) });
+  }
+  if (error && apiClient && demoRoomCode) {
+    return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "text-center text-red-600 py-8", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-lg font-medium", children: pageData.errorTitle }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm mt-2", children: error.message })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-8 items-start", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-[40px] font-bold text-gray-900 leading-tight", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-4", children: descriptions.map((desc, index) => /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "text-base text-gray-600 leading-relaxed",
+          children: desc
+        },
+        index
+      )) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            className: "flex-shrink-0 mt-0.5",
+            children: [
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: "3",
+                  y: "3",
+                  width: "18",
+                  height: "18",
+                  rx: "2",
+                  stroke: "currentColor",
+                  strokeWidth: "2"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M8 10H16",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M8 14H16",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-base text-gray-900", children: devices })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            className: "flex-shrink-0 mt-0.5",
+            children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2Z",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: "12",
+                  cy: "9",
+                  r: "2.5",
+                  stroke: "currentColor",
+                  strokeWidth: "2"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: address }),
+          /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: googleMapsLink,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "inline-flex items-center gap-1 text-sm text-blue-600 hover:text-blue-700 mt-1 underline",
+              children: [
+                pageData.openInGoogleMaps,
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    width: "12",
+                    height: "12",
+                    viewBox: "0 0 12 12",
                     fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
                     children: /* @__PURE__ */ jsx(
                       "path",
                       {
-                        d: "M8.29289 5.29289C8.68342 4.90237 9.31643 4.90237 9.70696 5.29289L15.707 11.2929C16.0975 11.6834 16.0975 12.3164 15.707 12.707L9.70696 18.707C9.31643 19.0975 8.68342 19.0975 8.29289 18.707C7.90237 18.3164 7.90237 17.6834 8.29289 17.2929L13.5859 11.9999L8.29289 6.70696C7.90237 6.31643 7.90237 5.68342 8.29289 5.29289Z",
-                        fill: "#1D1D1F"
+                        d: "M3 9L9 3M9 3H3M9 3V9",
+                        stroke: "currentColor",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
                       }
                     )
                   }
                 )
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 mt-[40px] gap-4", children: timeslotsLoading ? /* @__PURE__ */ jsx("div", { className: "col-span-2 text-center text-[#767880] py-8", children: "Loading time slots..." }) : timeslotsError ? /* @__PURE__ */ jsx("div", { className: "col-span-2 text-center text-red-600 py-8", children: "Failed to load time slots" }) : dayTimeslots.length === 0 ? /* @__PURE__ */ jsx("div", { className: "col-span-2 text-center text-[#767880] py-8", children: "No available time slots for this date" }) : dayTimeslots.map((slot) => {
-          const isAvailable = slot.status === "available";
-          const isFull = slot.status === "full";
-          const isSelected = selectedTimeslotId === slot.id;
-          return /* @__PURE__ */ jsx(
-            "button",
-            {
-              disabled: !isAvailable,
-              onClick: () => {
-                if (isAvailable) {
-                  setSelectedTimeslotId(slot.id);
-                }
-              },
-              className: `
-                      rounded-[20px] w-full flex items-center justify-center gap-4 h-[76px]
-                      border text-center transition-colors
-                      ${isSelected ? "border-[#3ADB67] bg-[#3ADB67] text-white cursor-pointer" : isAvailable ? "border-[#E4E5E6] hover:border-[#3ADB67] hover:bg-[#3ADB67] hover:text-white cursor-pointer" : "border-[#E4E5E6] bg-[#F5F5F5] text-[#BDBDBD] cursor-not-allowed"}
-                    `,
-              children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
-                /* @__PURE__ */ jsx("div", { children: formatTimeslot(slot) }),
-                isFull && /* @__PURE__ */ jsx("div", { className: "text-xs text-[#BDBDBD] mt-1", children: "Full" }),
-                isAvailable && !isSelected && /* @__PURE__ */ jsxs("div", { className: "text-xs text-[#767880] mt-1", children: [
-                  slot.capacity - slot.booked_count,
-                  " spots left"
-                ] }),
-                isAvailable && isSelected && /* @__PURE__ */ jsxs("div", { className: "text-xs text-white mt-1", children: [
-                  slot.capacity - slot.booked_count,
-                  " spots left"
-                ] })
-              ] })
-            },
-            slot.id
-          );
-        }) })
+              ]
+            }
+          )
+        ] })
       ] })
     ] }),
-    showQuestionnaire && questionnaire && /* @__PURE__ */ jsxs("div", { className: "mt-12", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-[48px] font-bold text-center mb-8", children: "Fill out Form" }),
-      questionnaireLoading ? /* @__PURE__ */ jsx("div", { className: "text-center text-[#767880] py-8", children: "Loading questionnaire..." }) : /* @__PURE__ */ jsx("div", { className: "bg-white rounded-[12px] border border-[#E4E5E6] p-8", children: /* @__PURE__ */ jsx(
-        QuestionnaireForm,
+    /* @__PURE__ */ jsx("div", { className: "relative h-[400px] rounded-2xl overflow-hidden", children: images.length > 0 ? /* @__PURE__ */ jsx(
+      Swiper,
+      {
+        ...swiperVersion === "11+" && Navigation && Pagination && Autoplay ? { modules: [Navigation, Pagination, Autoplay] } : {},
+        spaceBetween: 0,
+        slidesPerView: 1,
+        navigation: true,
+        pagination: { clickable: true },
+        autoplay: {
+          delay: 3e3,
+          disableOnInteraction: false
+        },
+        loop: true,
+        className: "h-full rounded-2xl",
+        children: images.map((img, index) => /* @__PURE__ */ jsx(SwiperSlide, { children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-full bg-gray-100", children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: img,
+            alt: `Demo room view ${index + 1}`,
+            className: "w-full h-full object-cover"
+          }
+        ) }) }, index))
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center rounded-2xl", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-16 h-16 mx-auto mb-3 rounded-full bg-white flex items-center justify-center", children: /* @__PURE__ */ jsxs(
+        "svg",
         {
-          questions: questionnaire.questions,
-          loading: bookingLoading,
-          onSubmit: async (responses) => {
-            try {
-              const customerName = responses.name || responses.customer_name || "";
-              const customerEmail = responses.email || responses.customer_email || "";
-              const customerPhone = responses.phone || responses.customer_phone_number || "";
-              const customerPhoneCode = responses.phone_code || responses.customer_phone_code || "+1";
-              const result = await createBooking({
-                demoroom_code: demoRoomCode,
-                timeslot_id: selectedTimeslotId,
-                questionnaire_id: questionnaire.id,
-                questionnaire_response: responses,
-                customer_name: customerName,
-                customer_email: customerEmail,
-                customer_phone_code: customerPhoneCode,
-                customer_phone_number: customerPhone
-              });
-              if (result && onBookingSuccess) {
-                onBookingSuccess(result?.cancel_token);
+          width: "32",
+          height: "32",
+          viewBox: "0 0 32 32",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: "4",
+                y: "8",
+                width: "24",
+                height: "16",
+                rx: "2",
+                stroke: "currentColor",
+                strokeWidth: "2"
               }
-            } catch (error) {
-              console.error("Booking creation failed:", error);
-            }
-          }
+            ),
+            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "14", r: "2", fill: "currentColor" }),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M28 20L22 14L16 20",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          ]
         }
-      ) })
-    ] }),
-    bookingError && /* @__PURE__ */ jsxs("div", { className: "mt-8 p-4 bg-red-50 border border-red-200 rounded-lg text-red-600 max-w-2xl mx-auto", children: [
-      /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Booking failed" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm mt-1", children: bookingError.message })
-    ] })
-  ] });
+      ) }),
+      /* @__PURE__ */ jsx("p", { className: "text-gray-500 text-sm", children: pageData.demoRoomImages })
+    ] }) }) })
+  ] }) });
 };
-var DateTimePicker_default = DateTimePicker;
+DemoRoomDetail.displayName = "DemoRoomDetail";
 var BookingForm = ({
   layoutClassName,
   className,
   apiConfig,
   demoRoomCode,
+  pageData,
   timezone,
   handleBookingSuccess,
   ...props
@@ -2846,25 +2593,21 @@ var BookingForm = ({
     () => createDemoRoomApi(apiConfig),
     [apiConfig]
   );
+  const dateTimePickerPageData = useMemo(() => ({
+    ...pageData?.dateTimePicker,
+    ...pageData?.questionnaireForm
+  }), [pageData?.dateTimePicker, pageData?.questionnaireForm]);
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), ...props, children: [
-      /* @__PURE__ */ jsx(
-        BreadCrumbs,
-        {
-          className: layoutClassName,
-          items: [{ label: "Home", link: "/" }, { label: "Demo Room" }]
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        DemoRoomDetail,
-        {
-          className: cn("mt-8", layoutClassName),
-          apiClient,
-          demoRoomCode,
-          locale: apiConfig.locale
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsx(
+      DemoRoomDetail,
+      {
+        className: cn("mt-8", layoutClassName),
+        apiClient,
+        demoRoomCode,
+        locale: apiConfig.locale,
+        pageData: pageData?.demoRoomDetail
+      }
+    ) }),
     /* @__PURE__ */ jsx("div", { className: "bg-[#f5f5f5]", children: /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
       DateTimePicker_default,
       {
@@ -2872,7 +2615,8 @@ var BookingForm = ({
         demoRoomCode,
         timezone,
         locale: apiConfig.locale,
-        onBookingSuccess: handleBookingSuccess
+        onBookingSuccess: handleBookingSuccess,
+        pageData: dateTimePickerPageData
       }
     ) }) })
   ] });
@@ -2883,17 +2627,42 @@ var BookingSuccess = ({
   token,
   apiConfig,
   onScheduleAgain,
-  className
+  onCancelSuccess,
+  className,
+  pageData = {
+    yourAppointment: "Your Appointment",
+    appointmentCanceled: "This appointment has been canceled.",
+    scheduleAgain: "Schedule again",
+    location: "Location",
+    openInGoogleMaps: "Open in Google Maps \u2197",
+    dateAndTime: "Date and Time",
+    event: "Event",
+    demoRoom: "Demo Room",
+    visitorInfo: "Visitor Info",
+    noPhoneProvided: "No phone provided",
+    cancelAppointment: "Cancel Appointment",
+    cancelDialog: {
+      title: "Are you sure you want to cancel?",
+      description: "You won't be able to restore the schedule.",
+      backButton: "Back",
+      confirmButton: "Cancel Appointment",
+      canceling: "Canceling..."
+    },
+    cancelError: "Failed to cancel appointment. Please try again."
+  }
 }) => {
-  const [bookingData, setBookingData] = useState(initialBookingData || null);
+  const [bookingData, setBookingData] = useState(
+    initialBookingData || null
+  );
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
   const [isCancelled, setIsCancelled] = useState(false);
+  const [showCancelDialog, setShowCancelDialog] = useState(false);
+  const [cancelLoading, setCancelLoading] = useState(false);
+  const [cancelError, setCancelError] = useState(null);
   useEffect(() => {
     if (token && apiConfig && !initialBookingData) {
       const fetchBookingData = async () => {
         setLoading(true);
-        setError(null);
         try {
           const apiClient = createDemoRoomApi(apiConfig);
           const booking = await apiClient.getBooking(token, apiConfig.locale);
@@ -2901,7 +2670,6 @@ var BookingSuccess = ({
           setIsCancelled(booking.status === "cancelled");
         } catch (err) {
           console.error("Failed to fetch booking data:", err);
-          setError("Failed to load booking information");
         } finally {
           setLoading(false);
         }
@@ -2909,8 +2677,36 @@ var BookingSuccess = ({
       fetchBookingData();
     }
   }, [token, apiConfig, initialBookingData]);
+  const handleCancelAppointment = async () => {
+    if (!token || !apiConfig) {
+      setCancelError(pageData.cancelError || "Unable to cancel: Missing token or API configuration");
+      return;
+    }
+    setCancelLoading(true);
+    setCancelError(null);
+    try {
+      const apiClient = createDemoRoomApi(apiConfig);
+      const cancelledBooking = await apiClient.cancelBooking(
+        token,
+        apiConfig.locale
+      );
+      if (cancelledBooking) {
+        setBookingData(cancelledBooking);
+      }
+      setIsCancelled(true);
+      setShowCancelDialog(false);
+      if (onCancelSuccess && cancelledBooking) {
+        onCancelSuccess(cancelledBooking);
+      }
+    } catch (err) {
+      console.error("Failed to cancel booking:", err);
+      setCancelError(pageData.cancelError || "Failed to cancel appointment. Please try again.");
+    } finally {
+      setCancelLoading(false);
+    }
+  };
   if (loading) {
-    return /* @__PURE__ */ jsx("div", { className: `min-h-screen bg-white py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsx("div", { className: "max-w-3xl mx-auto", children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-6", children: [
+    return /* @__PURE__ */ jsx("div", { className: `min-h-screen py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsx("div", { className: "max-w-3xl mx-auto", children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-6", children: [
       /* @__PURE__ */ jsx("div", { className: "h-8 bg-gray-200 rounded w-1/3" }),
       /* @__PURE__ */ jsx("div", { className: "h-24 bg-gray-200 rounded" }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
@@ -2920,40 +2716,25 @@ var BookingSuccess = ({
       ] })
     ] }) }) });
   }
-  if (error || !bookingData) {
-    return /* @__PURE__ */ jsx("div", { className: `min-h-screen bg-white py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsx("div", { className: "max-w-3xl mx-auto", children: /* @__PURE__ */ jsxs("div", { className: "text-center py-12", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-6xl mb-4", children: "\u274C" }),
-      /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-2", children: error || "Booking Not Found" }),
-      /* @__PURE__ */ jsx("p", { className: "text-base text-gray-600 mb-6", children: "We couldn't find your booking information." }),
-      onScheduleAgain && /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: onScheduleAgain,
-          className: "px-6 py-3 bg-black text-white rounded-full font-medium hover:bg-gray-800 transition-colors",
-          children: "Schedule Again"
-        }
-      )
-    ] }) }) });
+  if (!bookingData) {
+    return null;
   }
-  return /* @__PURE__ */ jsx("div", { className: `min-h-screen bg-white py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: "max-w-3xl mx-auto", children: [
-    /* @__PURE__ */ jsx("h1", { className: "text-[40px] font-bold text-gray-900 mb-8", children: "Your Appointment" }),
-    isCancelled ? /* @__PURE__ */ jsxs("div", { className: "bg-gray-50 rounded-lg p-6 mb-8 flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-base text-gray-700", children: "This appointment has been canceled." }),
+  return /* @__PURE__ */ jsx("div", { className: `min-h-screen py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: "max-w-3xl mx-auto", children: [
+    /* @__PURE__ */ jsx("h1", { className: "text-[40px] font-bold text-gray-900 mb-8", children: pageData.yourAppointment }),
+    isCancelled && /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg p-6 mb-8 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-base text-gray-700", children: pageData.appointmentCanceled }),
       onScheduleAgain && /* @__PURE__ */ jsx(
         "button",
         {
           onClick: onScheduleAgain,
           className: "px-6 py-3 bg-black text-white rounded-full font-medium hover:bg-gray-800 transition-colors whitespace-nowrap",
-          children: "Schedule again"
+          children: pageData.scheduleAgain
         }
       )
-    ] }) : /* @__PURE__ */ jsx("div", { className: "bg-green-50 rounded-lg p-6 mb-8 flex items-center justify-between border border-green-200", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx("svg", { className: "w-6 h-6 text-green-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
-      /* @__PURE__ */ jsx("p", { className: "text-base text-gray-700", children: "Your appointment has been confirmed." })
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-8 bg-white px-[48px] py-[32px] rounded-lg", children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: "Location" }),
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.location }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           bookingData.demoroom_name && /* @__PURE__ */ jsx("p", { className: "text-base font-medium text-gray-900", children: bookingData.demoroom_name }),
           bookingData.address && /* @__PURE__ */ jsx("p", { className: "text-base text-gray-600", children: bookingData.address }),
@@ -2964,13 +2745,13 @@ var BookingSuccess = ({
               target: "_blank",
               rel: "noopener noreferrer",
               className: "inline-flex items-center gap-1 text-base text-blue-600 hover:text-blue-700 hover:underline",
-              children: "Open in Google Maps \u2197"
+              children: pageData.openInGoogleMaps
             }
           )
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: "Date and Time" }),
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.dateAndTime }),
         /* @__PURE__ */ jsxs("p", { className: "text-base text-gray-900", children: [
           bookingData.booking_date,
           bookingData.time_slot && `, ${bookingData.time_slot}`,
@@ -2978,48 +2759,185 @@ var BookingSuccess = ({
         ] })
       ] }),
       bookingData.equipment && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: "Event" }),
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.event }),
         /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: bookingData.equipment })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: "Demo Room" }),
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.demoRoom }),
         /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: bookingData.demoroom_code })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: "Visitor Info" }),
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.visitorInfo }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: bookingData.customer_name }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-base text-gray-600", children: [
-            /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx(
-              "path",
+            /* @__PURE__ */ jsx(
+              "svg",
               {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: 2,
-                d: "M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
+                className: "w-5 h-5",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
+                  }
+                )
               }
-            ) }),
+            ),
             bookingData.phone_code && bookingData.phone_number ? /* @__PURE__ */ jsxs("span", { children: [
               bookingData.phone_code,
               " ",
               bookingData.phone_number
-            ] }) : /* @__PURE__ */ jsx("span", { children: "No phone provided" })
+            ] }) : /* @__PURE__ */ jsx("span", { children: pageData.noPhoneProvided })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-base text-gray-600", children: [
-            /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx(
-              "path",
+            /* @__PURE__ */ jsx(
+              "svg",
               {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: 2,
-                d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                className: "w-5 h-5",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                  }
+                )
               }
-            ) }),
+            ),
             /* @__PURE__ */ jsx("span", { children: bookingData.customer_email })
           ] })
         ] })
       ] })
-    ] })
+    ] }),
+    !isCancelled && /* @__PURE__ */ jsxs("div", { className: "mt-[64px]", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setShowCancelDialog(true),
+          disabled: cancelLoading,
+          className: "text-[14px] cursor-pointer w-fit rounded-full text-[#080A0F] border border-[#080A0F] px-[20px] py-[10px] leading-[1] hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+          children: pageData.cancelAppointment
+        }
+      ),
+      cancelError && /* @__PURE__ */ jsx("p", { className: "text-sm mt-2", style: { color: "#FF4D4D" }, children: cancelError })
+    ] }),
+    showCancelDialog && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 px-4", children: /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-[24px] max-w-[400px] p-8 shadow-xl relative", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setShowCancelDialog(false),
+          disabled: cancelLoading,
+          className: "absolute top-6 right-[30px] w-8 h-8 flex items-center justify-center text-gray-400 hover:text-gray-600 transition-colors disabled:opacity-50",
+          "aria-label": "Close",
+          children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M18 6L6 18M6 6L18 18",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-6", children: /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-full bg-[#F59E0B] flex items-center justify-center", children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          width: "32",
+          height: "32",
+          viewBox: "0 0 32 32",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M16 10V17M16 22H16.01",
+              stroke: "white",
+              strokeWidth: "3",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "text-center mb-8", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-[18px] font-semibold text-gray-900 mb-2", children: pageData.cancelDialog?.title }),
+        /* @__PURE__ */ jsx("p", { className: "text-[14px] text-gray-600", children: pageData.cancelDialog?.description })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-center", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setShowCancelDialog(false),
+            disabled: cancelLoading,
+            className: "px-8 py-3 border-2 border-black rounded-full text-black font-medium hover:bg-gray-50 transition-colors disabled:opacity-50 min-w-[120px]",
+            children: pageData.cancelDialog?.backButton
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleCancelAppointment,
+            disabled: cancelLoading,
+            className: "px-8 py-3 bg-black text-white rounded-full font-medium hover:bg-gray-800 transition-colors disabled:opacity-50 flex items-center gap-2 min-w-[180px] justify-center",
+            children: cancelLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  className: "animate-spin h-5 w-5",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        className: "opacity-25",
+                        cx: "12",
+                        cy: "12",
+                        r: "10",
+                        stroke: "currentColor",
+                        strokeWidth: "4"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        className: "opacity-75",
+                        fill: "currentColor",
+                        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      }
+                    )
+                  ]
+                }
+              ),
+              pageData.cancelDialog?.canceling
+            ] }) : pageData.cancelDialog?.confirmButton
+          }
+        )
+      ] })
+    ] }) })
   ] }) });
 };
 
@@ -3161,6 +3079,6 @@ var ThemeProvider = ({
   return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme: theme2 }, children });
 };
 
-export { BookingForm, BookingSuccess, DemoRoom, DemoRoomApiClient, DemoRoomDetail, ThemeProvider, cn, createDemoRoomApi, useBooking, useCancelBooking, useCreateBooking, useDemoRoom, useDemoRooms, useQuestionnaire, useTheme, useTimeslots };
+export { BookingForm, BookingSuccess, DemoRoom, DemoRoomApiClient, ThemeProvider, cn, createDemoRoomApi, useBooking, useCancelBooking, useCreateBooking, useDemoRoom, useDemoRooms, useQuestionnaire, useTheme, useTimeslots };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map