@neowhale/storefront 0.2.11 → 0.2.13

package/dist/react/index.cjs

@@ -1208,12 +1208,383 @@ function useCoupons() {
   }, []);
   return { validation, loading, error, validate, apply, remove, clear };
 }
+function SectionRenderer({
+  section,
+  data,
+  theme
+}) {
+  const [showCOA, setShowCOA] = react.useState(false);
+  const el = (() => {
+    switch (section.type) {
+      case "hero":
+        return /* @__PURE__ */ jsxRuntime.jsx(HeroSection, { section, theme });
+      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 });
+      case "stats":
+        return /* @__PURE__ */ jsxRuntime.jsx(StatsSection, { section, theme });
+      case "product_card":
+        return /* @__PURE__ */ jsxRuntime.jsx(ProductCardSection, { section, data, theme });
+      case "coa_viewer":
+        return /* @__PURE__ */ jsxRuntime.jsx(COAViewerSection, { section, data, theme, onShowCOA: () => setShowCOA(true) });
+      case "social_links":
+        return /* @__PURE__ */ jsxRuntime.jsx(SocialLinksSection, { section, theme });
+      case "divider":
+        return /* @__PURE__ */ jsxRuntime.jsx(DividerSection, { theme });
+      default:
+        return null;
+    }
+  })();
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    el,
+    showCOA && data?.coa && /* @__PURE__ */ jsxRuntime.jsx(COAModal, { coa: data.coa, theme, onClose: () => setShowCOA(false) })
+  ] });
+}
+function HeroSection({ section, theme }) {
+  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: title }),
+          subtitle && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: 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
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+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: {
+      fontSize: 11,
+      fontWeight: 500,
+      textTransform: "uppercase",
+      letterSpacing: "0.25em",
+      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 })
+  ] });
+}
+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 })
+  ] });
+}
+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 }
+    }
+  ) });
+}
+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",
+    {
+      src: img.url,
+      alt: img.alt || "",
+      style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+    }
+  ) }, i)) }) });
+}
+function CTASection({ section, theme }) {
+  const { buttons } = section.content;
+  if (!buttons || buttons.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "2rem 1.5rem", maxWidth: 480, margin: "0 auto", display: "flex", flexDirection: "column", gap: "0.75rem" }, children: buttons.map((btn, i) => {
+    const isPrimary = btn.style !== "outline";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: btn.url,
+        style: {
+          display: "block",
+          width: "100%",
+          padding: "0.875rem",
+          background: isPrimary ? theme.fg : "transparent",
+          color: isPrimary ? theme.bg : theme.fg,
+          border: isPrimary ? "none" : `1px solid ${theme.fg}20`,
+          fontSize: "0.85rem",
+          fontWeight: 500,
+          textAlign: "center",
+          textDecoration: "none",
+          boxSizing: "border-box",
+          letterSpacing: "0.08em",
+          textTransform: "uppercase"
+        },
+        children: btn.text
+      },
+      i
+    );
+  }) });
+}
+function StatsSection({ section, theme }) {
+  const { stats } = section.content;
+  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: stat.value })
+      ] }),
+      i < stats.length - 1 && /* @__PURE__ */ jsxRuntime.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: {
+    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: {
+      fontFamily: theme.fontDisplay || "inherit",
+      fontSize: "clamp(1.5rem, 5vw, 2rem)",
+      fontWeight: 300,
+      lineHeight: 1,
+      color: theme.fg
+    }, children: stat.value }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      fontSize: 11,
+      fontWeight: 500,
+      textTransform: "uppercase",
+      letterSpacing: "0.25em",
+      color: theme.accent,
+      marginTop: "0.5rem"
+    }, children: stat.label })
+  ] }, i)) }) });
+}
+function ProductCardSection({ section, data, theme }) {
+  const product = data?.product;
+  const c = section.content;
+  const name = c.name || product?.name || "";
+  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(
+        "a",
+        {
+          href: url,
+          style: {
+            display: "block",
+            width: "100%",
+            padding: "0.75rem",
+            background: theme.fg,
+            color: theme.bg,
+            textAlign: "center",
+            textDecoration: "none",
+            fontSize: "0.85rem",
+            fontWeight: 500,
+            boxSizing: "border-box",
+            letterSpacing: "0.08em",
+            textTransform: "uppercase"
+          },
+          children: "View Product"
+        }
+      )
+    ] })
+  ] }) });
+}
+function COAViewerSection({
+  section,
+  data,
+  theme,
+  onShowCOA
+}) {
+  const coa = data?.coa;
+  const c = section.content;
+  if (!coa) return null;
+  const buttonStyle = {
+    width: "100%",
+    padding: "0.875rem",
+    background: theme.accent,
+    color: theme.bg,
+    border: "none",
+    fontSize: "0.85rem",
+    fontWeight: 500,
+    cursor: "pointer",
+    letterSpacing: "0.08em",
+    textTransform: "uppercase",
+    textAlign: "center",
+    textDecoration: "none",
+    display: "block",
+    boxSizing: "border-box"
+  };
+  if (coa.viewer_url) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", maxWidth: 480, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: coa.viewer_url, target: "_blank", rel: "noopener noreferrer", style: buttonStyle, children: c.button_text || "View Lab Results" }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", maxWidth: 480, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onShowCOA, style: buttonStyle, children: c.button_text || "View Lab Results" }) });
+}
+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 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"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("iframe", { src: coa.url, style: { flex: 1, border: "none", background: "#fff" }, title: "Lab Results" })
+  ] });
+}
+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",
-  renderProduct,
-  renderCOA,
-  renderPage,
+  renderSection,
   onDataLoaded,
   onError
 }) {
@@ -1263,387 +1634,140 @@ function QRLandingPage({
   if (state === "expired") return /* @__PURE__ */ jsxRuntime.jsx(DefaultExpired, {});
   if (state === "error") return /* @__PURE__ */ jsxRuntime.jsx(DefaultError, { message: errorMsg });
   if (!data) return null;
-  if (renderPage) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderPage(data) });
-  return /* @__PURE__ */ jsxRuntime.jsx(ProductLanding, { data, renderProduct, renderCOA });
+  const lp = data.landing_page;
+  const sections = lp?.sections ?? buildDefaultSections(data);
+  const theme = extractTheme(data, lp);
+  const fontFamily = lp?.font_family || data.store?.theme?.fontDisplay || "system-ui, -apple-system, sans-serif";
+  const logoUrl = data.qr_code.logo_url || data.store?.logo_url;
+  const storeName = data.store?.name;
+  const sorted = [...sections].sort((a, b) => a.order - b.order);
+  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: storeName || "Store", style: { height: 40, objectFit: "contain" } }) }),
+    sorted.map((section) => {
+      const defaultRenderer = () => /* @__PURE__ */ jsxRuntime.jsx(SectionRenderer, { section, data, theme }, section.id);
+      if (renderSection) {
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderSection(section, defaultRenderer) }, section.id);
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(SectionRenderer, { section, data, theme }, section.id);
+    }),
+    storeName && /* @__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: [
+      storeName,
+      data.store?.tagline ? ` \u2014 ${data.store.tagline}` : ""
+    ] }) })
+  ] });
 }
-function extractTheme(data) {
-  const lp = data.qr_code.landing_page;
+function extractTheme(data, lp) {
   const t = data.store?.theme;
+  const qrLp = data.qr_code.landing_page;
   return {
-    bg: lp.background_color || t?.background || "#050505",
-    fg: lp.text_color || t?.foreground || "#fafafa",
-    accent: t?.accent || "#E8E2D9",
-    accentDark: t?.accentDark || "#C8BFB2",
-    surface: t?.surface || "#0C0C0C",
-    surfaceLight: t?.surfaceLight || "#141414",
-    muted: t?.muted || "#8A8A8A",
-    border: t?.border || "#1C1C1C",
+    bg: lp?.background_color || qrLp.background_color || t?.background || "#050505",
+    fg: lp?.text_color || qrLp.text_color || t?.foreground || "#fafafa",
+    accent: lp?.accent_color || t?.accent || "#E8E2D9",
+    surface: t?.surface || "#111",
+    muted: t?.muted || "#888",
     fontDisplay: t?.fontDisplay || "system-ui, -apple-system, sans-serif",
-    fontBody: t?.fontBody || "system-ui, -apple-system, sans-serif",
-    radius: t?.radius || "0px"
-  };
-}
-function ProductLanding({
-  data,
-  renderProduct,
-  renderCOA
-}) {
-  const { qr_code: qr, store, product, coa } = data;
-  const lp = qr.landing_page;
-  const theme = extractTheme(data);
-  const [showCOA, setShowCOA] = react.useState(false);
-  const logoUrl = qr.logo_url || store?.logo_url;
-  const productImage = lp.image_url || product?.featured_image || null;
-  const productName = lp.title || product?.name || qr.name;
-  const description = lp.description || product?.description || "";
-  const ctaUrl = lp.cta_url || qr.destination_url;
-  const categoryName = product?.category_name ?? null;
-  const cf = product?.custom_fields;
-  const thca = toNum(cf?.thca_percentage);
-  const thc = toNum(cf?.d9_percentage);
-  const cbd = toNum(cf?.cbd_total);
-  const strainType = toStr(cf?.strain_type);
-  const batchNumber = toStr(cf?.batch_number);
-  const dateTested = toStr(cf?.date_tested);
-  const terpenes = toStr(cf?.terpenes);
-  const effects = toStr(cf?.effects);
-  const genetics = toStr(cf?.genetics);
-  const tagline = toStr(cf?.tagline);
-  const handleCOAClick = react.useCallback(() => {
-    if (coa) setShowCOA(true);
-  }, [coa]);
-  const labelStyle = {
-    fontSize: 11,
-    fontWeight: 500,
-    textTransform: "uppercase",
-    letterSpacing: "0.25em",
-    color: `${theme.fg}40`
-    // 40 = 25% opacity
-  };
-  const dividerStyle = {
-    border: "none",
-    borderTop: `1px solid ${theme.fg}0A`,
-    // 0A = 4% opacity
-    margin: 0
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-    minHeight: "100dvh",
-    background: theme.bg,
-    color: theme.fg,
-    fontFamily: theme.fontBody
-  }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("nav", { style: {
-      padding: "1.25rem 1.5rem",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      maxWidth: 1280,
-      margin: "0 auto"
-    }, children: [
-      logoUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoUrl, alt: store?.name || "", style: { height: 28, objectFit: "contain" } }) : store?.name ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontFamily: theme.fontDisplay, fontWeight: 600, fontSize: "1rem", letterSpacing: "-0.02em" }, children: store.name }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "a",
-        {
-          href: ctaUrl,
-          style: {
-            fontSize: 11,
-            fontWeight: 500,
-            textTransform: "uppercase",
-            letterSpacing: "0.15em",
-            color: theme.fg,
-            textDecoration: "none",
-            padding: "0.5rem 1.25rem",
-            border: `1px solid ${theme.fg}10`,
-            transition: "border-color 0.3s"
-          },
-          children: "Shop"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("main", { style: { maxWidth: 560, margin: "0 auto", padding: "0 1.5rem 3rem" }, children: [
-      productImage && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-        width: "100%",
-        aspectRatio: "1",
-        overflow: "hidden",
-        background: theme.surfaceLight,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: "2rem"
-      }, children: /* @__PURE__ */ jsxRuntime.jsx(
-        "img",
-        {
-          src: productImage,
-          alt: productName,
-          style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "1.5rem", display: "flex", gap: "0.75rem", alignItems: "center" }, children: [
-        categoryName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-          fontSize: 11,
-          fontWeight: 500,
-          color: theme.accent,
-          textTransform: "uppercase",
-          letterSpacing: "0.15em"
-        }, children: categoryName }),
-        strainType && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-          fontSize: 10,
-          fontWeight: 600,
-          textTransform: "uppercase",
-          letterSpacing: "0.08em",
-          padding: "0.2rem 0.5rem",
-          background: strainBadgeColor(strainType),
-          color: "#fff"
-        }, children: strainType })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { style: {
-        fontFamily: theme.fontDisplay,
-        fontSize: "clamp(2rem, 8vw, 3rem)",
-        fontWeight: 300,
-        margin: "0.5rem 0 0",
-        lineHeight: 1.1,
-        letterSpacing: "-0.02em"
-      }, children: productName }),
-      tagline && /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
-        fontFamily: theme.fontDisplay,
-        fontSize: "1.1rem",
-        fontWeight: 300,
-        color: `${theme.fg}80`,
-        margin: "0.5rem 0 0"
-      }, children: tagline }),
-      renderProduct ? renderProduct(data) : null,
-      (thca != null || thc != null || cbd != null) && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-        marginTop: "1.75rem",
-        border: `1px solid ${theme.fg}0F`,
-        display: "grid",
-        gridTemplateColumns: `repeat(${[thca, thc, cbd].filter((v) => v != null).length}, 1fr)`
-      }, children: [
-        thca != null && /* @__PURE__ */ jsxRuntime.jsx(CannabinoidStat, { label: "THCa", value: thca, theme, showBorder: thc != null || cbd != null }),
-        thc != null && /* @__PURE__ */ jsxRuntime.jsx(CannabinoidStat, { label: "\u03949 THC", value: thc, theme, showBorder: cbd != null }),
-        cbd != null && /* @__PURE__ */ jsxRuntime.jsx(CannabinoidStat, { label: "CBD", value: cbd, theme, showBorder: false })
-      ] }),
-      (genetics || terpenes || effects || batchNumber || dateTested) && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "1.75rem" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { ...labelStyle, marginBottom: "0.75rem" }, children: "Details" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          genetics && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: "Genetics", value: genetics, theme }),
-            /* @__PURE__ */ jsxRuntime.jsx("hr", { style: dividerStyle })
-          ] }),
-          terpenes && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: "Terpenes", value: terpenes, theme }),
-            /* @__PURE__ */ jsxRuntime.jsx("hr", { style: dividerStyle })
-          ] }),
-          effects && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: "Effects", value: effects, theme }),
-            /* @__PURE__ */ jsxRuntime.jsx("hr", { style: dividerStyle })
-          ] }),
-          batchNumber && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: "Batch", value: batchNumber, theme }),
-            /* @__PURE__ */ jsxRuntime.jsx("hr", { style: dividerStyle })
-          ] }),
-          dateTested && /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: "Tested", value: formatDate(dateTested), theme })
-        ] })
-      ] }),
-      description && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "1.75rem" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { ...labelStyle, marginBottom: "0.75rem" }, children: "About" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
-          fontSize: "0.9rem",
-          fontWeight: 300,
-          color: `${theme.fg}99`,
-          lineHeight: 1.7,
-          margin: 0
-        }, children: description })
-      ] }),
-      coa && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "1.75rem" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { ...labelStyle, marginBottom: "0.75rem" }, children: "Lab Results" }),
-        batchNumber && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { fontSize: 12, color: `${theme.fg}60`, margin: "0 0 0.5rem", letterSpacing: "0.05em" }, children: [
-          "Batch ",
-          batchNumber,
-          dateTested ? ` \xB7 ${formatDate(dateTested)}` : ""
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            onClick: handleCOAClick,
-            style: {
-              width: "100%",
-              position: "relative",
-              height: 180,
-              border: `1px solid ${theme.fg}0F`,
-              background: theme.surface,
-              cursor: "pointer",
-              overflow: "hidden",
-              padding: 0,
-              display: "block"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "iframe",
-                {
-                  src: coa.url,
-                  style: {
-                    width: "200%",
-                    height: "200%",
-                    border: "none",
-                    transform: "scale(0.5)",
-                    transformOrigin: "top left",
-                    pointerEvents: "none"
-                  },
-                  title: "COA Preview",
-                  tabIndex: -1
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-                position: "absolute",
-                inset: 0,
-                background: `linear-gradient(to top, ${theme.bg}E6 0%, transparent 60%)`,
-                display: "flex",
-                alignItems: "flex-end",
-                justifyContent: "center",
-                paddingBottom: "1.25rem"
-              }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-                fontSize: 11,
-                fontWeight: 500,
-                textTransform: "uppercase",
-                letterSpacing: "0.2em",
-                color: theme.accent
-              }, children: "View Certificate of Analysis" }) })
-            ]
-          }
-        )
-      ] }),
-      renderCOA ? renderCOA(data) : null,
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "a",
-        {
-          href: ctaUrl,
-          style: {
-            display: "block",
-            width: "100%",
-            marginTop: "2rem",
-            padding: "1rem",
-            background: theme.fg,
-            color: theme.bg,
-            fontFamily: theme.fontDisplay,
-            fontSize: "0.85rem",
-            fontWeight: 500,
-            textAlign: "center",
-            textDecoration: "none",
-            letterSpacing: "0.08em",
-            textTransform: "uppercase",
-            boxSizing: "border-box"
-          },
-          children: "Shop Online"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("footer", { style: {
-        marginTop: "3rem",
-        paddingTop: "1.5rem",
-        borderTop: `1px solid ${theme.fg}0A`,
-        textAlign: "center"
-      }, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "center", gap: "2rem", marginBottom: "0.75rem" }, children: [
-          coa && /* @__PURE__ */ jsxRuntime.jsx(FooterLabel, { text: "Lab Verified" }),
-          /* @__PURE__ */ jsxRuntime.jsx(FooterLabel, { text: "Authentic Product" })
-        ] }),
-        store?.name && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { fontSize: 11, color: `${theme.fg}40`, margin: "0.5rem 0 0", letterSpacing: "0.1em" }, children: [
-          store.name,
-          store?.tagline ? ` \u2014 ${store.tagline}` : ""
-        ] })
-      ] })
-    ] }),
-    showCOA && coa && /* @__PURE__ */ jsxRuntime.jsx(COAModal, { coa, theme, onClose: () => setShowCOA(false) })
-  ] });
-}
-function CannabinoidStat({ label, value, theme, showBorder }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-    padding: "1.25rem 0.5rem",
-    textAlign: "center",
-    borderRight: showBorder ? `1px solid ${theme.fg}0F` : void 0
-  }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-      fontFamily: theme.fontDisplay,
-      fontSize: "clamp(1.5rem, 5vw, 2rem)",
-      fontWeight: 300,
-      lineHeight: 1,
-      color: theme.fg
-    }, children: [
-      value.toFixed(value >= 1 ? 1 : 2),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.6em", marginLeft: 1 }, children: "%" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-      fontSize: 11,
-      fontWeight: 500,
-      textTransform: "uppercase",
-      letterSpacing: "0.25em",
-      color: theme.accent,
-      marginTop: "0.5rem"
-    }, children: label })
-  ] });
-}
-function DetailRow({ label, value, theme }) {
-  return /* @__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: label }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-      fontSize: 14,
-      fontWeight: 300,
-      color: `${theme.fg}CC`
-    }, children: value })
-  ] });
-}
-function FooterLabel({ text }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-    fontSize: 10,
-    textTransform: "uppercase",
-    letterSpacing: "0.15em",
-    color: "rgba(255,255,255,0.25)"
-  }, children: text });
-}
-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",
-        fontFamily: theme.fontDisplay,
-        fontWeight: 500,
-        fontSize: "0.85rem",
-        letterSpacing: "-0.01em"
-      }, 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",
-            letterSpacing: "0.05em"
-          },
-          children: "Close"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("iframe", { src: coa.url, style: { flex: 1, border: "none", background: "#fff" }, title: "Lab Results" })
-  ] });
+    fontBody: t?.fontBody || "system-ui, -apple-system, sans-serif"
+  };
+}
+function buildDefaultSections(data) {
+  const { product, coa, qr_code: qr } = data;
+  const cf = product?.custom_fields;
+  const sections = [];
+  let order = 0;
+  const productName = qr.landing_page.title || product?.name || qr.name;
+  const productImage = qr.landing_page.image_url || product?.featured_image || null;
+  const description = qr.landing_page.description || product?.description || "";
+  const ctaUrl = qr.landing_page.cta_url || qr.destination_url;
+  const categoryName = product?.category_name ?? null;
+  const strainType = toStr(cf?.strain_type);
+  if (productImage) {
+    sections.push({
+      id: "auto-hero",
+      type: "hero",
+      order: order++,
+      content: {
+        title: productName,
+        subtitle: [categoryName, strainType].filter(Boolean).join(" \xB7 "),
+        background_image: productImage,
+        cta_text: qr.landing_page.cta_text || null,
+        cta_url: ctaUrl
+      }
+    });
+  } else {
+    sections.push({
+      id: "auto-header",
+      type: "text",
+      order: order++,
+      content: {
+        heading: productName,
+        body: [categoryName, strainType].filter(Boolean).join(" \xB7 ") || void 0
+      },
+      config: { align: "center" }
+    });
+  }
+  const thca = toNum(cf?.thca_percentage);
+  const thc = toNum(cf?.d9_percentage);
+  const cbd = toNum(cf?.cbd_total);
+  const stats = [];
+  if (thca != null) stats.push({ label: "THCa", value: `${thca.toFixed(thca >= 1 ? 1 : 2)}%` });
+  if (thc != null) stats.push({ label: "\u03949 THC", value: `${thc.toFixed(thc >= 1 ? 1 : 2)}%` });
+  if (cbd != null) stats.push({ label: "CBD", value: `${cbd.toFixed(cbd >= 1 ? 1 : 2)}%` });
+  if (stats.length > 0) {
+    sections.push({
+      id: "auto-stats",
+      type: "stats",
+      order: order++,
+      content: { stats }
+    });
+  }
+  const details = [];
+  const genetics = toStr(cf?.genetics);
+  const terpenes = toStr(cf?.terpenes);
+  const effects = toStr(cf?.effects);
+  const batchNumber = toStr(cf?.batch_number);
+  const dateTested = toStr(cf?.date_tested);
+  if (genetics) details.push({ label: "Genetics", value: genetics });
+  if (terpenes) details.push({ label: "Terpenes", value: terpenes });
+  if (effects) details.push({ label: "Effects", value: effects });
+  if (batchNumber) details.push({ label: "Batch", value: batchNumber });
+  if (dateTested) details.push({ label: "Tested", value: formatDate(dateTested) });
+  if (details.length > 0) {
+    sections.push({
+      id: "auto-details",
+      type: "stats",
+      order: order++,
+      content: { stats: details },
+      config: { layout: "list" }
+    });
+  }
+  if (description) {
+    sections.push({
+      id: "auto-description",
+      type: "text",
+      order: order++,
+      content: { heading: "About", body: description }
+    });
+  }
+  if (coa) {
+    sections.push({
+      id: "auto-coa",
+      type: "coa_viewer",
+      order: order++,
+      content: { button_text: "View Lab Results" }
+    });
+  }
+  if (ctaUrl) {
+    sections.push({
+      id: "auto-cta",
+      type: "cta",
+      order: order++,
+      content: {
+        buttons: [{ text: qr.landing_page.cta_text || "Shop Online", url: ctaUrl, style: "primary" }]
+      }
+    });
+  }
+  return sections;
 }
 function toNum(v) {
   if (v === "" || v == null) return null;
@@ -1654,13 +1778,6 @@ function toStr(v) {
   if (v == null || v === "") return null;
   return String(v);
 }
-function strainBadgeColor(strain) {
-  const s = strain.toLowerCase();
-  if (s === "sativa") return "#22c55e";
-  if (s === "indica") return "#8b5cf6";
-  if (s === "hybrid") return "#f59e0b";
-  return "#6b7280";
-}
 function formatDate(dateStr) {
   try {
     const d = /* @__PURE__ */ new Date(dateStr + "T00:00:00");
@@ -1764,365 +1881,34 @@ function PageLayout({
   renderSection
 }) {
   const { landing_page: lp, store } = data;
-  const [showCOA, setShowCOA] = react.useState(false);
   const theme = {
     bg: lp.background_color || store?.theme?.background || "#050505",
     fg: lp.text_color || store?.theme?.foreground || "#fafafa",
     accent: lp.accent_color || store?.theme?.accent || "#E8E2D9",
     surface: store?.theme?.surface || "#111",
-    muted: store?.theme?.muted || "#888"
+    muted: store?.theme?.muted || "#888",
+    fontDisplay: store?.theme?.fontDisplay || void 0,
+    fontBody: store?.theme?.fontBody || void 0
   };
-  const fontFamily = lp.font_family || "system-ui, -apple-system, sans-serif";
+  const fontFamily = lp.font_family || theme.fontDisplay || "system-ui, -apple-system, sans-serif";
   const logoUrl = store?.logo_url;
   const sorted = [...lp.sections].sort((a, b) => a.order - b.order);
   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" }
-      }
-    ) }),
+    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" } }) }),
     sorted.map((section) => {
-      const defaultRenderer = () => /* @__PURE__ */ jsxRuntime.jsx(
-        DefaultSectionRenderer,
-        {
-          section,
-          data,
-          theme,
-          onShowCOA: () => setShowCOA(true)
-        },
-        section.id
-      );
+      const defaultRenderer = () => /* @__PURE__ */ jsxRuntime.jsx(SectionRenderer, { section, data, theme }, section.id);
       if (renderSection) {
         return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderSection(section, defaultRenderer) }, section.id);
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        DefaultSectionRenderer,
-        {
-          section,
-          data,
-          theme,
-          onShowCOA: () => setShowCOA(true)
-        },
-        section.id
-      );
+      return /* @__PURE__ */ jsxRuntime.jsx(SectionRenderer, { section, data, theme }, 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: [
       "Powered by ",
       store.name
-    ] }) }),
-    showCOA && data.coa && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        style: {
-          position: "fixed",
-          inset: 0,
-          zIndex: 9999,
-          background: "rgba(0,0,0,0.9)",
-          display: "flex",
-          flexDirection: "column"
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "1rem" }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#fff", fontWeight: 600 }, children: data.coa.document_name || "Lab Results" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: () => setShowCOA(false),
-                style: { background: "none", border: "none", color: "#fff", fontSize: "1.5rem", cursor: "pointer", padding: "0.5rem" },
-                children: "\u2715"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "iframe",
-            {
-              src: data.coa.url,
-              style: { flex: 1, border: "none", background: "#fff" },
-              title: "Lab Results"
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-function DefaultSectionRenderer({
-  section,
-  data,
-  theme,
-  onShowCOA
-}) {
-  switch (section.type) {
-    case "hero":
-      return /* @__PURE__ */ jsxRuntime.jsx(HeroSection, { section, theme });
-    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 });
-    case "stats":
-      return /* @__PURE__ */ jsxRuntime.jsx(StatsSection, { section, theme });
-    case "product_card":
-      return /* @__PURE__ */ jsxRuntime.jsx(ProductCardSection, { section, data, theme });
-    case "coa_viewer":
-      return /* @__PURE__ */ jsxRuntime.jsx(COAViewerSection, { section, data, theme, onShowCOA });
-    case "social_links":
-      return /* @__PURE__ */ jsxRuntime.jsx(SocialLinksSection, { section, theme });
-    case "divider":
-      return /* @__PURE__ */ jsxRuntime.jsx(DividerSection, { theme });
-    default:
-      return null;
-  }
-}
-function HeroSection({ section, theme }) {
-  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: "2.5rem", fontWeight: 700, margin: "0 0 1rem", lineHeight: 1.15, color: theme.fg }, children: title }),
-          subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "1.125rem", color: theme.muted, margin: "0 0 2rem", lineHeight: 1.6 }, children: subtitle }),
-          cta_text && cta_url && /* @__PURE__ */ jsxRuntime.jsx(
-            "a",
-            {
-              href: cta_url,
-              style: {
-                display: "inline-block",
-                padding: "0.875rem 2rem",
-                background: theme.accent,
-                color: theme.bg,
-                textDecoration: "none",
-                fontSize: "0.95rem",
-                fontWeight: 600,
-                borderRadius: 0
-              },
-              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: { fontSize: "1.5rem", fontWeight: 600, margin: "0 0 1rem", color: theme.fg }, children: heading }),
-    body && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: theme.muted, lineHeight: 1.7, fontSize: "0.95rem", 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 })
+    ] }) })
   ] });
 }
-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 }
-    }
-  ) });
-}
-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",
-    {
-      src: img.url,
-      alt: img.alt || "",
-      style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
-    }
-  ) }, i)) }) });
-}
-function CTASection({ section, theme }) {
-  const { buttons } = section.content;
-  if (!buttons || buttons.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "2rem 1.5rem", maxWidth: 480, margin: "0 auto", display: "flex", flexDirection: "column", gap: "0.75rem" }, children: buttons.map((btn, i) => {
-    const isPrimary = btn.style !== "outline";
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "a",
-      {
-        href: btn.url,
-        style: {
-          display: "block",
-          width: "100%",
-          padding: "0.875rem",
-          background: isPrimary ? theme.accent : "transparent",
-          color: isPrimary ? theme.bg : theme.fg,
-          border: isPrimary ? "none" : `1px solid ${theme.muted}`,
-          fontSize: "0.95rem",
-          fontWeight: 600,
-          textAlign: "center",
-          textDecoration: "none",
-          boxSizing: "border-box",
-          borderRadius: 0
-        },
-        children: btn.text
-      },
-      i
-    );
-  }) });
-}
-function StatsSection({ section, theme }) {
-  const { stats } = section.content;
-  if (!stats || stats.length === 0) return null;
-  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)`, gap: "0.75rem" }, children: stats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { background: theme.surface, padding: "1rem", textAlign: "center" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "1.25rem", fontWeight: 700, color: theme.fg }, children: stat.value }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.7rem", color: theme.accent, textTransform: "uppercase", letterSpacing: "0.05em", marginTop: "0.25rem" }, children: stat.label })
-  ] }, i)) }) });
-}
-function ProductCardSection({ section, data, theme }) {
-  const product = data.product;
-  const c = section.content;
-  const name = c.name || product?.name || "";
-  const description = c.description || product?.description || "";
-  const price = c.price || null;
-  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 }),
-      price && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "1.125rem", fontWeight: 700, color: theme.accent, margin: "0 0 1rem" }, children: price }),
-      url && /* @__PURE__ */ jsxRuntime.jsx(
-        "a",
-        {
-          href: url,
-          style: {
-            display: "block",
-            width: "100%",
-            padding: "0.75rem",
-            background: theme.accent,
-            color: theme.bg,
-            textAlign: "center",
-            textDecoration: "none",
-            fontSize: "0.9rem",
-            fontWeight: 600,
-            boxSizing: "border-box",
-            borderRadius: 0
-          },
-          children: "View Product"
-        }
-      )
-    ] })
-  ] }) });
-}
-function COAViewerSection({
-  section,
-  data,
-  theme,
-  onShowCOA
-}) {
-  const coa = data.coa;
-  const c = section.content;
-  if (!coa) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "1.5rem", maxWidth: 480, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      onClick: onShowCOA,
-      style: {
-        width: "100%",
-        padding: "0.875rem",
-        background: theme.accent,
-        color: theme.bg,
-        border: "none",
-        fontSize: "0.95rem",
-        fontWeight: 600,
-        cursor: "pointer",
-        borderRadius: 0
-      },
-      children: c.button_text || "View Lab Results"
-    }
-  ) });
-}
-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",
-        transition: "color 0.15s"
-      },
-      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.surface}`, 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;
-}
 var containerStyle2 = {
   minHeight: "100dvh",
   display: "flex",
@@ -2165,6 +1951,7 @@ exports.CartInitializer = CartInitializer;
 exports.LandingPage = LandingPage;
 exports.PixelInitializer = PixelInitializer;
 exports.QRLandingPage = QRLandingPage;
+exports.SectionRenderer = SectionRenderer;
 exports.WhaleContext = WhaleContext;
 exports.WhaleProvider = WhaleProvider;
 exports.useAnalytics = useAnalytics;