<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><%= negocio.nombreNegocio %></title>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Outfit:wght@600;700;800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="/css/estilos.css" />
</head>
<body style="--brand: <%= negocio.colorPrincipal %>;">
  <nav class="navbar">
    <a href="/" class="logo">
      <% if (negocio.logoUrl) { %>
        <img src="<%= negocio.logoUrl %>" alt="<%= negocio.nombreNegocio %>" style="height: 28px; vertical-align: middle;" />
      <% } else { %>
        <%= negocio.nombreNegocio %>
      <% } %>
    </a>
    <div class="nav-links">
      <a href="/carrito">🛒 Carrito<% if (cantidadCarrito > 0) { %> (<%= cantidadCarrito %>)<% } %></a>
      <a href="/login">Acceso del negocio</a>
    </div>
  </nav>

  <% if (negocio.ofertaActiva && negocio.ofertaTexto) { %>
    <div style="background: var(--brand); color: #fff; text-align: center; padding: 0.6rem; font-size: 0.85rem; font-weight: 600;">
      🏷️ <%= negocio.ofertaTexto %>
    </div>
  <% } %>

  <header class="hero-tienda" <%- negocio.bannerUrl ? `style="background-image:url('${negocio.bannerUrl}'); background-size:cover; background-position:center; color:#fff; text-shadow: 0 2px 8px rgba(0,0,0,0.5);"` : '' %>>
    <h1><%= negocio.nombreNegocio %></h1>
    <p><%= negocio.eslogan || 'Catálogo actualizado — contactanos para hacer tu pedido.' %></p>
  </header>

  <main class="page">
    <% if (categorias.length > 0) { %>
      <div style="display:flex; gap:0.6rem; flex-wrap:wrap; margin-bottom: 1.6rem;">
        <a href="/" class="btn <%= !categoriaFiltro ? 'btn-primary' : 'btn-outline' %> btn-sm">Todos</a>
        <% categorias.forEach(function (c) { %>
          <a href="/?categoria=<%= c.slug %>" class="btn <%= categoriaFiltro && categoriaFiltro.slug === c.slug ? 'btn-primary' : 'btn-outline' %> btn-sm"><%= c.nombre %></a>
        <% }) %>
      </div>
    <% } %>

    <% if (productos.length === 0) { %>
      <div class="card empty-state">Todavía no hay productos publicados.</div>
    <% } else { %>
      <div class="product-grid">
        <% productos.forEach(function (p) { %>
          <% const primeraImagen = p.imagenes && p.imagenes.length > 0 ? p.imagenes[0].url : null; %>
          <a href="/producto/<%= p.id %>" class="product-card">
            <div class="imagen">
              <% if (primeraImagen) { %>
                <img src="<%= primeraImagen %>" alt="<%= p.nombre %>" />
              <% } else { %>
                Sin imagen
              <% } %>
            </div>
            <div class="info">
              <h3><%= p.nombre %></h3>
              <% const resenasProducto = p.resenas || []; %>
              <% if (resenasProducto.length > 0) { %>
                <% const promedioProducto = resenasProducto.reduce(function (s, r) { return s + r.calificacion; }, 0) / resenasProducto.length; %>
                <p style="margin: 0 0 4px; font-size: 0.75rem; color: #f5a623;">
                  <%= '★'.repeat(Math.round(promedioProducto)) %><%= '☆'.repeat(5 - Math.round(promedioProducto)) %>
                  <span style="color: var(--ink-faint);">(<%= resenasProducto.length %>)</span>
                </p>
              <% } %>
              <% if (p.precioOferta) { %>
                <span style="text-decoration: line-through; color: var(--ink-faint); font-size: 0.8rem;">$<%= p.precio %></span>
              <% } %>
              <% if (p.precioLocal && p.precioLocal.moneda !== 'USD') { %>
                <span class="precio"><%= p.precioLocal.formateado %></span>
                <span style="display:block; font-size:0.7rem; color:var(--ink-faint);">≈ $<%= p.precioOferta || p.precio %> USD</span>
              <% } else { %>
                <span class="precio">$<%= p.precioOferta || p.precio %></span>
              <% } %>
            </div>
          </a>
        <% }) %>
      </div>
    <% } %>
  </main>

  <%- include('partials/footer-publico', { negocio }) %>
</body>
</html>
