@neowhale/storefront 0.2.46 → 0.2.47

package/dist/react/index.js

@@ -3083,149 +3083,178 @@ function CountdownSection({ section, theme }) {
     ] }, u.label)) })
   ] });
 }
+var PIN_SVG = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>';
+var BAG_SVG = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>';
+var STAR_PATH = "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z";
+function LocationStars({ rating, count, accent }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.375rem" }, children: [
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "2px" }, children: [1, 2, 3, 4, 5].map((s) => /* @__PURE__ */ jsx(
+      "svg",
+      {
+        width: 12,
+        height: 12,
+        viewBox: "0 0 20 20",
+        fill: s <= Math.round(rating) ? accent : "rgba(255,255,255,0.1)",
+        children: /* @__PURE__ */ jsx("path", { d: STAR_PATH })
+      },
+      s
+    )) }),
+    /* @__PURE__ */ jsxs("span", { style: { color: "rgba(255,255,255,0.5)", fontSize: "0.75rem", fontWeight: 500 }, children: [
+      rating.toFixed(1),
+      " \xB7 ",
+      count,
+      " reviews"
+    ] })
+  ] });
+}
 function LocationCardSection({ section, theme, onEvent }) {
   const c = section.content;
   const locations = c.locations || [];
   if (locations.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 900, margin: "0 auto" }, children: /* @__PURE__ */ jsx("div", { style: {
+  const brandFont = c.brand_font || "inherit";
+  return /* @__PURE__ */ jsx("div", { style: { padding: "0.75rem 1rem", maxWidth: 900, margin: "0 auto" }, children: /* @__PURE__ */ jsx("div", { style: {
     display: "grid",
-    gridTemplateColumns: locations.length === 1 ? "minmax(0, 420px)" : `repeat(${Math.min(locations.length, 2)}, 1fr)`,
-    gap: "2px",
+    gridTemplateColumns: locations.length === 1 ? "minmax(0, 420px)" : `repeat(${Math.min(locations.length, 4)}, 1fr)`,
+    gap: "clamp(0.75rem, 2vw, 1rem)",
     justifyContent: "center"
-  }, children: locations.map((loc, i) => /* @__PURE__ */ jsxs("div", { style: {
-    background: theme.surface,
-    overflow: "hidden",
-    display: "flex",
-    flexDirection: "column"
-  }, children: [
-    /* @__PURE__ */ jsxs("div", { style: { position: "relative", aspectRatio: "4/5", overflow: "hidden" }, children: [
-      /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: loc.image,
-          alt: loc.name,
-          style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { style: {
-        position: "absolute",
-        inset: 0,
-        background: "linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%)"
-      } }),
-      /* @__PURE__ */ jsxs("div", { style: { position: "absolute", bottom: 0, left: 0, padding: "clamp(0.75rem, 3vw, 1.25rem)" }, children: [
-        /* @__PURE__ */ jsx("p", { style: {
-          fontSize: "clamp(1.25rem, 5vw, 1.75rem)",
-          fontWeight: 300,
-          fontFamily: theme.fontDisplay || "inherit",
-          color: "#fff",
-          margin: 0,
-          lineHeight: 1.1
-        }, children: loc.name }),
-        /* @__PURE__ */ jsxs("p", { style: {
-          fontSize: "0.65rem",
-          letterSpacing: "0.2em",
-          color: "rgba(255,255,255,0.6)",
-          margin: "0.25rem 0 0",
-          fontWeight: 600
-        }, children: [
-          loc.city,
-          ", ",
-          loc.state
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: {
-      padding: "clamp(0.75rem, 3vw, 1.25rem)",
+  }, children: locations.map((loc, i) => {
+    const dirUrl = loc.directions_url || `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(loc.address + ", " + loc.city + ", " + loc.state)}`;
+    return /* @__PURE__ */ jsxs("div", { style: {
+      background: "#0C0C0C",
+      border: "1px solid rgba(255,255,255,0.06)",
+      overflow: "hidden",
       display: "flex",
-      flexDirection: "column",
-      gap: "0.5rem",
-      flex: 1
+      flexDirection: "column"
     }, children: [
-      loc.tagline && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.8rem", color: `${theme.fg}80`, fontWeight: 500, fontStyle: "italic", margin: 0 }, children: loc.tagline }),
-      loc.rating != null && loc.review_count != null && loc.review_count > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.375rem" }, children: [
-        /* @__PURE__ */ jsx(Stars, { rating: loc.rating, color: theme.accent, size: 13 }),
-        /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.75rem", color: `${theme.fg}99` }, children: [
-          loc.rating.toFixed(1),
-          " (",
-          loc.review_count,
-          ")"
-        ] })
-      ] }),
-      loc.address && /* @__PURE__ */ jsxs(
-        "a",
-        {
-          href: loc.directions_url || `https://maps.google.com/?q=${encodeURIComponent(loc.address + ", " + loc.city + ", " + loc.state)}`,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          style: { fontSize: "0.75rem", color: `${theme.fg}55`, fontWeight: 500, textDecoration: "none", lineHeight: 1.5 },
-          children: [
-            loc.address,
-            ", ",
+      /* @__PURE__ */ jsxs("div", { style: { position: "relative", aspectRatio: "4/5", overflow: "hidden" }, children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: loc.image,
+            alt: loc.name,
+            style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: {
+          position: "absolute",
+          inset: 0,
+          background: "linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%)"
+        } }),
+        /* @__PURE__ */ jsxs("div", { style: { position: "absolute", bottom: 0, left: 0, padding: "clamp(1rem, 3vw, 1.25rem)" }, children: [
+          /* @__PURE__ */ jsx("p", { style: {
+            fontFamily: brandFont,
+            fontSize: "clamp(1.5rem, 6vw, 1.875rem)",
+            color: "#fff",
+            margin: 0,
+            lineHeight: 1
+          }, children: loc.name }),
+          /* @__PURE__ */ jsxs("p", { style: {
+            fontSize: "clamp(0.65rem, 1.5vw, 0.75rem)",
+            letterSpacing: "0.2em",
+            color: "rgba(255,255,255,0.6)",
+            margin: "0.375rem 0 0",
+            fontWeight: 600,
+            textTransform: "uppercase"
+          }, children: [
             loc.city,
             ", ",
             loc.state
-          ]
-        }
-      ),
-      loc.phone && /* @__PURE__ */ jsx(
-        "a",
-        {
-          href: loc.phone_href || `tel:${loc.phone}`,
-          style: { fontSize: "0.75rem", color: `${theme.fg}55`, fontWeight: 500, textDecoration: "none" },
-          children: loc.phone
-        }
-      ),
-      loc.hours && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.7rem", color: `${theme.fg}40`, margin: 0 }, children: loc.hours }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem", marginTop: "auto", paddingTop: "0.25rem" }, children: [
-        /* @__PURE__ */ jsx(
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: {
+        padding: "clamp(0.875rem, 3vw, 1.25rem)",
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.625rem",
+        flex: 1
+      }, children: [
+        loc.tagline && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.8125rem", color: "rgba(255,255,255,0.5)", fontWeight: 500, fontStyle: "italic", margin: 0 }, children: loc.tagline }),
+        loc.rating != null && loc.review_count != null && loc.review_count > 0 && /* @__PURE__ */ jsx(LocationStars, { rating: loc.rating, count: loc.review_count, accent: theme.accent }),
+        loc.address && /* @__PURE__ */ jsxs(
           "a",
           {
-            href: loc.directions_url || `https://maps.google.com/?q=${encodeURIComponent(loc.address + ", " + loc.city + ", " + loc.state)}`,
+            href: dirUrl,
             target: "_blank",
             rel: "noopener noreferrer",
-            onClick: () => onEvent?.("cta_click", { label: "directions", location: loc.name }),
-            style: {
-              flex: 1,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              padding: "0.625rem",
-              background: theme.fg,
-              color: theme.bg,
-              fontSize: "0.7rem",
-              fontWeight: 700,
-              letterSpacing: "0.1em",
-              textDecoration: "none",
-              textAlign: "center"
-            },
-            children: "directions"
+            style: { fontSize: "0.75rem", color: "rgba(255,255,255,0.35)", fontWeight: 500, textDecoration: "none", lineHeight: 1.6 },
+            children: [
+              loc.address,
+              ", ",
+              loc.city,
+              ", ",
+              loc.state
+            ]
           }
         ),
-        loc.shop_url && /* @__PURE__ */ jsx(
+        loc.phone && /* @__PURE__ */ jsx(
           "a",
           {
-            href: loc.shop_url,
-            onClick: () => onEvent?.("cta_click", { label: "shop", location: loc.name }),
-            style: {
-              flex: 1,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              padding: "0.625rem",
-              border: `1px solid ${theme.fg}20`,
-              color: `${theme.fg}CC`,
-              fontSize: "0.7rem",
-              fontWeight: 700,
-              letterSpacing: "0.1em",
-              textDecoration: "none",
-              textAlign: "center"
-            },
-            children: "shop"
+            href: loc.phone_href || `tel:${loc.phone}`,
+            style: { fontSize: "0.75rem", color: "rgba(255,255,255,0.35)", fontWeight: 500, textDecoration: "none" },
+            children: loc.phone
           }
-        )
+        ),
+        loc.hours && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.75rem", color: "rgba(255,255,255,0.35)", fontWeight: 500, margin: 0 }, children: loc.hours }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem", marginTop: "auto", paddingTop: "0.25rem" }, children: [
+          /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: dirUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              onClick: () => onEvent?.("cta_click", { label: "directions", location: loc.name }),
+              style: {
+                flex: 1,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "0.375rem",
+                padding: "0.625rem",
+                background: "#fff",
+                color: "#000",
+                fontSize: "clamp(0.65rem, 1.5vw, 0.75rem)",
+                fontWeight: 700,
+                letterSpacing: "0.1em",
+                textTransform: "uppercase",
+                textDecoration: "none"
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: PIN_SVG } }),
+                "Directions"
+              ]
+            }
+          ),
+          loc.shop_url && /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: loc.shop_url,
+              onClick: () => onEvent?.("cta_click", { label: "shop", location: loc.name }),
+              style: {
+                flex: 1,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "0.375rem",
+                padding: "0.625rem",
+                border: "1px solid rgba(255,255,255,0.15)",
+                color: "rgba(255,255,255,0.8)",
+                fontSize: "clamp(0.65rem, 1.5vw, 0.75rem)",
+                fontWeight: 700,
+                letterSpacing: "0.1em",
+                textTransform: "uppercase",
+                textDecoration: "none"
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: BAG_SVG } }),
+                "Shop"
+              ]
+            }
+          )
+        ] })
       ] })
-    ] })
-  ] }, i)) }) });
+    ] }, i);
+  }) }) });
 }
 function SectionRenderer({
   section,