Housecoins_next/public/assets/js/main.js

// ✅ DOM READY (IMPORTANT)
document.addEventListener("DOMContentLoaded", function () {

  // =============================
  // AOS INIT
  // =============================
  if (typeof AOS !== "undefined") {
    AOS.init({
      duration: 1000,
      once: true
    });
  }

  // =============================
  // TRADES SWIPER
  // =============================
  if (typeof Swiper !== "undefined") {
    new Swiper(".tradesSwiper", {
      loop: true,
      slidesPerView: 3,
      spaceBetween: 25,
      speed: 1500,
      autoplay: {
        delay: 0,
        disableOnInteraction: false,
      },
      freeMode: true,
      freeModeMomentum: false,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      breakpoints: {
        0: { slidesPerView: 1 },
        768: { slidesPerView: 2 },
        1024: { slidesPerView: 3 }
      }
    });

    // =============================
    // TESTIMONIAL SWIPER
    // =============================
    new Swiper(".testimonialSwiper", {
      slidesPerView: 3,
      spaceBetween: 30,
      loop: true,
      speed: 800,
      centeredSlides: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      breakpoints: {
        0: { slidesPerView: 1.2, centeredSlides: true },
        768: { slidesPerView: 2 },
        1024: { slidesPerView: 3 }
      }
    });

    // =============================
    // EXPERTISE SWIPER
    // =============================
    new Swiper(".expertise-slider", {
      slidesPerView: 3,
      spaceBetween: 25,
      loop: true,
      speed: 800,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      breakpoints: {
        0: { slidesPerView: 1.2 },
        576: { slidesPerView: 2 },
        992: { slidesPerView: 3 }
      }
    });
  }

  // =============================
  // IMAGE COMPARISON SLIDER
  // =============================
  function initComparisons() {
    const overlays = document.querySelectorAll(".img-comp-overlay");

    overlays.forEach(img => {
      let w = img.offsetWidth;
      let h = img.offsetHeight;

      img.style.width = (w / 2) + "px";

      const slider = document.createElement("div");
      slider.className = "img-comp-slider";
      img.parentElement.insertBefore(slider, img);

      slider.style.top = (h / 2) + "px";
      slider.style.left = (w / 2) + "px";

      let clicked = false;

      const start = (e) => {
        e.preventDefault();
        clicked = true;
      };

      const stop = () => clicked = false;

      const move = (e) => {
        if (!clicked) return;

        const rect = img.getBoundingClientRect();
        let x = (e.touches ? e.touches[0].pageX : e.pageX) - rect.left;
        x = Math.max(0, Math.min(x, w));

        img.style.width = x + "px";
        slider.style.left = x + "px";
      };

      slider.addEventListener("mousedown", start);
      window.addEventListener("mouseup", stop);
      window.addEventListener("mousemove", move);

      slider.addEventListener("touchstart", start);
      window.addEventListener("touchend", stop);
      window.addEventListener("touchmove", move);
    });
  }

  window.addEventListener("load", initComparisons);

  // =============================
  // MENU HOVER IMAGE CHANGE
  // =============================
  const menuItems = document.querySelectorAll(".menu-left li");
  const image = document.getElementById("serviceImage");

  if (menuItems.length && image) {
    const images = {
      img1: "/assets/images/menuimages.png",
      img2: "/assets/images/menuimages1.png",
      img3: "/assets/images/menuimages2.png",
      img4: "/assets/images/menuimages3.png",
      img5: "/assets/images/menuimages4.png",
      img6: "/assets/images/documentmenu.png",
      img7: "/assets/images/sunroommenu.png"
    };

    const first = menuItems[0];
    if (first) {
      image.src = images[first.dataset.img];
      first.classList.add("active");
    }

    menuItems.forEach(item => {
      item.addEventListener("mouseenter", () => {
        menuItems.forEach(i => i.classList.remove("active"));
        item.classList.add("active");

        image.style.opacity = 0;

        setTimeout(() => {
          image.src = images[item.dataset.img];
          image.style.opacity = 1;
        }, 200);
      });
    });
  }

  // =============================
  // TABS
  // =============================
  window.changeTab = function (id) {
    const data = {
      1: {
        title: "We personally oversee every detail...",
        text: "We ensure design consistency...",
        img: "/assets/images/PersonallyOversee.png"
      },
      2: {
        title: "We personally oversee every detail...",
        text: "We verify materials...",
        img: "/assets/images/PersonallyOversee.png"
      }
    };

    document.querySelectorAll(".tab-box").forEach(el => el.classList.remove("active"));
    document.querySelectorAll(".tab-box")[id - 1]?.classList.add("active");

    document.getElementById("contentTitle").innerText = data[id].title;
    document.getElementById("contentText").innerText = data[id].text;
    document.getElementById("mainImage").src = data[id].img;
  };

  // =============================
  // FILTER GALLERY
  // =============================
  const filterBtns = document.querySelectorAll(".filter-btn");
  const galleryItems = document.querySelectorAll(".gallery-item");

  if (filterBtns.length && galleryItems.length) {
    filterBtns.forEach(btn => {
      btn.addEventListener("click", () => {

        filterBtns.forEach(b => b.classList.remove("active"));
        btn.classList.add("active");

        const filter = btn.dataset.filter;

        galleryItems.forEach(item => {
          const category = item.dataset.category;

          item.classList.toggle("hide", !(filter === "all" || filter === category));
        });

      });
    });
  }

});