{% extends "base.html" %}
{% load static %}

{% block title %}{{ page_title }} · {{ project_name }}{% endblock %}

{% block content %}
<header class="hero-section">
  <div class="hero-grid"></div>
  <div class="shape shape-one"></div>
  <div class="shape shape-two"></div>
  <div class="container position-relative">
    <div class="row align-items-center g-5 py-5">
      <div class="col-lg-7">
        <span class="eyebrow"><i class="bi bi-lightning-charge-fill"></i> Tienda virtual tecnológica</span>
        <h1 class="display-3 fw-bold mt-3">Compra, cotiza y confirma pagos de soluciones digitales en minutos.</h1>
        <p class="hero-copy mt-4">Creamos tiendas virtuales, páginas web, software empresarial, apps móviles y soporte técnico con pagos por QR, Transfermóvil, Enzona o transferencia.</p>
        <div class="d-flex flex-column flex-sm-row gap-3 mt-4">
          <a href="{% url 'catalog' %}" class="btn btn-accent btn-lg"><i class="bi bi-bag-check me-2"></i>Ver catálogo</a>
          <a href="{% url 'confirm_payment' %}" class="btn btn-glass btn-lg"><i class="bi bi-qr-code me-2"></i>Confirmar pago</a>
        </div>
        <div class="hero-stats mt-5">
          <div><strong>5</strong><span>Categorías activas</span></div>
          <div><strong>24/7</strong><span>Solicitudes abiertas</span></div>
          <div><strong>{{ pending_payments }}</strong><span>Pagos pendientes admin</span></div>
        </div>
      </div>
      <div class="col-lg-5">
        <div class="payment-console">
          <div class="console-top"><span></span><span></span><span></span></div>
          <h2>Zona de pago</h2>
          <p>Escanea el QR o paga por las pasarelas disponibles. Luego reporta tu referencia para aprobación manual.</p>
          {% include "core/partials/payment_qr.html" %}
          <div class="payment-methods">
            <span>Transfermóvil</span><span>Enzona</span><span>Transferencia</span>
          </div>
          <a href="{% url 'confirm_payment' %}" class="btn btn-outline-light w-100 mt-3">Ya pagué, confirmar</a>
        </div>
      </div>
    </div>
  </div>
</header>

<main>
  <section class="section-pad">
    <div class="container">
      <div class="section-heading text-center mx-auto">
        <span class="eyebrow dark">Servicios activos</span>
        <h2>Catálogo listo para vender tecnología</h2>
        <p>Elige una categoría, abre el detalle y continúa por WhatsApp o confirmando tu pago.</p>
      </div>
      <div class="row g-4 mt-4">
        {% for category in categories %}
        <div class="col-md-6 col-xl-4">
          <a class="category-card" href="{% url 'catalog' %}?categoria={{ category.slug }}">
            <span class="category-icon"><i class="bi {{ category.icon }}"></i></span>
            <h3>{{ category.name }}</h3>
            <p>{{ category.description }}</p>
            <small>{{ category.active_products }} producto(s) activo(s)</small>
          </a>
        </div>
        {% empty %}
        <div class="col-12"><div class="empty-state">Aún no hay categorías. Puedes crearlas desde el panel admin.</div></div>
        {% endfor %}
      </div>
    </div>
  </section>

  <section class="section-pad product-strip">
    <div class="container">
      <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-end gap-3 mb-4">
        <div>
          <span class="eyebrow dark">Primeros productos</span>
          <h2 class="mb-0">Soluciones destacadas</h2>
        </div>
        <a href="{% url 'catalog' %}" class="btn btn-dark-soft">Explorar todo <i class="bi bi-arrow-right"></i></a>
      </div>
      <div class="row g-4">
        {% for product in featured_products %}
          {% include "core/partials/product_card.html" with product=product %}
        {% empty %}
        <div class="col-12"><div class="empty-state">No hay productos destacados todavía.</div></div>
        {% endfor %}
      </div>
    </div>
  </section>

  <section class="section-pad">
    <div class="container">
      <div class="cta-panel row g-4 align-items-center">
        <div class="col-lg-7">
          <span class="eyebrow">Flujo de pago manual</span>
          <h2>Reporta tu operación y el admin la aprueba en el panel.</h2>
          <p>Diseñado para operar hoy mismo: el cliente paga por QR, Transfermóvil o Enzona, sube su referencia y el administrador revisa el estado desde Django Admin.</p>
        </div>
        <div class="col-lg-5">
          <a href="{% url 'confirm_payment' %}" class="btn btn-accent btn-lg w-100 mb-3">Confirmar pago ahora</a>
          <a href="/admin/" class="btn btn-glass btn-lg w-100">Entrar al panel admin</a>
        </div>
      </div>
    </div>
  </section>
</main>
{% endblock %}