(function(){
  function base(page){ return page && (page.startsWith('services/') || page.startsWith('blog/')) ? '../' : ''; }
  function renderHeader(page){
    const data = window.ROKN_SITE_DATA;
    const b = base(page || 'index.html');
    const active = (href) => (page===href ? 'active' : '');
    const serviceLinks = data.services.map(s => `<li><a href="${b}services/${s.slug}.html">${s.title}</a></li>`).join('');
    const nav = data.pages.map(([label, href]) => `<a class="nav-link ${active(href)}" href="${b}${href}">${label}</a>`).join('');
    return `
      <div class="topbar">
        <div class="container topbar-inner">
          <span>${data.company.location}</span>
          <a href="tel:${data.company.phone1.replace(/\+/g,'')}">${data.company.phone1}</a>
          <a href="mailto:${data.company.email}">${data.company.email}</a>
        </div>
      </div>
<header class="site-header">
  <div class="container header-inner">
    <a class="brand" href="${b}index.html">
      <img src="${b}assets/media/logo-wordmark-en.png" alt="${data.company.name} logo" />
    </a>
    <button class="nav-toggle" id="navToggle" aria-label="Toggle navigation" aria-expanded="false">
      <span></span><span></span><span></span>
    </button>
    <nav class="main-nav" id="mainNav">
      <div class="nav-main">${nav}</div>
      <div class="nav-services-group">
        <button class="services-trigger" type="button">All Services</button>
        <div class="services-dropdown"><ul>${serviceLinks}</ul></div>
      </div>
      <a class="btn btn-primary btn-small" href="${b}contact.html">Request a Quote</a>
      <a class="btn btn-outline btn-small" href="${b}assets/files/Rokn-Al-Taqa-profile.pdf" target="_blank">Company Profile</a>
    </nav>
  </div>
</header>`;
  }
  window.ROKN_RENDER_HEADER = renderHeader;
})();