<!DOCTYPE html>
{% load static %}
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Boutique ECOLUX - Produits & Matériaux</title>
    <meta name="description" content="Découvrez la boutique ECOLUX : matériaux, solutions techniques et équipements. Achat par WhatsApp en toute simplicité.">
    <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">
    <style>
        /* Styles responsive pour la page boutique */
        @media (max-width: 768px) {
            .hero2 {
                padding: 2rem 0 !important;
            }
            
            .hero-title {
                font-size: 1.75rem !important;
                line-height: 1.2 !important;
            }
            
            .hero-description {
                font-size: 0.9rem !important;
                padding: 0 1rem !important;
            }
            
            .category-filters {
                flex-direction: column !important;
                gap: 0.5rem !important;
            }
            
            .category-filters .btn-outline {
                width: 100% !important;
                text-align: center !important;
                padding: 0.75rem 1rem !important;
            }
            
            .section-header {
                padding: 1.5rem 1rem !important;
            }
            
            .section-header h2 {
                font-size: 1.5rem !important;
            }
            
            .section-header p {
                font-size: 0.85rem !important;
            }
            
            .cards-grid {
                grid-template-columns: 1fr !important;
                gap: 1rem !important;
            }
            
            .ecolux-card {
                padding: 1rem !important;
            }
            
            .ecolux-card h3 {
                font-size: 1rem !important;
            }
            
            .product-buttons {
                flex-direction: column !important;
            }
            
            .product-buttons a {
                width: 100% !important;
                text-align: center !important;
                justify-content: center !important;
            }
        }
        
        @media (max-width: 480px) {
            .hero-title {
                font-size: 1.5rem !important;
            }
            
            .badge {
                font-size: 0.75rem !important;
                padding: 0.4rem 0.8rem !important;
            }
            
            .section {
                padding-top: 2rem !important;
            }
            
            .ecolux-card img {
                height: 180px !important;
            }
        }
    </style>
</head>
<body>
    {% include 'ecolux_styles.html' %}
    {% include 'nav.html' %}

    <section class="hero hero2" style="background:url('{% static 'assets/img/shop.jpg' %}') center/cover; padding:4rem 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;">
                <span class="pulse-dot" style="background:#e6c252"></span>
                Boutique ECOLUX
            </div>
            <h1 class="hero-title" style="font-size:3rem; font-weight:800; margin-bottom: 1rem;">Produits & Matériaux Sélectionnés</h1>
            <p class="hero-description" style="max-width:760px; margin:0 auto 1.5rem;">Qualité, transparence et accompagnement technique. Commande uniquement via WhatsApp pour un suivi humain.</p>
            <div class="category-filters" style="margin-top:1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;">
                {% for c in categories %}
                    <a href="?categorie={{ c.slug }}" class="btn-outline" style="margin:.25rem;{% if current_category and c.id == current_category.id %}background:#e6c252;color:#1e1810;{% endif %}">{{ c.name }}</a>
                {% endfor %}
            </div>
        </div>
    </section>

    <section class="section" style="padding-top:3rem;">
        <div class="container">
            {% if featured_products %}
            <div class="section-header" style="padding:2.5rem 1rem; margin-bottom:2.5rem; background:linear-gradient(135deg, rgba(30,24,16,.9), rgba(230,194,82,.25));">
                <div class="section-badge">En vedette</div>
                <h2 style="margin:0 0 .75rem;">Produits recommandés</h2>
                <p style="margin:0;">Sélection spéciale pour démarrer votre projet avec confiance.</p>
            </div>
            <div class="cards-grid" style="margin-bottom:3rem;">
                {% for p in featured_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:170px; object-fit:cover; border-radius:.65rem; margin-bottom:.75rem;">{% endif %}
                    <h3 style="margin:0 0 .5rem;">{{ p.name }}</h3>
                    <p style="font-size:.9rem; color:#555; margin:0 0 .75rem;">{{ p.short_description }}</p>
                    <div style="font-weight:700; color:#35230d; margin-bottom: 0.75rem;">{{ p.price|floatformat:0 }} {{ p.currency }}</div>
                    <div class="product-buttons" style="margin-top:.75rem; display:flex; gap:.5rem; flex-wrap:wrap;">
                        <a href="{{ p.get_absolute_url }}" class="btn-outline" style="font-size:.75rem; padding:.5rem 1rem; display: inline-flex; align-items: center; justify-content: center;">Détails</a>
                        <a href="https://wa.me/{{ whatsapp_number }}?text={{ p.whatsapp_message|urlencode }}" class="btn-primary" style="font-size:.75rem; padding:.5rem 1rem; display: inline-flex; align-items: center; justify-content: center;">WhatsApp</a>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% endif %}

            <div class="section-header" style="padding:2.25rem 1rem; margin-bottom:1rem; background:linear-gradient(135deg, rgba(30,24,16,.85), rgba(11,106,74,.35));">
                <div class="section-badge">Catalogue</div>
                {% if current_category %}
                    <h2 style="margin:0 0 .75rem;">{{ current_category.name }}</h2>
                {% else %}
                    <h2 style="margin:0 0 .75rem;">Tous les produits</h2>
                {% endif %}
                <p style="margin:0;text-align:center;">Parcourez notre sélection. Commande via WhatsApp pour un suivi personnalisé.</p>
            </div>

            <!-- Barre de recherche déplacée ici (en bas, au-dessus du catalogue) -->
            {% comment %} <form method="get" style="margin: 0 0 1.5rem; display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap;">
                {% if current_category %}<input type="hidden" name="categorie" value="{{ current_category.slug }}">{% endif %}
                <input name="q" value="{{ search_query }}" placeholder="Rechercher un produit..." style="padding:.9rem 1.1rem; border-radius: .75rem; border:2px solid #e6c252; min-width:260px;">
                <button class="btn-primary" type="submit">Rechercher</button>
            </form> {% endcomment %}

            <div class="cards-grid">
                {% for p in products %}
                <div class="ecolux-card" style="border-top:4px solid #0b6a4a;">
                    {% if p.image %}<img src="{{ p.image.url }}" alt="{{ p.name }}" style="width:100%; height:150px; object-fit:cover; border-radius:.65rem; margin-bottom:.6rem;">{% endif %}
                    <h3 style="margin:0 0 .4rem; font-size:1.05rem;">{{ p.name }}</h3>
                    <p style="font-size:.8rem; color:#555; margin:0 0 .5rem;">{{ p.short_description|truncatechars:100 }}</p>
                    <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.6rem;">
                        <span style="font-weight:700; color:#35230d; font-size:.9rem;">{{ p.price|floatformat:0 }} {{ p.currency }}</span>
                        {% if p.is_available %}
                            <span class="tag" style="background:#0b6a4a; color:#fff; padding: 0.25rem 0.75rem; border-radius: 0.5rem; font-size: 0.75rem;">En stock</span>
                        {% else %}
                            <span class="tag" style="background:#b91c1c; color:#fff; padding: 0.25rem 0.75rem; border-radius: 0.5rem; font-size: 0.75rem;">Rupture</span>
                        {% endif %}
                    </div>
                    <div class="product-buttons" style="margin-top:.6rem; display:flex; gap:.4rem;">
                        <a href="{{ p.get_absolute_url }}" class="btn-outline" style="font-size:.7rem; padding:.45rem .75rem; display: inline-flex; align-items: center; justify-content: center;">Voir</a>
                        <a href="https://wa.me/{{ whatsapp_number }}?text={{ p.whatsapp_message|urlencode }}" class="btn-primary" style="font-size:.7rem; padding:.45rem .75rem; display: inline-flex; align-items: center; justify-content: center;">WhatsApp</a>
                    </div>
                </div>
                {% empty %}
                    <p style="text-align: center; padding: 2rem; color: #555;">Aucun produit disponible pour le moment.</p>
                {% endfor %}
            </div>
        </div>
    </section>

    <!-- Footer -->
    {% include 'partials/footer.html' %}

    <!-- WhatsApp Button -->
    <button class="whatsapp-btn" onclick="window.open(`https://wa.me/221779962626?text=${encodeURIComponent('Bonjour ECOLUX BTP, je souhaite obtenir une consultation gratuite pour mon projet de construction.')}`, '_blank');" title="Contactez-nous sur WhatsApp">
        <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
        </svg>
    </button>

    {% include "ecolux_scripts.html" %}

</body>
</html>
