---
import { getTrackingIds } from "../lib/tracking";

const ids = getTrackingIds();
---

{
  ids.ga4 && (
    <>
      <script is:inline define:vars={{ ga4: ids.ga4 }}>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        window.gtag = gtag;
        gtag("js", new Date());
        gtag("config", ga4);
      </script>
      <script is:inline async src={`https://www.googletagmanager.com/gtag/js?id=${ids.ga4}`}></script>
    </>
  )
}

{
  ids.metaPixel && (
    <script is:inline define:vars={{ pixel: ids.metaPixel }}>
      !(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 = true;
        n.version = "2.0";
        n.queue = [];
        t = b.createElement(e);
        t.async = true;
        t.src = v;
        s = b.getElementsByTagName(e)[0];
        s.parentNode.insertBefore(t, s);
      })(window, document, "script", "https://connect.facebook.net/en_US/fbevents.js");
      fbq("init", pixel);
      fbq("track", "PageView");
    </script>
  )
}

<script is:inline>
  (function () {
    function track(event, params) {
      params = params || {};
      if (typeof window.gtag === "function") {
        window.gtag("event", event, params);
      }
      if (typeof window.fbq === "function" && event === "cta_click") {
        window.fbq("trackCustom", "CTAClick", params);
      }
      if (window.dataLayer) {
        window.dataLayer.push({ event: event, ...params });
      }
    }

    window.__track = track;

    // A/B variant
    var params = new URLSearchParams(window.location.search);
    var forced = params.get("v");
    var variant = forced === "a" || forced === "b" ? forced : null;
    try {
      if (!variant) {
        variant = localStorage.getItem("ab_hero");
      }
      if (variant !== "a" && variant !== "b") {
        variant = Math.random() < 0.5 ? "a" : "b";
      }
      localStorage.setItem("ab_hero", variant);
    } catch (e) {
      variant = variant || "a";
    }

    var headline = document.getElementById("hero-headline");
    var heroCta = document.getElementById("hero-cta");
    if (headline && variant === "b") {
      headline.textContent = headline.getAttribute("data-h1-b") || headline.textContent;
    }
    if (heroCta && variant === "b") {
      var label = heroCta.getAttribute("data-cta-b");
      if (label) heroCta.textContent = label;
    }
    // Sticky keeps registration CTA; A/B only changes hero headline/CTA
    document.documentElement.dataset.ab = variant;
    track("ab_variant", { variant: variant });
    track("page_view", { path: location.pathname, ab: variant });

    // CTA clicks + UTM passthrough refresh
    function withTracking(href) {
      try {
        var url = new URL(href, location.href);
        var current = new URLSearchParams(location.search);
        ["utm_source","utm_medium","utm_campaign","utm_term","utm_content","subid","sub_id","clickid","click_id","gclid","fbclid","promo"].forEach(function (k) {
          var v = current.get(k);
          if (v && !url.searchParams.get(k)) url.searchParams.set(k, v);
        });
        return url.toString();
      } catch (e) {
        return href;
      }
    }

    document.querySelectorAll(".js-cta").forEach(function (el) {
      el.addEventListener("click", function () {
        var place = el.getAttribute("data-cta") || "unknown";
        track("cta_click", { place: place, ab: variant });
        el.setAttribute("href", withTracking(el.getAttribute("href")));
      });
    });

    document.querySelectorAll(".lang-link").forEach(function (el) {
      el.addEventListener("click", function () {
        track("lang_switch", { to: el.getAttribute("data-lang") });
      });
    });

    // Scroll depth
    var fired50 = false;
    var fired90 = false;
    function onScroll() {
      var h = document.documentElement.scrollHeight - window.innerHeight;
      if (h <= 0) return;
      var p = window.scrollY / h;
      if (!fired50 && p >= 0.5) {
        fired50 = true;
        track("scroll_depth_50", { ab: variant });
      }
      if (!fired90 && p >= 0.9) {
        fired90 = true;
        track("scroll_depth_90", { ab: variant });
      }
    }
    window.addEventListener("scroll", onScroll, { passive: true });
  })();
</script>