function getSiteRoot() {
  const path = window.location.pathname.toLowerCase();

  if (path.includes('/services/') || path.includes('/guides/')) {
    return '../';
  }

  return '';
}

function renderSiteHeader(root) {
  return `
    <header class="site-header">
      <div class="brand-block">
        <a class="brand" href="${root}index.html">EngineeringBuild</a>
        <div class="brand-subtitle">Telecommunications, Networking, Linux, Embedded</div>
      </div>

      <nav class="site-nav" aria-label="Primary">
        <a href="${root}index.html">Home</a>

        <div class="nav-group">
          <button class="nav-trigger" type="button" aria-haspopup="true">Services</button>
          <div class="nav-panel">
            <a href="${root}services/Network.html">Network Planning</a>
            <a href="${root}services/servers.html">Server Setup</a>
            <a href="${root}services/installation.html">Installation</a>
            <a href="${root}services/survey.html">Site Survey</a>
          </div>
        </div>

        <div class="nav-group">
          <button class="nav-trigger" type="button" aria-haspopup="true">Guides</button>
          <div class="nav-panel">
            <a href="${root}guides/telecommunications.html">Telecommunications</a>
            <a href="${root}guides/networking.html">Networking</a>
            <a href="${root}guides/linux.html">Linux</a>
            <a href="${root}guides/embedded.html">Embedded</a>
          </div>
        </div>

        <div class="nav-group">
          <button class="nav-trigger" type="button" aria-haspopup="true">Tools</button>
          <div class="nav-panel">
            <a href="${root}tools.html">Coming soon</a>
          </div>
        </div>

        <a href="${root}contact.html">Contact</a>
      </nav>
    </header>
  `;
}

function renderSiteFooter(root) {
  return `
    <footer class="site-footer">
      <div class="footer-content">
        <div class="footer-brand">
          <a class="brand" href="${root}index.html">EngineeringBuild</a>
          <p>Practical telecom, networking, Linux, and self-hosted systems.</p>
        </div>
        <nav class="footer-links" aria-label="Footer">
          <a href="${root}guides/telecommunications.html">Guides</a>
          <a href="${root}services/Network.html">Services</a>
          <a href="${root}tools.html">Tools</a>
          <a href="${root}contact.html">Contact</a>
        </nav>
        <a class="footer-email" href="mailto:info@engineeringbuild.com">info@engineeringbuild.com</a>
      </div>
    </footer>
  `;
}

const siteRoot = getSiteRoot();

document.querySelectorAll('[data-include="site-header"]').forEach((target) => {
  target.outerHTML = renderSiteHeader(siteRoot);
});

document.querySelectorAll('[data-include="site-footer"]').forEach((target) => {
  target.outerHTML = renderSiteFooter(siteRoot);
});