@neowhale/storefront 0.2.35 → 0.2.37

package/dist/react/index.js

@@ -2133,7 +2133,18 @@ function useReferral() {
     referredBy: status?.referred_by ?? null
   };
 }
-var NUM_PATTERN = /(\$?[\d,]+\.?\d*[+★%]?)/g;
+function trackClick(tracking, label, url, position) {
+  if (!tracking?.gatewayUrl || !tracking?.code) return;
+  const body = JSON.stringify({ label, url, position });
+  if (typeof navigator !== "undefined" && navigator.sendBeacon) {
+    navigator.sendBeacon(
+      `${tracking.gatewayUrl}/q/${encodeURIComponent(tracking.code)}/click`,
+      new Blob([body], { type: "application/json" })
+    );
+  }
+}
+var NUM_SPLIT = /(\$?[\d,]+\.?\d*[+★%]?)/g;
+var NUM_TEST = /^\$?[\d,]+\.?\d*[+★%]?$/;
 function easeOutQuart(t) {
   return 1 - Math.pow(1 - t, 4);
 }
@@ -2190,147 +2201,69 @@ function AnimatedNumber({ raw }) {
   ] });
 }
 function AnimatedText({ text }) {
-  const parts = text.split(NUM_PATTERN);
+  const parts = text.split(NUM_SPLIT);
   return /* @__PURE__ */ jsx(Fragment, { children: parts.map(
-    (part, i) => NUM_PATTERN.test(part) ? /* @__PURE__ */ jsx(AnimatedNumber, { raw: part }, i) : part
+    (part, i) => NUM_TEST.test(part) ? /* @__PURE__ */ jsx(AnimatedNumber, { raw: part }, i) : part
   ) });
 }
-function trackClick(tracking, label, url, position) {
-  if (!tracking?.gatewayUrl || !tracking?.code) return;
-  const body = JSON.stringify({ label, url, position });
-  if (typeof navigator !== "undefined" && navigator.sendBeacon) {
-    navigator.sendBeacon(
-      `${tracking.gatewayUrl}/q/${encodeURIComponent(tracking.code)}/click`,
-      new Blob([body], { type: "application/json" })
-    );
-  }
-}
-function SectionRenderer({
-  section,
-  data,
-  theme,
-  tracking,
-  onEvent
-}) {
-  const [showCOA, setShowCOA] = useState(false);
-  const el = (() => {
-    switch (section.type) {
-      case "hero":
-        return /* @__PURE__ */ jsx(HeroSection, { section, theme, tracking, onEvent });
-      case "text":
-        return /* @__PURE__ */ jsx(TextSection, { section, theme });
-      case "image":
-        return /* @__PURE__ */ jsx(ImageSection, { section, theme });
-      case "video":
-        return /* @__PURE__ */ jsx(VideoSection, { section, theme });
-      case "gallery":
-        return /* @__PURE__ */ jsx(GallerySection, { section, theme });
-      case "cta":
-        return /* @__PURE__ */ jsx(CTASection, { section, theme, tracking, onEvent });
-      case "stats":
-        return /* @__PURE__ */ jsx(StatsSection, { section, theme });
-      case "product_card":
-        return /* @__PURE__ */ jsx(ProductCardSection, { section, data, theme, tracking });
-      case "coa_viewer":
-        return /* @__PURE__ */ jsx(COAViewerSection, { section, data, theme, onShowCOA: () => setShowCOA(true), tracking });
-      case "social_links":
-        return /* @__PURE__ */ jsx(SocialLinksSection, { section, theme });
-      case "lead_capture":
-        return /* @__PURE__ */ jsx(LeadCaptureSection, { section, data, theme, onEvent });
-      case "divider":
-        return /* @__PURE__ */ jsx(DividerSection, { theme });
-      default:
-        return null;
-    }
-  })();
-  const sectionRef = useRef(null);
-  useEffect(() => {
-    const el2 = sectionRef.current;
-    if (!el2 || typeof IntersectionObserver === "undefined") return;
-    const obs = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          onEvent?.("section_view", {
-            section_id: section.id,
-            section_type: section.type
-          });
-          obs.disconnect();
-        }
-      },
-      { threshold: 0.5 }
-    );
-    obs.observe(el2);
-    return () => obs.disconnect();
-  }, [section.id, section.type, onEvent]);
-  return /* @__PURE__ */ jsxs("div", { ref: sectionRef, "data-section-id": section.id, "data-section-type": section.type, children: [
-    el,
-    showCOA && data?.coa && /* @__PURE__ */ jsx(COAModal, { coa: data.coa, theme, onClose: () => setShowCOA(false) })
-  ] });
-}
 function HeroSection({ section, theme, tracking, onEvent }) {
   const { title, subtitle, background_image, cta_text, cta_url } = section.content;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        position: "relative",
-        minHeight: "60vh",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        textAlign: "center",
-        padding: "3rem 1.5rem",
-        backgroundImage: background_image ? `url(${background_image})` : void 0,
-        backgroundSize: "cover",
-        backgroundPosition: "center"
-      },
-      children: [
-        background_image && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, background: "rgba(0,0,0,0.5)" } }),
-        /* @__PURE__ */ jsxs("div", { style: { position: "relative", zIndex: 1, maxWidth: 640 }, children: [
-          title && /* @__PURE__ */ jsx("h1", { style: {
-            fontSize: "clamp(2rem, 8vw, 3rem)",
-            fontWeight: 300,
-            fontFamily: theme.fontDisplay || "inherit",
-            margin: "0 0 1rem",
-            lineHeight: 1.15,
-            letterSpacing: "-0.02em",
-            color: theme.fg
-          }, children: /* @__PURE__ */ jsx(AnimatedText, { text: title }) }),
-          subtitle && /* @__PURE__ */ jsx("p", { style: {
+  return /* @__PURE__ */ jsxs("div", { style: {
+    position: "relative",
+    minHeight: "60vh",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    textAlign: "center",
+    padding: "3rem 1.5rem",
+    backgroundImage: background_image ? `url(${background_image})` : void 0,
+    backgroundSize: "cover",
+    backgroundPosition: "center"
+  }, children: [
+    background_image && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, background: "rgba(0,0,0,0.5)" } }),
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative", zIndex: 1, maxWidth: 640 }, children: [
+      title && /* @__PURE__ */ jsx("h1", { style: {
+        fontSize: "clamp(2rem, 8vw, 3rem)",
+        fontWeight: 300,
+        fontFamily: theme.fontDisplay || "inherit",
+        margin: "0 0 1rem",
+        lineHeight: 1.15,
+        letterSpacing: "-0.02em",
+        color: theme.fg
+      }, children: /* @__PURE__ */ jsx(AnimatedText, { text: title }) }),
+      subtitle && /* @__PURE__ */ jsx("p", { style: {
+        fontSize: "0.85rem",
+        color: theme.accent,
+        margin: "0 0 2rem",
+        lineHeight: 1.6,
+        textTransform: "uppercase",
+        letterSpacing: "0.15em"
+      }, children: subtitle }),
+      cta_text && cta_url && /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: cta_url,
+          onClick: () => {
+            trackClick(tracking, cta_text, cta_url);
+            onEvent?.("cta_click", { label: cta_text, url: cta_url });
+          },
+          style: {
+            display: "inline-block",
+            padding: "0.875rem 2rem",
+            background: theme.fg,
+            color: theme.bg,
+            textDecoration: "none",
             fontSize: "0.85rem",
-            color: theme.accent,
-            margin: "0 0 2rem",
-            lineHeight: 1.6,
-            textTransform: "uppercase",
-            letterSpacing: "0.15em"
-          }, children: subtitle }),
-          cta_text && cta_url && /* @__PURE__ */ jsx(
-            "a",
-            {
-              href: cta_url,
-              onClick: () => {
-                trackClick(tracking, cta_text, cta_url);
-                onEvent?.("cta_click", { label: cta_text, url: cta_url });
-              },
-              style: {
-                display: "inline-block",
-                padding: "0.875rem 2rem",
-                background: theme.fg,
-                color: theme.bg,
-                textDecoration: "none",
-                fontSize: "0.85rem",
-                fontWeight: 500,
-                letterSpacing: "0.08em",
-                textTransform: "uppercase"
-              },
-              children: cta_text
-            }
-          )
-        ] })
-      ]
-    }
-  );
+            fontWeight: 500,
+            letterSpacing: "0.08em",
+            textTransform: "uppercase"
+          },
+          children: cta_text
+        }
+      )
+    ] })
+  ] });
 }
 function TextSection({ section, theme }) {
   const { heading, body } = section.content;
@@ -2352,14 +2285,7 @@ function ImageSection({ section, theme }) {
   const contained = section.config?.contained !== false;
   if (!url) return null;
   return /* @__PURE__ */ jsxs("div", { style: { padding: contained ? "1.5rem" : 0, maxWidth: contained ? 640 : void 0, margin: contained ? "0 auto" : void 0 }, children: [
-    /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: url,
-        alt: alt || "",
-        style: { width: "100%", display: "block", objectFit: "cover" }
-      }
-    ),
+    /* @__PURE__ */ jsx("img", { src: url, alt: alt || "", style: { width: "100%", display: "block", objectFit: "cover" } }),
     caption && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.8rem", color: theme.muted, textAlign: "center", marginTop: "0.75rem" }, children: caption })
   ] });
 }
@@ -2367,36 +2293,38 @@ function VideoSection({ section, theme }) {
   const { url, poster } = section.content;
   if (!url) return null;
   const isEmbed = url.includes("youtube") || url.includes("youtu.be") || url.includes("vimeo");
-  return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 640, margin: "0 auto" }, children: isEmbed ? /* @__PURE__ */ jsx("div", { style: { position: "relative", paddingBottom: "56.25%", height: 0 }, children: /* @__PURE__ */ jsx(
-    "iframe",
-    {
-      src: toEmbedUrl(url),
-      style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", border: "none" },
-      allow: "autoplay; fullscreen",
-      title: "Video"
-    }
-  ) }) : /* @__PURE__ */ jsx(
-    "video",
-    {
-      src: url,
-      poster,
-      controls: true,
-      style: { width: "100%", display: "block", background: theme.surface }
-    }
-  ) });
+  return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 640, margin: "0 auto" }, children: isEmbed ? /* @__PURE__ */ jsx("div", { style: { position: "relative", paddingBottom: "56.25%", height: 0 }, children: /* @__PURE__ */ jsx("iframe", { src: toEmbedUrl(url), style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", border: "none" }, allow: "autoplay; fullscreen", title: "Video" }) }) : /* @__PURE__ */ jsx("video", { src: url, poster, controls: true, style: { width: "100%", display: "block", background: theme.surface } }) });
 }
 function GallerySection({ section, theme }) {
   const { images } = section.content;
   const columns = section.config?.columns || 3;
   if (!images || images.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 800, margin: "0 auto" }, children: /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: "0.5rem" }, children: images.map((img, i) => /* @__PURE__ */ jsx("div", { style: { aspectRatio: "1", overflow: "hidden", background: theme.surface }, children: /* @__PURE__ */ jsx(
-    "img",
+  return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 800, margin: "0 auto" }, children: /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: "0.5rem" }, children: images.map((img, i) => /* @__PURE__ */ jsx("div", { style: { aspectRatio: "1", overflow: "hidden", background: theme.surface }, children: /* @__PURE__ */ jsx("img", { src: img.url, alt: img.alt || "", style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } }) }, i)) }) });
+}
+function SocialLinksSection({ section, theme }) {
+  const { links } = section.content;
+  if (!links || links.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", display: "flex", justifyContent: "center", gap: "1.5rem", flexWrap: "wrap" }, children: links.map((link, i) => /* @__PURE__ */ jsx(
+    "a",
     {
-      src: img.url,
-      alt: img.alt || "",
-      style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
-    }
-  ) }, i)) }) });
+      href: link.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      style: { color: theme.muted, textDecoration: "none", fontSize: "0.85rem", fontWeight: 500, textTransform: "capitalize", letterSpacing: "0.03em" },
+      children: link.platform
+    },
+    i
+  )) });
+}
+function DividerSection({ theme }) {
+  return /* @__PURE__ */ jsx("div", { style: { padding: "1rem 1.5rem", maxWidth: 640, margin: "0 auto" }, children: /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${theme.fg}0A`, margin: 0 } }) });
+}
+function toEmbedUrl(url) {
+  const ytMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)/);
+  if (ytMatch) return `https://www.youtube.com/embed/${ytMatch[1]}`;
+  const vimeoMatch = url.match(/vimeo\.com\/(\d+)/);
+  if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}`;
+  return url;
 }
 function CTASection({ section, theme, tracking, onEvent }) {
   const { title, subtitle, buttons } = section.content;
@@ -2459,29 +2387,15 @@ function StatsSection({ section, theme }) {
   if (!stats || stats.length === 0) return null;
   if (layout === "list") {
     return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 640, margin: "0 auto" }, children: stats.map((stat, i) => /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("div", { style: {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "baseline",
-        padding: "0.625rem 0"
-      }, children: [
-        /* @__PURE__ */ jsx("span", { style: {
-          fontSize: 12,
-          textTransform: "uppercase",
-          letterSpacing: "0.15em",
-          color: `${theme.fg}66`
-        }, children: stat.label }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "baseline", padding: "0.625rem 0" }, children: [
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 12, textTransform: "uppercase", letterSpacing: "0.15em", color: `${theme.fg}66` }, children: stat.label }),
         /* @__PURE__ */ jsx("span", { style: { fontSize: 14, fontWeight: 300, color: `${theme.fg}CC` }, children: /* @__PURE__ */ jsx(AnimatedText, { text: stat.value }) })
       ] }),
       i < stats.length - 1 && /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${theme.fg}0A`, margin: 0 } })
     ] }, i)) });
   }
   const columns = Math.min(stats.length, 4);
-  return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 640, margin: "0 auto" }, children: /* @__PURE__ */ jsx("div", { style: {
-    display: "grid",
-    gridTemplateColumns: `repeat(${columns}, 1fr)`,
-    border: `1px solid ${theme.fg}0F`
-  }, children: stats.map((stat, i) => /* @__PURE__ */ jsxs("div", { style: {
+  return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 640, margin: "0 auto" }, children: /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, border: `1px solid ${theme.fg}0F` }, children: stats.map((stat, i) => /* @__PURE__ */ jsxs("div", { style: {
     padding: "1.25rem 0.5rem",
     textAlign: "center",
     borderRight: i < stats.length - 1 ? `1px solid ${theme.fg}0F` : void 0
@@ -2540,13 +2454,7 @@ function ProductCardSection({ section, data, theme, tracking }) {
     ] })
   ] }) });
 }
-function COAViewerSection({
-  section,
-  data,
-  theme,
-  onShowCOA,
-  tracking
-}) {
+function COAViewerSection({ section, data, theme, onShowCOA, tracking }) {
   const coa = data?.coa;
   const c = section.content;
   if (!coa) return null;
@@ -2585,6 +2493,28 @@ function COAViewerSection({
     onShowCOA();
   }, style: buttonStyle, children: buttonLabel }) });
 }
+function COAModal({ coa, theme, onClose }) {
+  return /* @__PURE__ */ jsxs("div", { style: { position: "fixed", inset: 0, zIndex: 9999, background: "rgba(0,0,0,0.95)", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      padding: "0.75rem 1rem",
+      borderBottom: `1px solid ${theme.fg}10`
+    }, children: [
+      /* @__PURE__ */ jsx("span", { style: { color: "#fff", fontWeight: 500, fontSize: "0.85rem" }, children: coa.document_name || "Lab Results" }),
+      /* @__PURE__ */ jsx("button", { onClick: onClose, style: {
+        background: `${theme.fg}10`,
+        border: "none",
+        color: "#fff",
+        fontSize: "0.85rem",
+        cursor: "pointer",
+        padding: "0.375rem 0.75rem"
+      }, children: "Close" })
+    ] }),
+    /* @__PURE__ */ jsx("iframe", { src: coa.url, style: { flex: 1, border: "none", background: "#fff" }, title: "Lab Results" })
+  ] });
+}
 function LeadCaptureSection({ section, data, theme, onEvent }) {
   const c = section.content;
   const [firstName, setFirstName] = useState("");
@@ -2595,13 +2525,17 @@ function LeadCaptureSection({ section, data, theme, onEvent }) {
   const gatewayUrl = c.gateway_url || data.gatewayUrl || "https://whale-gateway.fly.dev";
   const storeId = c.store_id || data.store?.id;
   const slug = c.landing_page_slug || data.landing_page?.slug;
+  const heading = c.heading || "get 10% off your first visit.";
+  const subtitle = c.subtitle || "drop your email and we will send you the code.";
+  const buttonText = c.button_text || "Claim My Discount";
+  const successHeading = c.success_heading || "You\u2019re in!";
+  const successMessage = c.success_message || "Check your inbox for the discount code.";
   async function handleSubmit(e) {
     e.preventDefault();
     if (!email || !storeId) return;
     setStatus("loading");
     setErrorMsg("");
     const urlParams = typeof window !== "undefined" ? new URLSearchParams(window.location.search) : null;
-    const analyticsData = data.analyticsContext;
     try {
       const res = await fetch(`${gatewayUrl}/v1/stores/${storeId}/storefront/leads`, {
         method: "POST",
@@ -2617,8 +2551,8 @@ function LeadCaptureSection({ section, data, theme, onEvent }) {
             if (newsletterOptIn) t.push(c.newsletter_tag || "newsletter-subscriber");
             return t.length > 0 ? t : void 0;
           })(),
-          visitor_id: analyticsData?.visitorId || void 0,
-          session_id: analyticsData?.sessionId || 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,
@@ -2636,11 +2570,6 @@ function LeadCaptureSection({ section, data, theme, onEvent }) {
       setStatus("error");
     }
   }
-  const heading = c.heading || "get 10% off your first visit.";
-  const subtitle = c.subtitle || "drop your email and we will send you the code.";
-  const buttonText = c.button_text || "Claim My Discount";
-  const successHeading = c.success_heading || "You\u2019re in!";
-  const successMessage = c.success_message || "Check your inbox for the discount code.";
   const inputStyle = {
     flex: 1,
     minWidth: 0,
@@ -2655,41 +2584,10 @@ function LeadCaptureSection({ section, data, theme, onEvent }) {
     fontFamily: "inherit",
     transition: "border-color 0.2s"
   };
+  if (status === "success") return /* @__PURE__ */ jsx(SuccessState, { theme, heading: successHeading, message: successMessage, couponCode: c.coupon_code });
   return /* @__PURE__ */ jsxs("div", { style: { padding: "3.5rem 1.5rem", maxWidth: 560, margin: "0 auto" }, children: [
     /* @__PURE__ */ jsx("style", { children: `@keyframes lc-spin { to { transform: rotate(360deg) } }` }),
-    /* @__PURE__ */ jsx("div", { style: {
-      background: theme.surface,
-      border: `1px solid ${theme.fg}12`,
-      padding: "clamp(2rem, 6vw, 3rem)"
-    }, children: status === "success" ? /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
-      /* @__PURE__ */ jsx("h2", { style: {
-        fontSize: "clamp(1.5rem, 5vw, 2rem)",
-        fontWeight: 300,
-        fontFamily: theme.fontDisplay || "inherit",
-        margin: "0 0 0.75rem",
-        lineHeight: 1.2,
-        letterSpacing: "-0.02em",
-        color: theme.fg
-      }, children: successHeading }),
-      /* @__PURE__ */ jsx("p", { style: {
-        fontSize: "0.9rem",
-        color: `${theme.fg}99`,
-        margin: "0 0 1.5rem",
-        lineHeight: 1.6,
-        fontWeight: 300
-      }, children: successMessage }),
-      c.coupon_code && /* @__PURE__ */ jsx("div", { style: {
-        display: "inline-block",
-        padding: "0.75rem 2rem",
-        background: `${theme.fg}08`,
-        border: `1px dashed ${theme.fg}30`,
-        fontSize: "clamp(1.25rem, 4vw, 1.75rem)",
-        fontWeight: 500,
-        fontFamily: "monospace",
-        letterSpacing: "0.12em",
-        color: theme.accent
-      }, children: c.coupon_code })
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { style: { background: theme.surface, border: `1px solid ${theme.fg}12`, padding: "clamp(2rem, 6vw, 3rem)" }, children: [
       /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", marginBottom: "clamp(1.5rem, 4vw, 2rem)" }, children: [
         /* @__PURE__ */ jsx("h2", { style: {
           fontSize: "clamp(1.5rem, 5vw, 2.25rem)",
@@ -2711,27 +2609,8 @@ function LeadCaptureSection({ section, data, theme, onEvent }) {
       ] }),
       /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
         /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.75rem", flexWrap: "wrap" }, children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "text",
-              placeholder: "First name",
-              value: firstName,
-              onChange: (e) => setFirstName(e.target.value),
-              style: inputStyle
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "email",
-              placeholder: "Email address",
-              value: email,
-              onChange: (e) => setEmail(e.target.value),
-              required: true,
-              style: inputStyle
-            }
-          )
+          /* @__PURE__ */ jsx("input", { type: "text", placeholder: "First name", value: firstName, onChange: (e) => setFirstName(e.target.value), style: inputStyle }),
+          /* @__PURE__ */ jsx("input", { type: "email", placeholder: "Email address", value: email, onChange: (e) => setEmail(e.target.value), required: true, style: inputStyle })
         ] }),
         c.show_newsletter_opt_in !== false && /* @__PURE__ */ jsxs("label", { style: {
           display: "flex",
@@ -2749,121 +2628,130 @@ function LeadCaptureSection({ section, data, theme, onEvent }) {
               type: "checkbox",
               checked: newsletterOptIn,
               onChange: (e) => setNewsletterOptIn(e.target.checked),
-              style: {
-                width: 16,
-                height: 16,
-                accentColor: theme.accent,
-                cursor: "pointer",
-                flexShrink: 0
-              }
+              style: { width: 16, height: 16, accentColor: theme.accent, cursor: "pointer", flexShrink: 0 }
             }
           ),
           c.newsletter_label || "Also sign me up for the newsletter \u2014 new drops, deals, and company news."
         ] }),
         status === "error" && errorMsg && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.8rem", color: "#e55", margin: 0, fontWeight: 400 }, children: errorMsg }),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "submit",
-            disabled: status === "loading",
-            style: {
-              width: "100%",
-              padding: "0.875rem",
-              background: theme.fg,
-              color: theme.bg,
-              border: "none",
-              fontSize: "0.85rem",
-              fontWeight: 500,
-              cursor: status === "loading" ? "wait" : "pointer",
-              letterSpacing: "0.08em",
-              textTransform: "uppercase",
-              fontFamily: "inherit",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: "0.5rem",
-              opacity: status === "loading" ? 0.7 : 1,
-              transition: "opacity 0.2s"
-            },
-            children: [
-              status === "loading" && /* @__PURE__ */ jsx("span", { style: {
-                display: "inline-block",
-                width: 16,
-                height: 16,
-                border: `2px solid ${theme.bg}40`,
-                borderTopColor: theme.bg,
-                borderRadius: "50%",
-                animation: "lc-spin 0.8s linear infinite"
-              } }),
-              buttonText
-            ]
-          }
-        )
+        /* @__PURE__ */ jsxs("button", { type: "submit", disabled: status === "loading", style: {
+          width: "100%",
+          padding: "0.875rem",
+          background: theme.fg,
+          color: theme.bg,
+          border: "none",
+          fontSize: "0.85rem",
+          fontWeight: 500,
+          cursor: status === "loading" ? "wait" : "pointer",
+          letterSpacing: "0.08em",
+          textTransform: "uppercase",
+          fontFamily: "inherit",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "0.5rem",
+          opacity: status === "loading" ? 0.7 : 1,
+          transition: "opacity 0.2s"
+        }, children: [
+          status === "loading" && /* @__PURE__ */ jsx("span", { style: {
+            display: "inline-block",
+            width: 16,
+            height: 16,
+            border: `2px solid ${theme.bg}40`,
+            borderTopColor: theme.bg,
+            borderRadius: "50%",
+            animation: "lc-spin 0.8s linear infinite"
+          } }),
+          buttonText
+        ] })
       ] })
-    ] }) })
+    ] })
   ] });
 }
-function SocialLinksSection({ section, theme }) {
-  const { links } = section.content;
-  if (!links || links.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", display: "flex", justifyContent: "center", gap: "1.5rem", flexWrap: "wrap" }, children: links.map((link, i) => /* @__PURE__ */ jsx(
-    "a",
-    {
-      href: link.url,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      style: {
-        color: theme.muted,
-        textDecoration: "none",
-        fontSize: "0.85rem",
-        fontWeight: 500,
-        textTransform: "capitalize",
-        letterSpacing: "0.03em"
-      },
-      children: link.platform
-    },
-    i
-  )) });
-}
-function DividerSection({ theme }) {
-  return /* @__PURE__ */ jsx("div", { style: { padding: "1rem 1.5rem", maxWidth: 640, margin: "0 auto" }, children: /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${theme.fg}0A`, margin: 0 } }) });
+function SuccessState({ theme, heading, message, couponCode }) {
+  return /* @__PURE__ */ jsx("div", { style: { padding: "3.5rem 1.5rem", maxWidth: 560, margin: "0 auto" }, children: /* @__PURE__ */ jsxs("div", { style: { background: theme.surface, border: `1px solid ${theme.fg}12`, padding: "clamp(2rem, 6vw, 3rem)", textAlign: "center" }, children: [
+    /* @__PURE__ */ jsx("h2", { style: {
+      fontSize: "clamp(1.5rem, 5vw, 2rem)",
+      fontWeight: 300,
+      fontFamily: theme.fontDisplay || "inherit",
+      margin: "0 0 0.75rem",
+      lineHeight: 1.2,
+      letterSpacing: "-0.02em",
+      color: theme.fg
+    }, children: heading }),
+    /* @__PURE__ */ jsx("p", { style: { fontSize: "0.9rem", color: `${theme.fg}99`, margin: "0 0 1.5rem", lineHeight: 1.6, fontWeight: 300 }, children: message }),
+    couponCode && /* @__PURE__ */ jsx("div", { style: {
+      display: "inline-block",
+      padding: "0.75rem 2rem",
+      background: `${theme.fg}08`,
+      border: `1px dashed ${theme.fg}30`,
+      fontSize: "clamp(1.25rem, 4vw, 1.75rem)",
+      fontWeight: 500,
+      fontFamily: "monospace",
+      letterSpacing: "0.12em",
+      color: theme.accent
+    }, children: couponCode })
+  ] }) });
 }
-function COAModal({ coa, theme, onClose }) {
-  return /* @__PURE__ */ jsxs("div", { style: { position: "fixed", inset: 0, zIndex: 9999, background: "rgba(0,0,0,0.95)", display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ jsxs("div", { style: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      padding: "0.75rem 1rem",
-      borderBottom: `1px solid ${theme.fg}10`
-    }, children: [
-      /* @__PURE__ */ jsx("span", { style: { color: "#fff", fontWeight: 500, fontSize: "0.85rem" }, children: coa.document_name || "Lab Results" }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: onClose,
-          style: {
-            background: `${theme.fg}10`,
-            border: "none",
-            color: "#fff",
-            fontSize: "0.85rem",
-            cursor: "pointer",
-            padding: "0.375rem 0.75rem"
-          },
-          children: "Close"
+function SectionRenderer({
+  section,
+  data,
+  theme,
+  tracking,
+  onEvent
+}) {
+  const [showCOA, setShowCOA] = useState(false);
+  const el = (() => {
+    switch (section.type) {
+      case "hero":
+        return /* @__PURE__ */ jsx(HeroSection, { section, theme, tracking, onEvent });
+      case "text":
+        return /* @__PURE__ */ jsx(TextSection, { section, theme });
+      case "image":
+        return /* @__PURE__ */ jsx(ImageSection, { section, theme });
+      case "video":
+        return /* @__PURE__ */ jsx(VideoSection, { section, theme });
+      case "gallery":
+        return /* @__PURE__ */ jsx(GallerySection, { section, theme });
+      case "cta":
+        return /* @__PURE__ */ jsx(CTASection, { section, theme, tracking, onEvent });
+      case "stats":
+        return /* @__PURE__ */ jsx(StatsSection, { section, theme });
+      case "product_card":
+        return /* @__PURE__ */ jsx(ProductCardSection, { section, data, theme, tracking });
+      case "coa_viewer":
+        return /* @__PURE__ */ jsx(COAViewerSection, { section, data, theme, onShowCOA: () => setShowCOA(true), tracking });
+      case "social_links":
+        return /* @__PURE__ */ jsx(SocialLinksSection, { section, theme });
+      case "lead_capture":
+        return /* @__PURE__ */ jsx(LeadCaptureSection, { section, data, theme, onEvent });
+      case "divider":
+        return /* @__PURE__ */ jsx(DividerSection, { theme });
+      default:
+        return null;
+    }
+  })();
+  const sectionRef = useRef(null);
+  useEffect(() => {
+    const el2 = sectionRef.current;
+    if (!el2 || typeof IntersectionObserver === "undefined") return;
+    const obs = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          onEvent?.("section_view", { section_id: section.id, section_type: section.type });
+          obs.disconnect();
         }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("iframe", { src: coa.url, style: { flex: 1, border: "none", background: "#fff" }, title: "Lab Results" })
+      },
+      { threshold: 0.5 }
+    );
+    obs.observe(el2);
+    return () => obs.disconnect();
+  }, [section.id, section.type, onEvent]);
+  return /* @__PURE__ */ jsxs("div", { ref: sectionRef, "data-section-id": section.id, "data-section-type": section.type, children: [
+    el,
+    showCOA && data?.coa && /* @__PURE__ */ jsx(COAModal, { coa: data.coa, theme, onClose: () => setShowCOA(false) })
   ] });
 }
-function toEmbedUrl(url) {
-  const ytMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)/);
-  if (ytMatch) return `https://www.youtube.com/embed/${ytMatch[1]}`;
-  const vimeoMatch = url.match(/vimeo\.com\/(\d+)/);
-  if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}`;
-  return url;
-}
 function QRLandingPage({
   code,
   gatewayUrl = "https://whale-gateway.fly.dev",
@@ -3162,6 +3050,12 @@ function DefaultError({ message }) {
     /* @__PURE__ */ jsx("p", { style: { color: "#888" }, children: message || "Please try scanning again." })
   ] }) });
 }
+function getInlinedData() {
+  if (typeof window !== "undefined" && window.__LANDING_DATA__) {
+    return window.__LANDING_DATA__;
+  }
+  return null;
+}
 function LandingPage({
   slug,
   gatewayUrl = "https://whale-gateway.fly.dev",
@@ -3172,47 +3066,43 @@ function LandingPage({
   analyticsContext,
   enableAnalytics = true
 }) {
-  const [state, setState] = useState("loading");
-  const [data, setData] = useState(null);
+  const inlined = useRef(getInlinedData()).current;
+  const [state, setState] = useState(inlined ? "ready" : "loading");
+  const [data, setData] = useState(inlined);
   const [errorMsg, setErrorMsg] = useState("");
   useEffect(() => {
     if (!slug) return;
-    let cancelled = false;
-    if (typeof window !== "undefined" && window.__LANDING_DATA__) {
-      const json = window.__LANDING_DATA__;
-      setData(json);
-      setState("ready");
-      onDataLoaded?.(json);
+    if (data) {
+      onDataLoaded?.(data);
       return;
     }
+    let cancelled = false;
     async function load() {
       try {
         const res = await fetch(`${gatewayUrl}/l/${encodeURIComponent(slug)}`);
-        if (!cancelled) {
-          if (res.status === 404) {
-            setState("not_found");
-            return;
-          }
-          if (res.status === 410) {
-            setState("expired");
-            return;
-          }
-          if (!res.ok) {
-            const body = await res.json().catch(() => ({}));
-            throw new Error(body?.error?.message ?? `Failed to load: ${res.status}`);
-          }
-          const json = await res.json();
-          setData(json);
-          setState("ready");
-          onDataLoaded?.(json);
+        if (cancelled) return;
+        if (res.status === 404) {
+          setState("not_found");
+          return;
         }
-      } catch (err) {
-        if (!cancelled) {
-          const e = err instanceof Error ? err : new Error(String(err));
-          setErrorMsg(e.message);
-          setState("error");
-          onError?.(e);
+        if (res.status === 410) {
+          setState("expired");
+          return;
+        }
+        if (!res.ok) {
+          const body = await res.json().catch(() => ({}));
+          throw new Error(body?.error?.message ?? `Failed to load: ${res.status}`);
         }
+        const json = await res.json();
+        setData(json);
+        setState("ready");
+        onDataLoaded?.(json);
+      } catch (err) {
+        if (cancelled) return;
+        const e = err instanceof Error ? err : new Error(String(err));
+        setErrorMsg(e.message);
+        setState("error");
+        onError?.(e);
       }
     }
     load();
@@ -3220,12 +3110,22 @@ function LandingPage({
       cancelled = true;
     };
   }, [slug, gatewayUrl]);
-  if (state === "loading") return /* @__PURE__ */ jsx(DefaultLoading2, {});
-  if (state === "not_found") return /* @__PURE__ */ jsx(DefaultNotFound2, {});
-  if (state === "expired") return /* @__PURE__ */ jsx(DefaultExpired2, {});
-  if (state === "error") return /* @__PURE__ */ jsx(DefaultError2, { message: errorMsg });
+  if (state === "loading") return /* @__PURE__ */ jsx(StateScreen, { title: "", loading: true });
+  if (state === "not_found") return /* @__PURE__ */ jsx(StateScreen, { title: "Page Not Found", subtitle: "This page does not exist or has been removed." });
+  if (state === "expired") return /* @__PURE__ */ jsx(StateScreen, { title: "Page Expired", subtitle: "This page is no longer active." });
+  if (state === "error") return /* @__PURE__ */ jsx(StateScreen, { title: "Something Went Wrong", subtitle: errorMsg || "Please try again later." });
   if (!data) return null;
-  return /* @__PURE__ */ jsx(PageLayout, { data, gatewayUrl, renderSection, onEvent, analyticsContext, enableAnalytics });
+  return /* @__PURE__ */ jsx(
+    PageLayout,
+    {
+      data,
+      gatewayUrl,
+      renderSection,
+      onEvent,
+      analyticsContext,
+      enableAnalytics
+    }
+  );
 }
 function isSectionVisible(section, urlParams) {
   const vis = section.config?.visibility;
@@ -3248,8 +3148,8 @@ function PageLayout({
   const trackerRef = useRef(null);
   useEffect(() => {
     if (!enableAnalytics || typeof window === "undefined") return;
-    const analyticsConfig = window.__LANDING_ANALYTICS__;
-    if (!analyticsConfig?.slug) return;
+    const config = window.__LANDING_ANALYTICS__;
+    if (!config?.slug) return;
     let visitorId = localStorage.getItem("wt_vid") || "";
     if (!visitorId) {
       visitorId = crypto.randomUUID();
@@ -3261,8 +3161,8 @@ function PageLayout({
       sessionStorage.setItem("wt_sid", sessionId);
     }
     import('../tracker-34GTXU54.js').then(({ BehavioralTracker: BehavioralTracker2 }) => {
-      const gwUrl = analyticsConfig.gatewayUrl || gatewayUrl;
-      const slug = analyticsConfig.slug;
+      const gwUrl = config.gatewayUrl || gatewayUrl;
+      const slug = config.slug;
       const utmParams = new URLSearchParams(window.location.search);
       const tracker = new BehavioralTracker2({
         sessionId,
@@ -3273,65 +3173,44 @@ function PageLayout({
             event_data: e.data,
             session_id: batch.session_id,
             visitor_id: batch.visitor_id,
-            campaign_id: analyticsConfig.campaignId || utmParams.get("utm_campaign_id") || void 0,
+            campaign_id: config.campaignId || utmParams.get("utm_campaign_id") || void 0,
             utm_source: utmParams.get("utm_source") || void 0,
             utm_medium: utmParams.get("utm_medium") || void 0,
             utm_campaign: utmParams.get("utm_campaign") || void 0
           }));
-          const body = JSON.stringify({ events });
-          if (typeof navigator !== "undefined" && navigator.sendBeacon) {
-            navigator.sendBeacon(
-              `${gwUrl}/l/${encodeURIComponent(slug)}/events`,
-              new Blob([body], { type: "application/json" })
-            );
-          } else {
-            await fetch(`${gwUrl}/l/${encodeURIComponent(slug)}/events`, {
-              method: "POST",
-              headers: { "Content-Type": "application/json" },
-              body,
-              keepalive: true
-            });
-          }
+          sendEvents(gwUrl, slug, events);
         }
       });
       tracker.setPageContext(window.location.href, window.location.pathname);
       tracker.start();
       trackerRef.current = tracker;
-      const pageViewBody = JSON.stringify({
-        events: [{
-          event_type: "page_view",
-          event_data: { referrer: document.referrer, url: window.location.href },
-          session_id: sessionId,
-          visitor_id: visitorId,
-          campaign_id: analyticsConfig.campaignId || void 0,
-          utm_source: utmParams.get("utm_source") || void 0,
-          utm_medium: utmParams.get("utm_medium") || void 0,
-          utm_campaign: utmParams.get("utm_campaign") || void 0
-        }]
-      });
-      if (navigator.sendBeacon) {
-        navigator.sendBeacon(
-          `${gwUrl}/l/${encodeURIComponent(slug)}/events`,
-          new Blob([pageViewBody], { type: "application/json" })
-        );
-      } else {
-        fetch(`${gwUrl}/l/${encodeURIComponent(slug)}/events`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: pageViewBody,
-          keepalive: true
-        }).catch(() => {
-        });
-      }
+      sendEvents(gwUrl, slug, [{
+        event_type: "page_view",
+        event_data: { referrer: document.referrer, url: window.location.href },
+        session_id: sessionId,
+        visitor_id: visitorId,
+        campaign_id: config.campaignId || void 0
+      }]);
     }).catch(() => {
     });
     return () => {
-      if (trackerRef.current) {
-        trackerRef.current.stop();
-        trackerRef.current = null;
-      }
+      trackerRef.current?.stop();
+      trackerRef.current = null;
     };
   }, [enableAnalytics, gatewayUrl]);
+  const handleEvent = useCallback((event, eventData) => {
+    onEvent?.(event, eventData);
+    if (!enableAnalytics || typeof window === "undefined") return;
+    const config = window.__LANDING_ANALYTICS__;
+    if (!config?.slug) return;
+    sendEvents(config.gatewayUrl || gatewayUrl, config.slug, [{
+      event_type: event,
+      event_data: eventData,
+      session_id: sessionStorage.getItem("wt_sid") || void 0,
+      visitor_id: localStorage.getItem("wt_vid") || void 0,
+      campaign_id: config.campaignId || void 0
+    }]);
+  }, [onEvent, enableAnalytics, gatewayUrl]);
   const theme = {
     bg: lp.background_color || store?.theme?.background || "#050505",
     fg: lp.text_color || store?.theme?.foreground || "#fafafa",
@@ -3350,11 +3229,9 @@ function PageLayout({
     lp.custom_css && /* @__PURE__ */ jsx("style", { children: lp.custom_css }),
     logoUrl && /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx("img", { src: logoUrl, alt: store?.name || "Store", style: { height: 40, objectFit: "contain" } }) }),
     sorted.map((section) => {
-      const defaultRenderer = () => /* @__PURE__ */ jsx(SectionRenderer, { section, data: sectionData, theme, onEvent }, section.id);
-      if (renderSection) {
-        return /* @__PURE__ */ jsx("div", { children: renderSection(section, defaultRenderer) }, section.id);
-      }
-      return /* @__PURE__ */ jsx(SectionRenderer, { section, data: sectionData, theme, onEvent }, section.id);
+      const defaultRenderer = () => /* @__PURE__ */ jsx(SectionRenderer, { section, data: sectionData, theme, onEvent: handleEvent }, section.id);
+      if (renderSection) return /* @__PURE__ */ jsx("div", { children: renderSection(section, defaultRenderer) }, section.id);
+      return /* @__PURE__ */ jsx(SectionRenderer, { section, data: sectionData, theme, onEvent: handleEvent }, section.id);
     }),
     store?.name && /* @__PURE__ */ jsx("div", { style: { padding: "2rem 1.5rem", borderTop: `1px solid ${theme.surface}`, textAlign: "center" }, children: /* @__PURE__ */ jsxs("p", { style: { fontSize: "0.75rem", color: theme.muted, margin: 0 }, children: [
       "Powered by ",
@@ -3362,7 +3239,17 @@ function PageLayout({
     ] }) })
   ] });
 }
-var containerStyle2 = {
+function sendEvents(gwUrl, slug, events) {
+  const body = JSON.stringify({ events });
+  const url = `${gwUrl}/l/${encodeURIComponent(slug)}/events`;
+  if (typeof navigator !== "undefined" && navigator.sendBeacon) {
+    navigator.sendBeacon(url, new Blob([body], { type: "application/json" }));
+  } else {
+    fetch(url, { method: "POST", headers: { "Content-Type": "application/json" }, body, keepalive: true }).catch(() => {
+    });
+  }
+}
+var screenStyle = {
   minHeight: "100dvh",
   display: "flex",
   justifyContent: "center",
@@ -3373,28 +3260,14 @@ var containerStyle2 = {
   textAlign: "center",
   padding: "2rem"
 };
-function DefaultLoading2() {
-  return /* @__PURE__ */ jsx("div", { style: containerStyle2, children: /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { style: { width: 32, height: 32, border: "2px solid #333", borderTopColor: "#fafafa", borderRadius: "50%", animation: "spin 0.8s linear infinite", margin: "0 auto 1rem" } }),
-    /* @__PURE__ */ jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg) } }` })
-  ] }) });
-}
-function DefaultNotFound2() {
-  return /* @__PURE__ */ jsx("div", { style: containerStyle2, children: /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("h1", { style: { fontSize: "1.5rem", marginBottom: "0.5rem" }, children: "Page Not Found" }),
-    /* @__PURE__ */ jsx("p", { style: { color: "#888" }, children: "This page does not exist or has been removed." })
-  ] }) });
-}
-function DefaultExpired2() {
-  return /* @__PURE__ */ jsx("div", { style: containerStyle2, children: /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("h1", { style: { fontSize: "1.5rem", marginBottom: "0.5rem" }, children: "Page Expired" }),
-    /* @__PURE__ */ jsx("p", { style: { color: "#888" }, children: "This page is no longer active." })
-  ] }) });
-}
-function DefaultError2({ message }) {
-  return /* @__PURE__ */ jsx("div", { style: containerStyle2, children: /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("h1", { style: { fontSize: "1.5rem", marginBottom: "0.5rem" }, children: "Something Went Wrong" }),
-    /* @__PURE__ */ jsx("p", { style: { color: "#888" }, children: message || "Please try again later." })
+function StateScreen({ title, subtitle, loading }) {
+  return /* @__PURE__ */ jsx("div", { style: screenStyle, children: /* @__PURE__ */ jsxs("div", { children: [
+    loading && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { style: { width: 32, height: 32, border: "2px solid #333", borderTopColor: "#fafafa", borderRadius: "50%", animation: "spin 0.8s linear infinite", margin: "0 auto 1rem" } }),
+      /* @__PURE__ */ jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg) } }` })
+    ] }),
+    title && /* @__PURE__ */ jsx("h1", { style: { fontSize: "1.5rem", marginBottom: "0.5rem" }, children: title }),
+    subtitle && /* @__PURE__ */ jsx("p", { style: { color: "#888" }, children: subtitle })
   ] }) });
 }