{% load static %}
<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>{% block title %}AloeMarket · Distribuidora{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Favicon si tienes -->
    {# <link rel="icon" type="image/png" href="{% static 'img/favicon.png' %}"> #}

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">

    <!-- Bootstrap 5 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    >

    <!-- AOS (animaciones) -->
    <link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">

    <!-- Theme AloeMarket GOLD -->
    <link rel="stylesheet" href="{% static 'css/theme.css' %}">
  </head>
  <body>

    <!-- NAVBAR -->
    <nav class="navbar navbar-expand-lg navbar-dark sticky-top">
      <div class="container">

        <a class="navbar-brand" href="{% url 'core:home' %}">
          <span>Aloe</span>Market
        </a>

        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#mainNavbar"
          aria-controls="mainNavbar"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="mainNavbar">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link" href="{% url 'core:home' %}">Inicio</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'products:product_list' %}">Productos</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'core:categories' %}">Categorías</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'core:home' %}#como-funciona">Cómo funciona</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'core:home' %}#contacto">Contacto</a>
            </li>
            <li class="nav-item">
              <a class="nav-link position-relative" href="{% url 'cart:detail' %}">
                Carrito
                <span id="cart-count-badge"
                      class="badge rounded-pill ms-1 align-middle {% if not cart_item_count %}d-none{% endif %}">
                  {{ cart_item_count|default:"0" }}
                </span>
              </a>
            </li>
          </ul>
        </div>

      </div>
    </nav>

    <!-- CONTENIDO PRINCIPAL -->
    <main>
      {% block content %}{% endblock %}
    </main>

    <!-- LÍNEA DORADA -->
    <div class="footer-top-line"></div>

    <!-- FOOTER -->
    <footer>
      <div class="container">
        <div class="row mb-2">
          <div class="col-md-6">
            <p class="mb-1 fw-semibold">
              AloeMarket Distribuidora
            </p>
            <p class="mb-0">
              Gestión mayorista de productos, pedidos e inventario para tu negocio.
            </p>
          </div>
          <div class="col-md-3 mt-3 mt-md-0">
            <p class="mb-1 fw-semibold">Enlaces</p>
            <ul class="list-unstyled mb-0">
              <li><a href="{% url 'core:home' %}">Inicio</a></li>
              <li><a href="{% url 'products:product_list' %}">Catálogo</a></li>
              <li><a href="#contacto">Contacto</a></li>
            </ul>
          </div>
          <div class="col-md-3 mt-3 mt-md-0">
            <p class="mb-1 fw-semibold">Contacto</p>
            <p class="mb-0">
              Correo: <a href="mailto:contacto@aloemarket.cl">contacto@aloemarket.cl</a><br>
              Región de O'Higgins, Chile
            </p>
          </div>
        </div>

        <hr class="border-secondary opacity-25 my-2">

        <div class="d-flex justify-content-between align-items-center">
          <span class="small">
            © {{ now|date:"Y" }} AloeMarket · Proyecto en desarrollo
          </span>
          <span class="small">
            Desarrollado por MAPCOFIC
          </span>
        </div>
      </div>
    </footer>

    <!-- JS: Bootstrap, AOS y main -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
    <script>
      AOS.init();
    </script>
    <script src="{% static 'js/main.js' %}"></script>
  </body>
</html>
