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

{% block title %}{{ product.name }} · {{ project_name }}{% endblock %}

{% block content %}
<main class="page-shell">
  <section class="container">
    <div class="row g-5 align-items-start">
      <div class="col-lg-7">
        <a class="back-link" href="{% url 'catalog' %}"><i class="bi bi-arrow-left"></i> Volver al catálogo</a>
        <div class="detail-panel mt-3">
          <span class="pill">{{ product.category.name }}</span>
          <h1>{{ product.name }}</h1>
          <p class="lead">{{ product.short_description }}</p>
          <div class="detail-price">Desde <strong>${{ product.price_from }}</strong></div>
          <div class="detail-body">{{ product.description|linebreaks }}</div>
          <div class="detail-actions">
            <a class="btn btn-accent btn-lg" href="https://wa.me/{{ whatsapp_number }}?text=Hola,%20quiero%20cotizar%20{{ product.name|urlencode }}" target="_blank" rel="noopener"><i class="bi bi-whatsapp me-2"></i>Cotizar por WhatsApp</a>
            <a class="btn btn-dark-soft btn-lg" href="{% url 'confirm_payment' %}?producto={{ product.slug }}"><i class="bi bi-credit-card me-2"></i>Confirmar pago</a>
          </div>
        </div>
      </div>
      <aside class="col-lg-5">
        <div class="payment-console sticky-lg-top detail-payment">
          <div class="console-top"><span></span><span></span><span></span></div>
          <h2>Paga y reporta</h2>
          {% 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' %}?producto={{ product.slug }}" class="btn btn-accent w-100 mt-3">Enviar confirmación</a>
        </div>
      </aside>
    </div>

    {% if related_products %}
    <div class="mt-5 pt-4">
      <h2>También puede interesarte</h2>
      <div class="row g-4 mt-2">
        {% for product in related_products %}
          {% include "core/partials/product_card.html" with product=product %}
        {% endfor %}
      </div>
    </div>
    {% endif %}
  </section>
</main>
{% endblock %}