@anker-in/ui 0.1.3 → 0.1.5

package/dist/demo-room.js

@@ -4,7 +4,6 @@ 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');
@@ -19,158 +18,6 @@ var List__default = /*#__PURE__*/_interopDefault(List);
 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
@@ -178,275 +25,6 @@ var Title = ({
   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,
@@ -457,25 +35,48 @@ var StudioCard = ({
   zipCode,
   country = "United States",
   euifyMakeModel,
+  distance,
   onSchedule,
   className,
+  style,
   ...props
 }) => {
   const fullAddress = `${address}, ${city}, ${state} ${country} ${zipCode}`;
+  const [isHovered, setIsHovered] = React2__default.default.useState(false);
   const handleScheduleClick = () => {
     onSchedule?.(code);
   };
+  const formatDistance = (dist) => {
+    if (dist < 1) {
+      return `${Math.round(dist * 1e3)} m`;
+    }
+    return `${dist.toFixed(1)} km`;
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn(
-        "p-6",
-        "hover:shadow-lg transition-shadow duration-200",
-        className
-      ),
       ...props,
+      className: cn("p-6 cursor-pointer transition-colors duration-200", className),
+      style: {
+        backgroundColor: isHovered ? "#f3f4f6" : "transparent",
+        ...style
+      },
+      onMouseEnter: (e) => {
+        setIsHovered(true);
+        props.onMouseEnter?.(e);
+      },
+      onMouseLeave: (e) => {
+        setIsHovered(false);
+        props.onMouseLeave?.(e);
+      },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold text-gray-900 mb-4", children: name }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between mb-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold text-gray-900", children: name }),
+          distance !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-[#2E8B57] bg-[#E8F5E9] px-3 py-1 rounded-full whitespace-nowrap ml-2", children: [
+            formatDistance(distance),
+            " away"
+          ] })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             "svg",
@@ -621,7 +222,7 @@ var StudioCard = ({
               "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",
+              "hover:bg-gray-900",
               "transition-all duration-200"
             ),
             children: "Schedule Now"
@@ -650,6 +251,7 @@ var defaultLocations = [
 var StudioMap = ({
   googleMapsApiKey,
   locations = defaultLocations,
+  hoveredLocationId,
   defaultCenter = { lat: 39.8283, lng: -98.5795 },
   // US center
   defaultZoom = 4,
@@ -798,7 +400,7 @@ var StudioMap = ({
               if (btn) {
                 btn.addEventListener("click", () => {
                   if (onSchedule) {
-                    onSchedule(location);
+                    onSchedule(location.id);
                   }
                 });
               }
@@ -819,6 +421,82 @@ var StudioMap = ({
       googleMapRef.current.fitBounds(bounds);
     }
   }, [isLoaded, locations, onSchedule]);
+  React2__default.default.useEffect(() => {
+    if (!isLoaded || !googleMapRef.current || !hoveredLocationId) {
+      if (!hoveredLocationId && infoWindowRef.current) {
+        infoWindowRef.current.close();
+      }
+      return;
+    }
+    const location = locations.find((loc) => loc.id === hoveredLocationId);
+    const markerIndex = locations.findIndex(
+      (loc) => loc.id === hoveredLocationId
+    );
+    const marker = markersRef.current[markerIndex];
+    if (location && marker) {
+      const content = `
+        <div style="padding: 16px; max-width: 300px; font-family: system-ui, sans-serif;">
+          <h3 style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600;">${location.name}</h3>
+          ${location.availableTime ? `<div style="margin-bottom: 8px; color: #666;">
+                  <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"/>
+                  </svg>
+                  <span style="vertical-align: middle;">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-hover-${location.id}"
+            style="
+              width: 100%;
+              padding: 10px 16px;
+              background: #000;
+              color: #fff;
+              border: none;
+              border-radius: 6px;
+              font-weight: 500;
+              cursor: pointer;
+              font-size: 14px;
+            "
+            onmouseover="this.style.background='#333'"
+            onmouseout="this.style.background='#000'"
+          >
+            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-hover-${location.id}`
+            );
+            if (btn) {
+              btn.addEventListener("click", () => {
+                if (onSchedule) {
+                  onSchedule(location.id);
+                }
+              });
+            }
+          }
+        );
+      }
+    }
+  }, [hoveredLocationId, isLoaded, locations, onSchedule]);
   if (!googleMapsApiKey) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -938,20 +616,58 @@ var AntdMobileIsolated = ({
 AntdMobileIsolated.displayName = "AntdMobileIsolated";
 
 // src/components/DemoRoom/utils/addressParser.ts
+var KNOWN_COUNTRIES = [
+  "United States",
+  "United Kingdom",
+  "American Samoa",
+  "United Arab Emirates",
+  "Bosnia and Herzegovina",
+  "Trinidad and Tobago",
+  "Saint Kitts and Nevis",
+  "Antigua and Barbuda",
+  "Saint Vincent and the Grenadines",
+  "S\xE3o Tom\xE9 and Pr\xEDncipe",
+  "United States Minor Outlying Islands",
+  "British Virgin Islands",
+  "United States Virgin Islands",
+  "Cayman Islands",
+  "Cook Islands",
+  "Falkland Islands",
+  "Faroe Islands",
+  "Marshall Islands",
+  "Northern Mariana Islands",
+  "Pitcairn Islands",
+  "Solomon Islands",
+  "Turks and Caicos Islands",
+  "Wallis and Futuna"
+];
 function parseAddress(address) {
-  const parts = address.split(",").map((part) => part.trim());
+  const parts = address.split(",").map((part) => part.trim()).filter(Boolean);
   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] || "";
+  if (parts.length === 0) {
+    return { country, state, city };
+  }
+  const lastPart = parts[parts.length - 1];
+  const matchedCountry = KNOWN_COUNTRIES.find(
+    (knownCountry) => lastPart.toLowerCase() === knownCountry.toLowerCase()
+  );
+  if (matchedCountry) {
+    country = matchedCountry;
+    if (parts.length >= 2) {
+      state = parts[parts.length - 2].split(" ")[0];
+    }
+    if (parts.length >= 3) {
+      city = parts[parts.length - 3];
+    }
+  } else {
+    if (parts.length >= 2) {
+      state = parts[parts.length - 1].split(" ")[0];
+      city = parts[parts.length - 2];
+    } else if (parts.length === 1) {
+      city = parts[0];
+    }
   }
   return {
     country: country.trim(),
@@ -1039,9 +755,7 @@ var LocationFilter = ({
         items = locationData.countries;
         break;
       case "state":
-        items = selectedCountry ? locationData.states.filter(
-          (s) => s.parentCode === selectedCountry
-        ) : [];
+        items = selectedCountry ? locationData.states.filter((s) => s.parentCode === selectedCountry) : [];
         break;
       case "city":
         items = selectedState ? locationData.cities.filter((c) => c.parentCode === selectedState) : [];
@@ -1058,6 +772,7 @@ var LocationFilter = ({
     () => groupByAlphabet(filteredItems),
     [filteredItems]
   );
+  const showIndexBar = filteredItems.length >= 10;
   const handleItemClick = (item) => {
     if (currentLevel === "country") {
       setSelectedCountry(item.code);
@@ -1082,61 +797,49 @@ var LocationFilter = ({
       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"
-                          }
-                        )
-                      }
-                    )
-                  }
-                )
-              ] }),
+      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.jsx("div", { className: "flex items-center justify-end px-[20px] pt-[12px] pb-[8px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: onClose,
+                  className: "ml-[12px] w-[24px] h-[24px] flex items-center justify-end",
+                  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",
@@ -1179,38 +882,26 @@ var LocationFilter = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(AntdMobileIsolated, { style: { height: "calc(100% - 72px)" }, children: /* @__PURE__ */ jsxRuntime.jsx(IndexBar__default.default, { style: { height: "100%" }, children: groupedItems.map((group) => {
+        /* @__PURE__ */ jsxRuntime.jsx(AntdMobileIsolated, { style: { height: "calc(100% - 72px)" }, children: showIndexBar ? /* @__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"
-                      }
-                    )
-                  }
-                )
-              ] }),
+              style: { cursor: "pointer" },
               children: item.name
             },
             item.code
           )) }) }, title);
-        }) }) })
+        }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "100%", overflow: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(List__default.default, { children: filteredItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          List__default.default.Item,
+          {
+            onClick: () => handleItemClick(item),
+            style: { cursor: "pointer" },
+            children: item.name
+          },
+          item.code
+        )) }) }) })
       ]
     }
   );
@@ -1333,6 +1024,7 @@ var RoomsList = ({
 }) => {
   const [showLocationFilter, setShowLocationFilter] = React2.useState(false);
   const [selectedLocation, setSelectedLocation] = React2.useState();
+  const [hoveredRoomId, setHoveredRoomId] = React2.useState(null);
   const {
     data: demoRooms,
     loading,
@@ -1345,25 +1037,9 @@ var RoomsList = ({
   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 nextAvailableTimeslot = room?.timeslots?.find(
+        (slot) => slot.status === "available"
+      );
       const { country, state, city } = parseAddress(room.address);
       return {
         id: room.code,
@@ -1414,18 +1090,18 @@ var RoomsList = ({
   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: [
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[794px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", style: { color: "#FF4D4D" }, 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: [
+    !loading && !error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[794px] 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.jsx("div", { className: "rounded-[12px] mb-4 bg-white border border-[#E4E5E6] px-[20px] py-[16px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-[40px] font-bold text-[16px] gap-10 flex items-center", children: [
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
@@ -1481,7 +1157,7 @@ var RoomsList = ({
                   }
                 )
               ] })
-            ] }),
+            ] }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -1499,7 +1175,9 @@ var RoomsList = ({
                       state: item?.state,
                       zipCode: item?.zipCode,
                       euifyMakeModel: item?.euifyMakeModel || "",
-                      onSchedule
+                      onSchedule,
+                      onMouseEnter: () => setHoveredRoomId(item.id),
+                      onMouseLeave: () => setHoveredRoomId(null)
                     },
                     item.id
                   );
@@ -1526,9 +1204,8 @@ var RoomsList = ({
         {
           googleMapsApiKey,
           locations: filteredStudioLocations,
-          onSchedule: () => {
-            console.log(111);
-          },
+          hoveredLocationId: hoveredRoomId,
+          onSchedule,
           mapHeight: "794px"
         }
       ) })
@@ -1665,11 +1342,39 @@ var DemoRoomApiClient = class {
     });
   }
   /**
-   * 根据 token 获取预约信息
-   * @param token 预约 token
+   * 根据 token 获取预约详情（支持多语言）
+   * @param token 预约凭证 (cancel_token)
+   * @param locale 语言偏好（可选，也可以通过 Accept-Language Header）
+   */
+  async getBooking(token, locale) {
+    const headers = {};
+    if (locale) {
+      headers["Accept-Language"] = locale;
+    }
+    const response = await this.request(
+      `/api/v1/store/bookings/${token}`,
+      { headers }
+    );
+    return response.booking;
+  }
+  /**
+   * 取消预约（支持多语言邮件通知）
+   * @param token 预约凭证 (cancel_token)
+   * @param locale 语言偏好（可选，用于邮件通知）
    */
-  async getBooking(token) {
-    return this.request(`/api/v1/store/bookings/${token}`);
+  async cancelBooking(token, locale) {
+    const headers = {};
+    if (locale) {
+      headers["Accept-Language"] = locale;
+    }
+    const response = await this.request(
+      `/api/v1/store/bookings/${token}/cancel`,
+      {
+        method: "POST",
+        headers
+      }
+    );
+    return response.booking;
   }
 };
 function createDemoRoomApi(config) {
@@ -1677,7 +1382,7 @@ function createDemoRoomApi(config) {
 }
 var DemoRoom = ({
   className,
-  layoutClassName = "w-safe11",
+  layoutClassName,
   googleMapsApiKey,
   apiConfig,
   teamCode,
@@ -1689,37 +1394,222 @@ var DemoRoom = ({
     () => createDemoRoomApi(apiConfig),
     [apiConfig]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Banner, { className: layoutClassName }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      BreadCrumbs,
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    RoomsList,
+    {
+      className: layoutClassName,
+      googleMapsApiKey,
+      apiClient,
+      teamCode,
+      brandWebsite,
+      onSchedule
+    }
+  ) });
+};
+DemoRoom.displayName = "DemoRoom";
+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 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"
+      },
       {
-        className: layoutClassName,
-        items: [{ label: "Home", link: "/" }, { label: "Demo Room" }]
+        label: "Shop Now",
+        variant: "primary"
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(HelpNav, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(UpcomingEvents, { className: layoutClassName }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      RoomsList,
+    ],
+    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",
       {
-        className: layoutClassName,
-        googleMapsApiKey,
-        apiClient,
-        teamCode,
-        brandWebsite,
-        onSchedule
+        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"
+                }
+              )
+            }
+          )
+        ]
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(EasySteps, { className: layoutClassName })
+    ) })
   ] });
 };
-DemoRoom.displayName = "DemoRoom";
+UpcomingEvents.displayName = "UpcomingEvents";
 
 exports.DemoRoom = DemoRoom;
-exports.EasySteps = EasySteps;
 exports.EventCard = EventCard;
-exports.HelpNav = HelpNav;
 exports.StudioCard = StudioCard;
 exports.StudioMap = StudioMap;
 exports.UpcomingEvents = UpcomingEvents;