<%- include('partials/head') %>
<%- include('partials/header') %>

<main>
  <section class="page-hero">
    <div class="container">
      <div class="crumb"><a href="/">Home</a> / <%= cat.name %></div>
      <h1><%= cat.name %></h1>
      <p><%= cat.description || 'Curated picks in our ' + cat.name + ' range.' %></p>
      <p style="margin-top:8px; color:var(--gold-2); font-weight:700;"><%= total %> product<%= total === 1 ? '' : 's' %> available</p>
    </div>
  </section>

  <section class="section-sm">
    <div class="container">
      <% if (products.length) { %>
        <div class="product-grid">
          <% products.forEach(function(p){ %><div class="reveal"><%- include('partials/product-card', { p, money }) %></div><% }); %>
        </div>
        <% if (pages > 1) { %>
        <div style="display:flex; justify-content:center; gap:10px; margin-top:44px;">
          <% if (page > 1) { %><a class="btn btn-dark btn-sm" href="/<%= cat.slug %>?page=<%= page - 1 %>">← Prev</a><% } %>
          <% for (let i = 1; i <= pages; i++) { %>
            <a class="btn btn-sm <%= i === page ? 'btn-gold' : 'btn-dark' %>" href="/<%= cat.slug %>?page=<%= i %>"><%= i %></a>
          <% } %>
          <% if (page < pages) { %><a class="btn btn-dark btn-sm" href="/<%= cat.slug %>?page=<%= page + 1 %>">Next →</a><% } %>
        </div>
        <% } %>
      <% } else { %>
        <div class="empty">
          <div class="ico"><i class="ic" data-ic="bag"></i></div>
          <h3>Curating <%= cat.name %>...</h3>
          <p>We're adding fresh pieces to this category right now. While you wait, explore the full collection or ask us what's dropping.</p>
          <div style="display:flex; gap:12px; justify-content:center; flex-wrap:wrap;">
            <a class="btn btn-gold" href="/">Explore the collection</a>
            <a class="btn btn-dark" href="https://wa.me/<%= site.whatsapp %>?text=Hi%20TOUS%20CINO%2C%20any%20new%20<%= encodeURIComponent(cat.name) %>%20coming%20soon%3F" target="_blank" rel="noopener"><i class="ic" data-ic="whatsapp"></i> Ask about drops</a>
          </div>
        </div>
      <% } %>
    </div>
  </section>
</main>

<%- include('partials/footer') %>
