document.addEventListener("DOMContentLoaded", function () {

  // --- Scroll button ---
  setTimeout(function () {
    document.querySelectorAll(".scroll-button").forEach(function (button) {
      button.addEventListener("click", function (e) {
        e.preventDefault();
        var targetId = this.getAttribute("data-scroll-target");
        var targetElement =
          document.getElementById(targetId) ||
          document.querySelector("[id*='ProductInfo']");
        if (targetElement) {
          targetElement.scrollIntoView({ behavior: "smooth", block: "start" });
        }
      });
    });
  }, 500);

  // --- Drag-to-scroll marquee ---
  document.querySelectorAll(".custom-marquee-track").forEach(function (track) {
    var inner = track.querySelector(".custom-marquee-inner");
    if (!inner) return;

    var isDragging = false;
    var startX = 0;
    var currentOffset = 0;
    var resumeTimeout = null;

    // Read the computed animation duration so delay maths is accurate
    function getAnimDuration() {
      var style = window.getComputedStyle(inner);
      return parseFloat(style.animationDuration) * 1000 || 30000;
    }

    // Pause CSS animation and snapshot current visual translateX
    function pauseMarquee() {
      var style = window.getComputedStyle(inner);
      var matrix = new DOMMatrix(style.transform);
      currentOffset = matrix.m41;
      inner.style.animationPlayState = "paused";
      inner.style.transform = "translateX(" + currentOffset + "px)";
    }

    // Resume CSS animation from the current drag position
    function resumeMarquee() {
      var halfWidth = inner.scrollWidth / 2;
      // Normalise offset into [-halfWidth, 0]
      var normalised = currentOffset % -halfWidth;
      if (normalised > 0) normalised -= halfWidth;

      var pct = Math.abs(normalised / halfWidth);
      var duration = getAnimDuration();
      var delay = -(duration * pct);

      inner.style.transform = "";
      inner.style.animationDelay = delay + "ms";
      inner.style.animationPlayState = "running";
    }

    function onDragStart(clientX) {
      if (resumeTimeout) clearTimeout(resumeTimeout);
      isDragging = true;
      startX = clientX;
      pauseMarquee();
      track.style.cursor = "grabbing";
    }

    function onDragMove(clientX) {
      if (!isDragging) return;
      var dx = clientX - startX;
      startX = clientX;
      currentOffset += dx;

      // Keep offset within bounds to avoid runaway numbers
      var halfWidth = inner.scrollWidth / 2;
      if (currentOffset > 0) currentOffset -= halfWidth;
      if (currentOffset < -halfWidth * 2) currentOffset += halfWidth;

      inner.style.transform = "translateX(" + currentOffset + "px)";
    }

    function onDragEnd() {
      if (!isDragging) return;
      isDragging = false;
      track.style.cursor = "grab";
      resumeTimeout = setTimeout(resumeMarquee, 80);
    }

    // Mouse
    track.addEventListener("mousedown", function (e) {
      onDragStart(e.clientX);
      e.preventDefault();
    });
    window.addEventListener("mousemove", function (e) {
      onDragMove(e.clientX);
    });
    window.addEventListener("mouseup", function () {
      onDragEnd();
    });

    // Touch
    track.addEventListener("touchstart", function (e) {
      onDragStart(e.touches[0].clientX);
    }, { passive: true });
    track.addEventListener("touchmove", function (e) {
      onDragMove(e.touches[0].clientX);
    }, { passive: true });
    track.addEventListener("touchend", function () {
      onDragEnd();
    });

    track.style.cursor = "grab";
  });

});