<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      http-equiv="Content-Security-Policy"
      content="upgrade-insecure-requests; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.google.com https://*.googleapis.com https://*.gstatic.com https://*.googletagmanager.com https://*.google-analytics.com https://*.googleadservices.com https://*.googlesyndication.com https://*.doubleclick.net https://connect.facebook.net https://*.facebook.com https://*.clarity.ms https://cdn.lordicon.com https://*.paypal.com https://*.stripe.com https://*.hotjar.com https://*.hotjar.io; script-src-elem 'self' 'unsafe-inline' 'unsafe-eval' https://*.google.com https://*.googleapis.com https://*.gstatic.com https://*.googletagmanager.com https://*.google-analytics.com https://*.googleadservices.com https://*.googlesyndication.com https://*.doubleclick.net https://connect.facebook.net https://*.facebook.com https://*.clarity.ms https://cdn.lordicon.com https://*.paypal.com https://*.stripe.com https://*.hotjar.com https://*.hotjar.io; connect-src 'self' https://*.google.com https://*.googleapis.com https://*.gstatic.com https://*.googletagmanager.com https://*.google-analytics.com https://*.googleadservices.com https://*.googlesyndication.com https://*.doubleclick.net https://connect.facebook.net https://connect.facebook.com https://*.facebook.com https://graph.facebook.com https://*.clarity.ms https://c.bing.com https://cdn.lordicon.com https://*.paypal.com https://*.stripe.com https://ssapi.shipstation.com https://api.resend.com https://api.openai.com https://*.supabase.co wss://*.supabase.co https://*.hotjar.com https://*.hotjar.io wss://*.hotjar.com; frame-src 'self' https://*.hotjar.com https://*.hotjar.io https://*.google.com https://*.googletagmanager.com https://*.paypal.com https://*.stripe.com https://*.hotjar.com https://*.hotjar.io; img-src 'self' data: https: blob:;"
    />
    <meta
      name="google-site-verification"
      content="zt_MZ-l_iZI-KKl9_PUeYxLDmSi8yE-g7XdbOYVXRsc"
    />

    <!-- Environment detection utility (shared by all tracking scripts) -->
    <script>
      window.__isDevEnvironment = (function () {
        const hostname = window.location.hostname;
        return (
          hostname.includes("localhost") ||
          hostname.includes("127.0.0.1") ||
          hostname.includes(":8") ||
          hostname.includes(":3000") ||
          hostname.includes(":5173") ||
          hostname.includes("builder.io") ||
          hostname.includes("fly.dev")
        );
      })();
    </script>

    <!-- Google Tag | GA4 -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-NF93WVGF32"
    ></script>
    <script>
      // Skip Google Analytics on dev environments
      if (!window.__isDevEnvironment) {
        window.dataLayer = window.dataLayer || [];
        function gtag() {
          dataLayer.push(arguments);
        }
        gtag("js", new Date());
        gtag("config", "G-NF93WVGF32");
      } else {
        console.log("[GA] Skipping Google Analytics on dev environment");
      }
    </script>
    <!-- Google Tag | GA4 END -->

    <!-- Google Tag Manager - Pixa -->
    <script>
      // Skip GTM on dev environments
      if (!window.__isDevEnvironment) {
        (function (w, d, s, l, i) {
          w[l] = w[l] || [];
          w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
          var f = d.getElementsByTagName(s)[0],
            j = d.createElement(s),
            dl = l != "dataLayer" ? "&l=" + l : "";
          j.async = true;
          j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
          f.parentNode.insertBefore(j, f);
        })(window, document, "script", "dataLayer", "GTM-N874TJ9");
      } else {
        console.log("[GTM] Skipping Google Tag Manager on dev environment");
      }
    </script>
    <!-- End Google Tag Manager - Pixa -->

    <!-- Primary Meta Tags -->
    <title>
      GreenPeach | Expert-Formulated Liquid Vitamins for Kids & Adults
    </title>
    <meta
      name="title"
      content="GreenPeach | Expert-Formulated Liquid Vitamins for Kids & Adults"
    />
    <meta
      name="description"
      content="Premium liquid vitamins with better absorption. Expert-formulated, GMP certified supplements for happy, healthy families. Clean ingredients, no fillers. Free shipping over $30!"
    />
    <meta
      name="keywords"
      content="liquid vitamins, kids vitamins, family supplements, expert formulated, GMP certified, liquid multivitamin, vitamin D3, omega 3, iron supplement"
    />
    <meta name="author" content="GreenPeach" />
    <link rel="canonical" href="https://greenpeach.com/" />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://greenpeach.com/" />
    <meta
      property="og:title"
      content="GreenPeach | Expert-Formulated Liquid Vitamins for Kids & Adults"
    />
    <meta
      property="og:description"
      content="Premium liquid vitamins with better absorption. Expert-formulated, GMP certified supplements for happy, healthy families. Clean ingredients, no fillers."
    />
    <meta property="og:image" content="https://greenpeach.com/og-image.jpg" />
    <meta property="og:site_name" content="GreenPeach" />

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://greenpeach.com/" />
    <meta
      property="twitter:title"
      content="GreenPeach | Expert-Formulated Liquid Vitamins for Kids & Adults"
    />
    <meta
      property="twitter:description"
      content="Premium liquid vitamins with better absorption. Expert-formulated, GMP certified supplements for happy, healthy families."
    />
    <meta
      property="twitter:image"
      content="https://greenpeach.com/twitter-image.jpg"
    />

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" sizes="32x32" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" sizes="192x192" />
    <link rel="apple-touch-icon" href="/favicon.ico" />

    <!-- Preconnect only for critical origins that block initial render -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://cdn.builder.io" />
    <!-- DNS prefetch for deferred third-party scripts (lower priority) -->
    <link rel="dns-prefetch" href="https://connect.facebook.net" />
    <link rel="dns-prefetch" href="https://www.clarity.ms" />

    <!-- Preload LCP hero image - Desktop (matches slide index 1 - initial slide) -->
    <!-- Using width=1200 to match getResponsiveImage default src (middle of widths array) -->
    <link
      rel="preload"
      as="image"
      href="https://cdn.builder.io/api/v1/image/assets%2F2651dca913d34eafa320b193e1b2c34e%2F924d5c0738ed4ef584a142afcab6df5c?format=webp&quality=80&width=1200"
      imagesrcset="https://cdn.builder.io/api/v1/image/assets%2F2651dca913d34eafa320b193e1b2c34e%2F924d5c0738ed4ef584a142afcab6df5c?format=webp&quality=80&width=640 640w, https://cdn.builder.io/api/v1/image/assets%2F2651dca913d34eafa320b193e1b2c34e%2F924d5c0738ed4ef584a142afcab6df5c?format=webp&quality=80&width=828 828w, https://cdn.builder.io/api/v1/image/assets%2F2651dca913d34eafa320b193e1b2c34e%2F924d5c0738ed4ef584a142afcab6df5c?format=webp&quality=80&width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2F2651dca913d34eafa320b193e1b2c34e%2F924d5c0738ed4ef584a142afcab6df5c?format=webp&quality=80&width=1920 1920w, https://cdn.builder.io/api/v1/image/assets%2F2651dca913d34eafa320b193e1b2c34e%2F924d5c0738ed4ef584a142afcab6df5c?format=webp&quality=80&width=2400 2400w"
      imagesizes="100vw"
      fetchpriority="high"
      media="(min-width: 640px)"
    />
    <!-- Preload LCP hero image - Mobile (matches slide index 1 - initial slide) -->
    <!-- Using width=828 to match getResponsiveImage default src (middle of widths array) -->
    <link
      rel="preload"
      as="image"
      href="https://cdn.builder.io/api/v1/image/assets%2F2651dca913d34eafa320b193e1b2c34e%2Fcaefe54fc62a46c882a91c546c5b281a?format=webp&quality=80&width=828"
      imagesrcset="https://cdn.builder.io/api/v1/image/assets%2F2651dca913d34eafa320b193e1b2c34e%2Fcaefe54fc62a46c882a91c546c5b281a?format=webp&quality=80&width=640 640w, https://cdn.builder.io/api/v1/image/assets%2F2651dca913d34eafa320b193e1b2c34e%2Fcaefe54fc62a46c882a91c546c5b281a?format=webp&quality=80&width=828 828w, https://cdn.builder.io/api/v1/image/assets%2F2651dca913d34eafa320b193e1b2c34e%2Fcaefe54fc62a46c882a91c546c5b281a?format=webp&quality=80&width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2F2651dca913d34eafa320b193e1b2c34e%2Fcaefe54fc62a46c882a91c546c5b281a?format=webp&quality=80&width=1920 1920w, https://cdn.builder.io/api/v1/image/assets%2F2651dca913d34eafa320b193e1b2c34e%2Fcaefe54fc62a46c882a91c546c5b281a?format=webp&quality=80&width=2400 2400w"
      imagesizes="100vw"
      fetchpriority="high"
      media="(max-width: 639px)"
    />

    <!-- Google Fonts with swap display to ensure fonts always render -->
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Candal&family=Tasa+Explorer:wght@700&display=swap"
      rel="stylesheet"
      media="print"
      onload="this.media='all'"
    />
    <noscript>
      <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Candal&family=Tasa+Explorer:wght@700&display=swap"
        rel="stylesheet"
      />
    </noscript>

    <!-- Lordicon for animated icons (deferred for better performance) -->
    <script
      defer
      src="https://cdn.lordicon.com/lordicon.js"
      onerror="console.warn('[LORDICON] Failed to load lordicon script from CDN')"
    ></script>

    <!-- Microsoft Clarity -->
    <script type="text/javascript">
      // Load Clarity immediately (async) to capture initial page state correctly
      (function (c, l, a, r, i, t, y) {
        // Skip Clarity tracking for dev/test environments
        if (window.__isDevEnvironment) {
          console.log(
            "[CLARITY] Skipping Clarity tracking on dev environment:",
            window.location.hostname,
          );
          return;
        }

        c[a] =
          c[a] ||
          function () {
            (c[a].q = c[a].q || []).push(arguments);
          };
        t = l.createElement(r);
        t.async = 1;
        t.src = "https://www.clarity.ms/tag/" + i;
        t.onerror = function () {
          console.error("[CLARITY] Failed to load Microsoft Clarity script");
        };
        t.onload = function () {
          console.log(
            "[CLARITY] Microsoft Clarity loaded successfully on production",
          );
        };
        y = l.getElementsByTagName(r)[0];
        y.parentNode.insertBefore(t, y);
      })(window, document, "clarity", "script", "tyezeidpqh");

      // Configure Clarity masking rules after it loads
      window.clarity =
        window.clarity ||
        function () {
          (window.clarity.q = window.clarity.q || []).push(arguments);
        };

      // Unmask common UI patterns to ensure proper recording
      if (window.clarity) {
        window.clarity("set", {
          disablePageUnload: false,
          disableConsoleErrorTracking: false,
          disableConsoleWarningTracking: true,
          disableClickTracking: false,
          disablePageScroll: false,
        });

        // Wait for DOM to fully load before applying mask rules
        if (document.readyState === "loading") {
          document.addEventListener("DOMContentLoaded", applyMaskRules);
        } else {
          applyMaskRules();
        }
      }

      function applyMaskRules() {
        // Unmask dialogs, modals, and overlays
        const unmaskSelectors = [
          '[role="dialog"]',
          '[data-clarity-region="dialog-overlay"]',
          '[data-clarity-region="dialog-content"]',
          ".toast",
          '[role="alert"]',
          '[role="alertdialog"]',
          '[data-state="open"]',
          ".radix-dropdown-menu",
          ".radix-select-content",
          "[data-radix-dialog-overlay]",
          "[data-radix-dropdown-menu-content]",
          "[data-radix-select-content]",
        ];

        unmaskSelectors.forEach((selector) => {
          try {
            document.querySelectorAll(selector).forEach((el) => {
              if (el) {
                el.setAttribute("data-clarity-unmask", "true");
              }
            });
          } catch (e) {
            console.warn(
              "[CLARITY] Could not apply mask rule for selector:",
              selector,
            );
          }
        });

        // Also watch for dynamically added elements
        const observer = new MutationObserver((mutations) => {
          unmaskSelectors.forEach((selector) => {
            try {
              document.querySelectorAll(selector).forEach((el) => {
                if (el && !el.hasAttribute("data-clarity-unmask")) {
                  el.setAttribute("data-clarity-unmask", "true");
                }
              });
            } catch (e) {
              // Silently fail for invalid selectors
            }
          });
        });

        observer.observe(document.body, {
          childList: true,
          subtree: true,
          attributes: false,
        });
      }
    </script>

    <!-- Meta Pixel Code -->
    <script>
      // Defer Facebook Pixel to improve initial page load performance
      window.addEventListener("load", function () {
        setTimeout(function () {
          // Skip Meta Pixel tracking on dev/builder/preview environments
          if (window.__isDevEnvironment) {
            console.log(
              "[FB Pixel] Skipping Facebook Pixel on dev environment:",
              window.location.hostname,
            );
            return;
          }

          !(function (f, b, e, v, n, t, s) {
            if (f.fbq) return;
            n = f.fbq = function () {
              n.callMethod
                ? n.callMethod.apply(n, arguments)
                : n.queue.push(arguments);
            };
            if (!f._fbq) f._fbq = n;
            n.push = n;
            n.loaded = !0;
            n.version = "2.0";
            n.queue = [];
            t = b.createElement(e);
            t.async = !0;
            t.src = v;
            s = b.getElementsByTagName(e)[0];
            s.parentNode.insertBefore(t, s);
          })(
            window,
            document,
            "script",
            "https://connect.facebook.net/en_US/fbevents.js",
          );

          // Advanced Matching - Get user data from localStorage if available
          var advancedMatchingData = {};
          try {
            var userEmail = localStorage.getItem("greenpeach-user-email");
            var userPhone = localStorage.getItem("greenpeach-user-phone");

            if (userEmail) {
              advancedMatchingData.em = userEmail;
            }
            if (userPhone) {
              advancedMatchingData.ph = userPhone;
            }
          } catch (e) {
            console.warn(
              "[FB Pixel] Could not retrieve user data for advanced matching:",
              e,
            );
          }

          // Initialize pixel with advanced matching data (empty object if no user data)
          fbq("init", "1360977188758307", advancedMatchingData);
          fbq("track", "PageView");
        }, 3000); // Load Facebook Pixel 3s after page load to reduce main-thread blocking
      });
    </script>
    <!-- End Meta Pixel Code -->
    <!-- Google tag (gtag.js) -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-F7VDJ1XLMY"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "G-F7VDJ1XLMY");
    </script>

    <!-- Google Tag (gtag.js) -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=AW-469201829"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "AW-469201829");
    </script>
    <!-- Hotjar Tracking Code for https://greenpeach.com -->
    <script>
      (function (h, o, t, j, a, r) {
        h.hj =
          h.hj ||
          function () {
            (h.hj.q = h.hj.q || []).push(arguments);
          };
        h._hjSettings = { hjid: 3436241, hjsv: 6 };
        a = o.getElementsByTagName("head")[0];
        r = o.createElement("script");
        r.async = 1;
        r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
        a.appendChild(r);
      })(window, document, "https://static.hotjar.com/c/hotjar-", ".js?sv=");
    </script>
    <script type="module" crossorigin src="/assets/index-C6Y2OXjG.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-Bs7gn1Hv.js">
    <link rel="modulepreload" crossorigin href="/assets/ui-DeLfPHrl.js">
    <link rel="stylesheet" crossorigin href="/assets/index-CaTJZtcW.css">
  </head>

  <body data-clarity-unmask="true">
    <noscript
      ><img
        height="1"
        width="1"
        style="display: none"
        src="https://www.facebook.com/tr?id=1360977188758307&ev=PageView&noscript=1"
    /></noscript>
    <div id="root" data-clarity-unmask="true"></div>
  
<script async id="netlify-rum-container" src="/.netlify/scripts/rum" data-netlify-rum-site-id="3e9e0cfa-950b-4609-bab1-09a65ccf395a" data-netlify-deploy-branch="main" data-netlify-deploy-context="production" data-netlify-cwv-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaXRlX2lkIjoiM2U5ZTBjZmEtOTUwYi00NjA5LWJhYjEtMDlhNjVjY2YzOTVhIiwiYWNjb3VudF9pZCI6IjY4ZWQ4MGZmY2JmNjliMzgwNTlmOTVmZiIsImRlcGxveV9pZCI6IjY5ODY2YmI5ZThmMzZkMDAwODcyZDNlOSIsImlzc3VlciI6Im5mc2VydmVyIn0.8eRBuxS4fB3xcCCD0E4FfzQXQ-AU5aztWr3YwAzASNI"></script></body>
</html>
