<%
  const filterParams = new URLSearchParams();
  if (filtros && filtros.q) filterParams.set('q', filtros.q);
  if (filtros && filtros.categoria) filterParams.set('categoria', filtros.categoria);
  if (filtros && filtros.ordenar && filtros.ordenar !== 'relevancia') filterParams.set('ordenar', filtros.ordenar);
  const filterSuffix = filterParams.toString() ? '?' + filterParams.toString() : '';
%>
<section class="catalog-hero" data-hero-carousel data-autoplay="7000">
  <div class="catalog-hero__media" aria-hidden="true">
    <% if (banners && banners.length) { %>
      <% banners.forEach(function(banner, index) { %>
      <div class="catalog-hero__slide <%= index === 0 ? 'is-active' : '' %>" data-hero-slide>
        <img src="<%= url(banner.imagem) %>" alt="" style="object-position: <%= banner.foco || 'center' %>" <%= index === 0 ? 'fetchpriority="high"' : 'loading="lazy"' %> decoding="async" width="2400" height="1000">
      </div>
      <% }); %>
    <% } else { %>
      <div class="catalog-hero__slide is-active" data-hero-slide><span class="catalog-hero__fallback"></span></div>
    <% } %>
  </div>
  <div class="catalog-hero__veil" aria-hidden="true"></div>

  <div class="container catalog-hero__top">
    <button class="glass-button glass-button--menu" type="button" data-drawer-open aria-label="Abrir categorias" aria-controls="catalog-drawer" aria-expanded="false">
      <%- icon('menu') %>
      <span>Menu</span>
    </button>
    <div class="mode-toggle" aria-label="Trocar modalidade">
      <a class="<%= modo === 'atacado' ? 'is-active' : '' %>" href="<%= url('/atacado') %><%= filterSuffix %>">Atacado</a>
      <a class="<%= modo === 'varejo' ? 'is-active' : '' %>" href="<%= url('/varejo') %><%= filterSuffix %>">Varejo</a>
    </div>
  </div>

  <div class="catalog-hero__center">
    <div class="catalog-hero__logo">
      <%- include('brand', { theme: 'light' }) %>
    </div>
    <div class="catalog-hero__mode-wrap">
      <span class="catalog-hero__crumb">Catálogo</span>
      <span class="catalog-hero__mode"><%= modeLabel(modo) %></span>
    </div>
  </div>

  <div class="catalog-hero__bottom container">
    <% if (banners && banners.length > 1) { %>
    <div class="catalog-hero__dots" aria-label="Selecionar propaganda">
      <% banners.forEach(function(banner, index) { %>
      <button type="button" class="<%= index === 0 ? 'is-active' : '' %>" data-hero-dot="<%= index %>" aria-label="Propaganda <%= index + 1 %>: <%= banner.etiqueta %>"></button>
      <% }); %>
    </div>
    <% } %>
    <% if (banners && banners.length) { %>
    <p class="catalog-hero__caption" data-hero-caption><span><%= banners[0].etiqueta %></span><%= banners[0].titulo %></p>
    <% } %>
  </div>
</section>

<%- include('drawer', { modo, outroModo, categorias, filtros }) %>
