{% extends "base.html" %}
{% block title %}AloeMarket · Distribuidora{% endblock %}

{% block content %}

<!-- HERO -->
<section id="hero" class="py-5 bg-light border-bottom">
  <div class="container">
    <div class="row align-items-center g-4">
      <div class="col-md-6" data-aos="fade-right">
        <h1 class="display-5 fw-bold mb-3">
          AloeMarket, tu distribuidora mayorista
        </h1>
        <p class="lead mb-4">
          Gestión de inventario, pedidos y ventas para tu negocio,
          con precios mayoristas y control inteligente de stock.
        </p>
        <div class="d-flex flex-wrap gap-2">
          <a href="#categorias" class="btn btn-primary btn-lg">
            Ver categorías
          </a>
          <a href="#contacto" class="btn btn-outline-secondary btn-lg">
            Hablar con nosotros
          </a>
        </div>
        <p class="text-muted small mt-3">
          * Versión demo en desarrollo. Próximamente: carrito, pedidos en línea y panel de control.
        </p>
      </div>
      <div class="col-md-6" data-aos="fade-left">
        <div class="hero-card shadow-sm rounded-4 p-4 bg-white">
          <h2 class="h5 mb-3">Avance del proyecto</h2>
          <ul class="list-unstyled mb-0">
            <li>✅ Plantilla base con Bootstrap 5 y AOS</li>
            <li>✅ Módulos principales definidos</li>
            <li>✅ Conexión a base de datos MariaDB</li>
            <li>🔄 En desarrollo: inventario con código de barras</li>
            <li>🔄 Próximamente: carrito y pedidos</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- CATEGORÍAS -->
<section id="categorias" class="py-5">
  <div class="container">
    <div class="text-center mb-4" data-aos="fade-up">
      <h2 class="h3 fw-bold">Categorías principales</h2>
      <p class="text-muted">
        Ejemplo de rubros que manejará AloeMarket. Más adelante serán dinámicos desde la base de datos.
      </p>
    </div>

    <div class="row g-4">
      <div class="col-md-3" data-aos="fade-up" data-aos-delay="0">
        <div class="card h-100 shadow-sm border-0 category-card">
          <div class="card-body text-center">
            <h3 class="h5 mb-2">Abarrotes</h3>
            <p class="text-muted small mb-0">
              Productos de consumo masivo para almacenes y minimarkets.
            </p>
          </div>
        </div>
      </div>
      <div class="col-md-3" data-aos="fade-up" data-aos-delay="100">
        <div class="card h-100 shadow-sm border-0 category-card">
          <div class="card-body text-center">
            <h3 class="h5 mb-2">Limpieza</h3>
            <p class="text-muted small mb-0">
              Detergentes, desinfectantes y artículos de aseo.
            </p>
          </div>
        </div>
      </div>
      <div class="col-md-3" data-aos="fade-up" data-aos-delay="200">
        <div class="card h-100 shadow-sm border-0 category-card">
          <div class="card-body text-center">
            <h3 class="h5 mb-2">Bebidas</h3>
            <p class="text-muted small mb-0">
              Refrescos, jugos y productos para frío.
            </p>
          </div>
        </div>
      </div>
      <div class="col-md-3" data-aos="fade-up" data-aos-delay="300">
        <div class="card h-100 shadow-sm border-0 category-card">
          <div class="card-body text-center">
            <h3 class="h5 mb-2">Otros</h3>
            <p class="text-muted small mb-0">
              Categorías complementarias según el tipo de negocio.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- CÓMO FUNCIONA -->
<section id="como-funciona" class="py-5 bg-light border-top border-bottom">
  <div class="container">
    <div class="row g-4 align-items-center">
      <div class="col-md-6" data-aos="fade-right">
        <h2 class="h3 fw-bold mb-3">Cómo funcionará AloeMarket</h2>
        <p class="text-muted">
          La idea es que AloeMarket sea una herramienta sencilla para la distribuidora,
          pero poderosa en el manejo de información y stock.
        </p>
        <ul class="list-unstyled">
          <li>✅ Catálogo autoadministrable</li>
          <li>✅ Control de inventario con lector de código de barras</li>
          <li>✅ Carrito y generación de pedidos</li>
          <li>✅ Dashboard con resumen de ventas y stock</li>
        </ul>
      </div>
      <div class="col-md-6" data-aos="fade-left">
        <div class="row g-3">
          <div class="col-12">
            <div class="info-box p-3 rounded-3 shadow-sm bg-white">
              <strong>Paso 1.</strong> Subir productos y categorías desde el panel.
            </div>
          </div>
          <div class="col-12">
            <div class="info-box p-3 rounded-3 shadow-sm bg-white">
              <strong>Paso 2.</strong> Controlar stock con movimientos y lector de códigos.
            </div>
          </div>
          <div class="col-12">
            <div class="info-box p-3 rounded-3 shadow-sm bg-white">
              <strong>Paso 3.</strong> Recibir pedidos online y gestionar entregas.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- CONTACTO DEMO -->
<section id="contacto" class="py-5">
  <div class="container">
    <div class="row g-4">
      <div class="col-md-6" data-aos="fade-right">
        <h2 class="h3 fw-bold mb-3">¿Quieres saber más del proyecto?</h2>
        <p class="text-muted">
          Esta es una versión inicial de AloeMarket para mostrar avances.
          Próximamente este formulario estará conectado a la base de datos
          y enviará notificaciones al administrador.
        </p>
        <ul class="list-unstyled mb-0">
          <li>📦 Proyecto: Distribuidora – AloeMarket</li>
          <li>🛠️ Stack: Django, MariaDB, Bootstrap 5, AOS, Crispy Forms</li>
          <li>📌 Estado: en desarrollo (MVP)</li>
        </ul>
      </div>
      <div class="col-md-6" data-aos="fade-left">
        <div class="card shadow-sm border-0">
          <div class="card-body">
            <h3 class="h5 mb-3">Formulario de contacto (demo)</h3>
            <form>
              <div class="mb-3">
                <label class="form-label">Nombre</label>
                <input type="text" class="form-control" placeholder="Tu nombre">
              </div>
              <div class="mb-3">
                <label class="form-label">Correo electrónico</label>
                <input type="email" class="form-control" placeholder="tucorreo@ejemplo.cl">
              </div>
              <div class="mb-3">
                <label class="form-label">Mensaje</label>
                <textarea class="form-control" rows="3" placeholder="Cuéntanos qué necesitas"></textarea>
              </div>
              <button type="button" class="btn btn-primary w-100" disabled>
                Enviar (demo)
              </button>
              <p class="text-muted small mt-2 mb-0">
                Este formulario es solo demostrativo por ahora.
                En la siguiente etapa se conectará al backend.
              </p>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

{% endblock %}