<!DOCTYPE html>
{% load static %}
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>{{ product.name }} - Boutique ECOLUX</title>
    <meta name="description" content="{{ product.short_description }}">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;700&display=swap">
</head>
<body>
    {% include 'ecolux_styles.html' %}
    {% include 'nav.html' %}

    <section class="hero hero2" style="background:url('{% static 'assets/img/bg3.jpg' %}') center/cover; padding:3.5rem 0; color:#fff; background-color: rgba(30,24,16,.7); background-blend-mode: overlay;">
        <div class="container" style="text-align:center;z-index:2 !important;">
            <div class="badge" style="background:rgba(230,194,82,.15); border:1px solid #e6c252; color:#e6c252;">Fiche Produit</div>
            <h1 class="hero-title" style="font-size:2.6rem; font-weight:800; margin-bottom:.75rem;">{{ product.name }}</h1>
            <p class="hero-description" style="max-width:760px; margin:0 auto;">{{ product.short_description }}</p>
            <div style="margin-top:1.25rem; display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap;">
                <a href="{{ whatsapp_link }}" class="btn-primary">Commander via WhatsApp</a>
                <a href="{% url 'app:shop' %}" class="btn-outline">Retour boutique</a>
            </div>
        </div>
    </section>

    <section class="section" style="padding-top:3rem;">
        <div class="container" style="display:grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap:2.5rem;">
            <div>
                <div class="ecolux-card" style="padding:1.25rem;">
                    {% if product.image %}
                        <img src="{{ product.image.url }}" alt="{{ product.name }}" style="width:100%; max-height:380px; object-fit:cover; border-radius:.85rem; margin-bottom:1rem;">
                    {% endif %}
                    <h3 style="margin:0 0 .75rem; font-size:1.35rem;">Détails</h3>
                    <div style="font-size:.95rem; line-height:1.55; color:#444;">{{ product.description|safe }}</div>
                    <div style="margin-top:1.25rem; display:flex; gap:1rem; align-items:center;">
                        <span style="font-size:1.4rem; font-weight:800; color:#35230d;">{{ product.price|floatformat:0 }} {{ product.currency }}</span>
                        {% if product.is_available %}
                            <span class="tag" style="background:#0b6a4a; color:#fff;">Disponible</span>
                        {% else %}
                            <span class="tag" style="background:#b91c1c; color:#fff;">Rupture</span>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div>
                <div class="section-header" style="padding:2rem 1.25rem; margin-bottom:1.5rem; background:linear-gradient(135deg, rgba(30,24,16,.9), rgba(212,175,55,.3));">
                    <div class="section-badge">Produits associés</div>
                    <h2 style="margin:0 0 .5rem;">Autres dans la catégorie</h2>
                    <p style="margin:0;">Explorez des alternatives ou compléments.</p>
                </div>
                <div class="cards-grid">
                    {% for p in related_products %}
                        <div class="ecolux-card" style="border-top:4px solid #e6c252;">
                            {% if p.image %}<img src="{{ p.image.url }}" alt="{{ p.name }}" style="width:100%; height:130px; object-fit:cover; border-radius:.6rem; margin-bottom:.5rem;">{% endif %}
                            <h3 style="margin:0 0 .35rem; font-size:1rem;">{{ p.name }}</h3>
                            <div style="font-size:.75rem; color:#555; margin-bottom:.4rem;">{{ p.short_description|truncatechars:80 }}</div>
                            <div style="display:flex; justify-content:space-between; align-items:center; font-size:.75rem;">
                                <span style="font-weight:700; color:#35230d;">{{ p.price|floatformat:0 }} {{ p.currency }}</span>
                                <a href="{{ p.get_absolute_url }}" class="btn-outline" style="font-size:.65rem; padding:.35rem .6rem;">Voir</a>
                            </div>
                        </div>
                    {% empty %}
                        <p style="font-size:.85rem;">Aucun autre produit.</p>
                    {% endfor %}
                </div>
            </div>
        </div>
    </section>

</body>
</html>
