// main.js
// global BASE_PATH is set per-page: window.BASE_PATH = "/";

async function loadJSON(relPath) {
  const root = (window.BASE_PATH || "/").replace(/\/+$/,"") + "/";
  const resp = await fetch(root + relPath);
  if (!resp.ok) {
    console.error("Failed to load", root + relPath);
    return null;
  }
  return resp.json();
}

async function renderNav() {
  const navData = await loadJSON("data/nav.json");
  if (!navData) return;

  const navContainer = document.querySelector("[data-nav]");
  if (!navContainer) return;

  let menuHTML = "";
  navData.menu.forEach(item => {
    if (item.children && item.children.length > 0) {
      menuHTML += `
        <li class="nav-item dropdown">
          <span class="nav-link">${item.label}</span>
          <ul class="dropdown-menu">
            ${item.children.map(c => `<li><a href="${c.href}">${c.label}</a></li>`).join("")}
          </ul>
        </li>
      `;
    } else {
      menuHTML += `
        <li class="nav-item">
          <a class="nav-link" href="${item.href}">${item.label}</a>
        </li>
      `;
    }
  });

  navContainer.innerHTML = `
    <div class="nav-inner">
      <div class="brand-block">
        <div class="brand-title">${navData.siteTitle}</div>
        <div class="brand-tagline">${navData.tagline}</div>
      </div>
      <ul class="nav-menu">
        ${menuHTML}
      </ul>
    </div>
  `;
}

async function renderFooter() {
  const navData = await loadJSON("data/nav.json");
  const aboutData = await loadJSON("data/about.json");
  const footerEl = document.querySelector("[data-footer]");
  if (!footerEl || !navData || !aboutData) return;

  const linksCols = navData.menu.map(item => {
    if (item.children && item.children.length > 0) {
      return `
        <div class="footer-col">
          <h4>${item.label}</h4>
          ${item.children.map(c => `<a href="${c.href}">${c.label}</a>`).join("")}
        </div>
      `;
    } else {
      return `
        <div class="footer-col">
          <h4>${item.label}</h4>
          <a href="${item.href}">${item.label}</a>
        </div>
      `;
    }
  }).join("");

  footerEl.innerHTML = `
    <div class="footer-inner">

      <div class="footer-about">
        <h4>${aboutData.aboutHeader}</h4>
        ${aboutData.aboutBody.map(p => `<p>${p}</p>`).join("")}
        <h4>${aboutData.ctaNewsletter}</h4>
        <form class="newsletter-form">
          <label>Email *</label>
          <input type="email" placeholder="you@example.com" required />
          <button type="submit">Subscribe</button>
        </form>
        <p>${aboutData.newsletterNote}</p>
      </div>

      <div class="footer-links">
        ${linksCols}
      </div>

      <div class="footer-links">
        <div class="footer-col">
          <h4>Contact</h4>
          <a href="/contact.html">Email / Social</a>
          <a href="/conference.html">Conference Info</a>
        </div>
        <div class="footer-col">
          <h4>Publications</h4>
          <a href="/publications.html">Journal + Proceedings</a>
        </div>
      </div>

    </div>
    <div class="footer-copy">
      © Applied Geography Conferences, Inc. All rights reserved.
    </div>
  `;
}

async function renderAboutSidebar() {
  const aboutData = await loadJSON("data/about.json");
  const sidebarEl = document.querySelector("[data-about-sidebar]");
  if (!sidebarEl || !aboutData) return;

  const block = document.createElement("div");
  block.className = "about-sidebar";
  block.innerHTML = `
    <h3>${aboutData.aboutHeader}</h3>
    ${aboutData.aboutBody.map(p => `<p>${p}</p>`).join("")}
  `;
  sidebarEl.prepend(block);
}

document.addEventListener("DOMContentLoaded", () => {
  renderNav();
  renderFooter();
  renderAboutSidebar();
});