{% extends "base.html" %}
{% block title %}Categorías · AloeMarket{% endblock %}
{% load static %}

{% block content %}

<section class="py-5">
  <div class="container">

    <!-- Título -->
    <div class="text-center mb-4" data-aos="fade-down">
      <h1 class="h3 fw-bold">Categorías de productos</h1>
      <p class="text-muted">Explora los tipos de productos que pronto estarán disponibles en AloeMarket.</p>
    </div>

    <!-- Grid -->
    <div class="row g-4">
      {% for cat in categories %}
      <div class="col-12 col-sm-6 col-md-4" data-aos="fade-up" data-aos-delay="{{ forloop.counter0|add:'0' }}00">
        <div class="card h-100 text-center shadow-sm border-0 category-item p-4">
          
          <!-- Icono de Bootstrap Icons -->
          <div class="mb-3">
            <i class="bi {{ cat.icon }} fs-1 text-primary"></i>
          </div>

          <h3 class="h5 fw-bold">{{ cat.name }}</h3>
          <p class="text-muted small mb-0">{{ cat.desc }}</p>

        </div>
      </div>
      {% endfor %}
    </div>

    <!-- Nota -->
    <div class="mt-4" data-aos="fade-up">
      <div class="alert alert-info small">
        Esta página es una versión de demostración. Próximamente las categorías se cargarán desde la base de datos.
      </div>
    </div>

  </div>
</section>

{% endblock %}