const SERVICES = [
  {
    title: "انتخاب مدل مشاوره",
    pets: ["سگ", "گربه", "پرنده", "جوندگان کوچک", "سایر"],
    optionsByPet: null,
    defaultOptions: ["بسته مشاوره فوری تلفنی+متنی", "بسته مشاوره متنی"],
    buttonText: "دریافت مشاوره",
    servicePlaceholder: {
      text: " مدل مشاوره رو تعیین کنید  ",
      icon: `
       <svg width="24" height="24">
                  <use href="./assets/icons.svg#selectbox-icons"></use>
                </svg>
      `,
    },
    buttonIcon: {
      type: "svg",
      svg: ` <svg width="24" height="24">
                  <use href="./assets/icons.svg#moshavere"></use>
                </svg>`,
    },
  },
  {
    title: "انتخاب  شهر",
    pets: ["سگ", "گربه", "پرنده", "جوندگان کوچک", "سایر"],
    optionsByPet: null,
    defaultOptions: ["تهران", "شیراز", "تبریز", "مشهد", "اصفهان", "اهواز"],
    servicePlaceholder: {
      text: " شهرخودتون رو انتخاب کنید   ",
      icon: `
       <svg width="20" height="20">
                  <use href="./assets/icons.svg#location-icons"></use>
                </svg>
      `,
    },
    buttonText: " رزرو وقت",
    buttonIcon: {
      type: "svg",
      svg: `<svg width="20" height="20">
                  <use href="./assets/icons.svg#rezerv"></use>
                </svg>`,
    },
  },
  {
    title: "انتخاب  نوع برنامه",
    pets: ["سگ", "گربه", "پرنده"],
    optionsByPet: {
      سگ: ["برنامه غذایی اختصاصی 1 ماهه سگ"],
      گربه: ["برنامه غذایی اختصاصی 1 ماهه گربه"],
      پرنده: ["برنامه غذایی آماده پرندگان"],
    },
    defaultOptions: [
      "برنامه غذایی اختصاصی 1 ماهه سگ",
      "برنامه غذایی اختصاصی 1 ماهه گربه",
      "برنامه غذایی آماده پرندگان",
    ],
    servicePlaceholder: {
      text: " نوع برنامه رو انتخاب کنید ",
      icon: `
        <svg width="24" height="24">
                  <use href="./assets/icons.svg#barname-icons"></use>
                </svg>
      `,
    },
    buttonText: "دریافت برنامه",
    buttonIcon: {
      type: "svg",
      svg: `
   <svg width="24" height="24">
                  <use href="./assets/icons.svg#barname-in"></use>
                </svg>
    `,
    },
  },
  {
    title: "انتخاب نوع آموزش ",
    pets: ["سگ", "گربه", "پرنده", "خرگوش"],
    optionsByPet: {
      سگ: [
        " ایبوک چگونه توله سگ مودبی باشیم",
        "راهنمای جامع زندگی با سگ (به صورت کاربردی)",
        "9ترفند برای تربیت سگ با کلیکر",
        "راه‌‌حل‌های ساده برای مشکلات رفتاری سگ‌ها",
        "ایبوک 101 نکته ضروری مراقبت از سگ‌ها",
        "چگونه با سگ خود بازی کنیم",
      ],
      گربه: [
        "راهنمای نگهداری،آموزش و تربیت گربه",
        "101 نکته ضروری مراقبت از گربه",
      ],
      پرنده: ["مراقبت از عروس هلندی، راهنمای جامع"],
      خرگوش: ["راهنمای نگهداری و تربیت خرگوش‌ها(0تا100)"],
    },
    defaultOptions: [
      " ایبوک چگونه توله سگ مودبی باشیم",
      "راهنمای جامع زندگی با سگ (به صورت کاربردی)",
      "9ترفند برای تربیت سگ با کلیکر",
      "راه‌‌حل‌های ساده برای مشکلات رفتاری سگ‌ها",
      "ایبوک 101 نکته ضروری مراقبت از سگ‌ها",
      "چگونه با سگ خود بازی کنیم",
      "راهنمای نگهداری،آموزش و تربیت گربه",
      "101 نکته ضروری مراقبت از گربه",
      "مراقبت از عروس هلندی راهنمای جامع",
      "راهنمای نگهداری و تربیت خرگوش‌ها(0تا100)",
    ],
    buttonText: "شروع آموزش",
    servicePlaceholder: {
      text: "چی میخوایین بهش یادبدین؟",
      icon: `
       <svg width="24" height="24">
                  <use href="./assets/icons.svg#amozesh-icons"></use>
                </svg>

      `,
    },
    buttonIcon: {
      type: "svg",
      svg: `
     <svg
            aria-hidden="true"
            width="24"
            height="24"
          >
            <use href="./assets/icons.svg#amozesh"></use>
          </svg>
    `,
    },
  },
];

const overlay = document.getElementById("overlay");

let activeService = 0;
let tempPet = null;
let tempService = null;
let selectedPet = null;
let selectedService = null;

const serviceBoxes = document.querySelectorAll(".services-box");

serviceBoxes.forEach((box) => {
  box.addEventListener("click", () => {
    serviceBoxes.forEach((b) => {
      b.classList.remove("active");
      b.classList.remove("show-text");
    });

    box.classList.add("active");
    activeService = Number(box.dataset.service);
    updateAll();

    if (window.innerWidth <= 768) {
      box.classList.add("show-text");

      const filtersSection = document.querySelector(".filters");

      const offset = 350;
      const bodyRect = document.body.getBoundingClientRect().top;
      const elementRect = filtersSection.getBoundingClientRect().top;
      const elementPosition = elementRect - bodyRect;
      const offsetPosition = elementPosition - offset;

      window.scrollTo({
        top: offsetPosition,
        behavior: "smooth",
      });
    }
  });
});

const petBox = document.getElementById("selectBox");
const petDropdown = document.getElementById("dropdown");
const petOptions = document.getElementById("petOptions");
const selectedPetText = document.getElementById("selectedText");

overlay.addEventListener("click", closeAllDropdowns);

petBox.addEventListener("click", (e) => {
  e.stopPropagation();

  const isOpen = petDropdown.classList.contains("accordion-open");

  if (isOpen) {
    closeAllDropdowns();
    return;
  }

  serviceDropdown.classList.remove("accordion-open");
  serviceDropdown.style.display = "none";

  if (window.innerWidth <= 768) {
    overlay.classList.add("active");
    petDropdown.style.display = "block";

    requestAnimationFrame(() => {
      petDropdown.classList.add("accordion-open");
    });
    document.body.style.overflow = "hidden";
  } else {
    petDropdown.style.display = "block";
    overlay.classList.remove("active");

    requestAnimationFrame(() => {
      const rect = petDropdown.getBoundingClientRect();
      const dropdownBottom = rect.bottom + window.pageYOffset;
      const scrollBottom = dropdownBottom - window.innerHeight;

      if (scrollBottom > 0) {
        window.scrollTo({
          top: scrollBottom + 20,
          behavior: "smooth",
        });
      }
    });
  }
});

document.getElementById("confirmPet").addEventListener("click", (e) => {
  e.stopPropagation();
  if (tempPet) {
    selectedPet = tempPet;
    selectedPetText.textContent = tempPet;
    updateServiceOptions();
  }
  closeAllDropdowns();
  updateButtonState();
});

document.getElementById("cancelPet").addEventListener("click", (e) => {
  e.stopPropagation();
  tempPet = null;
  closeAllDropdowns();
});

const serviceBox = document.getElementById("serviceSelect");
const serviceDropdown = document.getElementById("serviceDropdown");
const serviceOptions = document.getElementById("serviceOptions");
const selectedServiceText = document.getElementById("selectedService");
const serviceTitle = document.getElementById("serviceTitle");

serviceBox.addEventListener("click", (e) => {
  e.stopPropagation();

  const isOpen = serviceDropdown.classList.contains("accordion-open");

  if (isOpen) {
    closeAllDropdowns();
    return;
  }

  petDropdown.classList.remove("accordion-open");
  petDropdown.style.display = "none";

  if (typeof SERVICES !== "undefined" && SERVICES[activeService]) {
    serviceTitle.textContent = SERVICES[activeService].title;
  }

  // serviceDropdown.classList.add("accordion-open");

  if (window.innerWidth <= 767) {
    overlay.classList.add("active");
    serviceDropdown.style.display = "block";
    requestAnimationFrame(() => {
      serviceDropdown.classList.add("accordion-open");
    });
  } else {
    serviceDropdown.style.display = "block";
    overlay.classList.remove("active");

    requestAnimationFrame(() => {
      const rect = serviceDropdown.getBoundingClientRect();
      if (rect.bottom > window.innerHeight) {
        window.scrollBy({
          top: rect.bottom - window.innerHeight + 20,
          behavior: "smooth",
        });
      }
    });
  }
});

document.getElementById("confirmService").addEventListener("click", (e) => {
  e.stopPropagation();
  if (tempService) {
    selectedService = tempService;
    selectedServiceText.textContent = tempService;
    if (activeService < SERVICES.length - 1) {
      activeService++;
      serviceTitle.textContent = SERVICES[activeService].title;
    }
    closeAllDropdowns();
    updateButtonState();
    tempService = null;
  }
});

document.getElementById("cancelService").addEventListener("click", (e) => {
  e.stopPropagation();
  tempService = null;
  closeAllDropdowns();
});

petDropdown.addEventListener("click", (e) => e.stopPropagation());
serviceDropdown.addEventListener("click", (e) => e.stopPropagation());

function closeAllDropdowns() {
  petDropdown.classList.remove("accordion-open");
  serviceDropdown.classList.remove("accordion-open");
  overlay.classList.remove("active");

  document.body.style.overflow = "auto";

  if (window.innerWidth <= 767) {
    setTimeout(() => {
      if (!serviceDropdown.classList.contains("accordion-open")) {
        serviceDropdown.style.display = "none";
        petDropdown.style.display = "none";
      }
    }, 300);
  } else {
    petDropdown.style.display = "none";
    serviceDropdown.style.display = "none";
  }
}

overlay.addEventListener("click", closeAllDropdowns);
document.addEventListener("click", (e) => {
  const isClickInsidePet = petBox.contains(e.target);
  const isClickInsideService = serviceBox.contains(e.target);

  if (!isClickInsidePet && !isClickInsideService) {
    closeAllDropdowns();
  }
});

function updateAll() {
  updatePetOptions();
  updateServiceOptions();
  updateButton();
}

function updatePetOptions() {
  petOptions.innerHTML = "";
  tempPet = null;
  selectedPetText.textContent = "نوع پت خودتون رو مشخص کنید";
  selectedPet = null;
  selectedService = null;
  updateButtonState();
  selectedPetText.style.color = "#000000";
  SERVICES[activeService].pets.forEach((pet) => {
    petOptions.innerHTML += `
      <label class="option">
        <input type="radio" name="pet" value="${pet}">
        ${pet}
      </label>
    `;
  });

  petOptions.querySelectorAll("input").forEach((radio) => {
    radio.onchange = () => {
      tempPet = radio.value;

      petOptions.querySelectorAll(".option").forEach((label) => {
        label.classList.remove("active");
      });

      radio.closest(".option").classList.add("active");

      if (window.innerWidth > 768) {
        selectedPet = tempPet;
        selectedPetText.textContent = tempPet;
        closeAllDropdowns();
        updateServiceOptions();
        updateButtonState();
      }
    };
  });
}

function setPlaceholder(el, placeholder) {
  if (!placeholder) return;
  el.innerHTML = `
    <span class="placeholder-content">
      ${placeholder.icon || ""}
      <span class="placeholder-text">${placeholder.text}</span>
    </span>
  `;
  el.style.color = "#000000";
}

function updateServiceOptions() {
  serviceOptions.innerHTML = "";
  tempService = null;
  setPlaceholder(
    selectedServiceText,
    SERVICES[activeService].servicePlaceholder,
  );

  const serviceData = SERVICES[activeService];
  const optionsToShow =
    serviceData.optionsByPet && tempPet && serviceData.optionsByPet[tempPet]
      ? serviceData.optionsByPet[tempPet]
      : serviceData.defaultOptions;

  optionsToShow.forEach((opt) => {
    serviceOptions.innerHTML += `
      <label class="option">
        <input type="radio" name="serviceOpt" value="${opt}">
        ${opt}
      </label>
    `;
  });

  serviceOptions.querySelectorAll("input").forEach((radio) => {
    radio.onchange = (e) => {
      e.stopPropagation();

      tempService = radio.value;

      if (window.innerWidth > 768) {
        selectedService = tempService;
        selectedServiceText.textContent = tempService;

        serviceDropdown.classList.remove("accordion-open");
        closeAllDropdowns();
        updateButtonState();
      }
    };
  });
}

function updateButton() {
  const btn = document.getElementById("mainActionBtn");
  const iconData = SERVICES[activeService].buttonIcon;
  const text = SERVICES[activeService].buttonText;

  let iconHTML = iconData.svg;

  btn.innerHTML = `
    ${iconHTML}
    <span>${text}</span>
  `;
}

function updateButtonState() {
  const btn = document.getElementById("mainActionBtn");

  if (selectedService) {
    btn.disabled = false;
    btn.style.opacity = "1";
    btn.style.cursor = "pointer";
  } else {
    btn.disabled = true;
    btn.style.opacity = "0.5";
    btn.style.cursor = "not-allowed";
  }
}

updateAll();
updateButtonState();
const wrapper = document.querySelector(".words-wrapper");

let index = 0;

setInterval(() => {
  index = (index + 1) % 4;

  wrapper.style.transform = `translateY(-${index * 50}px)`;
}, 1400);

function addSwipeToClose(dropdownElement) {
  const handle = dropdownElement.querySelector(".line-option");
  if (!handle) return;

  let startY = 0;
  let currentY = 0;
  let isDragging = false;

  handle.addEventListener("touchstart", (e) => {
    if (window.innerWidth > 575) return;
    if (!dropdownElement.classList.contains("accordion-open")) return;

    startY = e.touches[0].clientY;
    currentY = startY;
    isDragging = true;

    dropdownElement.style.transition = "none";
  });

  handle.addEventListener("touchmove", (e) => {
    if (!isDragging) return;

    currentY = e.touches[0].clientY;
    const diff = currentY - startY;

    if (diff > 0) {
      dropdownElement.style.bottom = `${-10 - diff}px`;
    }
  });

  handle.addEventListener("touchend", () => {
    if (!isDragging) return;
    isDragging = false;

    dropdownElement.style.transition = "bottom 0.4s cubic-bezier(.25,.8,.25,1)";

    const diff = currentY - startY;
    if (diff > 120) {
      closeAllDropdowns();
    } else {
      dropdownElement.style.bottom = "-10px";
    }
    setTimeout(() => {
      if (!dropdownElement.classList.contains("accordion-open")) {
        dropdownElement.style.bottom = "";
        dropdownElement.style.transition = "";
      }
    }, 400);
  });
}
addSwipeToClose(petDropdown);
addSwipeToClose(serviceDropdown);

// ----------------------------body------------------------------

document.addEventListener("DOMContentLoaded", function () {
  const scrollBtn = document.querySelector(".second-button");
  const heroBox = document.querySelector(".hero-box");

  scrollBtn.addEventListener("click", function () {
    heroBox.scrollIntoView({
      behavior: "smooth",
      block: "start",
    });
  });
});

const slider = document.querySelector(".op-box");
const cards = document.querySelectorAll(".op-card");
const pagination = document.querySelector(".op-pagination");

let cardWidth;
let cardsPerPage = 0;
let totalDots;

function setupSlider() {
  const style = window.getComputedStyle(slider);
  const gap = parseInt(style.gap) || 0;

  cardWidth = cards[0].offsetWidth + gap;

  const newCardsPP = Math.round(slider.offsetWidth / cardWidth);

  if (newCardsPP < 1) {
    cardsPerPage = 1;
  } else if (cardsPerPage == newCardsPP) return;
  else {
    cardsPerPage = newCardsPP;
  }

  totalDots = Math.ceil(cards.length - cardsPerPage + 1);

  pagination.innerHTML = "";

  for (let i = 0; i < totalDots; i++) {
    const dot = document.createElement("div");
    dot.classList.add("op-dot");

    dot.addEventListener("click", () => {
      const scrollPosition = i * cardWidth;

      slider.scrollTo({
        left: -scrollPosition,
        behavior: "smooth",
      });
    });

    pagination.appendChild(dot);
  }

  setActiveDot();
}

setupSlider();

window.addEventListener("resize", setupSlider, { passive: true });

slider.addEventListener("scroll", setActiveDot, { passive: true });

function setActiveDot() {
  const index = Math.round(Math.abs(slider.scrollLeft) / cardWidth);

  const dots = document.querySelectorAll(".op-dot");

  const isActive = dots[index]?.classList.contains("active");

  if (isActive) {
    return;
  } else {
    dots.forEach((d) => d.classList.remove("active"));
    dots[index]?.classList.add("active");
  }
}

// Dragging scroll in pc
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener("mousedown", (e) => {
  isDown = true;
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});

slider.addEventListener("mouseleave", () => {
  isDown = false;
});

slider.addEventListener("mouseup", () => {
  isDown = false;
});

slider.addEventListener("mousemove", (e) => {
  if (!isDown) return;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (startX - x) * 1.3;
  slider.scrollLeft = scrollLeft + walk;
});

document.addEventListener("DOMContentLoaded", function () {
  const clinicsBox = document.querySelector(".clinics-box");
  const cards = document.querySelectorAll(".clinic-card");
  const dots = document.querySelectorAll(".clinics-pagination span");

  if (!clinicsBox) return;

  function updateDots() {
    let closestIndex = 0;
    let smallestDistance = Infinity;

    cards.forEach((card, index) => {
      const cardRect = card.getBoundingClientRect();
      const containerRect = clinicsBox.getBoundingClientRect();

      const cardCenter = cardRect.left + cardRect.width / 2;
      const containerCenter = containerRect.left + containerRect.width / 2;

      const distance = Math.abs(containerCenter - cardCenter);

      if (distance < smallestDistance) {
        smallestDistance = distance;
        closestIndex = index;
      }
    });

    dots.forEach((dot) => dot.classList.remove("active"));
    dots[closestIndex].classList.add("active");
  }

  clinicsBox.addEventListener("scroll", updateDots, { passive: true });

  dots.forEach((dot, i) => {
    dot.addEventListener("click", () => {
      cards[i].scrollIntoView({
        behavior: "smooth",
        inline: "center",
      });
    });
  });
});

document.addEventListener("DOMContentLoaded", function () {
  const slider = document.querySelector(".banner-slider");
  const slidesContainer = document.querySelector(".banner-slides");
  const slides = document.querySelectorAll(".slide");
  const next = document.querySelector(".next");
  const prev = document.querySelector(".prev");
  const pagination = document.querySelector(".banner-pagination");

  let index = 0;
  let total = slides.length;
  let startX = 0;
  let autoplay = setInterval(() => {
    showSlide(index + 1);
  }, 4000);

  const pauseAutoPlay = () => {
    clearInterval(autoplay);
  };
  const playAutoPlay = () => {
    autoplay = setInterval(() => {
      showSlide(index + 1);
    }, 4000);
  };

  slides.forEach((_, i) => {
    const dot = document.createElement("span");
    dot.classList.add("banner-dot");

    if (i === 0) dot.classList.add("active");

    dot.addEventListener("click", () => {
      pauseAutoPlay();
      showSlide(i);
      playAutoPlay();
    });

    pagination.appendChild(dot);
  });

  const dots = document.querySelectorAll(".banner-dot");

  function showSlide(i) {
    if (i >= total) index = 0;
    else if (i < 0) index = total - 1;
    else index = i;

    slidesContainer.style.transform = `translateX(${index * 100}%)`;

    dots.forEach((d) => d.classList.remove("active"));
    dots[index].classList.add("active");

    updateButtons();
  }

  function updateButtons() {
    next.disabled = index === 0;
    prev.disabled = index === total - 1;
  }

  next.addEventListener("click", () => {
    pauseAutoPlay();
    showSlide(index + 1);
    playAutoPlay();
  });

  prev.addEventListener("click", () => {
    pauseAutoPlay();
    showSlide(index - 1);
    playAutoPlay();
  });

  slidesContainer.addEventListener("touchstart", (e) => {
    startX = e.touches[0].clientX;
  });

  slidesContainer.addEventListener("touchend", (e) => {
    let endX = e.changedTouches[0].clientX;
    let diff = startX - endX;

    if (Math.abs(diff) > 50) {
      pauseAutoPlay();
      if (diff > 0) showSlide(index + 1);
      else showSlide(index - 1);
      playAutoPlay();
    }
  });

  let isDown = false;

  slidesContainer.addEventListener("mousedown", (e) => {
    isDown = true;
    startX = e.clientX;
  });

  slidesContainer.addEventListener("mouseup", (e) => {
    if (!isDown) return;

    let diff = startX - e.clientX;
    isDown = false;

    if (Math.abs(diff) > 50) {
      pauseAutoPlay();
      if (diff > 0) showSlide(index + 1);
      else showSlide(index - 1);
      playAutoPlay();
    }
  });
  slider.addEventListener("mouseenter", () => {
    pauseAutoPlay();
  });
  slider.addEventListener("mouseleave", () => {
    pauseAutoPlay();
    playAutoPlay();
  });
});

// Blog Mouse Dragging

document.addEventListener("DOMContentLoaded", function () {
  const container = document.querySelector(".blog-section-box");

  let isDown = false;
  let startX;
  let scrollLeft;
  let isDragged = false;
  let startScrollLeft;

  container.addEventListener("mousedown", (e) => {
    isDown = true;
    isDragged = false;
    startX = e.pageX - container.offsetLeft;
    scrollLeft = container.scrollLeft;
    startScrollLeft = container.scrollLeft;
  });

  container.addEventListener("mouseleave", () => {
    isDown = false;
  });

  container.addEventListener("mouseup", (e) => {
    isDown = false;

    const moved = Math.abs(container.scrollLeft - startScrollLeft);
    if (moved > 5) {
      isDragged = true;
    }
  });

  container.addEventListener("mousemove", (e) => {
    if (!isDown) return;
    e.preventDefault();

    const x = e.pageX - container.offsetLeft;
    const walk = (startX - x) * 1.3;
    container.scrollLeft = scrollLeft + walk;

    if (Math.abs(walk) > 3) {
      isDragged = true;
    }
  });

  container.addEventListener(
    "click",
    (e) => {
      if (isDragged) {
        e.preventDefault();
        e.stopImmediatePropagation();
        isDragged = false;
      }
    },
    true,
  );
});

document.addEventListener("DOMContentLoaded", function () {
  const categoryButtons = document.querySelectorAll(".blog-category");
  const blogBoxes = document.querySelectorAll(".blog-box");

  categoryButtons.forEach((button) => {
    button.addEventListener("click", function () {
      categoryButtons.forEach((btn) => btn.classList.remove("active"));
      this.classList.add("active");

      const selectedCategory = this.textContent.trim();

      blogBoxes.forEach((box) => {
        const badges = box.querySelectorAll(".blog-badge");
        let matchFound = false;

        badges.forEach((badge) => {
          const badgeText = badge.textContent.trim();

          if (selectedCategory === "همه") {
            matchFound = true;
          }

          if (badgeText.includes(selectedCategory)) {
            matchFound = true;
          }
        });

        if (matchFound) {
          box.style.display = "block";
        } else {
          box.style.display = "none";
        }
      });
    });
  });
});

document.addEventListener("DOMContentLoaded", function () {
  const aboutText = document.querySelector(".about-section-text");
  const btn = document.querySelector(".about-section-btn");
  const btnText = btn.querySelector("p");

  btn.addEventListener("click", function (e) {
    const isOpen = aboutText.classList.contains("open");

    if (!isOpen) {
      aboutText.classList.add("open");
      btn.classList.add("open");
      btnText.textContent = "مطالعه کمتر";
    } else {
      aboutText.classList.remove("open");
      btn.classList.remove("open");
      btnText.textContent = "مطالعه بیشتر";

      aboutText.scrollIntoView({ behavior: "smooth", block: "start" });
    }
  });
});

document.addEventListener("DOMContentLoaded", function () {
  const modal = document.getElementById("videoModal");
  const openTrigger = document.querySelector(".about-left-img");
  const closeBtn = document.querySelector(".close-btn");
  const cover = document.getElementById("videoCover");
  const video = document.getElementById("aboutVideo");
  const fullscreenBtn = document.getElementById("fullscreenBtn");

  openTrigger.addEventListener("click", () => {
    modal.classList.add("active");
    document.body.style.overflow = "hidden";
  });

  function closeModal() {
    modal.classList.remove("active");
    video.pause();
    video.currentTime = 0;
    video.style.display = "none";
    cover.style.display = "block";
    document.body.style.overflow = "auto";
  }
  closeBtn.addEventListener("click", closeModal);

  modal.addEventListener("click", (e) => {
    if (e.target === modal) {
      closeModal();
    }
  });
  cover.addEventListener("click", () => {
    cover.style.display = "none";
    video.style.display = "block";
    video.play();
  });
  fullscreenBtn.addEventListener("click", () => {
    if (video.requestFullscreen) {
      video.requestFullscreen();
    }
  });
});

// Custom scroller

const customScrollerLists = document.querySelectorAll(
  ".custom-scroller-list-js",
);

customScrollerLists.forEach((list) => {
  let isDragging = false;
  let startX;
  let startRight;

  const scrollIndicator = list.parentNode.querySelector(
    ".custom-scroller-indicator-js",
  );
  const scrollThumb = scrollIndicator.querySelector(".scroll-thumb");

  const thumbWidthPercentage = (list.clientWidth * 100) / list.scrollWidth;
  scrollThumb.style.width = `${thumbWidthPercentage}%`;

  list.addEventListener(
    "scroll",
    () => {
      if (isDragging) return;
      const scrollWidth = list.scrollWidth - list.clientWidth;
      const scrollLeft = Math.abs(list.scrollLeft);
      const thumbWidth = scrollThumb.clientWidth;
      const indicatorWidth = scrollIndicator.clientWidth;
      const maxThumbPosition = indicatorWidth - thumbWidth;
      const thumbPosition = (scrollLeft / scrollWidth) * maxThumbPosition;

      scrollThumb.style.right = `${thumbPosition}px`;
    },
    { passive: true },
  );

  scrollThumb.addEventListener("mousedown", (e) => {
    isDragging = true;
    scrollThumb.classList.add("dragging");
    startX = e.pageX;
    startRight = parseFloat(scrollThumb.style.right || 0);
    e.preventDefault();
  });

  document.addEventListener(
    "mousemove",
    (e) => {
      if (!isDragging) return;

      const indicatorWidth = scrollIndicator.clientWidth;
      const thumbWidth = scrollThumb.clientWidth;
      const maxThumbPosition = indicatorWidth - thumbWidth;

      const deltaX = startX - e.pageX;
      let newRight = startRight + deltaX;

      newRight = Math.max(0, Math.min(newRight, maxThumbPosition));
      scrollThumb.style.right = `${newRight}px`;

      const scrollWidth = list.scrollWidth - list.clientWidth;
      const scrollPosition = (newRight / maxThumbPosition) * scrollWidth;
      list.scrollLeft = -scrollPosition;
    },
    { passive: true },
  );

  document.addEventListener("mouseup", () => {
    if (isDragging) {
      isDragging = false;
      scrollThumb.classList.remove("dragging");
    }
  });

  document.addEventListener("mouseleave", () => {
    if (isDragging) {
      isDragging = false;
      scrollThumb.classList.remove("dragging");
    }
  });
});