
(function(){
  function base(page){ return page && page.startsWith('services/') ? '../' : ''; }
  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>

      <!-- زرار Request -->
      <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;
})();
