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

<main>
  <section class="page-hero">
    <div class="container">
      <div class="crumb"><a href="/">Home</a> / Shop All</div>
      <h1>Shop everything</h1>
      <p>Every piece in the catalogue, shuffled. Search, filter and sort to find your drop.</p>

      <form id="shopForm" method="get" action="/all" role="search" class="shop-form">
        <div class="shop-search-row">
          <input type="search" name="q" value="<%= q %>" placeholder="Search products, brands or categories..." aria-label="Search products">
          <button class="btn btn-gold" type="submit" aria-label="Search"><i class="ic" data-ic="search"></i></button>
        </div>

        <div class="shop-tabs" role="tablist" aria-label="Category">
          <label class="shop-tab-small"><input type="radio" name="cat" value="" <%= !catSlug ? 'checked' : '' %> onchange="this.form.submit()"><span>All</span></label>
          <% cats.forEach(function(c){ %>
            <label class="shop-tab-small"><input type="radio" name="cat" value="<%= c.slug %>" <%= catSlug === c.slug ? 'checked' : '' %> onchange="this.form.submit()"><span><%= c.name %></span></label>
          <% }); %>
        </div>

        <div class="shop-controls">
          <label class="shop-check"><input type="checkbox" name="stock" value="1" <%= inStock ? 'checked' : '' %> onchange="this.form.submit()"><span>In stock only</span></label>
          <select name="sort" class="shop-select" onchange="this.form.submit()">
            <option value="random" <%= sort === 'random' ? 'selected' : '' %>>Random</option>
            <option value="newest" <%= sort === 'newest' ? 'selected' : '' %>>Newest</option>
            <option value="name" <%= sort === 'name' ? 'selected' : '' %>>Name A–Z</option>
            <option value="price_low" <%= sort === 'price_low' ? 'selected' : '' %>>Price: low → high</option>
            <option value="price_high" <%= sort === 'price_high' ? 'selected' : '' %>>Price: high → low</option>
          </select>
        </div>
      </form>

      <p style="margin-top:14px; color:var(--gold-2); font-weight:700;"><%= total %> product<%= total === 1 ? '' : 's' %> found</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) { %>
        <% const qs = (pg) => '/all?' + (q ? 'q=' + encodeURIComponent(q) + '&' : '') + (catSlug ? 'cat=' + catSlug + '&' : '') + 'sort=' + sort + (inStock ? '&stock=1' : '') + '&page=' + pg; %>
        <div style="display:flex; justify-content:center; gap:10px; margin-top:44px; flex-wrap:wrap;">
          <% if (page > 1) { %><a class="btn btn-dark btn-sm" href="<%= qs(page - 1) %>">← Prev</a><% } %>
          <% for (let i = 1; i <= pages; i++) { %>
            <a class="btn btn-sm <%= i === page ? 'btn-gold' : 'btn-dark' %>" href="<%= qs(i) %>"><%= i %></a>
          <% } %>
          <% if (page < pages) { %><a class="btn btn-dark btn-sm" href="<%= qs(page + 1) %>">Next →</a><% } %>
        </div>
        <% } %>
      <% } else { %>
        <div class="empty">
          <div class="ico"><i class="ic" data-ic="search"></i></div>
          <h3>Nothing matched</h3>
          <p>Try clearing filters, searching a different word, or ask us on WhatsApp — we'll help you find it.</p>
          <div style="display:flex; gap:12px; justify-content:center; flex-wrap:wrap;">
            <a class="btn btn-gold" href="/all">Shop all</a>
            <a class="btn btn-dark" href="/">Back to home</a>
          </div>
        </div>
      <% } %>
    </div>
  </section>
</main>

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