document.addEventListener('DOMContentLoaded', function () {
  const thumbs = document.querySelectorAll('[games-thumb]');
  const contents = document.querySelectorAll('[games-content]');
  const galleryWrapper = document.querySelector('[games-gallery="wrapper"]');
  const galleryImage = document.querySelector('[games-gallery="image"]');

  thumbs.forEach(function (thumb) {
    thumb.addEventListener('click', function () {
      const name = this.getAttribute('games-thumb');
      const thumbImage = this.querySelector('img');

      // Remove is-active from all contents
      contents.forEach(function (content) {
        content.classList.remove('is-active');
      });

      // Remove is-active from gallery wrapper
      if (galleryWrapper) {
        galleryWrapper.classList.remove('is-active');
      }

      // Add is-active to matching content
      const targetContent = document.querySelector(
        '[games-content="' + name + '"]'
      );
      if (targetContent) {
        targetContent.classList.add('is-active');
      }

      // Update gallery image src and srcset

      // Add is-active to gallery wrapper with delay
      if (galleryWrapper) {
        setTimeout(function () {
          galleryWrapper.classList.add('is-active');
          if (galleryImage && thumbImage) {
            galleryImage.src = thumbImage.src;
            galleryImage.srcset = thumbImage.srcset;
          }
        }, 300);
      }
    });
  });
});