// 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",
};

// Load page content
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)
    .catch(() => document.getElementById("page-content").innerHTML = "<h2>Page not found</h2>");
}

// Load page on hash change
window.addEventListener("hashchange", loadPage);

// Load default page
loadPage();

 // Define globally so inline onclick works
  window.openDrawer = function (name, role, img, desc) {
    document.getElementById("drawerName").textContent = name;
    document.getElementById("drawerRole").textContent = role;
    document.getElementById("drawerImg").src = img;

    // Use innerHTML to preserve paragraph breaks
    document.getElementById("drawerDesc").innerHTML = desc;

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