const componentsHtml = `
<nav id="nav">
  <div class="container">
    <a class="logo-wrap" href="index.html">
      <div class="logo-mark"><canvas id="navMark" width="52" height="52"></canvas></div>
      <div class="logo-text">Signal <em>&</em> Scale</div>
    </a>

    <!-- Centre pill links -->
    <ul class="nav-pill">
      <li><a href="index.html">Home</a></li>
      <li><a href="abouts.html">About</a></li>
      <li><a href="service.html">Services</a></li>
      <li><a href="whyus.html">Why Us</a></li>
      <li><a href="contact.html">Contact Us</a></li>
    </ul>

    <!-- Right actions -->
    <div class="nav-right">
      <button class="nav-cta" onclick="location.href='contact.html'">Book a Consultation →</button>
      <!-- Hamburger -->
      <button class="nav-burger" id="navBurger" aria-label="Menu">
        <span></span><span></span><span></span>
      </button>
    </div>
  </div>
</nav>

<!-- Mobile drawer -->
<div class="nav-drawer" id="navDrawer">
  <a href="index.html">Home</a>
  <a href="abouts.html">About</a>
  <a href="service.html">Services</a>
  <a href="whyus.html">Why Us</a>
  <a href="contact.html">Contact Us</a>
  <div class="drawer-actions">
    <a href="#" class="drawer-login">Log in</a>
    <button class="drawer-cta" onclick="location.href='contact.html'">Book a Demo</button>
  </div>
</div>

<!-- FOOTER -->
<footer>
  <div class="container">
    <div class="footer-top">
      <div class="fbrand">
        <div class="flogo">
          <canvas id="footerMark" width="50" height="50"></canvas>
          Signal <em>&</em> Scale
        </div>
        <p>The world's first fully autonomous geo-AI marketing platform.</p>
      </div>
      <div class="fcol">
        <h5>Services</h5>
        <a href="service.html#s1">Geo-Intelligence Layer</a>
        <a href="service.html#s2">Predictive Audience Deployment</a>
        <a href="service.html#s3">Generative Search</a>
        <a href="service.html#s4">Neuro-Personalization</a>
        <a href="service.html#s5">Synthetic Content</a>
        <a href="service.html#s6">Adaptive Architecture</a>
      </div>
      <div class="fcol">
        <h5>Navigation</h5>
        <a href="index.html">Home</a>
        <a href="abouts.html">About</a>
        <a href="service.html">Services</a>
        <a href="whyus.html">Why Us</a>
        <a href="contact.html">Contact</a>
      </div>
      <div class="fcol">
        <h5>Follow Us</h5>
        <a href="https://www.facebook.com/signalandscale" target="_blank" rel="noopener noreferrer" class="fsocial">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
          Facebook
        </a>
        <a href="https://www.instagram.com/signalandscale" target="_blank" rel="noopener noreferrer" class="fsocial">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
          Instagram
        </a>
        <a href="https://www.linkedin.com/company/signalandscale" target="_blank" rel="noopener noreferrer" class="fsocial">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
          LinkedIn
        </a>
      </div>
    </div>
    <div class="footer-bot">
      <div class="footer-copy">© 2026 Signal & Scale Intelligence Ltd. All rights reserved.</div>
    </div>
  </div>
</footer>
`;

document.addEventListener("DOMContentLoaded", () => {
  const parser = new DOMParser();
  const doc = parser.parseFromString(componentsHtml, 'text/html');

  const nav = doc.querySelector('#nav');
  const drawer = doc.querySelector('#navDrawer');
  const footer = doc.querySelector('footer');

  // Find current links state, remove active class and apply to the correct one
  const currentPath = window.location.pathname.split('/').pop() || 'index.html';

  if (nav) {
    nav.querySelectorAll('a').forEach(link => {
      const href = link.getAttribute('href');
      if (href && (href === currentPath || (currentPath === '' && href === 'index.html'))) {
        link.classList.add('active');
      } else {
        link.classList.remove('active');
      }
    });
  }

  if (drawer) {
    drawer.querySelectorAll('a').forEach(link => {
      const href = link.getAttribute('href');
      if (href && (href === currentPath || (currentPath === '' && href === 'index.html'))) {
        link.classList.add('active');
      } else {
        link.classList.remove('active');
      }
    });
  }

  // Insert into the DOM
  if (nav) document.body.insertAdjacentElement('afterbegin', nav);
  if (drawer) document.body.insertAdjacentElement('afterbegin', drawer);
  if (footer) document.body.insertAdjacentElement('beforeend', footer);

  // Re-initialize scripts related to the newly added nav and footer
  initializeComponentScripts();
});

function initializeComponentScripts() {
  /* ─── NAV SCROLL EFFECT ────────────────────────────────── */
  const navEl = document.getElementById('nav');
  if (navEl) {
    window.addEventListener('scroll', () => {
      navEl.classList.toggle('scrolled', window.scrollY > 60);
    }, { passive: true });
  }

  /* ─── HAMBURGER TOGGLE ─────────────────────────────────── */
  const burger = document.getElementById('navBurger');
  const drawer = document.getElementById('navDrawer');
  if (burger && drawer) {
    burger.addEventListener('click', () => {
      burger.classList.toggle('open');
      drawer.classList.toggle('open');
    });
    // close drawer on link click
    drawer.querySelectorAll('a, button').forEach(el => {
      el.addEventListener('click', () => {
        burger.classList.remove('open');
        drawer.classList.remove('open');
      });
    });
  }

  /* ─── CANVAS EFFECTS ──────────────────────────────────── */
  const nm = document.getElementById('navMark');
  const fm = document.getElementById('footerMark');
  const hm = document.getElementById('heroMark'); // Hero mark might be present differently on pages

  const nCtx = nm ? nm.getContext('2d') : null;
  const fCtx = fm ? fm.getContext('2d') : null;
  const hCtx = hm ? hm.getContext('2d') : null;

  let nt = 0;
  let rafId = null;

  function drawMarks() {
    if (nCtx) nCtx.clearRect(0, 0, 52, 52);
    if (hCtx) hCtx.clearRect(0, 0, 300, 300);
    if (fCtx) fCtx.clearRect(0, 0, 40, 40);

    const bars = 5, bw = 6, gap = 4, bh = [11, 17, 24, 20, 13];
    const sxN = (52 - (bars * bw + (bars - 1) * gap)) / 2;
    const byN = 40;

    const bwH = 34, gapH = 22, bhH = [60, 100, 140, 115, 80];
    const sxH = (300 - (bars * bwH + (bars - 1) * gapH)) / 2;
    const byH = 220;

    const fbw = 4, fgap = 3, fbh = [8, 12, 18, 15, 10];
    const sxF = (40 - (bars * fbw + (bars - 1) * fgap)) / 2;
    const byF = 30;

    for (let i = 0; i < bars; i++) {
      const wave = Math.sin(nt * 2.5 + i * .8) * .2;

      if (nCtx) {
        const hN = bh[i] * (1 + wave);
        const xN = sxN + i * (bw + gap);
        const aN = .38 + i / bars * .6 + wave * .12;
        nCtx.fillStyle = `rgba(78,240,160,${Math.min(1, aN)})`;
        nCtx.beginPath(); nCtx.roundRect(xN, byN - hN, bw, hN, 2); nCtx.fill();
      }

      if (hCtx) {
        const hH = bhH[i] * (1 + wave);
        const xH = sxH + i * (bwH + gapH);
        const aH = .8 + i / bars * .2;
        hCtx.fillStyle = `rgba(78,240,160,${aH})`;
        hCtx.beginPath(); hCtx.roundRect(xH, byH - hH, bwH, hH, 8); hCtx.fill();
      }

      if (fCtx) {
        const hF = fbh[i] * (1 + wave);
        const xF = sxF + i * (fbw + fgap);
        fCtx.fillStyle = `rgba(78,240,160,${.6 + i / bars * .4})`;
        fCtx.beginPath(); fCtx.roundRect(xF, byF - hF, fbw, hF, 1.5); fCtx.fill();
      }
    }
    nt += .018;
    rafId = requestAnimationFrame(drawMarks);
  }

  if (!window.marksIntervalStarted) {
    window.marksIntervalStarted = true;
    drawMarks();
    document.addEventListener('visibilitychange', () => {
      if (document.hidden) {
        cancelAnimationFrame(rafId);
      } else {
        drawMarks();
      }
    });
  }
}
