@neowhale/storefront 0.2.34 → 0.2.36

package/dist/landing.global.js

@@ -1,4 +1,4 @@
-var WhaleStorefront = (function (exports, react, jsxRuntime) {
+var WhaleStorefront = (function (exports) {
   'use strict';
 
   var __defProp = Object.defineProperty;
@@ -345,14 +345,65 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
       };
     }
   });
-  var NUM_PATTERN = /(\$?[\d,]+\.?\d*[+★%]?)/g;
+
+  // src/shims/react-global.ts
+  var R = globalThis.React;
+  var {
+    createElement,
+    createContext,
+    forwardRef,
+    memo,
+    lazy,
+    useCallback,
+    useContext,
+    useEffect,
+    useId,
+    useImperativeHandle,
+    useLayoutEffect,
+    useMemo,
+    useReducer,
+    useRef,
+    useState,
+    Fragment,
+    Children,
+    cloneElement,
+    isValidElement,
+    Suspense,
+    startTransition,
+    useTransition,
+    useDeferredValue,
+    useSyncExternalStore,
+    useInsertionEffect,
+    useDebugValue
+  } = R;
+
+  // src/shims/jsx-runtime-global.ts
+  var R2 = globalThis.React;
+  var jsx = R2.createElement;
+  var jsxs = R2.createElement;
+  R2.createElement;
+  var Fragment2 = R2.Fragment;
+
+  // src/react/components/sections/shared.tsx
+  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);
   }
   function useCountUp(target, duration, start) {
-    const [value, setValue] = react.useState(0);
-    const raf = react.useRef(0);
-    react.useEffect(() => {
+    const [value, setValue] = useState(0);
+    const raf = useRef(0);
+    useEffect(() => {
       if (!start) return;
       const t0 = performance.now();
       function tick(now) {
@@ -367,9 +418,9 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
     return value;
   }
   function AnimatedNumber({ raw }) {
-    const ref = react.useRef(null);
-    const [visible, setVisible] = react.useState(false);
-    react.useEffect(() => {
+    const ref = useRef(null);
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
       const el = ref.current;
       if (!el || typeof IntersectionObserver === "undefined") {
         setVisible(true);
@@ -395,160 +446,84 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
       visible
     );
     const display = decimals > 0 ? (count / Math.pow(10, decimals)).toFixed(decimals) : hasCommas ? count.toLocaleString() : String(count);
-    return /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, children: [
+    return /* @__PURE__ */ jsxs("span", { ref, children: [
       prefix,
       display,
       suffix
     ] });
   }
   function AnimatedText({ text }) {
-    const parts = text.split(NUM_PATTERN);
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: parts.map(
-      (part, i) => NUM_PATTERN.test(part) ? /* @__PURE__ */ jsxRuntime.jsx(AnimatedNumber, { raw: part }, i) : part
+    const parts = text.split(NUM_SPLIT);
+    return /* @__PURE__ */ jsx(Fragment2, { children: parts.map(
+      (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] = react.useState(false);
-    const el = (() => {
-      switch (section.type) {
-        case "hero":
-          return /* @__PURE__ */ jsxRuntime.jsx(HeroSection, { section, theme, tracking, onEvent });
-        case "text":
-          return /* @__PURE__ */ jsxRuntime.jsx(TextSection, { section, theme });
-        case "image":
-          return /* @__PURE__ */ jsxRuntime.jsx(ImageSection, { section, theme });
-        case "video":
-          return /* @__PURE__ */ jsxRuntime.jsx(VideoSection, { section, theme });
-        case "gallery":
-          return /* @__PURE__ */ jsxRuntime.jsx(GallerySection, { section, theme });
-        case "cta":
-          return /* @__PURE__ */ jsxRuntime.jsx(CTASection, { section, theme, tracking, onEvent });
-        case "stats":
-          return /* @__PURE__ */ jsxRuntime.jsx(StatsSection, { section, theme });
-        case "product_card":
-          return /* @__PURE__ */ jsxRuntime.jsx(ProductCardSection, { section, data, theme, tracking });
-        case "coa_viewer":
-          return /* @__PURE__ */ jsxRuntime.jsx(COAViewerSection, { section, data, theme, onShowCOA: () => setShowCOA(true), tracking });
-        case "social_links":
-          return /* @__PURE__ */ jsxRuntime.jsx(SocialLinksSection, { section, theme });
-        case "lead_capture":
-          return /* @__PURE__ */ jsxRuntime.jsx(LeadCaptureSection, { section, data, theme, onEvent });
-        case "divider":
-          return /* @__PURE__ */ jsxRuntime.jsx(DividerSection, { theme });
-        default:
-          return null;
-      }
-    })();
-    const sectionRef = react.useRef(null);
-    react.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__ */ jsxRuntime.jsxs("div", { ref: sectionRef, "data-section-id": section.id, "data-section-type": section.type, children: [
-      el,
-      showCOA && data?.coa && /* @__PURE__ */ jsxRuntime.jsx(COAModal, { coa: data.coa, theme, onClose: () => setShowCOA(false) })
-    ] });
-  }
+
+  // src/react/components/sections/content-sections.tsx
   function HeroSection({ section, theme, tracking, onEvent }) {
     const { title, subtitle, background_image, cta_text, cta_url } = section.content;
-    return /* @__PURE__ */ jsxRuntime.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__ */ 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)",
-              fontWeight: 300,
-              fontFamily: theme.fontDisplay || "inherit",
-              margin: "0 0 1rem",
-              lineHeight: 1.15,
-              letterSpacing: "-0.02em",
-              color: theme.fg
-            }, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedText, { text: title }) }),
-            subtitle && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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;
     const align = section.config?.align || "left";
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "2rem 1.5rem", maxWidth: 640, margin: "0 auto", textAlign: align }, children: [
-      heading && /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
+    return /* @__PURE__ */ jsxs("div", { style: { padding: "2rem 1.5rem", maxWidth: 640, margin: "0 auto", textAlign: align }, children: [
+      heading && /* @__PURE__ */ jsx("h2", { style: {
         fontSize: 11,
         fontWeight: 500,
         textTransform: "uppercase",
@@ -556,65 +531,62 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
         color: `${theme.fg}40`,
         margin: "0 0 0.75rem"
       }, children: heading }),
-      body && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: `${theme.fg}99`, lineHeight: 1.7, fontSize: "0.9rem", fontWeight: 300, whiteSpace: "pre-wrap" }, children: body })
+      body && /* @__PURE__ */ jsx("div", { style: { color: `${theme.fg}99`, lineHeight: 1.7, fontSize: "0.9rem", fontWeight: 300, whiteSpace: "pre-wrap" }, children: body })
     ] });
   }
   function ImageSection({ section, theme }) {
     const { url, alt, caption } = section.content;
     const contained = section.config?.contained !== false;
     if (!url) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: contained ? "1.5rem" : 0, maxWidth: contained ? 640 : void 0, margin: contained ? "0 auto" : void 0 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "img",
-        {
-          src: url,
-          alt: alt || "",
-          style: { width: "100%", display: "block", objectFit: "cover" }
-        }
-      ),
-      caption && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.8rem", color: theme.muted, textAlign: "center", marginTop: "0.75rem" }, children: caption })
+    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" } }),
+      caption && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.8rem", color: theme.muted, textAlign: "center", marginTop: "0.75rem" }, children: caption })
     ] });
   }
   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__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", maxWidth: 640, margin: "0 auto" }, children: isEmbed ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", paddingBottom: "56.25%", height: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "iframe",
-      {
-        src: toEmbedUrl(url),
-        style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", border: "none" },
-        allow: "autoplay; fullscreen",
-        title: "Video"
-      }
-    ) }) : /* @__PURE__ */ jsxRuntime.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__ */ 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",
+    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;
+  }
+
+  // src/react/components/sections/interactive-sections.tsx
   function CTASection({ section, theme, tracking, onEvent }) {
     const { title, subtitle, buttons } = section.content;
     if (!buttons || buttons.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "2rem 1.5rem", maxWidth: 480, margin: "0 auto", display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
-      title && /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
+    return /* @__PURE__ */ jsxs("div", { style: { padding: "2rem 1.5rem", maxWidth: 480, margin: "0 auto", display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
+      title && /* @__PURE__ */ jsx("h2", { style: {
         fontSize: "clamp(1.25rem, 4vw, 1.5rem)",
         fontWeight: 300,
         fontFamily: theme.fontDisplay || "inherit",
@@ -624,7 +596,7 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
         color: theme.fg,
         textAlign: "center"
       }, children: title }),
-      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
+      subtitle && /* @__PURE__ */ jsx("p", { style: {
         fontSize: "0.8rem",
         color: theme.accent,
         margin: "0 0 0.75rem",
@@ -635,7 +607,7 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
       }, children: subtitle }),
       buttons.map((btn, i) => {
         const isPrimary = btn.style !== "outline";
-        return /* @__PURE__ */ jsxRuntime.jsx(
+        return /* @__PURE__ */ jsx(
           "a",
           {
             href: btn.url,
@@ -670,42 +642,28 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
     const layout = section.config?.layout;
     if (!stats || stats.length === 0) return null;
     if (layout === "list") {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", maxWidth: 640, margin: "0 auto" }, children: stats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "baseline",
-          padding: "0.625rem 0"
-        }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-            fontSize: 12,
-            textTransform: "uppercase",
-            letterSpacing: "0.15em",
-            color: `${theme.fg}66`
-          }, children: stat.label }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 14, fontWeight: 300, color: `${theme.fg}CC` }, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedText, { text: stat.value }) })
+      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__ */ jsx("span", { style: { fontSize: 14, fontWeight: 300, color: `${theme.fg}CC` }, children: /* @__PURE__ */ jsx(AnimatedText, { text: stat.value }) })
         ] }),
-        i < stats.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${theme.fg}0A`, margin: 0 } })
+        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__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", maxWidth: 640, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-      display: "grid",
-      gridTemplateColumns: `repeat(${columns}, 1fr)`,
-      border: `1px solid ${theme.fg}0F`
-    }, children: stats.map((stat, i) => /* @__PURE__ */ jsxRuntime.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
     }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      /* @__PURE__ */ jsx("div", { style: {
         fontFamily: theme.fontDisplay || "inherit",
         fontSize: "clamp(1.5rem, 5vw, 2rem)",
         fontWeight: 300,
         lineHeight: 1,
         color: theme.fg
-      }, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedText, { text: stat.value }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      }, children: /* @__PURE__ */ jsx(AnimatedText, { text: stat.value }) }),
+      /* @__PURE__ */ jsx("div", { style: {
         fontSize: 11,
         fontWeight: 500,
         textTransform: "uppercase",
@@ -722,12 +680,12 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
     const description = c.description || product?.description || "";
     const imageUrl = c.image_url || product?.featured_image || null;
     const url = c.url || null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", maxWidth: 480, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { background: theme.surface, overflow: "hidden" }, children: [
-      imageUrl && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%", aspectRatio: "1", overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: imageUrl, alt: name, style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "1.25rem" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { fontSize: "1.25rem", fontWeight: 600, margin: "0 0 0.5rem", color: theme.fg }, children: name }),
-        description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.9rem", color: theme.muted, margin: "0 0 1rem", lineHeight: 1.5 }, children: description }),
-        url && /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 480, margin: "0 auto" }, children: /* @__PURE__ */ jsxs("div", { style: { background: theme.surface, overflow: "hidden" }, children: [
+      imageUrl && /* @__PURE__ */ jsx("div", { style: { width: "100%", aspectRatio: "1", overflow: "hidden" }, children: /* @__PURE__ */ jsx("img", { src: imageUrl, alt: name, style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } }) }),
+      /* @__PURE__ */ jsxs("div", { style: { padding: "1.25rem" }, children: [
+        /* @__PURE__ */ jsx("h3", { style: { fontSize: "1.25rem", fontWeight: 600, margin: "0 0 0.5rem", color: theme.fg }, children: name }),
+        description && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.9rem", color: theme.muted, margin: "0 0 1rem", lineHeight: 1.5 }, children: description }),
+        url && /* @__PURE__ */ jsx(
           "a",
           {
             href: url,
@@ -752,13 +710,7 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
       ] })
     ] }) });
   }
-  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;
@@ -780,7 +732,7 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
     };
     const buttonLabel = c.button_text || "View Lab Results";
     if (coa.viewer_url) {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", maxWidth: 480, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 480, margin: "0 auto" }, children: /* @__PURE__ */ jsx(
         "a",
         {
           href: coa.viewer_url,
@@ -792,28 +744,56 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
         }
       ) });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", maxWidth: 480, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => {
+    return /* @__PURE__ */ jsx("div", { style: { padding: "1.5rem", maxWidth: 480, margin: "0 auto" }, children: /* @__PURE__ */ jsx("button", { onClick: () => {
       trackClick(tracking, buttonLabel, coa.url);
       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" })
+    ] });
+  }
+
+  // src/react/components/sections/lead-capture-section.tsx
   function LeadCaptureSection({ section, data, theme, onEvent }) {
     const c = section.content;
-    const [firstName, setFirstName] = react.useState("");
-    const [email, setEmail] = react.useState("");
-    const [newsletterOptIn, setNewsletterOptIn] = react.useState(false);
-    const [status, setStatus] = react.useState("idle");
-    const [errorMsg, setErrorMsg] = react.useState("");
+    const [firstName, setFirstName] = useState("");
+    const [email, setEmail] = useState("");
+    const [newsletterOptIn, setNewsletterOptIn] = useState(false);
+    const [status, setStatus] = useState("idle");
+    const [errorMsg, setErrorMsg] = useState("");
     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",
@@ -829,8 +809,8 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
               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,
@@ -848,11 +828,6 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
         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,
@@ -867,43 +842,12 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
       fontFamily: "inherit",
       transition: "border-color 0.2s"
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "3.5rem 1.5rem", maxWidth: 560, margin: "0 auto" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@keyframes lc-spin { to { transform: rotate(360deg) } }` }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-        background: theme.surface,
-        border: `1px solid ${theme.fg}12`,
-        padding: "clamp(2rem, 6vw, 3rem)"
-      }, children: status === "success" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center" }, children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", marginBottom: "clamp(1.5rem, 4vw, 2rem)" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: {
+    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__ */ 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)",
             fontWeight: 300,
             fontFamily: theme.fontDisplay || "inherit",
@@ -912,7 +856,7 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
             letterSpacing: "-0.02em",
             color: theme.fg
           }, children: heading }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
+          /* @__PURE__ */ jsx("p", { style: {
             fontSize: "0.85rem",
             color: theme.accent,
             margin: 0,
@@ -921,31 +865,12 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
             letterSpacing: "0.15em"
           }, children: subtitle })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "0.75rem", flexWrap: "wrap" }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "text",
-                placeholder: "First name",
-                value: firstName,
-                onChange: (e) => setFirstName(e.target.value),
-                style: inputStyle
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "email",
-                placeholder: "Email address",
-                value: email,
-                onChange: (e) => setEmail(e.target.value),
-                required: true,
-                style: inputStyle
-              }
-            )
+        /* @__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 })
           ] }),
-          c.show_newsletter_opt_in !== false && /* @__PURE__ */ jsxRuntime.jsxs("label", { style: {
+          c.show_newsletter_opt_in !== false && /* @__PURE__ */ jsxs("label", { style: {
             display: "flex",
             alignItems: "center",
             gap: "0.5rem",
@@ -955,126 +880,145 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
             fontWeight: 300,
             lineHeight: 1.4
           }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsx(
               "input",
               {
                 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__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.8rem", color: "#e55", margin: 0, fontWeight: 400 }, children: errorMsg }),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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
-              ]
-            }
-          )
+          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
+          ] })
         ] })
-      ] }) })
+      ] })
     ] });
   }
-  function SocialLinksSection({ section, theme }) {
-    const { links } = section.content;
-    if (!links || links.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", display: "flex", justifyContent: "center", gap: "1.5rem", flexWrap: "wrap" }, children: links.map((link, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: { padding: "1rem 1.5rem", maxWidth: 640, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { position: "fixed", inset: 0, zIndex: 9999, background: "rgba(0,0,0,0.95)", display: "flex", flexDirection: "column" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        padding: "0.75rem 1rem",
-        borderBottom: `1px solid ${theme.fg}10`
-      }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#fff", fontWeight: 500, fontSize: "0.85rem" }, children: coa.document_name || "Lab Results" }),
-        /* @__PURE__ */ jsxRuntime.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"
+
+  // src/react/components/section-renderer.tsx
+  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__ */ jsxRuntime.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;
+
+  // src/react/components/landing-page.tsx
+  function getInlinedData() {
+    if (typeof window !== "undefined" && window.__LANDING_DATA__) {
+      return window.__LANDING_DATA__;
+    }
+    return null;
   }
   function LandingPage({
     slug,
@@ -1086,47 +1030,43 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
     analyticsContext,
     enableAnalytics = true
   }) {
-    const [state, setState] = react.useState("loading");
-    const [data, setData] = react.useState(null);
-    const [errorMsg, setErrorMsg] = react.useState("");
-    react.useEffect(() => {
+    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();
@@ -1134,12 +1074,22 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
         cancelled = true;
       };
     }, [slug, gatewayUrl]);
-    if (state === "loading") return /* @__PURE__ */ jsxRuntime.jsx(DefaultLoading, {});
-    if (state === "not_found") return /* @__PURE__ */ jsxRuntime.jsx(DefaultNotFound, {});
-    if (state === "expired") return /* @__PURE__ */ jsxRuntime.jsx(DefaultExpired, {});
-    if (state === "error") return /* @__PURE__ */ jsxRuntime.jsx(DefaultError, { 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__ */ jsxRuntime.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;
@@ -1159,11 +1109,11 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
     enableAnalytics
   }) {
     const { landing_page: lp, store } = data;
-    const trackerRef = react.useRef(null);
-    react.useEffect(() => {
+    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();
@@ -1175,8 +1125,8 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
         sessionStorage.setItem("wt_sid", sessionId);
       }
       Promise.resolve().then(() => (init_tracker(), tracker_exports)).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,
@@ -1187,65 +1137,44 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
               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",
@@ -1260,23 +1189,31 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
     const urlParams = typeof window !== "undefined" ? new URLSearchParams(window.location.search) : new URLSearchParams();
     const sorted = [...lp.sections].sort((a, b) => a.order - b.order).filter((s) => isSectionVisible(s, urlParams));
     const sectionData = { ...data, gatewayUrl, landing_page: { slug: lp.slug }, analyticsContext };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { minHeight: "100dvh", background: theme.bg, color: theme.fg, fontFamily }, children: [
-      lp.custom_css && /* @__PURE__ */ jsxRuntime.jsx("style", { children: lp.custom_css }),
-      logoUrl && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoUrl, alt: store?.name || "Store", style: { height: 40, objectFit: "contain" } }) }),
+    return /* @__PURE__ */ jsxs("div", { style: { minHeight: "100dvh", background: theme.bg, color: theme.fg, fontFamily }, children: [
+      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__ */ jsxRuntime.jsx(SectionRenderer, { section, data: sectionData, theme, onEvent }, section.id);
-        if (renderSection) {
-          return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderSection(section, defaultRenderer) }, section.id);
-        }
-        return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: { padding: "2rem 1.5rem", borderTop: `1px solid ${theme.surface}`, textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { fontSize: "0.75rem", color: theme.muted, margin: 0 }, children: [
+      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 ",
         store.name
       ] }) })
     ] });
   }
-  var containerStyle = {
+  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",
@@ -1287,28 +1224,14 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
     textAlign: "center",
     padding: "2rem"
   };
-  function DefaultLoading() {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg) } }` })
-    ] }) });
-  }
-  function DefaultNotFound() {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { fontSize: "1.5rem", marginBottom: "0.5rem" }, children: "Page Not Found" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "#888" }, children: "This page does not exist or has been removed." })
-    ] }) });
-  }
-  function DefaultExpired() {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { fontSize: "1.5rem", marginBottom: "0.5rem" }, children: "Page Expired" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "#888" }, children: "This page is no longer active." })
-    ] }) });
-  }
-  function DefaultError({ message }) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { fontSize: "1.5rem", marginBottom: "0.5rem" }, children: "Something Went Wrong" }),
-      /* @__PURE__ */ jsxRuntime.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(Fragment2, { 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 })
     ] }) });
   }
 
@@ -1320,4 +1243,4 @@ var WhaleStorefront = (function (exports, react, jsxRuntime) {
 
   return exports;
 
-})({}, react, jsxRuntime);
+})({});