<header class="site-header">
  <div class="announcement">
    <div class="container ann-row">
      <span class="announcement-copy"><span class="announcement-marquee"><span class="announcement-track">
        <span><%= site.announcement_text %></span><span><%= site.announcement_text %></span><span><%= site.announcement_text %></span><span><%= site.announcement_text %></span>
      </span></span></span>
      <div class="ann-right">
        <a href="/contact">📞 <%= site.contact_phone %></a>
        <select class="lang-select" aria-label="Language selector"><% site.language_options.forEach(l=>{ %><option><%= l %></option><% }) %></select>
      </div>
    </div>
  </div>
  <div class="header-main-wrap">
    <div class="container header-main">
      <button class="icon-btn mobile-only" type="button" onclick="toggleMobileNav()" aria-label="Toggle menu">☰</button>
      <a class="brand" href="/"><img src="<%= site.brand_logo %>" alt="<%= site.site_name %> logo"></a>
      <form class="search-shell" method="get" action="/search">
        <% const selectedCat = (typeof currentPath==='string' && currentPath.startsWith('/collections/')) ? currentPath.slice('/collections/'.length).split('/')[0] : ''; %>
        <select name="category" aria-label="Category selector">
          <option value=""><%= t('header_all_categories','All categories') %></option>
          <% categories.forEach(c=>{ %><option value="<%= c.slug %>" <%= selectedCat===c.slug ? 'selected' : '' %>><%= c.name %></option><% }) %>
        </select>
        <input type="text" name="q" placeholder="<%= t('search_header_ph','Search panels, heat pumps, PPR pipes…') %>" aria-label="Search products">
        <button type="submit">Search</button>
      </form>
      <div class="header-icons">
        <a class="plain-btn quote-btn" href="<%= site.header_cta_link||'/contact' %>"><%= site.header_cta_text||'Get a free quote' %></a>
        <button class="plain-btn" onclick="toggleCartDrawer()" title="Cart" aria-label="Open cart">🛒 <span id="cartCounter"><%= cartCount %></span></button>
      </div>
    </div>
  </div>
  <nav class="primary-nav-wrap">
    <div class="container mega-nav" id="desktopMegaNav">
      <% Object.entries(menuGroups).forEach(([group,items], idx)=>{ %>
        <div class="mega-item" data-menu-item>
          <button class="nav-pill" type="button" data-menu-trigger aria-expanded="false" aria-controls="mega-panel-<%= idx %>"><span class="nav-pill-label"><%= group %></span><span class="caret" aria-hidden="true"></span></button>
          <div class="mega-panel mega-panel-simple" id="mega-panel-<%= idx %>" data-menu-panel>
            <div class="simple-menu-list <%= items.length > 7 ? 'is-scroll' : '' %>">
              <% items.forEach(item=>{ %>
                <a href="<%= item.href %>"><%= item.label %><% if(item.subtitle){ %><small><%= item.subtitle %></small><% } %></a>
              <% }) %>
            </div>
          </div>
        </div>
      <% }) %>
    </div>
    <div class="nav-overlay" id="navOverlay"></div>
  </nav>
  <div class="mobile-nav-backdrop" onclick="closeMobileNav()"></div>
  <div class="mobile-nav">
    <div class="container">
      <% Object.entries(menuGroups).forEach(([group,items])=>{ %>
        <details>
          <summary><%= group %></summary>
          <div class="mobile-links"><% items.forEach(item=>{ %><a href="<%= item.href %>"><%= item.label %></a><% }) %></div>
        </details>
      <% }) %>
      <details><summary>Contact</summary><div class="mobile-links"><a href="/contact"><%= t('header_request_quote','Request a free quote') %></a><a href="/about"><%= t('header_about','About EnerTek') %></a></div></details>
    </div>
  </div>
</header>