Магазин качественного
тюнинга автомобилей

document.addEventListener('DOMContentLoaded', () => {
      const slider = document.getElementById('bsm-slider');
      const prevBtn = document.querySelector('.bsm-prev-btn');
      const nextBtn = document.querySelector('.bsm-next-btn');

      let isMobile = window.innerWidth <= 1024;
      let isVisible = false;
      let rafId = null;
      let pos = 0;
      let target = 0;
      
      let isDragging = false;
      let startX = 0;
      let startTarget = 0;
      let lastX = 0;
      let dragVelocity = 0;
      let lastMoveTime = 0;
      let wheelTimer = null;

      let maxScroll = 0;
      let slideWidth = 0;

      const updateMetrics = () => {
        const slide = slider.querySelector('.bsm-slide');
        if (slide) {
          const gap = parseInt(window.getComputedStyle(slider).gap) || 0;
          slideWidth = slide.offsetWidth + gap;
        }
        maxScroll = slider.scrollWidth - slider.clientWidth;
      };

      const updateButtons = () => {
        const current = isMobile ? slider.scrollLeft : target;
        prevBtn.classList.toggle('bsm-is-disabled', current <= 1);
        nextBtn.classList.toggle('bsm-is-disabled', current >= maxScroll - 1);
      };

      const loop = () => {
        if (!isVisible || isMobile) {
          rafId = null;
          return;
        }

        if (Math.abs(target - pos) > 0.5) {
          pos += (target - pos) * 0.1;
        } else {
          pos = target;
        }

        slider.scrollLeft = pos;
        updateButtons();

        rafId = requestAnimationFrame(loop);
      };

      const startLoop = () => {
        if (!rafId && isVisible && !isMobile) {
          pos = slider.scrollLeft;
          target = pos;
          rafId = requestAnimationFrame(loop);
        }
      };

      const observer = new IntersectionObserver((entries) => {
        isVisible = entries[0].isIntersecting;
        if (isVisible) {
          updateMetrics();
          startLoop();
        }
      });
      observer.observe(slider);

      window.addEventListener('resize', () => {
        isMobile = window.innerWidth <= 1024;
        updateMetrics();
        if (!isMobile && isVisible) startLoop();
        updateButtons();
      });

      slider.addEventListener('scroll', () => {
        if (isMobile) updateButtons();
      });

      const scrollSlider = (dir) => {
        if (isMobile) {
          slider.scrollBy({ left: dir * slideWidth, behavior: 'smooth' });
        } else {
          target = Math.round(target / slideWidth) * slideWidth + (dir * slideWidth);
          target = Math.max(0, Math.min(target, maxScroll));
        }
      };

      prevBtn.addEventListener('click', () => scrollSlider(-1));
      nextBtn.addEventListener('click', () => scrollSlider(1));

      slider.addEventListener('mousedown', (e) => {
        if (isMobile || !isVisible) return;
        isDragging = true;
        slider.classList.add('bsm-is-dragging');
        startX = e.pageX;
        startTarget = target;
        lastX = e.pageX;
        dragVelocity = 0;
        clearTimeout(wheelTimer);
      });

      window.addEventListener('mousemove', (e) => {
        if (!isDragging || isMobile || !isVisible) return;
        e.preventDefault(); 
        
        dragVelocity = e.pageX - lastX;
        lastX = e.pageX;
        lastMoveTime = Date.now();
        
        const walk = (e.pageX - startX) * 1.5;
        let newTarget = startTarget - walk;
        
        if (newTarget < 0) {
          newTarget = newTarget * 0.3;
        } else if (newTarget > maxScroll) {
          newTarget = maxScroll + (newTarget - maxScroll) * 0.3;
        }
        
        target = newTarget;
      });

      window.addEventListener('mouseup', () => {
        if (!isDragging || isMobile || !isVisible) return;
        isDragging = false;
        slider.classList.remove('bsm-is-dragging');
        
        if (Date.now() - lastMoveTime > 100) {
          dragVelocity = 0;
        }
        
        target -= dragVelocity * 5; 
        target = Math.round(target / slideWidth) * slideWidth;
        target = Math.max(0, Math.min(target, maxScroll));
      });

      slider.addEventListener('wheel', (e) => {
        if (isMobile || !isVisible || !e.shiftKey) return;
        e.preventDefault();
        
        target += (e.deltaY + e.deltaX) * 1.2;
        target = Math.max(0, Math.min(target, maxScroll));

        clearTimeout(wheelTimer);
        wheelTimer = setTimeout(() => {
          target = Math.round(target / slideWidth) * slideWidth;
          target = Math.max(0, Math.min(target, maxScroll));
        }, 150);
      }, { passive: false });

      updateMetrics();
      updateButtons();
    });