ask-mutual-fund/js/main.js

// ✅ Load header and footer, then initialize navbar script after header injected
['header', 'footer'].forEach(id => {
  const file = id === 'header' ? 'components/header.html' : 'components/footer.html';
  fetch(file)
    .then(res => res.text())
    .then(html => {
      const mount = document.getElementById(id);
      if (!mount) return;
      mount.innerHTML = html;
      if (id === 'header') {
        const script = document.createElement('script');
        script.src = 'js/navbar.js';
        script.defer = true;
        document.body.appendChild(script);
      }
    });
});

// ✅ Pages mapping
const routes = {
  "#/": "pages/home.html",
  "#/our-fund": "pages/our-fund.html",
  "#/our-team": "pages/our-team.html",
  "#/about": "pages/about.html",
  "#/contact": "pages/contact.html",
  "#/blog": "pages/blog.html",
};

// ✅ Initialize Swiper if present
function initSwiper() {
  if (document.querySelector(".mySwiper")) {
    new Swiper(".mySwiper", {
      slidesPerView: 1.2,
      spaceBetween: 20,
      loop: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
    });
  }
}

// ✅ Team Drawer
window.openDrawer = function (name, role, img, desc) {
  document.getElementById("drawerName").textContent = name;
  document.getElementById("drawerRole").textContent = role;
  document.getElementById("drawerImg").src = img;
  document.getElementById("drawerDesc").innerHTML = desc;

  const drawer = bootstrap.Offcanvas.getOrCreateInstance(document.getElementById('teamDrawer'));
  drawer.show();
};

// ==============================
// 🪄 GSAP STACK SCROLL ANIMATION
// ==============================
let cards = [];
let currentIndex = 0;
let animating = false;
let isInsideSection = false;

function initGsapStackScroll() {
  const section = document.querySelector('.cards-wrapper');
  if (!section) return;
  
  cards = Array.from(section.querySelectorAll('.card-scroll'));
  if (!cards.length) return;

  gsap.set(cards, { opacity: 0, y: "100%" });
  gsap.set(cards[0], { opacity: 1, y: "0%" });
  currentIndex = 0;

  // 🎯 Mouse enter/leave detect karein
  section.addEventListener('mouseenter', () => { isInsideSection = true; });
  section.addEventListener('mouseleave', () => { isInsideSection = false; });

  // 🌐 Global scroll listener
  window.removeEventListener('wheel', window._gsapStackHandler);
  window._gsapStackHandler = function (e) {
    if (!isInsideSection) return;  // 📌 agar mouse section ke bahar hai to kuch mat karo

    e.preventDefault(); // ✅ sirf section ke andar scroll disable karo
    if (animating) return;

    if (e.deltaY > 0) {
      showNextGsapCard();
    } else {
      showPrevGsapCard();
    }
  };
  window.addEventListener('wheel', window._gsapStackHandler, { passive: false });
}

function showNextGsapCard() {
  if (currentIndex >= cards.length - 1) return;
  animating = true;

  const current = cards[currentIndex];
  const next = cards[currentIndex + 1];

  gsap.to(current, { y: "-100%", opacity: 0, duration: 0.8, ease: "power2.inOut" });
  gsap.fromTo(next,
    { y: "100%", opacity: 0 },
    { y: "0%", opacity: 1, duration: 0.8, ease: "power2.inOut", onComplete: () => animating = false }
  );

  currentIndex++;
}

function showPrevGsapCard() {
  if (currentIndex <= 0) return;
  animating = true;

  const current = cards[currentIndex];
  const prev = cards[currentIndex - 1];

  gsap.to(current, { y: "100%", opacity: 0, duration: 0.8, ease: "power2.inOut" });
  gsap.fromTo(prev,
    { y: "-100%", opacity: 0 },
    { y: "0%", opacity: 1, duration: 0.8, ease: "power2.inOut", onComplete: () => animating = false }
  );

  currentIndex--;
}

// ✅ Load page content dynamically
function loadPage() {
  const hash = location.hash || "#/";
  const page = routes[hash] || routes["#/"];

  fetch(page)
    .then(res => res.text())
    .then(html => {
      document.getElementById("page-content").innerHTML = html;

      // ✅ Scroll to top after page load
      window.scrollTo({ top: 0, behavior: "smooth" });

      // ✅ Re-init Swiper if present
      initSwiper();

      // ✅ Re-init GSAP scroll stack animation
      initGsapStackScroll();

    })
    .catch(() => {
      document.getElementById("page-content").innerHTML = "<h2>Page not found</h2>";
    });
}

// ✅ Event listener for routing
window.addEventListener("hashchange", loadPage);
loadPage(); // default page load