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

<main>
  <section class="page-hero">
    <div class="container">
      <div class="crumb"><a href="/">Home</a> / Search</div>
      <h1>Search the catalogue</h1>
      <form action="/search" method="get" style="max-width:520px; display:flex; gap:10px; margin-top:18px;">
        <input type="search" name="q" value="<%= q %>" placeholder="Search products..." aria-label="Search products">
        <button class="btn btn-gold" type="submit"><i class="ic" data-ic="search"></i></button>
      </form>
    </div>
  </section>

  <section class="section-sm">
    <div class="container">
      <% if (q) { %>
        <p style="color:var(--muted); margin-bottom:24px;"><%= results.length %> result<%= results.length === 1 ? '' : 's' %> for "<b style="color:var(--ink);"><%= q %></b>"</p>
        <% if (results.length) { %>
          <div class="product-grid">
            <% results.forEach(function(p){ %><div class="reveal"><%- include('partials/product-card', { p, money }) %></div><% }); %>
          </div>
        <% } else { %>
          <div class="empty">
            <div class="ico"><i class="ic" data-ic="search"></i></div>
            <h3>No matches for "<%= q %>"</h3>
            <p>Try a different word, or ask us — we can find it for you.</p>
            <div style="display:flex; gap:12px; justify-content:center; flex-wrap:wrap;">
              <a class="btn btn-gold" href="/">Back to home</a>
              <a class="btn btn-dark" href="https://wa.me/<%= site.whatsapp %>?text=Hi%20TOUS%20CINO%2C%20do%20you%20have%20%22<%= encodeURIComponent(q) %>%22%3F" target="_blank" rel="noopener"><i class="ic" data-ic="whatsapp"></i> Ask on WhatsApp</a>
            </div>
          </div>
        <% } %>
      <% } else { %>
        <div class="empty">
          <div class="ico"><i class="ic" data-ic="search"></i></div>
          <h3>Search our store</h3>
          <p>Type a product name or brand above to find it in seconds.</p>
        </div>
      <% } %>
    </div>
  </section>
</main>

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