// 360 RCS — interactive before/after image comparison slider
// Works with mouse, touch, and keyboard (left/right arrows) for accessibility.
(function () {
  function initSlider(root) {
    var handle = root.querySelector('.ba-handle');
    var afterWrap = root.querySelector('.ba-after-wrap');
    var isDragging = false;

    function setPosition(percent) {
      percent = Math.max(0, Math.min(100, percent));
      afterWrap.style.clipPath = 'inset(0 0 0 ' + percent + '%)';
      handle.style.left = percent + '%';
      handle.setAttribute('aria-valuenow', Math.round(percent));
    }

    function percentFromClientX(clientX) {
      var rect = root.getBoundingClientRect();
      var x = clientX - rect.left;
      return (x / rect.width) * 100;
    }

    function onMove(clientX) {
      setPosition(percentFromClientX(clientX));
    }

    // Mouse events
    handle.addEventListener('mousedown', function (e) {
      isDragging = true;
      e.preventDefault();
    });
    document.addEventListener('mousemove', function (e) {
      if (!isDragging) return;
      onMove(e.clientX);
    });
    document.addEventListener('mouseup', function () { isDragging = false; });

    // Allow clicking/dragging anywhere on the image, not just the handle
    root.addEventListener('mousedown', function (e) {
      isDragging = true;
      onMove(e.clientX);
    });

    // Touch events
    root.addEventListener('touchstart', function (e) {
      isDragging = true;
      onMove(e.touches[0].clientX);
    }, { passive: true });
    root.addEventListener('touchmove', function (e) {
      if (!isDragging) return;
      onMove(e.touches[0].clientX);
    }, { passive: true });
    root.addEventListener('touchend', function () { isDragging = false; });

    // Keyboard accessibility
    handle.setAttribute('tabindex', '0');
    handle.setAttribute('role', 'slider');
    handle.setAttribute('aria-label', 'Before and after image comparison');
    handle.setAttribute('aria-valuemin', '0');
    handle.setAttribute('aria-valuemax', '100');
    handle.addEventListener('keydown', function (e) {
      var current = parseFloat(handle.style.left) || 50;
      if (e.key === 'ArrowLeft') { setPosition(current - 5); e.preventDefault(); }
      if (e.key === 'ArrowRight') { setPosition(current + 5); e.preventDefault(); }
    });

    // Initialize at 50%
    setPosition(50);
  }

  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.ba-slider').forEach(initSlider);
  });
})();