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

  const gifContainers = document.querySelectorAll(".gif-container");

  gifContainers.forEach((container) => {

    const img = container.querySelector("img[data-gif]");

    if (img) {

      const pngSrc = img.src;

      const gifSrc = img.getAttribute("data-gif");

      let isGif = false;

      // Create play button dynamically

      const playButton = document.createElement("button");

      playButton.className = "gif-play-button";

      playButton.setAttribute("aria-label", "Play demo");

      container.appendChild(playButton);

      function toggleGif() {

        if (!isGif) {

          // Switch to GIF

          img.src = gifSrc;

          isGif = true;

          container.classList.add("playing");

        } else {

          // Switch back to PNG

          img.src = pngSrc;

          isGif = false;

          container.classList.remove("playing");

        }

      }

      // Play button click

      playButton.addEventListener("click", function (e) {

        e.preventDefault();

        e.stopPropagation();

        toggleGif();

      });

      // Image click (play or pause)

      img.addEventListener("click", function (e) {

        e.preventDefault();

        e.stopPropagation();

        toggleGif();

      });

    }

  });

});