(function(){
  function base(page){ return page && page.startsWith('services/') ? '../' : ''; }

  function renderFooter(page){
    const data = window.ROKN_SITE_DATA;
    const b = base(page || 'index.html');

    const quick = data.pages
      .map(([label, href]) => `<li><a href="${b}${href}">${label}</a></li>`)
      .join('');

    const featured = data.services
      .slice(0, 10)
      .map(s => `<li><a href="${b}services/${s.slug}.html">${s.title}</a></li>`)
      .join('');

    return `
      <footer class="site-footer">
        <div class="container footer-grid">
          
          <div class="footer-brand-col">
            <img class="footer-logo" src="${b}assets/media/logo-wordmark-en.png" alt="${data.company.name}" />
            <p>${data.company.name} is a specialized contractor providing industrial services to the petroleum and petrochemical industries.</p>

            <div class="footer-qr footer-qr-left">
              <a href="${b}assets/files/Rokn-Al-Taqa-profile.pdf" target="_blank" rel="noopener">
                <img src="${b}assets/media/qr-profile.png" alt="QR Code Company Profile" />
              </a>
            </div>
          </div>

          <div>
            <h3>Navigation</h3>
            <ul>${quick}</ul>
          </div>

          <div>
            <h3>Service Pages</h3>
            <ul class="footer-services-two-cols">${featured}</ul>
          </div>

          <div>
            <h3>Contact</h3>
            <ul>
              <li>${data.company.location}</li>
              <li>${data.company.cr}</li>
              <li><a href="tel:${data.company.phone1.replace(/\+/g,'')}">${data.company.phone1}</a></li>
              <li><a href="tel:${data.company.phone2.replace(/\+/g,'')}">${data.company.phone2}</a></li>
              <li><a href="mailto:${data.company.email}">${data.company.email}</a></li>
              <li><a href="https://${data.company.website}" target="_blank" rel="noopener">${data.company.website}</a></li>
            </ul>
          </div>

        </div>

        <div class="footer-bottom">
          <div class="container footer-bottom-inner">
            <span>© 2026 ${data.company.name}. All rights reserved.</span>
            <span>${data.company.address_full}</span>
          </div>
        </div>
      </footer>`;
  }

  window.ROKN_RENDER_FOOTER = renderFooter;
})();