@neowhale/storefront 0.2.8 → 0.2.10

package/dist/react/index.js

@@ -1262,25 +1262,34 @@ function QRLandingPage({
   if (state === "error") return /* @__PURE__ */ jsx(DefaultError, { message: errorMsg });
   if (!data) return null;
   if (renderPage) return /* @__PURE__ */ jsx(Fragment, { children: renderPage(data) });
-  return /* @__PURE__ */ jsx(DefaultLayout, { data, renderProduct, renderCOA });
+  return /* @__PURE__ */ jsx(ProductLanding, { data, renderProduct, renderCOA });
 }
-function DefaultLayout({
+function extractTheme(data) {
+  const lp = data.qr_code.landing_page;
+  const t = data.store?.theme;
+  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",
+    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] = useState(false);
-  const bg = lp.background_color || store?.theme?.background || "#050505";
-  const fg = lp.text_color || store?.theme?.foreground || "#fafafa";
-  const accent = store?.theme?.accent || qr.brand_color || "#E8E2D9";
-  const surface = store?.theme?.surface || "#0C0C0C";
-  const surfaceLight = store?.theme?.surfaceLight || "#141414";
-  const muted = store?.theme?.muted || "#888";
-  const border = store?.theme?.border || "#1C1C1C";
-  const fontDisplay = store?.theme?.fontDisplay || "system-ui, -apple-system, sans-serif";
-  const fontBody = store?.theme?.fontBody || "system-ui, -apple-system, sans-serif";
   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;
@@ -1288,310 +1297,390 @@ function DefaultLayout({
   const ctaUrl = lp.cta_url || qr.destination_url;
   const categoryName = product?.category_name ?? null;
   const cf = product?.custom_fields;
-  const thca = cf?.thca_percentage ?? null;
-  const thc = cf?.d9_percentage ?? null;
-  const cbd = cf?.cbd_total ?? null;
-  const strainType = cf?.strain_type ?? null;
-  const batchNumber = cf?.batch_number ?? null;
-  const dateTested = cf?.date_tested ?? null;
-  const terpenes = cf?.terpenes ?? null;
-  const effects = cf?.effects ?? null;
-  const genetics = cf?.genetics ?? null;
-  const tagline = cf?.tagline ?? null;
-  const pricingData = product?.pricing_data;
-  const tiers = pricingData?.tiers?.sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0)) ?? [];
+  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 rawPricing = product?.pricing_data;
+  const tiers = (Array.isArray(rawPricing) ? rawPricing : rawPricing?.tiers ?? []).sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0));
   const lowestPrice = tiers.length > 0 ? Math.min(...tiers.map((t) => t.default_price)) : null;
   const handleCOAClick = useCallback(() => {
     if (coa) setShowCOA(true);
   }, [coa]);
-  return /* @__PURE__ */ jsxs("div", { style: { minHeight: "100dvh", background: bg, color: fg, fontFamily: fontBody }, children: [
-    /* @__PURE__ */ jsxs("header", { style: {
-      padding: "1rem 1.5rem",
+  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__ */ jsxs("div", { style: {
+    minHeight: "100dvh",
+    background: theme.bg,
+    color: theme.fg,
+    fontFamily: theme.fontBody
+  }, children: [
+    /* @__PURE__ */ jsxs("nav", { style: {
+      padding: "1.25rem 1.5rem",
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
-      borderBottom: `1px solid ${border}`
+      maxWidth: 1280,
+      margin: "0 auto"
     }, children: [
-      logoUrl ? /* @__PURE__ */ jsx("img", { src: logoUrl, alt: store?.name || "Store", style: { height: 32, objectFit: "contain" } }) : /* @__PURE__ */ jsx("span", { style: { fontFamily: fontDisplay, fontWeight: 600, fontSize: "1.1rem" }, children: store?.name || "" }),
-      store?.name && logoUrl && /* @__PURE__ */ jsx("span", { style: { fontSize: "0.75rem", color: muted, fontWeight: 500 }, children: store.name })
+      logoUrl ? /* @__PURE__ */ jsx("img", { src: logoUrl, alt: store?.name || "", style: { height: 28, objectFit: "contain" } }) : store?.name ? /* @__PURE__ */ jsx("span", { style: { fontFamily: theme.fontDisplay, fontWeight: 600, fontSize: "1rem", letterSpacing: "-0.02em" }, children: store.name }) : /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ 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__ */ jsxs("div", { style: {
-      display: "flex",
-      flexDirection: "column",
-      maxWidth: 640,
-      margin: "0 auto",
-      padding: "0 1.5rem"
-    }, children: [
+    /* @__PURE__ */ jsxs("main", { style: { maxWidth: 560, margin: "0 auto", padding: "0 1.5rem 3rem" }, children: [
       productImage && /* @__PURE__ */ jsx("div", { style: {
-        marginTop: "1.5rem",
-        borderRadius: 8,
+        width: "100%",
+        aspectRatio: "1",
         overflow: "hidden",
-        background: surface,
-        aspectRatio: "4/3",
-        maxHeight: 320,
+        background: theme.surfaceLight,
         display: "flex",
         alignItems: "center",
-        justifyContent: "center"
+        justifyContent: "center",
+        padding: "2rem"
       }, children: /* @__PURE__ */ jsx(
         "img",
         {
           src: productImage,
           alt: productName,
-          style: { width: "100%", height: "100%", objectFit: "cover" }
+          style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }
         }
       ) }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem", marginTop: "1.25rem", flexWrap: "wrap", alignItems: "center" }, children: [
-        categoryName && /* @__PURE__ */ jsx(Badge, { text: categoryName, bg: surfaceLight, color: accent }),
-        strainType && /* @__PURE__ */ jsx(Badge, { text: strainType, bg: strainBadgeColor(strainType), color: "#fff", bold: true }),
-        coa && /* @__PURE__ */ jsx(Badge, { text: "Lab Tested", bg: "rgba(34,197,94,0.15)", color: "#22c55e" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: { marginTop: "0.75rem" }, children: [
-        /* @__PURE__ */ jsx("h1", { style: {
-          fontFamily: fontDisplay,
-          fontSize: "1.75rem",
-          fontWeight: 600,
-          margin: 0,
-          lineHeight: 1.2,
-          letterSpacing: "-0.02em"
-        }, children: productName }),
-        lowestPrice != null && /* @__PURE__ */ jsxs("p", { style: {
-          fontSize: "1.25rem",
+      /* @__PURE__ */ jsxs("div", { style: { marginTop: "1.5rem", display: "flex", gap: "0.75rem", alignItems: "center" }, children: [
+        categoryName && /* @__PURE__ */ jsx("span", { style: {
+          fontSize: 11,
           fontWeight: 500,
-          color: accent,
-          margin: "0.375rem 0 0"
-        }, children: [
-          "From $",
-          lowestPrice.toFixed(2)
-        ] }),
-        tagline && /* @__PURE__ */ jsx("p", { style: { color: muted, fontSize: "0.9rem", margin: "0.5rem 0 0", fontStyle: "italic" }, children: tagline })
-      ] }),
-      description && /* @__PURE__ */ jsx("p", { style: { color: muted, lineHeight: 1.6, margin: "1rem 0 0", fontSize: "0.9rem" }, children: description }),
-      renderProduct ? renderProduct(data) : null,
-      (thca != null || thc != null || cbd != null) && /* @__PURE__ */ jsxs("div", { style: {
-        marginTop: "1.25rem",
-        background: surface,
-        border: `1px solid ${border}`,
-        borderRadius: 8,
-        padding: "1rem"
-      }, children: [
-        /* @__PURE__ */ jsx("div", { style: {
-          fontSize: "0.65rem",
+          color: theme.accent,
+          textTransform: "uppercase",
+          letterSpacing: "0.15em"
+        }, children: categoryName }),
+        strainType && /* @__PURE__ */ jsx("span", { style: {
+          fontSize: 10,
           fontWeight: 600,
           textTransform: "uppercase",
           letterSpacing: "0.08em",
-          color: muted,
-          marginBottom: "0.75rem"
-        }, children: "Potency" }),
-        /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: `repeat(${[thca, thc, cbd].filter((v) => v != null).length}, 1fr)`, gap: "0.5rem" }, children: [
-          thca != null && /* @__PURE__ */ jsx(PotencyStat, { label: "THCa", value: thca, accent, fg }),
-          thc != null && /* @__PURE__ */ jsx(PotencyStat, { label: "\u03949 THC", value: thc, accent, fg }),
-          cbd != null && /* @__PURE__ */ jsx(PotencyStat, { label: "CBD", value: cbd, accent, fg })
-        ] })
+          padding: "0.2rem 0.5rem",
+          background: strainBadgeColor(strainType),
+          color: "#fff"
+        }, children: strainType })
       ] }),
-      (batchNumber || dateTested || genetics || terpenes || effects) && /* @__PURE__ */ jsxs("div", { style: {
-        marginTop: "0.75rem",
-        background: surface,
-        border: `1px solid ${border}`,
-        borderRadius: 8,
-        padding: "1rem"
+      /* @__PURE__ */ 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__ */ jsx("p", { style: {
+        fontFamily: theme.fontDisplay,
+        fontSize: "1.1rem",
+        fontWeight: 300,
+        color: `${theme.fg}80`,
+        margin: "0.5rem 0 0"
+      }, children: tagline }),
+      lowestPrice != null && /* @__PURE__ */ jsxs("p", { style: {
+        fontFamily: theme.fontDisplay,
+        fontSize: "1.5rem",
+        fontWeight: 300,
+        margin: "0.75rem 0 0"
       }, children: [
-        /* @__PURE__ */ jsx("div", { style: {
-          fontSize: "0.65rem",
-          fontWeight: 600,
-          textTransform: "uppercase",
-          letterSpacing: "0.08em",
-          color: muted,
-          marginBottom: "0.75rem"
-        }, children: "Details" }),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
-          genetics && /* @__PURE__ */ jsx(DetailRow, { label: "Genetics", value: genetics, fg, muted }),
-          terpenes && /* @__PURE__ */ jsx(DetailRow, { label: "Terpenes", value: terpenes, fg, muted }),
-          effects && /* @__PURE__ */ jsx(DetailRow, { label: "Effects", value: effects, fg, muted }),
-          batchNumber && /* @__PURE__ */ jsx(DetailRow, { label: "Batch", value: batchNumber, fg, muted }),
-          dateTested && /* @__PURE__ */ jsx(DetailRow, { label: "Tested", value: formatDate(dateTested), fg, muted })
-        ] })
+        "$",
+        lowestPrice.toFixed(2),
+        tiers.length > 1 && /* @__PURE__ */ jsx("span", { style: { fontSize: "0.8rem", color: `${theme.fg}50`, marginLeft: "0.5rem", fontWeight: 400 }, children: "and up" })
       ] }),
-      tiers.length > 1 && /* @__PURE__ */ jsxs("div", { style: {
-        marginTop: "0.75rem",
-        background: surface,
-        border: `1px solid ${border}`,
-        borderRadius: 8,
-        padding: "1rem"
+      renderProduct ? renderProduct(data) : null,
+      (thca != null || thc != null || cbd != null) && /* @__PURE__ */ 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: [
-        /* @__PURE__ */ jsx("div", { style: {
-          fontSize: "0.65rem",
-          fontWeight: 600,
-          textTransform: "uppercase",
-          letterSpacing: "0.08em",
-          color: muted,
-          marginBottom: "0.75rem"
-        }, children: "Pricing" }),
-        /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))", gap: "0.5rem" }, children: tiers.map((tier) => /* @__PURE__ */ jsxs("div", { style: {
-          background: surfaceLight,
-          borderRadius: 6,
-          padding: "0.625rem",
+        thca != null && /* @__PURE__ */ jsx(CannabinoidStat, { label: "THCa", value: thca, theme, showBorder: thc != null || cbd != null }),
+        thc != null && /* @__PURE__ */ jsx(CannabinoidStat, { label: "\u03949 THC", value: thc, theme, showBorder: cbd != null }),
+        cbd != null && /* @__PURE__ */ jsx(CannabinoidStat, { label: "CBD", value: cbd, theme, showBorder: false })
+      ] }),
+      tiers.length > 1 && /* @__PURE__ */ jsxs("div", { style: { marginTop: "1.5rem" }, children: [
+        /* @__PURE__ */ jsx("p", { style: { ...labelStyle, marginBottom: "0.75rem" }, children: "Pricing" }),
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 1 }, children: tiers.map((tier) => /* @__PURE__ */ jsxs("div", { style: {
+          flex: "1 1 0",
+          minWidth: 90,
+          padding: "0.75rem 0.5rem",
+          background: theme.surfaceLight,
           textAlign: "center"
         }, children: [
-          /* @__PURE__ */ jsxs("div", { style: { fontSize: "1rem", fontWeight: 600, color: fg }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { fontSize: "1rem", fontWeight: 300, fontFamily: theme.fontDisplay }, children: [
             "$",
             tier.default_price.toFixed(2)
           ] }),
-          /* @__PURE__ */ jsx("div", { style: { fontSize: "0.7rem", color: muted, marginTop: "0.125rem" }, children: tier.label })
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 10, color: `${theme.fg}60`, letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 2 }, children: tier.label })
         ] }, tier.id)) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.625rem", marginTop: "1.5rem" }, children: [
-        coa && /* @__PURE__ */ jsx(
+      (genetics || terpenes || effects || batchNumber || dateTested) && /* @__PURE__ */ jsxs("div", { style: { marginTop: "1.75rem" }, children: [
+        /* @__PURE__ */ jsx("p", { style: { ...labelStyle, marginBottom: "0.75rem" }, children: "Details" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          genetics && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DetailRow, { label: "Genetics", value: genetics, theme }),
+            /* @__PURE__ */ jsx("hr", { style: dividerStyle })
+          ] }),
+          terpenes && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DetailRow, { label: "Terpenes", value: terpenes, theme }),
+            /* @__PURE__ */ jsx("hr", { style: dividerStyle })
+          ] }),
+          effects && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DetailRow, { label: "Effects", value: effects, theme }),
+            /* @__PURE__ */ jsx("hr", { style: dividerStyle })
+          ] }),
+          batchNumber && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DetailRow, { label: "Batch", value: batchNumber, theme }),
+            /* @__PURE__ */ jsx("hr", { style: dividerStyle })
+          ] }),
+          dateTested && /* @__PURE__ */ jsx(DetailRow, { label: "Tested", value: formatDate(dateTested), theme })
+        ] })
+      ] }),
+      description && /* @__PURE__ */ jsxs("div", { style: { marginTop: "1.75rem" }, children: [
+        /* @__PURE__ */ jsx("p", { style: { ...labelStyle, marginBottom: "0.75rem" }, children: "About" }),
+        /* @__PURE__ */ jsx("p", { style: {
+          fontSize: "0.9rem",
+          fontWeight: 300,
+          color: `${theme.fg}99`,
+          lineHeight: 1.7,
+          margin: 0
+        }, children: description })
+      ] }),
+      coa && /* @__PURE__ */ jsxs("div", { style: { marginTop: "1.75rem" }, children: [
+        /* @__PURE__ */ jsx("p", { style: { ...labelStyle, marginBottom: "0.75rem" }, children: "Lab Results" }),
+        batchNumber && /* @__PURE__ */ 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__ */ jsxs(
           "button",
           {
             onClick: handleCOAClick,
             style: {
               width: "100%",
-              padding: "0.875rem",
-              background: accent,
-              color: bg,
-              border: "none",
-              fontSize: "0.9rem",
-              fontWeight: 600,
-              fontFamily: fontDisplay,
+              position: "relative",
+              height: 180,
+              border: `1px solid ${theme.fg}0F`,
+              background: theme.surface,
               cursor: "pointer",
-              borderRadius: 6,
-              letterSpacing: "-0.01em"
-            },
-            children: "View Lab Results"
-          }
-        ),
-        renderCOA ? renderCOA(data) : null,
-        /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: ctaUrl,
-            style: {
-              display: "block",
-              width: "100%",
-              padding: "0.875rem",
-              background: "transparent",
-              color: fg,
-              border: `1px solid ${border}`,
-              fontSize: "0.9rem",
-              fontWeight: 500,
-              fontFamily: fontDisplay,
-              textAlign: "center",
-              textDecoration: "none",
-              boxSizing: "border-box",
-              borderRadius: 6
+              overflow: "hidden",
+              padding: 0,
+              display: "block"
             },
-            children: "Shop Online"
+            children: [
+              /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsxs("footer", { style: {
-        marginTop: "2rem",
-        paddingTop: "1.25rem",
-        paddingBottom: "2rem",
-        borderTop: `1px solid ${border}`,
+        marginTop: "3rem",
+        paddingTop: "1.5rem",
+        borderTop: `1px solid ${theme.fg}0A`,
         textAlign: "center"
       }, children: [
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "center", gap: "1.5rem", marginBottom: "0.5rem" }, children: [
-          coa && /* @__PURE__ */ jsx(FooterBadge, { icon: "\u2713", text: "Lab Verified", muted }),
-          /* @__PURE__ */ jsx(FooterBadge, { icon: "\u2726", text: "Authentic Product", muted })
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "center", gap: "2rem", marginBottom: "0.75rem" }, children: [
+          coa && /* @__PURE__ */ jsx(FooterLabel, { text: "Lab Verified" }),
+          /* @__PURE__ */ jsx(FooterLabel, { text: "Authentic Product" })
         ] }),
-        store?.name && /* @__PURE__ */ jsxs("p", { style: { fontSize: "0.7rem", color: muted, margin: "0.5rem 0 0" }, children: [
+        store?.name && /* @__PURE__ */ 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__ */ jsxs(
-      "div",
-      {
-        style: {
-          position: "fixed",
-          inset: 0,
-          zIndex: 9999,
-          background: "rgba(0,0,0,0.92)",
-          display: "flex",
-          flexDirection: "column"
-        },
-        children: [
-          /* @__PURE__ */ jsxs("div", { style: {
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            padding: "0.75rem 1rem",
-            borderBottom: "1px solid #222"
-          }, children: [
-            /* @__PURE__ */ jsx("span", { style: { color: "#fff", fontWeight: 600, fontSize: "0.9rem", fontFamily: fontDisplay }, children: coa.document_name || "Lab Results" }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => setShowCOA(false),
-                style: {
-                  background: "rgba(255,255,255,0.1)",
-                  border: "none",
-                  color: "#fff",
-                  fontSize: "1rem",
-                  cursor: "pointer",
-                  padding: "0.375rem 0.75rem",
-                  borderRadius: 4
-                },
-                children: "\u2715"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            "iframe",
-            {
-              src: coa.url,
-              style: { flex: 1, border: "none", background: "#fff" },
-              title: "Lab Results"
-            }
-          )
-        ]
-      }
-    )
+    showCOA && coa && /* @__PURE__ */ jsx(COAModal, { coa, theme, onClose: () => setShowCOA(false) })
   ] });
 }
-function Badge({ text, bg, color, bold }) {
-  return /* @__PURE__ */ jsx("span", { style: {
-    padding: "0.25rem 0.625rem",
-    borderRadius: 4,
-    fontSize: "0.7rem",
-    fontWeight: bold ? 700 : 500,
-    textTransform: "uppercase",
-    letterSpacing: "0.04em",
-    background: bg,
-    color
-  }, children: text });
-}
-function PotencyStat({ label, value, accent, fg }) {
-  return /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "0.25rem 0" }, children: [
-    /* @__PURE__ */ jsxs("div", { style: { fontSize: "1.5rem", fontWeight: 700, color: fg, lineHeight: 1.1 }, children: [
+function CannabinoidStat({ label, value, theme, showBorder }) {
+  return /* @__PURE__ */ jsxs("div", { style: {
+    padding: "1.25rem 0.5rem",
+    textAlign: "center",
+    borderRight: showBorder ? `1px solid ${theme.fg}0F` : void 0
+  }, children: [
+    /* @__PURE__ */ 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__ */ jsx("span", { style: { fontSize: "0.6em", marginLeft: 1 }, children: "%" })
     ] }),
     /* @__PURE__ */ jsx("div", { style: {
-      fontSize: "0.65rem",
-      color: accent,
+      fontSize: 11,
+      fontWeight: 500,
       textTransform: "uppercase",
-      letterSpacing: "0.06em",
-      marginTop: "0.25rem",
-      fontWeight: 600
+      letterSpacing: "0.25em",
+      color: theme.accent,
+      marginTop: "0.5rem"
     }, children: label })
   ] });
 }
-function DetailRow({ label, value, fg, muted }) {
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "baseline" }, children: [
-    /* @__PURE__ */ jsx("span", { style: { fontSize: "0.8rem", color: muted }, children: label }),
-    /* @__PURE__ */ jsx("span", { style: { fontSize: "0.8rem", color: fg, fontWeight: 500 }, children: value })
+function DetailRow({ label, value, theme }) {
+  return /* @__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: label }),
+    /* @__PURE__ */ jsx("span", { style: {
+      fontSize: 14,
+      fontWeight: 300,
+      color: `${theme.fg}CC`
+    }, children: value })
   ] });
 }
-function FooterBadge({ icon, text, muted }) {
-  return /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.7rem", color: muted, display: "flex", alignItems: "center", gap: "0.25rem" }, children: [
-    /* @__PURE__ */ jsx("span", { style: { fontSize: "0.6rem" }, children: icon }),
-    " ",
-    text
+function FooterLabel({ text }) {
+  return /* @__PURE__ */ 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__ */ 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",
+        fontFamily: theme.fontDisplay,
+        fontWeight: 500,
+        fontSize: "0.85rem",
+        letterSpacing: "-0.01em"
+      }, 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",
+            letterSpacing: "0.05em"
+          },
+          children: "Close"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("iframe", { src: coa.url, style: { flex: 1, border: "none", background: "#fff" }, title: "Lab Results" })
   ] });
 }
+function toNum(v) {
+  if (v === "" || v == null) return null;
+  const n = Number(v);
+  return Number.isFinite(n) ? n : null;
+}
+function toStr(v) {
+  if (v == null || v === "") return null;
+  return String(v);
+}
 function strainBadgeColor(strain) {
   const s = strain.toLowerCase();
   if (s === "sativa") return "#22c55e";