<div class="topbar">
  <div class="container">
    <span>Headquartered in Mumbai · Truck transportation &amp; logistics across India</span>
    <div class="topbar__links">
      <% if (site.contact.phone) { %>
        <a href="<%= tel(site.contact.phone) %>"><%- icon('phone') %><%= formatPhone(site.contact.phone) %></a>
      <% } else { %><%- ph('Phone') %><% } %>
      <% if (site.contact.email) { %>
        <a href="mailto:<%= site.contact.email %>"><%- icon('mail') %><%= site.contact.email %></a>
      <% } else { %><%- ph('Email') %><% } %>
    </div>
  </div>
</div>
<header class="site-header" data-header>
  <div class="container site-header__inner">
    <a class="brand" href="/" aria-label="HK Logistics — home">
      <picture>
        <source type="image/webp" srcset="/images/brand/hk-logistics-logo-96.webp 96w, /images/brand/hk-logistics-logo-160.webp 160w" sizes="62px">
        <img src="/images/brand/hk-logistics-logo-160.png" width="62" height="44" alt="" class="brand__logo">
      </picture>
      <span class="brand__text">
        <span class="brand__name">HK Logistics</span>
        <span class="brand__tag">Truck Transportation</span>
      </span>
    </a>

    <nav class="primary-nav" aria-label="Main">
      <ul>
        <% nav.forEach(function (item) { %>
          <% if (item.children) { %>
            <li class="nav-dropdown<%= isActive(item.path) ? ' is-active' : '' %>" data-dropdown>
              <button class="nav-dropdown__toggle" type="button" aria-expanded="false" aria-controls="services-menu">
                <%= item.label %><%- icon('chevron-down') %>
              </button>
              <ul class="nav-dropdown__menu" id="services-menu">
                <% navServices.forEach(function (s) { %>
                  <li><a href="<%= s.path %>"<% if (currentPath === s.path) { %> aria-current="page"<% } %>><%= s.label %></a></li>
                <% }) %>
                <li><a href="/services"<% if (currentPath === '/services') { %> aria-current="page"<% } %>>All transportation services</a></li>
              </ul>
            </li>
          <% } else { %>
            <li><a href="<%= item.path %>"<% if (currentPath === item.path) { %> aria-current="page"<% } %>><%= item.label %></a></li>
          <% } %>
        <% }) %>
      </ul>
    </nav>

    <a class="btn header-cta" href="/quote">Get a Quote<%- icon('arrow-right', 'icon--arrow') %></a>

    <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="mobile-nav" data-nav-toggle>
      <span class="sr-only">Menu</span>
      <%- icon('menu', 'icon-open') %><%- icon('close', 'icon-close') %>
    </button>
  </div>

  <nav class="mobile-nav" id="mobile-nav" aria-label="Mobile" hidden data-mobile-nav>
    <ul>
      <% nav.forEach(function (item) { %>
        <li>
          <a href="<%= item.path %>"<% if (currentPath === item.path) { %> aria-current="page"<% } %>><%= item.label === 'Services' ? 'All services' : item.label %></a>
          <% if (item.children) { %>
            <ul class="mobile-nav__sub" aria-label="Services">
              <% navServices.forEach(function (s) { %>
                <li><a href="<%= s.path %>"<% if (currentPath === s.path) { %> aria-current="page"<% } %>><%= s.label %></a></li>
              <% }) %>
            </ul>
          <% } %>
        </li>
      <% }) %>
    </ul>
    <div class="mobile-nav__cta">
      <a class="btn btn--block" href="/quote">Get a Quote<%- icon('arrow-right', 'icon--arrow') %></a>
      <% if (site.contact.phone) { %>
        <a class="btn btn--outline btn--block" href="<%= tel(site.contact.phone) %>"><%- icon('phone') %>Call <%= formatPhone(site.contact.phone) %></a>
      <% } %>
    </div>
  </nav>
</header>
