<%- include('partials/header') %>
<section class="page-header">
  <div class="container">
    <h1>Shop</h1>
    <p>Browse our collection</p>
  </div>
</section>
<section class="section">
  <div class="container">
    <div class="shop-header">
      <div class="filter-group">
        <a href="/shop" class="filter-btn <%= selectedCategory === 'all' || selectedCategory === '' ? 'active' : '' %>">All</a>
        <% categories.forEach(function(cat) { %>
        <a href="/shop?category=<%= cat.slug %>" class="filter-btn <%= selectedCategory === cat.slug ? 'active' : '' %>"><%= cat.name %></a>
        <% }); %>
      </div>
      <form class="search-form" action="/shop" method="GET">
        <input type="text" name="search" placeholder="Search products..." value="<%= search %>">
        <button type="submit">Search</button>
      </form>
    </div>

    <% if (products.length > 0) { %>
    <div class="products-grid">
      <% products.forEach(function(p) { %>
      <div class="product-card">
        <a href="/product/<%= p.id %>">
          <div class="product-img" style="<% if (p.image && p.image !== '/uploads/product-default.jpg') { %>background:url('<%= p.image %>');background-size:cover;background-position:center;<% } %>">
            <% if (!p.image || p.image === '/uploads/product-default.jpg') { %>&#128088;<% } %>
          </div>
        </a>
        <div class="product-info">
          <h3><%= p.name %></h3>
          <p class="price">BDT <%= p.price.toLocaleString() %> <span>/=</span></p>
          <form action="/cart/add" method="POST" class="product-actions">
            <input type="hidden" name="id" value="<%= p.id %>">
            <input type="number" name="qty" value="1" min="1" class="qty-input">
            <button type="submit" class="btn btn-primary btn-sm">Add to Cart</button>
          </form>
        </div>
      </div>
      <% }); %>
    </div>
    <% } else { %>
    <div style="text-align:center;padding:60px;color:#6a5a4a;">
      <p style="font-size:18px;margin-bottom:16px;">No products found.</p>
      <a href="/shop" class="btn btn-secondary">View All</a>
    </div>
    <% } %>
  </div>
</section>
<%- include('partials/footer') %>
