@anker-in/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,3077 @@
+'use strict';
+
+var React2 = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+var headlessUi = require('@anker-in/headless-ui');
+var IndexBar = require('antd-mobile/es/components/index-bar');
+var List = require('antd-mobile/es/components/list');
+require('antd-mobile/es/components/index-bar/index-bar.css');
+require('antd-mobile/es/components/list/list.css');
+var react = require('swiper/react');
+var modules = require('swiper/modules');
+require('swiper/css');
+require('swiper/css/navigation');
+require('swiper/css/pagination');
+var dayjs = require('dayjs');
+require('dayjs/locale/zh-cn');
+var antd = require('antd');
+var dayLocaleData = require('dayjs/plugin/localeData');
+var weekday = require('dayjs/plugin/weekday');
+var weekOfYear = require('dayjs/plugin/weekOfYear');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React2__default = /*#__PURE__*/_interopDefault(React2);
+var IndexBar__default = /*#__PURE__*/_interopDefault(IndexBar);
+var List__default = /*#__PURE__*/_interopDefault(List);
+var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
+var dayLocaleData__default = /*#__PURE__*/_interopDefault(dayLocaleData);
+var weekday__default = /*#__PURE__*/_interopDefault(weekday);
+var weekOfYear__default = /*#__PURE__*/_interopDefault(weekOfYear);
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.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] = React2.useState(
+    tabs[1]?.id || tabs[0]?.id
+  );
+  const activeTabId = controlledActiveTabId ?? internalActiveTabId;
+  const handleTabClick = (tabId) => {
+    if (!controlledActiveTabId) {
+      setInternalActiveTabId(tabId);
+    }
+    onTabChange?.(tabId);
+  };
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "relative h-full flex flex-col",
+            isLarge && "justify-center pl-8",
+            !isLarge && "justify-end pl-8 pb-8"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 mb-4", children: subtitle }),
+              description && /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-sm leading-relaxed",
+                    isMedium && "text-white/90",
+                    (isLarge || isProduct) && "text-gray-600"
+                  ),
+                  children: description
+                }
+              )
+            ] }),
+            buttons.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3 mt-6", children: buttons.map((button, index) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("w-full"), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[48px] font-semibold 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__ */ jsxRuntime.jsxs("div", { className: cn("w-full", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Title, { title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-6 mb-[64px]", children: events.map((event, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(index === 0 ? "col-span-2" : ""), children: /* @__PURE__ */ jsxRuntime.jsx(EventCard, { ...event }) }, index)) }),
+    showViewMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: onViewMore,
+        className: "inline-flex items-center gap-2 text-gray-700 hover:text-gray-900 transition-colors duration-200",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-bold", children: "View More" }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("relative"),
+      style: { aspectRatio: "1920/480", ...style },
+      ...props,
+      children: [
+        data?.backgroundImage && /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: data.backgroundImage,
+            alt: "",
+            className: "inset-0 h-full w-full object-cover"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                headlessUi.Text,
+                {
+                  className: "text-[48px] font-bold text-white leading-[1]",
+                  html: data?.title
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                headlessUi.Text,
+                {
+                  className: "text-[18px] font-bold text-white leading-[1.4]",
+                  html: data?.subTitle
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+Banner.displayName = "Banner";
+var BreadCrumbs = ({
+  items,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+      headlessUi.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("w-full", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Title, { title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-2 gap-6", children: steps.map((step) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "bg-white rounded-2xl overflow-hidden",
+          "border border-gray-200",
+          "hover:shadow-lg transition-shadow duration-200"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 pb-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-semibold text-gray-900", children: [
+              "Step ",
+              step.stepNumber,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-900 font-medium flex-1", children: step.title })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full aspect-[356/220] bg-gray-100", children: /* @__PURE__ */ jsxRuntime.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,
+  onSchedule,
+  className,
+  ...props
+}) => {
+  const fullAddress = `${address}, ${city}, ${state} ${country} ${zipCode}`;
+  const handleScheduleClick = () => {
+    onSchedule?.(code);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "p-6",
+        "hover:shadow-lg transition-shadow duration-200",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold text-gray-900 mb-4", children: name }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              width: "20",
+              height: "20",
+              viewBox: "0 0 20 20",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              className: "flex-shrink-0 mt-0.5",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "rect",
+                  {
+                    x: "3",
+                    y: "4",
+                    width: "14",
+                    height: "13",
+                    rx: "2",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: "M3 8H17",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: "M6 2V4",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: "M14 2V4",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-600", children: [
+            "Available ",
+            availableTime
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              width: "20",
+              height: "20",
+              viewBox: "0 0 20 20",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              className: "flex-shrink-0 mt-0.5",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: "M10 10C11.1046 10 12 9.10457 12 8C12 6.89543 11.1046 6 10 6C8.89543 6 8 6.89543 8 8C8 9.10457 8.89543 10 10 10Z",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: "M10 18C10 18 16 13 16 8C16 4.68629 13.3137 2 10 2C6.68629 2 4 4.68629 4 8C4 13 10 18 10 18Z",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600", children: fullAddress }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              width: "20",
+              height: "20",
+              viewBox: "0 0 20 20",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              className: "flex-shrink-0 mt-0.5",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "rect",
+                  {
+                    x: "3",
+                    y: "5",
+                    width: "14",
+                    height: "10",
+                    rx: "1.5",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: "M7 15V17",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: "M13 15V17",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "1.5", fill: "currentColor" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600", children: euifyMakeModel }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleScheduleClick,
+            className: cn(
+              "w-full px-6 py-3 rounded-full",
+              "bg-white text-gray-900 border border-gray-900",
+              "font-medium text-sm",
+              "hover:bg-gray-900 hover:text-white",
+              "transition-all duration-200"
+            ),
+            children: "Schedule Now"
+          }
+        )
+      ]
+    }
+  );
+};
+StudioCard.displayName = "StudioCard";
+var defaultLocations = [
+  {
+    id: "1",
+    name: "Design District Demo Room",
+    address: "111 8th St",
+    city: "San Francisco",
+    state: "CA",
+    zipCode: "94108",
+    country: "United States",
+    lat: 37.7749,
+    lng: -122.4194,
+    availableTime: "Oct 28, 2:00 PM",
+    euifyMakeModel: "euifyMake E1, euifyMake M5"
+  }
+];
+var StudioMap = ({
+  googleMapsApiKey,
+  locations = defaultLocations,
+  defaultCenter = { lat: 39.8283, lng: -98.5795 },
+  // US center
+  defaultZoom = 4,
+  mapHeight = "600px",
+  onSchedule,
+  className,
+  ...props
+}) => {
+  const [_selectedLocation, setSelectedLocation] = React2.useState(null);
+  const [isLoaded, setIsLoaded] = React2.useState(false);
+  const mapRef = React2__default.default.useRef(null);
+  const googleMapRef = React2__default.default.useRef(null);
+  const markersRef = React2__default.default.useRef([]);
+  const infoWindowRef = React2__default.default.useRef(null);
+  React2__default.default.useEffect(() => {
+    if (!googleMapsApiKey) {
+      console.error("Google Maps API Key is required");
+      return;
+    }
+    if (window.google && window.google.maps) {
+      setIsLoaded(true);
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = `https://maps.googleapis.com/maps/api/js?key=${googleMapsApiKey}&libraries=places`;
+    script.async = true;
+    script.defer = true;
+    script.onload = () => setIsLoaded(true);
+    script.onerror = () => console.error("Failed to load Google Maps script");
+    document.head.appendChild(script);
+    return () => {
+      if (script.parentNode) {
+        script.parentNode.removeChild(script);
+      }
+    };
+  }, [googleMapsApiKey]);
+  React2__default.default.useEffect(() => {
+    if (!isLoaded || !mapRef.current || googleMapRef.current) return;
+    const map = new google.maps.Map(mapRef.current, {
+      center: defaultCenter,
+      zoom: defaultZoom,
+      styles: [
+        {
+          featureType: "all",
+          elementType: "geometry",
+          stylers: [{ color: "#E0F2F1" }]
+        },
+        {
+          featureType: "water",
+          elementType: "geometry",
+          stylers: [{ color: "#B2EBF2" }]
+        },
+        {
+          featureType: "road",
+          elementType: "geometry",
+          stylers: [{ color: "#ffffff" }]
+        }
+      ],
+      mapTypeControl: false,
+      streetViewControl: false,
+      fullscreenControl: true
+    });
+    googleMapRef.current = map;
+    infoWindowRef.current = new google.maps.InfoWindow();
+  }, [isLoaded, defaultCenter, defaultZoom]);
+  React2__default.default.useEffect(() => {
+    if (!googleMapRef.current || !isLoaded) return;
+    markersRef.current.forEach((marker) => marker.setMap(null));
+    markersRef.current = [];
+    const validLocations = locations.filter((location) => {
+      const lat = Number(location.lat);
+      const lng = Number(location.lng);
+      const isValid = !isNaN(lat) && !isNaN(lng) && isFinite(lat) && isFinite(lng) && lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180;
+      if (!isValid) {
+        console.warn("Invalid location coordinates:", location);
+      }
+      return isValid;
+    });
+    validLocations.forEach((location) => {
+      const lat = Number(location.lat);
+      const lng = Number(location.lng);
+      const marker = new google.maps.Marker({
+        position: { lat, lng },
+        map: googleMapRef.current,
+        title: location.name,
+        icon: {
+          path: google.maps.SymbolPath.CIRCLE,
+          scale: 10,
+          fillColor: "#000000",
+          fillOpacity: 1,
+          strokeColor: "#ffffff",
+          strokeWeight: 2
+        }
+      });
+      marker.addListener("click", () => {
+        setSelectedLocation(location);
+        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;">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>
+            </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-${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'"
+            >
+              Schedule Now
+            </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-${location.id}`);
+              if (btn) {
+                btn.addEventListener("click", () => {
+                  if (onSchedule) {
+                    onSchedule(location);
+                  }
+                });
+              }
+            }
+          );
+        }
+        googleMapRef.current?.panTo({ lat: location.lat, lng: location.lng });
+      });
+      markersRef.current.push(marker);
+    });
+    if (validLocations.length > 0 && googleMapRef.current) {
+      const bounds = new google.maps.LatLngBounds();
+      validLocations.forEach((location) => {
+        const lat = Number(location.lat);
+        const lng = Number(location.lng);
+        bounds.extend({ lat, lng });
+      });
+      googleMapRef.current.fitBounds(bounds);
+    }
+  }, [isLoaded, locations, onSchedule]);
+  if (!googleMapsApiKey) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-center bg-gray-100 rounded-lg",
+          className
+        ),
+        style: { height: mapHeight },
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: "Google Maps API Key is required" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("relative w-full rounded-lg overflow-hidden", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: mapRef, style: { height: mapHeight } }),
+        !isLoaded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gray-100", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: "Loading map..." })
+        ] }) })
+      ]
+    }
+  );
+};
+StudioMap.displayName = "StudioMap";
+
+// src/api/types.ts
+var ApiError = class extends Error {
+  constructor(code, message, request_id) {
+    super(message);
+    this.code = code;
+    this.request_id = request_id;
+    this.name = "ApiError";
+  }
+};
+
+// src/api/hooks.ts
+function useDemoRooms(client, params, options) {
+  const [state, setState] = React2.useState({
+    data: null,
+    loading: true,
+    error: null
+  });
+  const enabled = options?.enabled !== false;
+  React2.useEffect(() => {
+    if (!enabled) return;
+    let cancelled = false;
+    const fetchData = async () => {
+      setState((prev) => ({ ...prev, loading: true, error: null }));
+      try {
+        const data = await client.getDemoRooms(params);
+        if (!cancelled) {
+          setState({ data, loading: false, error: null });
+        }
+      } catch (error) {
+        if (!cancelled) {
+          setState({
+            data: null,
+            loading: false,
+            error: error instanceof ApiError ? error : new ApiError(1006, "Unknown error")
+          });
+        }
+      }
+    };
+    fetchData();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, params.team_code, params.brand_website, params.locale, enabled]);
+  return state;
+}
+function useDemoRoom(client, code, locale, options) {
+  const [state, setState] = React2.useState({
+    data: null,
+    loading: true,
+    error: null
+  });
+  const enabled = options?.enabled !== false;
+  React2.useEffect(() => {
+    if (!enabled || !code) return;
+    let cancelled = false;
+    const fetchData = async () => {
+      setState((prev) => ({ ...prev, loading: true, error: null }));
+      try {
+        const data = await client.getDemoRoom(code, locale);
+        if (!cancelled) {
+          setState({ data, loading: false, error: null });
+        }
+      } catch (error) {
+        if (!cancelled) {
+          setState({
+            data: null,
+            loading: false,
+            error: error instanceof ApiError ? error : new ApiError(1006, "Unknown error")
+          });
+        }
+      }
+    };
+    fetchData();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, code, locale, enabled]);
+  return state;
+}
+function useTimeslots(client, code, params, options) {
+  const [state, setState] = React2.useState({
+    data: null,
+    loading: true,
+    error: null
+  });
+  const enabled = options?.enabled !== false;
+  React2.useEffect(() => {
+    if (!enabled || !code || !params.start_date || !params.end_date) return;
+    let cancelled = false;
+    const fetchData = async () => {
+      setState((prev) => ({ ...prev, loading: true, error: null }));
+      try {
+        const data = await client.getTimeslots(code, params);
+        if (!cancelled) {
+          setState({ data, loading: false, error: null });
+        }
+      } catch (error) {
+        if (!cancelled) {
+          setState({
+            data: null,
+            loading: false,
+            error: error instanceof ApiError ? error : new ApiError(1006, "Unknown error")
+          });
+        }
+      }
+    };
+    fetchData();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, code, params.start_date, params.end_date, params.timezone, enabled]);
+  return state;
+}
+function useQuestionnaire(client, code, questionnaire_id, locale, options) {
+  const [state, setState] = React2.useState({
+    data: null,
+    loading: true,
+    error: null
+  });
+  const enabled = options?.enabled !== false;
+  React2.useEffect(() => {
+    if (!enabled || !code || !questionnaire_id) return;
+    let cancelled = false;
+    const fetchData = async () => {
+      setState((prev) => ({ ...prev, loading: true, error: null }));
+      try {
+        const data = await client.getQuestionnaire(code, questionnaire_id, locale);
+        if (!cancelled) {
+          setState({ data, loading: false, error: null });
+        }
+      } catch (error) {
+        if (!cancelled) {
+          setState({
+            data: null,
+            loading: false,
+            error: error instanceof ApiError ? error : new ApiError(1006, "Unknown error")
+          });
+        }
+      }
+    };
+    fetchData();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, code, questionnaire_id, locale, enabled]);
+  return state;
+}
+function useCreateBooking(client) {
+  const [state, setState] = React2.useState({
+    data: null,
+    loading: false,
+    error: null
+  });
+  const createBooking = React2.useCallback(
+    async (data) => {
+      setState({ data: null, loading: true, error: null });
+      try {
+        const result = await client.createBooking(data);
+        setState({ data: result, loading: false, error: null });
+        return result;
+      } catch (error) {
+        const apiError = error instanceof ApiError ? error : new ApiError(1006, "Unknown error");
+        setState({ data: null, loading: false, error: apiError });
+        throw apiError;
+      }
+    },
+    [client]
+  );
+  return {
+    ...state,
+    createBooking
+  };
+}
+var AntdMobileIsolated = ({
+  children,
+  className,
+  style
+}) => {
+  const containerRef = React2.useRef(null);
+  React2.useEffect(() => {
+    if (!containerRef.current) return;
+    const container = containerRef.current;
+    const originalStyles = {
+      fontSize: container.style.fontSize,
+      fontFamily: container.style.fontFamily,
+      lineHeight: container.style.lineHeight,
+      color: container.style.color
+    };
+    container.style.fontSize = "14px";
+    container.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+    container.style.lineHeight = "1.5";
+    container.style.color = "#333";
+    return () => {
+      container.style.fontSize = originalStyles.fontSize;
+      container.style.fontFamily = originalStyles.fontFamily;
+      container.style.lineHeight = originalStyles.lineHeight;
+      container.style.color = originalStyles.color;
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("antd-mobile-isolated", className),
+      style: {
+        // 使用 all: revert-layer 来隔离样式
+        isolation: "isolate",
+        contain: "layout style",
+        ...style
+      },
+      children
+    }
+  );
+};
+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) => {
+    const firstChar = item.name.charAt(0).toUpperCase();
+    const key = /[A-Z]/.test(firstChar) ? firstChar : "#";
+    if (!groups.has(key)) {
+      groups.set(key, []);
+    }
+    groups.get(key).push(item);
+  });
+  return Array.from(groups.entries()).sort(([a], [b]) => {
+    if (a === "#") return 1;
+    if (b === "#") return -1;
+    return a.localeCompare(b);
+  }).map(([title, items2]) => ({
+    title,
+    items: items2.sort((a, b) => a.name.localeCompare(b.name))
+  }));
+}
+
+// src/components/DemoRoom/components/RoomsList.module.css
+var RoomsList_default = {};
+var LocationFilter = ({
+  locations,
+  onSelect,
+  visible = false,
+  onClose
+}) => {
+  const [currentLevel, setCurrentLevel] = React2.useState("country");
+  const [selectedCountry, setSelectedCountry] = React2.useState();
+  const [selectedState, setSelectedState] = React2.useState();
+  const [searchQuery, setSearchQuery] = React2.useState("");
+  const locationData = React2.useMemo(() => {
+    const countries = /* @__PURE__ */ new Map();
+    const states = /* @__PURE__ */ new Map();
+    const cities = /* @__PURE__ */ new Map();
+    locations.forEach((location) => {
+      const { country, state, city } = parseAddress(location.address);
+      if (country) {
+        const existing = countries.get(country);
+        countries.set(country, {
+          name: country,
+          code: country,
+          count: (existing?.count || 0) + 1
+        });
+      }
+      if (state) {
+        const stateKey = `${country}/${state}`;
+        const existing = states.get(stateKey);
+        states.set(stateKey, {
+          name: state,
+          code: stateKey,
+          count: (existing?.count || 0) + 1,
+          parentCode: country
+        });
+      }
+      if (city) {
+        const cityKey = `${country}/${state}/${city}`;
+        const existing = cities.get(cityKey);
+        cities.set(cityKey, {
+          name: city,
+          code: cityKey,
+          count: (existing?.count || 0) + 1,
+          parentCode: `${country}/${state}`
+        });
+      }
+    });
+    return {
+      countries: Array.from(countries.values()),
+      states: Array.from(states.values()),
+      cities: Array.from(cities.values())
+    };
+  }, [locations]);
+  const filteredItems = React2.useMemo(() => {
+    let items = [];
+    switch (currentLevel) {
+      case "country":
+        items = locationData.countries;
+        break;
+      case "state":
+        items = selectedCountry ? locationData.states.filter(
+          (s) => s.parentCode === selectedCountry
+        ) : [];
+        break;
+      case "city":
+        items = selectedState ? locationData.cities.filter((c) => c.parentCode === selectedState) : [];
+        break;
+    }
+    if (searchQuery) {
+      items = items.filter(
+        (item) => item.name.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    }
+    return items;
+  }, [currentLevel, selectedCountry, selectedState, locationData, searchQuery]);
+  const groupedItems = React2.useMemo(
+    () => groupByAlphabet(filteredItems),
+    [filteredItems]
+  );
+  const handleItemClick = (item) => {
+    if (currentLevel === "country") {
+      setSelectedCountry(item.code);
+      setCurrentLevel("state");
+    } else if (currentLevel === "state") {
+      setSelectedState(item.code);
+      setCurrentLevel("city");
+    } else if (currentLevel === "city") {
+      const parts = item.code.split("/");
+      onSelect?.({
+        level: "city",
+        country: parts[0],
+        state: parts[1],
+        city: parts[2]
+      });
+      onClose?.();
+    }
+  };
+  const handleTabClick = (level) => {
+    setCurrentLevel(level);
+    if (level === "country") {
+      setSelectedCountry(void 0);
+      setSelectedState(void 0);
+    } else if (level === "state") {
+      setSelectedState(void 0);
+    }
+  };
+  if (!visible) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: { height: "794px" },
+      className: cn(
+        "w-full rounded-[12px] absolute z-10 top-0 left-0 bg-white border border-[#E4E5E6]",
+        RoomsList_default.antdMobileScope
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: { background: "#F8F8F8" },
+            className: "rounded-[12px] rounded-b-none h-[72px] font-bold text-[14px] flex flex-col",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-[20px] pt-[12px] pb-[8px]", children: [
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: onClose,
+                    className: "ml-[12px] w-[24px] h-[24px] flex items-center justify-center",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "24",
+                        height: "24",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center px-[20px] gap-[16px] pb-[8px]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: () => handleTabClick("country"),
+                    className: cn(
+                      "pb-[4px] transition-colors",
+                      currentLevel === "country" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]"
+                    ),
+                    children: "Country"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: () => handleTabClick("state"),
+                    disabled: !selectedCountry,
+                    className: cn(
+                      "pb-[4px] transition-colors",
+                      currentLevel === "state" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]",
+                      !selectedCountry && "opacity-50 cursor-not-allowed"
+                    ),
+                    children: "State"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: () => handleTabClick("city"),
+                    disabled: !selectedState,
+                    className: cn(
+                      "pb-[4px] transition-colors",
+                      currentLevel === "city" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]",
+                      !selectedState && "opacity-50 cursor-not-allowed"
+                    ),
+                    children: "City"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(AntdMobileIsolated, { style: { height: "calc(100% - 72px)" }, children: /* @__PURE__ */ jsxRuntime.jsx(IndexBar__default.default, { style: { height: "100%" }, children: groupedItems.map((group) => {
+          const { title, items } = group;
+          return /* @__PURE__ */ jsxRuntime.jsx(IndexBar__default.default.Panel, { index: title, title, children: /* @__PURE__ */ jsxRuntime.jsx(List__default.default, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+            List__default.default.Item,
+            {
+              clickable: true,
+              onClick: () => handleItemClick(item),
+              extra: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[8px]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[#767880] text-[14px]", children: item.count }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    children: /* @__PURE__ */ jsxRuntime.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"
+                      }
+                    )
+                  }
+                )
+              ] }),
+              children: item.name
+            },
+            item.code
+          )) }) }, title);
+        }) }) })
+      ]
+    }
+  );
+};
+LocationFilter.displayName = "LocationFilter";
+var defaultStudioLocations = [
+  {
+    id: "1",
+    name: "Design District Demo Room",
+    address: "111 8th St",
+    city: "San Francisco",
+    state: "CA",
+    zipCode: "94108",
+    country: "United States",
+    lat: 37.7749,
+    lng: -122.4194,
+    availableTime: "Oct 28, 2:00 PM",
+    euifyMakeModel: "euifyMake E1, euifyMake M5"
+  },
+  {
+    id: "2",
+    name: "Brooklyn Creative Studio",
+    address: "456 Broadway",
+    city: "Brooklyn",
+    state: "NY",
+    zipCode: "11211",
+    country: "United States",
+    lat: 40.7128,
+    lng: -74.006,
+    availableTime: "Oct 29, 3:00 PM",
+    euifyMakeModel: "euifyMake E1, euifyMake M5"
+  },
+  {
+    id: "3",
+    name: "Austin Innovation Hub",
+    address: "789 Tech Blvd",
+    city: "Austin",
+    state: "TX",
+    zipCode: "78701",
+    country: "United States",
+    lat: 30.2672,
+    lng: -97.7431,
+    availableTime: "Oct 30, 1:00 PM",
+    euifyMakeModel: "euifyMake M5"
+  },
+  {
+    id: "4",
+    name: "Seattle Maker Space",
+    address: "321 Pine St",
+    city: "Seattle",
+    state: "WA",
+    zipCode: "98101",
+    country: "United States",
+    lat: 47.6062,
+    lng: -122.3321,
+    availableTime: "Oct 31, 11:00 AM",
+    euifyMakeModel: "euifyMake E1"
+  },
+  {
+    id: "5",
+    name: "Chicago Design Center",
+    address: "654 Michigan Ave",
+    city: "Chicago",
+    state: "IL",
+    zipCode: "60611",
+    country: "United States",
+    lat: 41.8781,
+    lng: -87.6298,
+    availableTime: "Nov 1, 2:30 PM",
+    euifyMakeModel: "euifyMake E1, euifyMake M5"
+  },
+  {
+    id: "6",
+    name: "Miami Beach Studio",
+    address: "987 Ocean Drive",
+    city: "Miami Beach",
+    state: "FL",
+    zipCode: "33139",
+    country: "United States",
+    lat: 25.7617,
+    lng: -80.1918,
+    availableTime: "Nov 2, 10:00 AM",
+    euifyMakeModel: "euifyMake M5"
+  },
+  {
+    id: "7",
+    name: "Denver Mountain Studio",
+    address: "147 16th St",
+    city: "Denver",
+    state: "CO",
+    zipCode: "80202",
+    country: "United States",
+    lat: 39.7392,
+    lng: -104.9903,
+    availableTime: "Nov 3, 4:00 PM",
+    euifyMakeModel: "euifyMake E1"
+  },
+  {
+    id: "8",
+    name: "Los Angeles Creative Lab",
+    address: "258 Main St",
+    city: "Los Angeles",
+    state: "CA",
+    zipCode: "90012",
+    country: "United States",
+    lat: 34.0522,
+    lng: -118.2437,
+    availableTime: "Nov 4, 1:00 PM",
+    euifyMakeModel: "euifyMake E1, euifyMake M5"
+  }
+];
+var RoomsList = ({
+  googleMapsApiKey,
+  className,
+  apiClient,
+  teamCode,
+  brandWebsite,
+  onSchedule,
+  ...props
+}) => {
+  const [showLocationFilter, setShowLocationFilter] = React2.useState(false);
+  const [selectedLocation, setSelectedLocation] = React2.useState();
+  const {
+    data: demoRooms,
+    loading,
+    error
+  } = useDemoRooms(apiClient, {
+    team_code: teamCode,
+    brand_website: brandWebsite
+  });
+  console.log(demoRooms);
+  const studioLocations = React2.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);
+      return {
+        id: room.code,
+        name: room.name,
+        address: room.address,
+        city,
+        state,
+        zipCode: "",
+        country,
+        lat: Number(room.latitude) || 34.0522,
+        lng: Number(room.longitude) || -118.2437,
+        availableTime: nextAvailableTimeslot ? `${nextAvailableTimeslot.start_time}` : "No available time",
+        euifyMakeModel: room?.description
+      };
+    });
+  }, [demoRooms]);
+  const filteredStudioLocations = React2.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;
+      }
+      if (selectedLocation.state) {
+        return country === selectedLocation.country && state === selectedLocation.state;
+      }
+      if (selectedLocation.country) {
+        return country === selectedLocation.country;
+      }
+      return true;
+    });
+  }, [studioLocations, selectedLocation]);
+  const getSelectedLocationName = () => {
+    if (!selectedLocation) return "All Locations";
+    if (selectedLocation.city) return selectedLocation.city;
+    if (selectedLocation.state) return selectedLocation.state;
+    if (selectedLocation.country) return selectedLocation.country;
+    return "All Locations";
+  };
+  const handleLocationSelect = (selection) => {
+    setSelectedLocation(selection);
+    setShowLocationFilter(false);
+  };
+  const handleClearFilter = () => {
+    setSelectedLocation(void 0);
+  };
+  console.log(filteredStudioLocations);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Title, { title: "Find a Studio Near You" }),
+    loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[794px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium", children: "Loading demo rooms..." }) }) }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[794px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center text-red-600", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium", children: "Failed to load demo rooms" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm mt-2", children: error.message })
+    ] }) }),
+    !loading && !error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[794px] overflow-auto gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "flex-none relative w-[420px]",
+          style: { height: "794px" },
+          children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  className: "flex cursor-pointer items-center hover:text-[#2E8B57] transition-colors",
+                  onClick: () => setShowLocationFilter(true),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1", children: getSelectedLocationName() }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "24",
+                        height: "24",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          "path",
+                          {
+                            d: "M16.7661 9.23364C17.078 9.5455 17.0779 10.0516 16.7661 10.3635L12.5991 14.5305C12.2874 14.842 11.782 14.8418 11.4702 14.5305L7.30322 10.3635C6.99135 10.0516 6.99135 9.54552 7.30322 9.23364C7.615 8.9221 8.1203 8.92219 8.43213 9.23364L12.0347 12.8362L15.6362 9.23364C15.9481 8.92183 16.4543 8.92181 16.7661 9.23364Z",
+                            fill: "currentColor"
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              selectedLocation && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: handleClearFilter,
+                  className: "ml-auto text-[14px] text-[#2E8B57] hover:underline",
+                  children: "Clear"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex text-[#767880] cursor-not-allowed", children: [
+                "eufymake E1",
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "24",
+                    height: "24",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        d: "M16.7661 9.23364C17.078 9.5455 17.0779 10.0516 16.7661 10.3635L12.5991 14.5305C12.2874 14.842 11.782 14.8418 11.4702 14.5305L7.30322 10.3635C6.99135 10.0516 6.99135 9.54552 7.30322 9.23364C7.615 8.9221 8.1203 8.92219 8.43213 9.23364L12.0347 12.8362L15.6362 9.23364C15.9481 8.92183 16.4543 8.92181 16.7661 9.23364Z",
+                        fill: "currentColor"
+                      }
+                    )
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: { maxHeight: "706px", overflow: "auto" },
+                className: "rounded-[12px] bg-white border border-[#E4E5E6]",
+                children: filteredStudioLocations.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[200px] text-[#767880]", children: "No studios found in this location" }) : filteredStudioLocations.map((item) => {
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    StudioCard,
+                    {
+                      code: item.id,
+                      name: item?.name,
+                      availableTime: item?.availableTime || "",
+                      address: item?.address,
+                      city: item?.city,
+                      state: item?.state,
+                      zipCode: item?.zipCode,
+                      euifyMakeModel: item?.euifyMakeModel || "",
+                      onSchedule
+                    },
+                    item.id
+                  );
+                })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              LocationFilter,
+              {
+                locations: studioLocations.map((loc) => ({
+                  address: loc.address,
+                  id: loc.id
+                })),
+                visible: showLocationFilter,
+                onSelect: handleLocationSelect,
+                onClose: () => setShowLocationFilter(false)
+              }
+            )
+          ]
+        }
+      ),
+      googleMapsApiKey && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1"), children: /* @__PURE__ */ jsxRuntime.jsx(
+        StudioMap,
+        {
+          googleMapsApiKey,
+          locations: filteredStudioLocations,
+          onSchedule: () => {
+            console.log(111);
+          },
+          mapHeight: "794px"
+        }
+      ) })
+    ] })
+  ] });
+};
+RoomsList.displayName = "RoomsList";
+
+// src/api/client.ts
+var DemoRoomApiClient = class {
+  constructor(config) {
+    this.config = {
+      timeout: 3e4,
+      ...config
+    };
+  }
+  async request(endpoint, options = {}) {
+    const url = `${this.config.baseUrl}${endpoint}`;
+    const headers = {
+      "X-API-Key": this.config.apiKey,
+      "Content-Type": "application/json",
+      ...options.headers
+    };
+    if (this.config.locale) {
+      headers["Accept-Language"] = this.config.locale;
+    }
+    try {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), this.config.timeout);
+      const response = await fetch(url, {
+        ...options,
+        headers,
+        signal: controller.signal
+      });
+      clearTimeout(timeoutId);
+      const data = await response.json();
+      if (data.code !== 0 /* SUCCESS */) {
+        throw new ApiError(data.code, data.message, data.request_id);
+      }
+      return data.data;
+    } catch (error) {
+      if (error instanceof ApiError) {
+        throw error;
+      }
+      if (error instanceof Error) {
+        if (error.name === "AbortError") {
+          throw new ApiError(1006 /* INTERNAL_ERROR */, "Request timeout");
+        }
+        throw new ApiError(1006 /* INTERNAL_ERROR */, error.message);
+      }
+      throw new ApiError(1006 /* INTERNAL_ERROR */, "Unknown error");
+    }
+  }
+  /**
+   * 获取门店列表
+   * @param params.team_code 团队编码
+   * @param params.brand_website 品牌站点
+   * @param params.locale 语言偏好（可选）
+   */
+  async getDemoRooms(params) {
+    const searchParams = new URLSearchParams();
+    if (params.team_code) {
+      searchParams.append("team_code", params.team_code);
+    }
+    if (params.brand_website) {
+      searchParams.append("brand_website", params.brand_website);
+    }
+    if (params.locale) {
+      searchParams.append("locale", params.locale);
+    }
+    const response = await this.request(
+      `/api/v1/store/demorooms?${searchParams.toString()}`
+    );
+    return response.demorooms;
+  }
+  /**
+   * 获取门店详情
+   * @param code 门店编码
+   * @param locale 语言偏好（可选）
+   */
+  async getDemoRoom(code, locale) {
+    const searchParams = new URLSearchParams();
+    if (locale) {
+      searchParams.append("locale", locale);
+    }
+    const query = searchParams.toString();
+    return this.request(
+      `/api/v1/store/demorooms/${code}${query ? `?${query}` : ""}`
+    );
+  }
+  /**
+   * 查询门店时段
+   * @param code 门店编码
+   * @param params.start_date 开始日期 (YYYY-MM-DD)
+   * @param params.end_date 结束日期 (YYYY-MM-DD)
+   * @param params.timezone 时区（可选）
+   */
+  async getTimeslots(code, params) {
+    const searchParams = new URLSearchParams({
+      start_date: params.start_date,
+      end_date: params.end_date
+    });
+    if (params.timezone) {
+      searchParams.append("timezone", params.timezone);
+    }
+    return this.request(
+      `/api/v1/store/demorooms/${code}/timeslots?${searchParams.toString()}`
+    );
+  }
+  /**
+   * 查询门店问卷
+   * @param code 门店编码
+   * @param questionnaire_id 问卷ID
+   * @param locale 语言偏好（可选）
+   */
+  async getQuestionnaire(code, questionnaire_id, locale) {
+    const searchParams = new URLSearchParams();
+    if (locale) {
+      searchParams.append("locale", locale);
+    }
+    const query = searchParams.toString();
+    return this.request(
+      `/api/v1/store/demorooms/${code}/questionnaires/${questionnaire_id}${query ? `?${query}` : ""}`
+    );
+  }
+  /**
+   * 提交预约
+   * @param data 预约数据
+   */
+  async createBooking(data) {
+    return this.request("/api/v1/store/bookings", {
+      method: "POST",
+      body: JSON.stringify(data)
+    });
+  }
+  /**
+   * 根据 token 获取预约信息
+   * @param token 预约 token
+   */
+  async getBooking(token) {
+    return this.request(`/api/v1/store/bookings/${token}`);
+  }
+};
+function createDemoRoomApi(config) {
+  return new DemoRoomApiClient(config);
+}
+var DemoRoom = ({
+  className,
+  layoutClassName = "w-safe11",
+  googleMapsApiKey,
+  apiConfig,
+  teamCode,
+  brandWebsite,
+  onSchedule,
+  ...props
+}) => {
+  const apiClient = React2.useMemo(
+    () => createDemoRoomApi(apiConfig),
+    [apiConfig]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Banner, { className: layoutClassName }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      BreadCrumbs,
+      {
+        className: layoutClassName,
+        items: [{ label: "Home", link: "/" }, { label: "Demo Room" }]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(HelpNav, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(UpcomingEvents, { className: layoutClassName }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RoomsList,
+      {
+        className: layoutClassName,
+        googleMapsApiKey,
+        apiClient,
+        teamCode,
+        brandWebsite,
+        onSchedule
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(EasySteps, { className: layoutClassName })
+  ] });
+};
+DemoRoom.displayName = "DemoRoom";
+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__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8 items-start", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 bg-gray-200 rounded animate-pulse" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-24 bg-gray-200 rounded animate-pulse" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 bg-gray-200 rounded animate-pulse" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[400px] bg-gray-200 rounded-2xl animate-pulse" })
+    ] }) });
+  }
+  if (error && apiClient && demoRoomCode) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center text-red-600 py-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: "Failed to load demo room details" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-2", children: error.message })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8 items-start", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[40px] font-bold text-gray-900 leading-tight", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: descriptions.map((desc, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: "text-base text-gray-600 leading-relaxed",
+          children: desc
+        },
+        index
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                "rect",
+                {
+                  x: "3",
+                  y: "3",
+                  width: "18",
+                  height: "18",
+                  rx: "2",
+                  stroke: "currentColor",
+                  strokeWidth: "2"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: "M8 10H16",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: "M8 14H16",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-900", children: devices })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  cx: "12",
+                  cy: "9",
+                  r: "2.5",
+                  stroke: "currentColor",
+                  strokeWidth: "2"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: address }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    width: "12",
+                    height: "12",
+                    viewBox: "0 0 12 12",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        d: "M3 9L9 3M9 3H3M9 3V9",
+                        stroke: "currentColor",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-[400px] rounded-2xl overflow-hidden", children: images.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      react.Swiper,
+      {
+        modules: [modules.Navigation, modules.Pagination, modules.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__ */ jsxRuntime.jsx(react.SwiperSlide, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-full bg-gray-100", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: img,
+            alt: `Demo room view ${index + 1}`,
+            className: "w-full h-full object-cover"
+          }
+        ) }) }, index))
+      }
+    ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 mx-auto mb-3 rounded-full bg-white flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          width: "32",
+          height: "32",
+          viewBox: "0 0 32 32",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: "4",
+                y: "8",
+                width: "24",
+                height: "16",
+                rx: "2",
+                stroke: "currentColor",
+                strokeWidth: "2"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "14", r: "2", fill: "currentColor" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M28 20L22 14L16 20",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.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] = React2.useState({});
+  const [errors, setErrors] = React2.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: question.options?.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            className: "flex items-center gap-3 cursor-pointer group",
+            children: [
+              /* @__PURE__ */ jsxRuntime.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"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-900 group-hover:text-[#3ADB67] transition-colors", children: option.label })
+            ]
+          },
+          option.value || option.label
+        )) });
+      case "checkbox":
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: question.options?.map((option) => {
+          const optionValue = option.value || option.label;
+          const isChecked = (responses[questionId] || []).includes(
+            optionValue
+          );
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "label",
+            {
+              className: "flex items-center gap-3 cursor-pointer group",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: isChecked,
+                    onChange: (e) => handleCheckboxChange(
+                      questionId,
+                      optionValue,
+                      e.target.checked
+                    ),
+                    className: "w-5 h-5 text-[#3ADB67] focus:ring-[#3ADB67] focus:ring-2 rounded"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-900 group-hover:text-[#3ADB67] transition-colors", children: option.label })
+              ]
+            },
+            optionValue
+          );
+        }) });
+      case "select":
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "select",
+          {
+            value: responses[questionId] || "",
+            onChange: (e) => handleChange(questionId, e.target.value),
+            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",
+              "bg-white cursor-pointer",
+              hasError ? "border-red-500" : "border-[#E4E5E6]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: question.placeholder || "Please select..." }),
+              question.options?.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+                "option",
+                {
+                  value: option.value || option.label,
+                  children: option.label
+                },
+                option.value || option.label
+              ))
+            ]
+          }
+        );
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: cn("space-y-6", className), children: [
+    questions.map((question) => {
+      const questionId = getQuestionId(question);
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-base font-medium text-gray-900", children: [
+            question.label,
+            question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", children: "*" })
+          ] }),
+          question.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-sm text-gray-600 mt-1", children: question.description })
+        ] }),
+        renderQuestion(question),
+        question.hint && !errors[questionId] && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: question.hint }),
+        errors[questionId] && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-500", children: errors[questionId] })
+      ] }, questionId);
+    }),
+    /* @__PURE__ */ jsxRuntime.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"
+      }
+    )
+  ] });
+};
+dayjs__default.default.extend(dayLocaleData__default.default);
+dayjs__default.default.extend(weekday__default.default);
+dayjs__default.default.extend(weekOfYear__default.default);
+var DateTimePicker = ({
+  apiClient,
+  demoRoomCode,
+  timezone,
+  locale,
+  onBookingSuccess
+}) => {
+  const { token } = antd.theme.useToken();
+  const [selectMonth, setSelectMonth] = React2.useState("");
+  const [selectedDate, setSelectedDate] = React2.useState(dayjs__default.default());
+  const [selectedTimeslotId, setSelectedTimeslotId] = React2.useState(null);
+  const [showQuestionnaire, setShowQuestionnaire] = React2.useState(false);
+  const { createBooking, loading: bookingLoading, error: bookingError } = useCreateBooking(apiClient);
+  const {
+    data: demoRoom
+  } = useDemoRoom(
+    apiClient,
+    demoRoomCode || "",
+    locale,
+    { enabled: !!demoRoomCode }
+  );
+  const {
+    data: questionnaire,
+    loading: questionnaireLoading
+  } = useQuestionnaire(
+    apiClient,
+    demoRoomCode || "",
+    demoRoom?.questionnaire_id,
+    locale,
+    { enabled: !!demoRoomCode && !!demoRoom?.questionnaire_id }
+  );
+  React2.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 {
+    data: timeslotsData,
+    loading: timeslotsLoading,
+    error: timeslotsError
+  } = useTimeslots(
+    apiClient,
+    demoRoomCode || "",
+    {
+      start_date: startDate,
+      end_date: endDate,
+      timezone
+    },
+    { enabled: !!demoRoomCode }
+  );
+  const dayTimeslots = React2.useMemo(() => {
+    if (!timeslotsData?.timeslots) return [];
+    const selectedDateStr = selectedDate.format("YYYY-MM-DD");
+    return timeslotsData.timeslots.filter((slot) => {
+      const slotDate = dayjs__default.default(slot.start_time).format("YYYY-MM-DD");
+      return slotDate === selectedDateStr;
+    });
+  }, [timeslotsData, selectedDate]);
+  const formatTimeslot = (slot) => {
+    const start = dayjs__default.default(slot.start_time).format("h:mm A");
+    const end = dayjs__default.default(slot.end_time).format("h:mm A");
+    return `${start} - ${end}`;
+  };
+  const onPanelChange = (value, mode) => {
+    console.log(value.format("YYYY-MM-DD"), mode);
+  };
+  const wrapperStyle = {
+    width: 824,
+    background: "#fff",
+    border: `1px solid ${token.colorBorderSecondary}`,
+    borderRadius: token.borderRadiusLG
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[48px] py-[64px] font-bold text-center", children: "Schedule Your Visit" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        antd.ConfigProvider,
+        {
+          theme: {
+            token: {
+              colorPrimary: "#3ADB67"
+            },
+            components: {
+              Calendar: {
+                fullBg: "#fff",
+                fullPanelBg: "#fff",
+                itemActiveBg: "#3ADB67"
+              }
+            }
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: wrapperStyle,
+              className: "calendar-custom-cell",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+              .calendar-custom-cell .ant-picker-cell {
+                padding: 6px !important;
+              }
+              .calendar-custom-cell .ant-picker-cell-inner {
+                width: 100px !important;
+                height: 100px !important;
+                display: flex !important;
+                align-items: center !important;
+                justify-content: center !important;
+                border-radius: 20px !important;
+                border: 1px solid #E4E5E6 !important;
+              }
+              .calendar-custom-cell .ant-picker-cell-selected .ant-picker-cell-inner {
+                background-color: #3ADB67 !important;
+                color: white !important;
+                border-color: #3ADB67 !important;
+              }
+              .calendar-custom-cell .ant-picker-cell-today .ant-picker-cell-inner {
+                border-color: #3ADB67 !important;
+                border-radius: 20px !important;
+              }
+              .calendar-custom-cell .ant-picker-cell-today .ant-picker-cell-inner::before {
+                display: none !important;
+              }
+              .calendar-custom-cell .ant-picker-calendar-date-value {
+                line-height: 100px !important;
+              }
+              .calendar-custom-cell .ant-picker-content {
+                width: 100% !important;
+              }
+              .calendar-custom-cell .ant-picker-content thead tr th {
+                line-height: 48px !important;
+              }
+            ` }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  antd.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            antd.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__ */ jsxRuntime.jsx(
+                            antd.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                                "svg",
+                                {
+                                  width: "20",
+                                  height: "20",
+                                  viewBox: "0 0 20 20",
+                                  fill: "none",
+                                  xmlns: "http://www.w3.org/2000/svg",
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                                    "path",
+                                    {
+                                      d: "M12 16L6 10L12 4",
+                                      stroke: "currentColor",
+                                      strokeWidth: "2",
+                                      strokeLinecap: "round",
+                                      strokeLinejoin: "round"
+                                    }
+                                  )
+                                }
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                                "svg",
+                                {
+                                  width: "20",
+                                  height: "20",
+                                  viewBox: "0 0 20 20",
+                                  fill: "none",
+                                  xmlns: "http://www.w3.org/2000/svg",
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                                    "path",
+                                    {
+                                      d: "M8 4L14 10L8 16",
+                                      stroke: "currentColor",
+                                      strokeWidth: "2",
+                                      strokeLinecap: "round",
+                                      strokeLinejoin: "round"
+                                    }
+                                  )
+                                }
+                              )
+                            }
+                          )
+                        ] })
+                      ] });
+                    },
+                    onPanelChange
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white p-[24px] rounded-[12px] flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+          "Time Slot",
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => {
+                  const newDate = selectedDate.subtract(1, "day");
+                  setSelectedDate(newDate);
+                },
+                className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "24",
+                    height: "24",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        d: "M14.2929 5.29289C14.6834 4.90237 15.3164 4.90237 15.707 5.29289C16.0975 5.68342 16.0975 6.31643 15.707 6.70696L10.414 11.9999L15.707 17.2929L15.7753 17.3691C16.0957 17.7618 16.0731 18.3408 15.707 18.707C15.3408 19.0731 14.7618 19.0957 14.3691 18.7753L14.2929 18.707L8.29289 12.707C7.90237 12.3164 7.90237 11.6834 8.29289 11.2929L14.2929 5.29289Z",
+                        fill: "#1D1D1F"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: selectMonth }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => {
+                  const newDate = selectedDate.add(1, "day");
+                  setSelectedDate(newDate);
+                },
+                className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "24",
+                    height: "24",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 mt-[40px] gap-4", children: timeslotsLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 text-center text-[#767880] py-8", children: "Loading time slots..." }) : timeslotsError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 text-center text-red-600 py-8", children: "Failed to load time slots" }) : dayTimeslots.length === 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { children: formatTimeslot(slot) }),
+                isFull && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-[#BDBDBD] mt-1", children: "Full" }),
+                isAvailable && !isSelected && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-[#767880] mt-1", children: [
+                  slot.capacity - slot.booked_count,
+                  " spots left"
+                ] }),
+                isAvailable && isSelected && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-white mt-1", children: [
+                  slot.capacity - slot.booked_count,
+                  " spots left"
+                ] })
+              ] })
+            },
+            slot.id
+          );
+        }) })
+      ] })
+    ] }),
+    showQuestionnaire && questionnaire && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-12", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[48px] font-bold text-center mb-8", children: "Fill out Form" }),
+      questionnaireLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-[#767880] py-8", children: "Loading questionnaire..." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white rounded-[12px] border border-[#E4E5E6] p-8", children: /* @__PURE__ */ jsxRuntime.jsx(
+        QuestionnaireForm,
+        {
+          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);
+              }
+            } catch (error) {
+              console.error("Booking creation failed:", error);
+            }
+          }
+        }
+      ) })
+    ] }),
+    bookingError && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "font-medium", children: "Booking failed" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-1", children: bookingError.message })
+    ] })
+  ] });
+};
+var DateTimePicker_default = DateTimePicker;
+var BookingForm = ({
+  layoutClassName,
+  className,
+  apiConfig,
+  demoRoomCode,
+  timezone,
+  handleBookingSuccess,
+  ...props
+}) => {
+  const apiClient = React2.useMemo(
+    () => createDemoRoomApi(apiConfig),
+    [apiConfig]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        BreadCrumbs,
+        {
+          className: layoutClassName,
+          items: [{ label: "Home", link: "/" }, { label: "Demo Room" }]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DemoRoomDetail,
+        {
+          className: cn("mt-8", layoutClassName),
+          apiClient,
+          demoRoomCode,
+          locale: apiConfig.locale
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[#f5f5f5]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
+      DateTimePicker_default,
+      {
+        apiClient,
+        demoRoomCode,
+        timezone,
+        locale: apiConfig.locale,
+        onBookingSuccess: handleBookingSuccess
+      }
+    ) }) })
+  ] });
+};
+BookingForm.displayName = "BookingForm";
+var BookingSuccess = ({
+  bookingData: initialBookingData,
+  token,
+  apiConfig,
+  onBackToHome,
+  className
+}) => {
+  const [bookingData, setBookingData] = React2.useState(initialBookingData || null);
+  const [loading, setLoading] = React2.useState(false);
+  const [error, setError] = React2.useState(null);
+  React2.useEffect(() => {
+    if (token && apiConfig && !initialBookingData) {
+      const fetchBookingData = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+          const apiClient = createDemoRoomApi(apiConfig);
+          const booking = await apiClient.getBooking(token);
+          setBookingData(booking);
+        } catch (err) {
+          console.error("Failed to fetch booking data:", err);
+          setError("Failed to load booking information");
+        } finally {
+          setLoading(false);
+        }
+      };
+      fetchBookingData();
+    }
+  }, [token, apiConfig, initialBookingData]);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `min-h-screen bg-[#F5F5F5] py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-2xl mx-auto text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin w-16 h-16 mx-auto mb-4 border-4 border-[#3ADB67] border-t-transparent rounded-full" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl text-gray-600", children: "Loading booking information..." })
+    ] }) });
+  }
+  if (error || !bookingData) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `min-h-screen bg-[#F5F5F5] py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-2xl mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-[12px] border border-red-200 p-8 text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 mx-auto mb-4 rounded-full bg-red-100 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          width: "32",
+          height: "32",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: "M12 8V12M12 16H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z",
+              stroke: "#EF4444",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-2", children: error || "Booking Not Found" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-600 mb-6", children: "We couldn't find your booking information. Please check your booking confirmation email or contact support." }),
+      onBackToHome && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: onBackToHome,
+          className: "px-6 py-3 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",
+          children: "Back to Home"
+        }
+      )
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `min-h-screen bg-[#F5F5F5] py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-2xl mx-auto", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 mx-auto mb-6 rounded-full bg-[#3ADB67] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          width: "48",
+          height: "48",
+          viewBox: "0 0 32 32",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: "M26.6667 8L12 22.6667L5.33334 16",
+              stroke: "white",
+              strokeWidth: "3",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[48px] font-bold text-gray-900 mb-4", children: "Booking Confirmed!" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl text-gray-600", children: "Your demo room booking has been successfully confirmed." })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-[12px] border border-[#E4E5E6] p-8 mb-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-6", children: "Booking Details" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-start py-3 border-b border-gray-100", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-600 font-medium", children: "Booking ID" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-900 font-semibold", children: bookingData.booking_id })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-start py-3 border-b border-gray-100", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-600 font-medium", children: "Date" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-900 font-semibold", children: bookingData.booking_date })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-start py-3 border-b border-gray-100", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-600 font-medium", children: "Time" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-900 font-semibold", children: bookingData.booking_time })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-start py-3 border-b border-gray-100", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-600 font-medium", children: "Status" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-[#3ADB67] bg-opacity-10 text-[#3ADB67]", children: bookingData.status })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-start py-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-600 font-medium", children: "Email" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-900 font-semibold", children: bookingData.customer_email })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-blue-50 border border-blue-200 rounded-[12px] p-6 mb-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          className: "w-6 h-6 text-blue-600 flex-shrink-0 mt-0.5",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-blue-900 mb-1", children: "Confirmation Email Sent" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-blue-800", children: [
+          "A confirmation email has been sent to ",
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: bookingData.customer_email }),
+          " with all the booking details and instructions."
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row gap-4", children: [
+      onBackToHome && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: onBackToHome,
+          className: "flex-1 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",
+          children: "Back to Home"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => window.print(),
+          className: "flex-1 px-6 py-4 rounded-full border-2 border-[#3ADB67] text-[#3ADB67] font-medium text-base hover:bg-[#3ADB67] hover:bg-opacity-5 transition-colors focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:ring-offset-2",
+          children: "Print Confirmation"
+        }
+      )
+    ] })
+  ] }) });
+};
+
+// src/theme-tokens/tokens.ts
+var defaultTheme = {
+  colors: {
+    primary: {
+      50: "#eff6ff",
+      100: "#dbeafe",
+      200: "#bfdbfe",
+      300: "#93c5fd",
+      400: "#60a5fa",
+      500: "#3b82f6",
+      600: "#2563eb",
+      700: "#1d4ed8",
+      800: "#1e40af",
+      900: "#1e3a8a",
+      950: "#172554"
+    },
+    secondary: {
+      50: "#f8fafc",
+      100: "#f1f5f9",
+      200: "#e2e8f0",
+      300: "#cbd5e1",
+      400: "#94a3b8",
+      500: "#64748b",
+      600: "#475569",
+      700: "#334155",
+      800: "#1e293b",
+      900: "#0f172a",
+      950: "#020617"
+    },
+    success: {
+      50: "#f0fdf4",
+      500: "#22c55e",
+      900: "#14532d"
+    },
+    warning: {
+      50: "#fffbeb",
+      500: "#f59e0b",
+      900: "#78350f"
+    },
+    error: {
+      50: "#fef2f2",
+      500: "#ef4444",
+      900: "#7f1d1d"
+    }
+  },
+  fontFamily: {
+    sans: ["Inter", "system-ui", "sans-serif"],
+    mono: ["Fira Code", "monospace"]
+  },
+  fontSize: {
+    xs: ["0.75rem", { lineHeight: "1rem" }],
+    sm: ["0.875rem", { lineHeight: "1.25rem" }],
+    base: ["1rem", { lineHeight: "1.5rem" }],
+    lg: ["1.125rem", { lineHeight: "1.75rem" }],
+    xl: ["1.25rem", { lineHeight: "1.75rem" }],
+    "2xl": ["1.5rem", { lineHeight: "2rem" }],
+    "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
+    "4xl": ["2.25rem", { lineHeight: "2.5rem" }]
+  },
+  spacing: {
+    0: "0",
+    1: "0.25rem",
+    2: "0.5rem",
+    3: "0.75rem",
+    4: "1rem",
+    5: "1.25rem",
+    6: "1.5rem",
+    8: "2rem",
+    10: "2.5rem",
+    12: "3rem",
+    16: "4rem",
+    20: "5rem",
+    24: "6rem"
+  },
+  borderRadius: {
+    none: "0",
+    sm: "0.125rem",
+    base: "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    "2xl": "1rem",
+    full: "9999px"
+  },
+  boxShadow: {
+    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+    md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
+  }
+};
+var ThemeContext = React2.createContext({ theme: defaultTheme });
+var useTheme = () => React2.useContext(ThemeContext);
+function deepMerge(target, source) {
+  const result = { ...target };
+  for (const key in source) {
+    if (source[key] instanceof Object && !Array.isArray(source[key]) && key in target) {
+      result[key] = deepMerge(target[key], source[key]);
+    } else if (source[key] !== void 0) {
+      result[key] = source[key];
+    }
+  }
+  return result;
+}
+var ThemeProvider = ({
+  theme: customTheme = {},
+  children
+}) => {
+  const theme2 = React2.useMemo(
+    () => deepMerge(defaultTheme, customTheme),
+    [customTheme]
+  );
+  React2.useEffect(() => {
+    const root = document.documentElement;
+    Object.entries(theme2.colors).forEach(([colorName, colorValues]) => {
+      if (typeof colorValues === "object") {
+        Object.entries(colorValues).forEach(([shade, value]) => {
+          root.style.setProperty(`--color-${colorName}-${shade}`, value);
+        });
+      } else {
+        root.style.setProperty(`--color-${colorName}`, colorValues);
+      }
+    });
+    Object.entries(theme2.fontFamily).forEach(([name, value]) => {
+      const fontValue = Array.isArray(value) ? value.join(", ") : String(value);
+      root.style.setProperty(`--font-${name}`, fontValue);
+    });
+    Object.entries(theme2.spacing).forEach(([key, value]) => {
+      root.style.setProperty(`--spacing-${key}`, value);
+    });
+    Object.entries(theme2.borderRadius).forEach(([key, value]) => {
+      root.style.setProperty(`--radius-${key}`, value);
+    });
+  }, [theme2]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme: theme2 }, children });
+};
+
+exports.BookingForm = BookingForm;
+exports.BookingSuccess = BookingSuccess;
+exports.DemoRoom = DemoRoom;
+exports.DemoRoomApiClient = DemoRoomApiClient;
+exports.DemoRoomDetail = DemoRoomDetail;
+exports.ThemeProvider = ThemeProvider;
+exports.cn = cn;
+exports.createDemoRoomApi = createDemoRoomApi;
+exports.useCreateBooking = useCreateBooking;
+exports.useDemoRoom = useDemoRoom;
+exports.useDemoRooms = useDemoRooms;
+exports.useQuestionnaire = useQuestionnaire;
+exports.useTheme = useTheme;
+exports.useTimeslots = useTimeslots;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map