@neowhale/storefront 0.2.53 → 0.2.55

package/dist/react/index.cjs

@@ -2208,8 +2208,57 @@ function AnimatedText({ text }) {
     (part, i) => NUM_TEST.test(part) ? /* @__PURE__ */ jsxRuntime.jsx(AnimatedNumber, { raw: part }, i) : part
   ) });
 }
-function HeroSection({ section, theme, tracking, onEvent }) {
-  const { title, subtitle, background_image, cta_text, cta_url, review_line } = section.content;
+var GOOGLE_G = '<svg width="18" height="18" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59a14.5 14.5 0 010-9.18l-7.98-6.19a24.03 24.03 0 000 21.56l7.98-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/></svg>';
+function HeroSection({ section, theme, tracking, onEvent, data }) {
+  const c = section.content;
+  const [formOpen, setFormOpen] = react.useState(false);
+  const [firstName, setFirstName] = react.useState("");
+  const [email, setEmail] = react.useState("");
+  const [status, setStatus] = react.useState("idle");
+  const [errorMsg, setErrorMsg] = react.useState("");
+  const gatewayUrl = data?.gatewayUrl || "https://whale-gateway.fly.dev";
+  const storeId = data?.store?.id;
+  const slug = data?.landing_page?.slug;
+  async function handleSubmit(e) {
+    e.preventDefault();
+    if (!email || !storeId) return;
+    setStatus("loading");
+    setErrorMsg("");
+    const urlParams = typeof window !== "undefined" ? new URLSearchParams(window.location.search) : null;
+    try {
+      const res = await fetch(`${gatewayUrl}/v1/stores/${storeId}/storefront/leads`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          email,
+          first_name: firstName || void 0,
+          source: c.inline_form?.source || "landing_page",
+          landing_page_slug: slug || void 0,
+          tags: c.inline_form?.tags || void 0,
+          segment_id: c.inline_form?.segment_id || void 0,
+          campaign_id: c.inline_form?.campaign_id || void 0,
+          preferred_location_id: c.inline_form?.preferred_location_id || void 0,
+          template_slug: c.inline_form?.template_slug || void 0,
+          acquisition_campaign: c.inline_form?.acquisition_campaign || void 0,
+          visitor_id: data?.analyticsContext?.visitorId || void 0,
+          session_id: data?.analyticsContext?.sessionId || void 0,
+          utm_source: urlParams?.get("utm_source") || void 0,
+          utm_medium: urlParams?.get("utm_medium") || void 0,
+          utm_campaign: urlParams?.get("utm_campaign") || void 0
+        })
+      });
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        throw new Error(body?.error?.message || "something went wrong.");
+      }
+      setStatus("success");
+      onEvent?.("lead", { email, first_name: firstName || void 0, source: c.inline_form?.source || "landing_page" });
+    } catch (err) {
+      setErrorMsg(err instanceof Error ? err.message : "something went wrong.");
+      setStatus("error");
+    }
+  }
+  const hasInlineForm = !!c.inline_form;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
     position: "relative",
     minHeight: "60vh",
@@ -2219,36 +2268,56 @@ function HeroSection({ section, theme, tracking, onEvent }) {
     alignItems: "center",
     textAlign: "center",
     padding: "3rem 1.5rem",
-    backgroundImage: background_image ? `url(${background_image})` : void 0,
+    backgroundImage: c.background_image ? `url(${c.background_image})` : void 0,
     backgroundSize: "cover",
     backgroundPosition: "center"
   }, children: [
-    background_image && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", inset: 0, background: "rgba(0,0,0,0.5)" } }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", zIndex: 1, maxWidth: 640 }, children: [
-      title && /* @__PURE__ */ jsxRuntime.jsx("h1", { style: {
-        fontSize: "clamp(2rem, 8vw, 3rem)",
+    c.background_image && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", inset: 0, background: "rgba(0,0,0,0.5)" } }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", zIndex: 1, maxWidth: 640, width: "100%" }, children: [
+      c.title && /* @__PURE__ */ jsxRuntime.jsx("h1", { style: {
+        fontSize: "clamp(2rem, 7vw, 3.25rem)",
         fontWeight: 300,
         fontFamily: theme.fontDisplay || "inherit",
-        margin: "0 0 1rem",
-        lineHeight: 1.15,
-        letterSpacing: "-0.02em",
+        margin: "0 0 1.25rem",
+        lineHeight: 1.08,
+        letterSpacing: "-0.03em",
         color: theme.fg
-      }, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedText, { text: title }) }),
-      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
-        fontSize: "0.85rem",
+      }, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedText, { text: c.title }) }),
+      c.subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
+        fontSize: "clamp(0.9rem, 2.5vw, 1.1rem)",
         color: theme.accent,
         margin: "0 0 2rem",
         lineHeight: 1.6,
         textTransform: "uppercase",
-        letterSpacing: "0.15em"
-      }, children: subtitle }),
-      cta_text && cta_url && /* @__PURE__ */ jsxRuntime.jsx(
+        letterSpacing: "0.1em"
+      }, children: c.subtitle }),
+      hasInlineForm ? /* @__PURE__ */ jsxRuntime.jsx(
+        HeroInlineForm,
+        {
+          ctaText: c.cta_text || "claim it",
+          formOpen,
+          setFormOpen,
+          firstName,
+          setFirstName,
+          email,
+          setEmail,
+          status,
+          errorMsg,
+          onSubmit: handleSubmit,
+          successHeading: c.inline_form.success_heading || "you're in.",
+          successMessage: c.inline_form.success_message || "check your inbox.",
+          submitText: c.inline_form.button_text || "send my code",
+          theme,
+          onEvent,
+          tracking
+        }
+      ) : c.cta_text && c.cta_url ? /* @__PURE__ */ jsxRuntime.jsx(
         "a",
         {
-          href: cta_url,
+          href: c.cta_url,
           onClick: () => {
-            trackClick(tracking, cta_text, cta_url);
-            onEvent?.("cta_click", { label: cta_text, url: cta_url });
+            trackClick(tracking, c.cta_text, c.cta_url);
+            onEvent?.("cta_click", { label: c.cta_text, url: c.cta_url });
           },
           style: {
             display: "inline-block",
@@ -2261,13 +2330,114 @@ function HeroSection({ section, theme, tracking, onEvent }) {
             letterSpacing: "0.08em",
             textTransform: "uppercase"
           },
-          children: cta_text
+          children: c.cta_text
         }
-      ),
-      review_line && review_line.count > 0 && /* @__PURE__ */ jsxRuntime.jsx(ReviewLine, { rating: review_line.rating, count: review_line.count, source: review_line.source, url: review_line.url, accent: theme.accent, fg: theme.fg })
+      ) : null,
+      c.review_line && c.review_line.count > 0 && /* @__PURE__ */ jsxRuntime.jsx(ReviewLine, { rating: c.review_line.rating, count: c.review_line.count, source: c.review_line.source, url: c.review_line.url, accent: theme.accent, fg: theme.fg })
     ] })
   ] });
 }
+function HeroInlineForm({ ctaText, formOpen, setFormOpen, firstName, setFirstName, email, setEmail, status, errorMsg, onSubmit, successHeading, successMessage, submitText, theme, onEvent, tracking }) {
+  const formMaxW = "min(480px, 90vw)";
+  if (status === "success") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { maxWidth: formMaxW, margin: "0 auto", padding: "1.5rem 2rem", background: `${theme.fg}06`, border: `1px solid ${theme.fg}10` }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "clamp(1rem, 3vw, 1.25rem)", fontWeight: 300, color: theme.fg, margin: "0 0 0.375rem", fontFamily: theme.fontDisplay || "inherit" }, children: successHeading }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.85rem", color: `${theme.fg}70`, margin: 0, lineHeight: 1.5 }, children: successMessage })
+    ] });
+  }
+  if (!formOpen) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => {
+          setFormOpen(true);
+          trackClick(tracking, ctaText, "#form");
+          onEvent?.("cta_click", { label: ctaText });
+        },
+        style: {
+          display: "inline-block",
+          padding: "clamp(0.875rem, 2.5vw, 1.125rem) clamp(2rem, 5vw, 3rem)",
+          background: theme.fg,
+          color: theme.bg,
+          border: "none",
+          cursor: "pointer",
+          fontSize: "clamp(0.85rem, 2vw, 1rem)",
+          fontWeight: 500,
+          letterSpacing: "0.06em",
+          textTransform: "uppercase",
+          fontFamily: "inherit"
+        },
+        children: ctaText
+      }
+    );
+  }
+  const inputBase = {
+    padding: "clamp(0.75rem, 2vw, 0.875rem) clamp(0.75rem, 2vw, 1rem)",
+    background: theme.surface,
+    border: `1px solid ${theme.fg}20`,
+    color: theme.fg,
+    fontSize: "clamp(0.8rem, 2vw, 0.9rem)",
+    fontWeight: 300,
+    outline: "none",
+    fontFamily: "inherit",
+    boxSizing: "border-box",
+    width: "100%"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit, style: { maxWidth: formMaxW, margin: "0 auto", width: "100%" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: `
+        .hero-form-row{display:flex;gap:0}
+        @media(max-width:480px){.hero-form-row{flex-direction:column;gap:0.5rem}}
+      ` } }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hero-form-row", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: "first name",
+          value: firstName,
+          autoFocus: true,
+          onChange: (e) => setFirstName(e.target.value),
+          style: { ...inputBase, flex: 1, minWidth: 0, borderRight: "none" }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "email",
+          placeholder: "email",
+          value: email,
+          required: true,
+          onChange: (e) => setEmail(e.target.value),
+          style: { ...inputBase, flex: 1.2, minWidth: 0 }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: status === "loading",
+        style: {
+          width: "100%",
+          padding: "clamp(0.75rem, 2vw, 0.875rem)",
+          background: theme.fg,
+          color: theme.bg,
+          border: "none",
+          fontSize: "clamp(0.8rem, 2vw, 0.85rem)",
+          fontWeight: 600,
+          letterSpacing: "0.08em",
+          textTransform: "uppercase",
+          cursor: status === "loading" ? "wait" : "pointer",
+          fontFamily: "inherit",
+          marginTop: "0.5rem",
+          opacity: status === "loading" ? 0.7 : 1
+        },
+        children: status === "loading" ? "..." : submitText
+      }
+    ),
+    status === "error" && errorMsg && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.75rem", color: "#e55", margin: "0.5rem 0 0", textAlign: "left" }, children: errorMsg })
+  ] });
+}
 function TextSection({ section, theme }) {
   const { heading, body } = section.content;
   const align = section.config?.align || "left";
@@ -2369,29 +2539,100 @@ function CollageHeroSection({ section, theme, tracking, onEvent }) {
     ] })
   ] });
 }
-function GallerySection({ section, theme }) {
-  const { images } = section.content;
+function GallerySection({ section, theme, onEvent }) {
+  const c = section.content;
+  const images = c.images || [];
   const columns = section.config?.columns || 3;
   const layout = section.config?.layout || "grid";
+  const loc = c.location_card;
   if (!images || images.length === 0) return null;
   if (layout === "collage") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "0.375rem", maxWidth: 900, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.375rem" }, children: images.map((img, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-      gridColumn: i === 0 ? "1 / -1" : void 0,
-      aspectRatio: i === 0 ? "16/9" : i % 3 === 0 ? "3/4" : "1",
-      overflow: "hidden",
-      background: theme.surface
-    }, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
-      {
-        src: img.url,
-        alt: img.alt || "",
-        loading: i < 2 ? "eager" : "lazy",
-        style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
-      }
-    ) }, i)) }) });
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "0.375rem", maxWidth: 900, margin: "0 auto" }, children: [
+      loc && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.375rem", marginBottom: "0.375rem" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(GalleryLocationCard, { loc, theme, onEvent }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { aspectRatio: "4/5", overflow: "hidden", background: theme.surface }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: images[0].url,
+            alt: images[0].alt || "",
+            loading: "eager",
+            style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.375rem" }, children: images.slice(loc ? 1 : 0).map((img, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+        gridColumn: !loc && i === 0 ? "1 / -1" : void 0,
+        aspectRatio: !loc && i === 0 ? "16/9" : i % 3 === 0 ? "3/4" : "1",
+        overflow: "hidden",
+        background: theme.surface
+      }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: img.url,
+          alt: img.alt || "",
+          loading: i < 2 ? "eager" : "lazy",
+          style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+        }
+      ) }, i)) })
+    ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", maxWidth: 800, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: "0.5rem" }, children: images.map((img, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { aspectRatio: "1", overflow: "hidden", background: theme.surface }, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: img.url, alt: img.alt || "", style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } }) }, i)) }) });
 }
+function GalleryLocationCard({ loc, theme, onEvent }) {
+  const dirUrl = loc.directions_url || `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(loc.address + ", " + loc.city + ", " + loc.state)}`;
+  const brandFont = loc.brand_font || "inherit";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { background: "#0C0C0C", border: "1px solid rgba(255,255,255,0.06)", overflow: "hidden", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", flex: 1, minHeight: 0, overflow: "hidden" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("img", { src: loc.image, alt: loc.name, style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%)" } }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "absolute", bottom: 0, left: 0, padding: "clamp(0.75rem, 3vw, 1.25rem)" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "loc-card-name", style: { fontFamily: brandFont, fontSize: "clamp(1.25rem, 5vw, 1.75rem)", color: "#fff", margin: 0, lineHeight: 1 }, children: loc.name }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { fontSize: "0.6rem", letterSpacing: "0.2em", color: "rgba(255,255,255,0.6)", margin: "0.25rem 0 0", fontWeight: 600, textTransform: "uppercase" }, children: [
+          loc.city,
+          ", ",
+          loc.state
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "clamp(0.625rem, 2vw, 1rem)", display: "flex", flexDirection: "column", gap: "0.4rem" }, children: [
+      loc.tagline && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.75rem", 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__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.375rem" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex", gap: "2px" }, children: [1, 2, 3, 4, 5].map((s) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 12, height: 12, viewBox: "0 0 20 20", fill: s <= Math.round(loc.rating) ? theme.accent : "rgba(255,255,255,0.1)", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "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" }) }, s)) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.7rem", color: "rgba(255,255,255,0.5)", fontWeight: 500 }, children: `${loc.rating.toFixed(1)} \xB7 ${loc.review_count} reviews` })
+      ] }),
+      loc.address && /* @__PURE__ */ jsxRuntime.jsxs("a", { href: dirUrl, target: "_blank", rel: "noopener noreferrer", style: { fontSize: "0.7rem", color: "rgba(255,255,255,0.35)", fontWeight: 500, textDecoration: "none" }, children: [
+        loc.address,
+        ", ",
+        loc.city,
+        ", ",
+        loc.state
+      ] }),
+      loc.phone && /* @__PURE__ */ jsxRuntime.jsx("a", { href: loc.phone_href || `tel:${loc.phone}`, style: { fontSize: "0.7rem", color: "rgba(255,255,255,0.35)", fontWeight: 500, textDecoration: "none" }, children: loc.phone }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "0.375rem", marginTop: "auto", paddingTop: "0.125rem" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "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.25rem", padding: "0.5rem", background: "#fff", color: "#000", fontSize: "0.65rem", fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", textDecoration: "none" },
+            children: "directions"
+          }
+        ),
+        loc.shop_url && /* @__PURE__ */ jsxRuntime.jsx(
+          "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.25rem", padding: "0.5rem", border: "1px solid rgba(255,255,255,0.15)", color: "rgba(255,255,255,0.8)", fontSize: "0.65rem", fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", textDecoration: "none" },
+            children: "shop"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
 function SocialLinksSection({ section, theme }) {
   const { links } = section.content;
   if (!links || links.length === 0) return null;
@@ -2419,25 +2660,21 @@ function toEmbedUrl(url) {
 }
 function ReviewLine({ rating, count, source, url, accent, fg }) {
   const label = `${rating.toFixed(1)} \xB7 ${count} ${source || "reviews"}`;
-  const stars = /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex", gap: "1px" }, children: [1, 2, 3, 4, 5].map((s) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 14, height: 14, viewBox: "0 0 20 20", fill: s <= Math.round(rating) ? accent : `${fg}20`, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "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" }) }, s)) });
-  const text = /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.8rem", color: `${fg}80`, fontWeight: 500 }, children: label });
-  const inner = /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: "0.5rem" }, children: [
-    stars,
-    text
+  const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+    marginTop: "1.5rem",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "0.625rem"
+  }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { dangerouslySetInnerHTML: { __html: GOOGLE_G } }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex", gap: "2px" }, children: [1, 2, 3, 4, 5].map((s) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: s <= Math.round(rating) ? "#FBBC05" : `${fg}20`, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "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" }) }, s)) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.9rem", color: `${fg}AA`, fontWeight: 500 }, children: label })
   ] });
   if (url) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "1.25rem", textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "a",
-      {
-        href: url,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        style: { textDecoration: "none", display: "inline-flex", alignItems: "center", gap: "0.5rem" },
-        children: inner
-      }
-    ) });
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", style: { textDecoration: "none", display: "block" }, children: content });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "1.25rem", display: "flex", justifyContent: "center" }, children: inner });
+  return content;
 }
 function CTASection({ section, theme, tracking, onEvent }) {
   const { title, subtitle, buttons } = section.content;
@@ -2814,15 +3051,26 @@ function SuccessState({ theme, heading, message, couponCode }) {
     }, children: couponCode })
   ] }) });
 }
+var GOOGLE_G_LG = '<svg width="28" height="28" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59a14.5 14.5 0 010-9.18l-7.98-6.19a24.03 24.03 0 000 21.56l7.98-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/></svg>';
+var GOOGLE_G_SM = '<svg width="14" height="14" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59a14.5 14.5 0 010-9.18l-7.98-6.19a24.03 24.03 0 000 21.56l7.98-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/></svg>';
 function TestimonialsSection({ section, theme }) {
   const c = section.content;
-  const layout = section.config?.layout || "grid";
+  section.config?.layout || "grid";
   const reviews = c.reviews || [];
   if (reviews.length === 0) return null;
   const overallRating = c.rating ?? 5;
   const reviewCount = c.review_count ?? reviews.length;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "3rem 1.5rem", maxWidth: 640, margin: "0 auto" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", marginBottom: "2rem" }, children: [
+  const googleUrl = section.config?.google_url || void 0;
+  const directionsUrl = section.config?.directions_url || void 0;
+  `reviews-${section.id}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "3rem 0", overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: `
+        .rv-scroll{display:flex;gap:clamp(0.5rem,2vw,0.75rem);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 clamp(1rem,4vw,3rem)}
+        .rv-scroll::-webkit-scrollbar{display:none}
+        .rv-card{flex:0 0 clamp(260px,40vw,320px);scroll-snap-align:start}
+      ` } }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", marginBottom: "2rem", padding: "0 1.5rem" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "center", marginBottom: "0.75rem" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { dangerouslySetInnerHTML: { __html: GOOGLE_G_LG } }) }),
       c.heading && /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
         fontSize: "clamp(1.25rem, 4vw, 1.75rem)",
         fontWeight: 300,
@@ -2833,42 +3081,121 @@ function TestimonialsSection({ section, theme }) {
         color: theme.fg
       }, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedText, { text: c.heading }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "0.5rem", marginBottom: "0.25rem" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Stars, { rating: overallRating, color: theme.accent, size: 18 }),
+        /* @__PURE__ */ jsxRuntime.jsx(Stars, { rating: overallRating, color: "#FBBC05", size: 18 }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "1.1rem", fontWeight: 500, color: theme.fg }, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedText, { text: overallRating.toFixed(1) }) })
       ] }),
       c.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.8rem", color: theme.muted, margin: 0, letterSpacing: "0.1em", textTransform: "uppercase" }, children: c.subtitle }) : /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { fontSize: "0.8rem", color: theme.muted, margin: 0, letterSpacing: "0.1em", textTransform: "uppercase" }, children: [
         "from ",
         /* @__PURE__ */ jsxRuntime.jsx(AnimatedText, { text: String(reviewCount) }),
         " reviews"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "0.625rem", justifyContent: "center", marginTop: "1.5rem", flexWrap: "wrap" }, children: [
+        googleUrl && /* @__PURE__ */ jsxRuntime.jsxs("a", { href: googleUrl, target: "_blank", rel: "noopener noreferrer", style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "0.5rem",
+          padding: "clamp(0.75rem, 2vw, 0.875rem) clamp(1.25rem, 3vw, 2rem)",
+          background: theme.fg,
+          color: theme.bg,
+          textDecoration: "none",
+          fontSize: "clamp(0.8rem, 2vw, 0.9rem)",
+          fontWeight: 600,
+          letterSpacing: "0.06em",
+          textTransform: "uppercase"
+        }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { dangerouslySetInnerHTML: { __html: GOOGLE_G_SM } }),
+          `see all ${reviewCount} reviews`
+        ] }),
+        directionsUrl && /* @__PURE__ */ jsxRuntime.jsx("a", { href: directionsUrl, target: "_blank", rel: "noopener noreferrer", style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "0.5rem",
+          padding: "clamp(0.75rem, 2vw, 0.875rem) clamp(1.25rem, 3vw, 2rem)",
+          border: `1px solid ${theme.fg}25`,
+          color: theme.fg,
+          textDecoration: "none",
+          fontSize: "clamp(0.8rem, 2vw, 0.9rem)",
+          fontWeight: 600,
+          letterSpacing: "0.06em",
+          textTransform: "uppercase"
+        }, children: "get directions" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-      display: "grid",
-      gridTemplateColumns: layout === "list" ? "1fr" : `repeat(${Math.min(reviews.length, 2)}, 1fr)`,
-      gap: "0.75rem"
-    }, children: reviews.map((review, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-      background: theme.surface,
-      border: `1px solid ${theme.fg}08`,
-      padding: "1.25rem"
-    }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Stars, { rating: review.rating ?? 5, color: theme.accent, size: 14 }),
-      /* @__PURE__ */ jsxRuntime.jsxs("p", { style: {
-        fontSize: "0.88rem",
-        color: `${theme.fg}CC`,
-        margin: "0.75rem 0",
-        lineHeight: 1.6,
-        fontWeight: 300,
-        fontStyle: "italic"
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rv-scroll", children: [
+      reviews.map((review, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rv-card", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+        background: theme.surface,
+        border: `1px solid ${theme.fg}08`,
+        padding: "clamp(1rem, 3vw, 1.5rem)",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column"
       }, children: [
-        '"',
-        review.text,
-        '"'
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "0.375rem" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.8rem", fontWeight: 500, color: theme.fg }, children: review.name }),
-        review.location && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.7rem", color: theme.muted }, children: review.location })
-      ] })
-    ] }, i)) })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "0.75rem" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Stars, { rating: review.rating ?? 5, color: "#FBBC05", size: 13 }),
+          review.location && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.6rem", letterSpacing: "0.15em", textTransform: "uppercase", color: theme.muted, fontWeight: 500 }, children: review.location })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
+          fontSize: "0.9rem",
+          color: `${theme.fg}B0`,
+          margin: "0 0 auto",
+          lineHeight: 1.65,
+          fontWeight: 400,
+          paddingBottom: "1rem"
+        }, children: `\u201C${review.text}\u201D` }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { borderTop: `1px solid ${theme.fg}08`, paddingTop: "0.75rem", display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+            width: 28,
+            height: 28,
+            borderRadius: "50%",
+            background: `${theme.accent}18`,
+            border: `1px solid ${theme.accent}15`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0
+          }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.7rem", fontWeight: 600, color: theme.accent, textTransform: "uppercase" }, children: review.name.charAt(0) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.8rem", fontWeight: 500, color: `${theme.fg}AA` }, children: review.name })
+        ] })
+      ] }) }, i)),
+      googleUrl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rv-card", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: googleUrl, target: "_blank", rel: "noopener noreferrer", style: {
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "0.75rem",
+        background: theme.surface,
+        border: `1px solid ${theme.fg}08`,
+        padding: "clamp(1rem, 3vw, 1.5rem)",
+        textDecoration: "none"
+      }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { dangerouslySetInnerHTML: { __html: GOOGLE_G_LG } }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.85rem", color: theme.fg, fontWeight: 500 }, children: `read all ${reviewCount}` }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.75rem", color: theme.muted, letterSpacing: "0.08em" }, children: "reviews on google" })
+      ] }) })
+    ] }),
+    googleUrl && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", marginTop: "1.5rem", padding: "0 1.5rem" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "a",
+      {
+        href: googleUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "0.5rem",
+          fontSize: "0.8rem",
+          color: theme.muted,
+          textDecoration: "none",
+          letterSpacing: "0.08em",
+          fontWeight: 500
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { dangerouslySetInnerHTML: { __html: GOOGLE_G_SM } }),
+          `read all ${reviewCount} reviews on google`
+        ]
+      }
+    ) })
   ] });
 }
 function Stars({ rating, color, size }) {
@@ -3292,7 +3619,7 @@ function SectionRenderer({
   const el = (() => {
     switch (section.type) {
       case "hero":
-        return /* @__PURE__ */ jsxRuntime.jsx(HeroSection, { section, theme, tracking, onEvent });
+        return /* @__PURE__ */ jsxRuntime.jsx(HeroSection, { section, theme, tracking, onEvent, data });
       case "collage_hero":
         return /* @__PURE__ */ jsxRuntime.jsx(CollageHeroSection, { section, theme, tracking, onEvent });
       case "text":
@@ -3302,7 +3629,7 @@ function SectionRenderer({
       case "video":
         return /* @__PURE__ */ jsxRuntime.jsx(VideoSection, { section, theme });
       case "gallery":
-        return /* @__PURE__ */ jsxRuntime.jsx(GallerySection, { section, theme });
+        return /* @__PURE__ */ jsxRuntime.jsx(GallerySection, { section, theme, onEvent });
       case "cta":
         return /* @__PURE__ */ jsxRuntime.jsx(CTASection, { section, theme, tracking, onEvent });
       case "stats":