(function () {
  function initHorizontalList(block) {
    var list = block.querySelector('.horizontal-list');
    var left = block.querySelector('[data-dir="left"]');
    var right = block.querySelector('[data-dir="right"]');

    if (!list || !left || !right) {
      return;
    }

    function getScrollAmount() {
      return Math.max(200, Math.floor(list.clientWidth * 0.8));
    }

    function updateArrows() {
      var maxScroll = list.scrollWidth - list.clientWidth;
      var hasOverflow = maxScroll > 1;
      var atStart = list.scrollLeft <= 1;
      var atEnd = list.scrollLeft >= maxScroll - 1;

      left.classList.toggle('is-hidden', !hasOverflow || atStart);
      right.classList.toggle('is-hidden', !hasOverflow || atEnd);
    }

    left.addEventListener('click', function () {
      list.scrollBy({ left: -getScrollAmount(), behavior: 'smooth' });
    });

    right.addEventListener('click', function () {
      list.scrollBy({ left: getScrollAmount(), behavior: 'smooth' });
    });

    list.addEventListener('scroll', function () {
      window.requestAnimationFrame(updateArrows);
    });

    window.addEventListener('resize', updateArrows);
    updateArrows();
  }

  document.addEventListener('DOMContentLoaded', function () {
    var blocks = document.querySelectorAll('[data-horizontal-list]');
    blocks.forEach(initHorizontalList);
  });
})();
