<%- include('partials/head', {
  title,
  pageDescription,
  bodyClass,
  canonical,
  noindex
}) %>
<%- include('partials/catalog-hero', { modo, outroModo, banners, categorias, filtros: { q: resultado.query, categoria: resultado.category, ordenar: resultado.sort } }) %>
<%- include('partials/store-bar', {
  modo,
  outroModo,
  categorias,
  resultado,
  filtros: { q: resultado.query, categoria: resultado.category, ordenar: resultado.sort }
}) %>

<main id="conteudo" class="catalog-main">
  <div class="container">
    <header class="catalog-head">
      <div class="catalog-head__copy">
        <p class="eyebrow eyebrow--line">Catálogo de <%= modeLabel(modo) %></p>
        <h1 id="catalog-title">
          <% if (resultado.query) { %>Resultados para “<%= resultado.query %>”<% } else if (resultado.category) { %><%= categoryName(resultado.category) %><% } else { %>Todos os produtos<% } %>
        </h1>
        <p id="catalog-subtitle">
          <% if (resultado.query) { %>Mostrando o que encontramos para a sua busca.<% } else if (resultado.category) { %><%= (db.categoryBySlug(resultado.category) || {}).descricao || 'Produtos selecionados para você.' %><% } else { %>Explore a vitrine completa e encontre a sua próxima oportunidade.<% } %>
        </p>
      </div>
      <div class="catalog-head__meta">
        <p class="results-count" aria-live="polite"><strong data-results-count><%= resultado.total %></strong> <span data-results-label><%= resultado.total === 1 ? 'produto' : 'produtos' %></span></p>
        <% if (resultado.query || resultado.category) { %>
        <a class="clear-link" href="<%= url('/' + modo) %>"><%- icon('rotate-ccw') %> Limpar filtros</a>
        <% } else { %>
        <span class="catalog-head__mode"><%- icon(modo === 'atacado' ? 'package' : 'tag') %> Preços de <%= modeLabel(modo).toLowerCase() %></span>
        <% } %>
      </div>
    </header>

    <section class="catalog-results" aria-label="Produtos">
      <div class="product-grid" id="product-grid" data-catalog-grid data-modo="<%= modo %>" data-api="<%= url('/api/produtos') %>" data-total="<%= resultado.total %>">
        <%- include('partials/product-cards', { produtos: resultado.items, modo, startIndex: 0 }) %>
      </div>

      <div class="catalog-empty" data-empty-state <%= resultado.total ? 'hidden' : '' %>>
        <span class="catalog-empty__icon"><%- icon('search') %></span>
        <h2>Nenhum produto encontrado.</h2>
        <p>Tente buscar por outro código, nome ou explore uma categoria diferente.</p>
        <a class="btn btn--green" href="<%= url('/' + modo) %>"><%- icon('rotate-ccw') %> Ver todos os produtos</a>
      </div>

      <div class="catalog-loading" data-loading hidden aria-hidden="true">
        <div class="skeleton-card"><span class="skeleton"></span><span class="skeleton skeleton--line"></span><span class="skeleton skeleton--line skeleton--short"></span></div>
        <div class="skeleton-card"><span class="skeleton"></span><span class="skeleton skeleton--line"></span><span class="skeleton skeleton--line skeleton--short"></span></div>
        <div class="skeleton-card"><span class="skeleton"></span><span class="skeleton skeleton--line"></span><span class="skeleton skeleton--line skeleton--short"></span></div>
        <div class="skeleton-card"><span class="skeleton"></span><span class="skeleton skeleton--line"></span><span class="skeleton skeleton--line skeleton--short"></span></div>
      </div>

      <div class="catalog-end" data-end-state hidden>
        <span></span><p>Você viu todos os produtos desta seleção.</p><span></span>
      </div>

      <div class="catalog-sentinel" data-infinite-sentinel aria-hidden="true"></div>

      <% if (resultado.hasMore) { %>
      <%
        const moreParams = new URLSearchParams();
        if (resultado.query) moreParams.set('q', resultado.query);
        if (resultado.category) moreParams.set('categoria', resultado.category);
        if (resultado.sort && resultado.sort !== 'relevancia') moreParams.set('ordenar', resultado.sort);
        moreParams.set('pagina', resultado.nextPage);
      %>
      <noscript>
        <div class="catalog-more">
          <a class="btn btn--outline" href="<%= url('/' + modo) %>?<%= moreParams.toString() %>">Carregar mais produtos</a>
        </div>
      </noscript>
      <% } %>

      <p class="catalog-note"><%- icon('info') %> Imagens meramente ilustrativas. Preços e disponibilidade sujeitos à confirmação pelo WhatsApp.</p>
    </section>
  </div>
</main>

<%- include('partials/footer', { whatsappUrl }) %>
<script src="<%= url('/js/catalog.js') %>?v=<%= assetVersion %>" defer></script>
</body>
</html>
