document.addEventListener("DOMContentLoaded", () => {
  class Marquee {
    constructor(element, options = {}) {
      this.el = element;
      this.inner = this.el.querySelector(".marquee-inner");

      // Default options
      this.settings = Object.assign({
        direction: this.el.dataset.direction || "up", // up, down, left, right
        speed: 60, // pixels per second
        pauseOnHover: true,
        gap: 16,
      }, options);

      this.axis = (this.settings.direction === "left" || this.settings.direction === "right") ? "X" : "Y";
      this.translate = 0;
      this.paused = false;
      this.children = [];

      this.setup();
      this.start();
    }

    setup() {
      this.el.style.overflow = "hidden";
      this.el.style.position = "relative";

      this.inner.style.display = "flex";
      this.inner.style.flexDirection = (this.axis === "Y") ? "column" : "row";
      this.inner.style.gap = `${this.settings.gap}px`;
      this.inner.style.willChange = "transform";

      // Collect child nodes
      this.children = Array.from(this.inner.children);

      // Fill container initially
      this.fillContainer();

      if (this.settings.pauseOnHover) {
        this.el.addEventListener("mouseenter", () => this.paused = true);
        this.el.addEventListener("mouseleave", () => this.paused = false);
      }
    }

    fillContainer() {
      const totalSize = this.getTotalSize();
      const containerSize = this.getContainerSize();

      // keep duplicating until we cover at least twice the container size
      while (this.getTotalSize() < containerSize * 2) {
        const clone = this.children.map(node => node.cloneNode(true));
        clone.forEach(node => this.inner.appendChild(node));
        this.children = Array.from(this.inner.children);
      }
    }

    getContainerSize() {
      return (this.axis === "Y") ? this.el.offsetHeight : this.el.offsetWidth;
    }

    getTotalSize() {
      return (this.axis === "Y") ? this.inner.scrollHeight : this.inner.scrollWidth;
    }

    start() {
      const frame = () => {
        if (!this.paused) {
          const distancePerFrame = this.settings.speed / 60;
          const directionSign =
            (this.settings.direction === "up" || this.settings.direction === "left") ? -1 : 1;

          this.translate += distancePerFrame * directionSign;

          // wrap logic: when first child fully moves out of view
          const firstChild = this.inner.children[0];
          const firstSize = (this.axis === "Y") ? firstChild.offsetHeight : firstChild.offsetWidth;
          const firstGap = this.settings.gap;

          if ((directionSign === -1 && Math.abs(this.translate) >= firstSize + firstGap) ||
              (directionSign === 1 && this.translate >= firstSize + firstGap)) {
            // move the first child to the end
            this.inner.appendChild(firstChild);
            this.translate -= (firstSize + firstGap) * directionSign;
          }

          // apply transform
          this.inner.style.transform =
            (this.axis === "Y")
              ? `translateY(${this.translate * -1}px)`
              : `translateX(${this.translate * -1}px)`;
        }

        requestAnimationFrame(frame);
      };
      requestAnimationFrame(frame);
    }
  }

  // 🔹 Initialize all marquees
  document.querySelectorAll(".marquee").forEach(el => {
    new Marquee(el, {
      speed: 40,         // pixels per second
      gap: 16,           // spacing between boxes
      pauseOnHover: true // toggle hover pause
    });
  });
});