<!DOCTYPE html>
<html lang="en">
<head>
  <%- include("partials/head") %>
</head>
<body>
  <header>
    <%- include("partials/header") %>
  </header>
  <main>
    <section class="hero">
      <h1><%= category.charAt(0).toUpperCase() + category.slice(1) %></h1>
      <p>Browse our exclusive <%= category %> collection.</p>
    </section>
    <section class="gallery">
      <div class="product-grid">
        <% products.filter(product => product.category === category).forEach(product => { %>
          <a href="/product-detail/<%= product.id %>" class="product-card">
            <img src="<%= product.image %>" alt="<%= product.name %>">
            <div class="product-info">
              <h3><%= product.name %></h3>
              <p>$<%= product.price %></p>
            </div>
          </a>
        <% }) %>
      </div>
    </section>
  </main>
  <footer>
    <%- include("partials/footer") %>
  </footer>
</body>
</html>