   <header class="tp-header-height">
      <div class="tp-transparent">
         <div class="tp-header-top-area tp-header-top-two d-none d-md-block">
            <div class="container">
               <div class="row align-items-center">
                  <div class="col-lg-4 col-md-6">
                     <div class="tp-header-top-info">
                        <ul>
                           <li><a href="tel:<%= site.phone %>"><%= site.phone %></a></li>
                           <li><a href="mailto:<%= site.email %>"><%= site.email %></a></li>
                        </ul>
                     </div>
                  </div>
                  <div class="col-lg-4 d-none d-lg-block">
                     <div class="tp-header-top-discount text-center">
                        <p class="mb-0"><span><%= site.topbar_offer_badge || '' %></span><%= site.topbar_offer_text || '' %></p>
                     </div>
                  </div>
                  <div class="col-lg-4 col-md-6">
                     <div class="tp-header-top-switcher-wrap d-flex justify-content-end">
                        <% if (customer) { %>
                           <div class="tp-header-top-menu-item">
                              <a href="/logout" style="color: inherit;">Hi, <%= customer.name.split(' ')[0] %> (Logout)</a>
                           </div>
                        <% } else { %>
                           <div class="tp-header-top-menu-item">
                              <a href="/login" style="color: inherit;">Login</a> / <a href="/register" style="color: inherit;">Register</a>
                           </div>
                        <% } %>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div id="header-sticky" class="tp-header-area tp-header-two tp-header-blur">
            <div class="container">
               <div class="tp-header-two-bg">
                  <div class="row align-items-center">
                     <div class="col-xl-8 col-6">
                        <div class="d-flex align-items-center">
                           <div class="tp-main-menu tp-menu-dropdown text-end d-none d-xxl-block">
                              <nav class="tp-mobile-menu-active">
                                 <ul>
                                    <% (headerMenus[0]?.items || []).forEach(function(item) { %>
                                       <li class="<%= item.children && item.children.length ? 'has-dropdown' : '' %> <%= currentPath === item.url ? 'active' : '' %>">
                                          <a href="<%= item.url %>" <%= item.open_new_tab ? 'target="_blank"' : '' %>><%= item.label %></a>
                                          <% if (item.children && item.children.length) { %>
                                             <ul class="sub-menu">
                                                <% item.children.forEach(function(child) { %>
                                                   <li class="<%= currentPath === child.url ? 'active' : '' %>"><a href="<%= child.url %>" <%= child.open_new_tab ? 'target="_blank"' : '' %>><%= child.label %></a></li>
                                                <% }) %>
                                             </ul>
                                          <% } %>
                                       </li>
                                    <% }) %>
                                 </ul>
                              </nav>
                           </div>
                           <div class="tp-header-logo">
                              <a href="/">
                                 <img width="115" src="<%= resolveUpload(site.logo) || '/assets/img/logo/logo.png' %>" alt="<%= site.site_name || 'RouteMate' %>">
                              </a>
                           </div>
                        </div>
                     </div>
                     <div class="col-xl-4 col-6">
                        <div class="tp-header-option d-flex align-items-center justify-content-end">
                           <div class="tp-header-contact ml-15 d-none d-md-block">
                              <a href="/tours">Book a Tour</a>
                           </div>
                           <div class="tp-header-search d-none d-xxl-block">
                              <form action="/tours" method="get" class="p-relative">
                                 <input class="tp-input" type="text" name="search" placeholder="Search tours">
                                 <button class="tp-header-search-btn" type="submit">
                                    <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                       <path d="M5.64267 10.7857C8.48288 10.7857 10.7853 8.48318 10.7853 5.64286C10.7853 2.80254 8.48288 0.5 5.64267 0.5C2.80245 0.5 0.5 2.80254 0.5 5.64286C0.5 8.48318 2.80245 10.7857 5.64267 10.7857Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
                                       <path d="M12.5 12.5L9.92871 9.92859" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                 </button>
                              </form>
                           </div>
                           <div class="tp-header-toogle-wrapper d-xxl-none ml-10">
                              <button class="tp-header-toogle">
                                 <span></span>
                                 <span></span>
                              </button>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </header>
