{% extends "base.html" %}

{% block title %}AfroCoiff' - Salons & Spécialistes de la Coiffure Afro d'Excellence{% endblock %}

{% block content %}

<!-- Carousel Hero Header Start -->
<div class="header-carousel owl-carousel position-relative">
    <!-- Slide 1: Tresses & Knotless Braids -->
    <div class="header-carousel-item">
        <div class="container">
            <div class="row align-items-center g-4">
                <div class="col-lg-7 text-start text-white pe-lg-4">
                    <span class="badge bg-secondary text-white px-3 py-2 rounded-pill text-uppercase mb-3 fw-bold tracking-wider shadow-sm">
                        <i class="fas fa-crown me-1 text-warning"></i> L'Excellence du Cheveu Texturé
                    </span>
                    <h1 class="display-4 font-playfair fw-bold mb-3 text-white">
                        Sublimez Votre Beauté Avec les Meilleurs Salons Afro
                    </h1>
                    <p class="fs-5 text-white-50 mb-4" style="line-height: 1.7;">
                        Trouvez instantanément des coiffeuses et barbiers certifiés en Suisse et France : Knotless Braids, Silk Press miroir, Locks, Perruques HD Lace et soins profonds.
                    </p>
                    <div class="d-flex gap-3 flex-wrap mb-4">
                        <a href="{{ url_for('salon_web.list_salons') }}" class="btn btn-primary rounded-pill py-3 px-4 fw-bold shadow">
                            <i class="fas fa-search me-2"></i> Trouver un Salon
                        </a>
                        <a href="#specialites" class="btn btn-outline-light rounded-pill py-3 px-4 fw-bold">
                            Nos Prestations Phares
                        </a>
                    </div>
                    <div class="d-flex align-items-center gap-4 text-white-50 small pt-3 border-top border-white border-opacity-10 flex-wrap">
                        <div><i class="fas fa-check-circle text-secondary me-1"></i> Salons Vérifiés</div>
                        <div><i class="fas fa-star text-warning me-1"></i> Avis 4.9/5</div>
                        <div><i class="fas fa-bolt text-secondary me-1"></i> Réservation Instantanée</div>
                    </div>
                </div>
                <div class="col-lg-5 text-center">
                    <div class="hero-showcase-card">
                        <img src="{{ url_for('serve_template_assets', filename='Tresses & Knotless Braids.jpg') }}" alt="Tresses & Knotless Braids">
                        <div class="hero-badge-floating">
                            <i class="fas fa-fire text-danger me-1"></i> Tresses & Knotless Braids
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Slide 2: Silk Press Brillance Miroir -->
    <div class="header-carousel-item">
        <div class="container">
            <div class="row align-items-center g-4">
                <div class="col-lg-7 text-start text-white pe-lg-4">
                    <span class="badge bg-secondary text-white px-3 py-2 rounded-pill text-uppercase mb-3 fw-bold tracking-wider shadow-sm">
                        <i class="fas fa-gem me-1 text-warning"></i> Programme Fidélité Privilège
                    </span>
                    <h1 class="display-4 font-playfair fw-bold mb-3 text-white">
                        Carte de Membre Digitale & Réductions Exclusives
                    </h1>
                    <p class="fs-5 text-white-50 mb-4" style="line-height: 1.7;">
                        Chaque prestation réservée vous rapporte des points fidélité convertibles en réductions auprès de l'ensemble de nos salons partenaires.
                    </p>
                    <div class="d-flex gap-3 flex-wrap mb-4">
                        <a href="{{ url_for('auth_web.register') }}" class="btn btn-secondary rounded-pill text-white py-3 px-4 fw-bold shadow">
                            <i class="fas fa-id-card me-2"></i> Obtenir ma Carte Membre
                        </a>
                        <a href="{{ url_for('salon_web.promotions') }}" class="btn btn-outline-light rounded-pill py-3 px-4 fw-bold">
                            Voir les Offres Actives
                        </a>
                    </div>
                    <div class="d-flex align-items-center gap-4 text-white-50 small pt-3 border-top border-white border-opacity-10 flex-wrap">
                        <div><i class="fas fa-gift text-warning me-1"></i> Réductions Automatiques</div>
                        <div><i class="fas fa-qrcode text-secondary me-1"></i> QR Code en Salon</div>
                        <div><i class="fas fa-percent text-secondary me-1"></i> -10% dès la 1ère visite</div>
                    </div>
                </div>
                <div class="col-lg-5 text-center">
                    <div class="hero-showcase-card">
                        <img src="{{ url_for('serve_template_assets', filename='Silk Press Brillance Miroir.jpg') }}" alt="Silk Press Brillance Miroir">
                        <div class="hero-badge-floating">
                            <i class="fas fa-sparkles text-warning me-1"></i> Silk Press Miroir
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Slide 3: Perruques Lace & Soins -->
    <div class="header-carousel-item">
        <div class="container">
            <div class="row align-items-center g-4">
                <div class="col-lg-7 text-start text-white pe-lg-4">
                    <span class="badge bg-secondary text-white px-3 py-2 rounded-pill text-uppercase mb-3 fw-bold tracking-wider shadow-sm">
                        <i class="fas fa-magic me-1 text-warning"></i> Savoir-Faire Artisanal & Moderne
                    </span>
                    <h1 class="display-4 font-playfair fw-bold mb-3 text-white">
                        Perruques HD Lace, Locks & Nattes Créatives
                    </h1>
                    <p class="fs-5 text-white-50 mb-4" style="line-height: 1.7;">
                        Bénéficiez de conseils personnalisés et confiez votre couronne capillaire à des passionnés du cheveu naturel, défrisé et texturé.
                    </p>
                    <div class="d-flex gap-3 flex-wrap mb-4">
                        <a href="{{ url_for('salon_web.list_salons') }}" class="btn btn-primary rounded-pill py-3 px-4 fw-bold shadow">
                            <i class="fas fa-calendar-check me-2"></i> Réserver en Ligne
                        </a>
                        <a href="#specialites" class="btn btn-outline-light rounded-pill py-3 px-4 fw-bold">
                            Découvrir les Services
                        </a>
                    </div>
                    <div class="d-flex align-items-center gap-4 text-white-50 small pt-3 border-top border-white border-opacity-10 flex-wrap">
                        <div><i class="fas fa-shield-alt text-secondary me-1"></i> Pose Sécurisée Sans Tension</div>
                        <div><i class="fas fa-heart text-danger me-1"></i> Respect de la Fibre Capillaire</div>
                    </div>
                </div>
                <div class="col-lg-5 text-center">
                    <div class="hero-showcase-card">
                        <img src="{{ url_for('serve_template_assets', filename='Perruques Lace & Tissages.jpg') }}" alt="Perruques Lace & Tissages">
                        <div class="hero-badge-floating">
                            <i class="fas fa-gem text-primary me-1"></i> Perruques Lace & Tissages
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Carousel Hero Header End -->

<!-- Floating Search Bar Start -->
<div class="container position-relative" style="margin-top: -45px; z-index: 20;">
    <div class="bg-white p-4 rounded-4 shadow-lg border">
        <form method="GET" action="{{ url_for('salon_web.list_salons') }}" class="row g-3 align-items-center">
            <div class="col-lg-4 col-md-6">
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0 text-primary"><i class="fas fa-search"></i></span>
                    <input type="text" name="q" class="form-control bg-light border-start-0 py-2" placeholder="Nom du salon, prestation (ex: Braids)...">
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0 text-primary"><i class="fas fa-map-marker-alt"></i></span>
                    <select name="city_id" class="form-select bg-light border-start-0 py-2">
                        <option value="">Toutes les villes</option>
                        {% for city in cities %}
                            <option value="{{ city.id }}">{{ city.name }} ({{ city.country.code }})</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0 text-primary"><i class="fas fa-tags"></i></span>
                    <select name="category_id" class="form-select bg-light border-start-0 py-2">
                        <option value="">Toutes les spécialités</option>
                        {% for cat in categories %}
                            <option value="{{ cat.id }}">{{ cat.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="col-lg-2 col-md-6">
                <button type="submit" class="btn btn-primary rounded-pill w-100 py-2 fw-bold shadow-sm">
                    <i class="fas fa-filter me-1"></i> Rechercher
                </button>
            </div>
        </form>
    </div>
</div>
<!-- Floating Search Bar End -->

<!-- Services / Specialites Start -->
<div class="container-fluid service py-5 mt-4" id="specialites">
    <div class="container py-5">
        <div class="section-title mb-5 wow fadeInUp" data-wow-delay="0.1s">
            <div class="sub-style">
                <h4 class="sub-title px-3 mb-0">Savoir-Faire & Prestations</h4>
            </div>
            <h1 class="display-4 mb-4 font-playfair">Des Soins & Coiffures Réalisés Par Des Experts</h1>
            <p class="mb-0 text-muted fs-6" style="max-width: 750px; margin: 0 auto;">
                Chaque salon répertorié sur AfroCoiff' est sélectionné pour sa maîtrise des techniques traditionnelles et modernes adaptées aux cheveux crépus, frisés et texturés.
            </p>
        </div>

        <div class="row g-4 justify-content-center">
            <!-- Item 1: Knotless & Box Braids -->
            <div class="col-md-6 col-lg-4 col-xl-4 wow fadeInUp" data-wow-delay="0.1s">
                <div class="service-item rounded-4 bg-white border h-100 shadow-sm overflow-hidden">
                    <div class="service-img position-relative overflow-hidden" style="height: 230px;">
                        <img src="{{ url_for('serve_template_assets', filename='Tresses & Knotless Braids.jpg') }}" class="w-100 h-100" style="object-fit: cover; object-position: center; display: block;" alt="Tresses et Braids">
                        <span class="position-absolute top-0 end-0 bg-primary text-white text-xs px-3 py-1 m-3 rounded-pill fw-bold">Dès 65 CHF/€</span>
                    </div>
                    <div class="service-content p-4">
                        <h4 class="font-playfair mb-3">Tresses & Knotless Braids</h4>
                        <p class="text-muted small mb-4">Tresses sans nœud ultra légères, Box Braids soignées, vanilles et nattes protectrices durables sans tension.</p>
                        <a href="{{ url_for('salon_web.list_salons') }}" class="btn btn-outline-primary rounded-pill btn-sm px-4">Voir les Salons</a>
                    </div>
                </div>
            </div>

            <!-- Item 2: Silk Press -->
            <div class="col-md-6 col-lg-4 col-xl-4 wow fadeInUp" data-wow-delay="0.2s">
                <div class="service-item rounded-4 bg-white border h-100 shadow-sm overflow-hidden">
                    <div class="service-img position-relative overflow-hidden" style="height: 230px;">
                        <img src="{{ url_for('serve_template_assets', filename='Silk Press Brillance Miroir.jpg') }}" class="w-100 h-100" style="object-fit: cover; object-position: center; display: block;" alt="Silk Press Miroir">
                        <span class="position-absolute top-0 end-0 bg-primary text-white text-xs px-3 py-1 m-3 rounded-pill fw-bold">Dès 85 CHF/€</span>
                    </div>
                    <div class="service-content p-4">
                        <h4 class="font-playfair mb-3">Silk Press Brillance Miroir</h4>
                        <p class="text-muted small mb-4">Lissage thermique sans agression chimique offrant une fluidité, une souplesse et une brillance soyeuse remarquable.</p>
                        <a href="{{ url_for('salon_web.list_salons') }}" class="btn btn-outline-primary rounded-pill btn-sm px-4">Voir les Salons</a>
                    </div>
                </div>
            </div>

            <!-- Item 3: Locks & Dreads -->
            <div class="col-md-6 col-lg-4 col-xl-4 wow fadeInUp" data-wow-delay="0.3s">
                <div class="service-item rounded-4 bg-white border h-100 shadow-sm overflow-hidden">
                    <div class="service-img position-relative overflow-hidden" style="height: 230px;">
                        <img src="{{ url_for('serve_template_assets', filename='Départ & Entretien de Locks.jpg') }}" class="w-100 h-100" style="object-fit: cover; object-position: center; display: block;" alt="Locks et Dreads">
                        <span class="position-absolute top-0 end-0 bg-primary text-white text-xs px-3 py-1 m-3 rounded-pill fw-bold">Dès 75 CHF/€</span>
                    </div>
                    <div class="service-content p-4">
                        <h4 class="font-playfair mb-3">Départ & Entretien de Locks</h4>
                        <p class="text-muted small mb-4">Création de locks sur mesure, resserrage méticuleux des repousses, bain purifiant et soins hydratants aux huiles bio.</p>
                        <a href="{{ url_for('salon_web.list_salons') }}" class="btn btn-outline-primary rounded-pill btn-sm px-4">Voir les Salons</a>
                    </div>
                </div>
            </div>

            <!-- Item 4: Perruques HD Lace -->
            <div class="col-md-6 col-lg-4 col-xl-4 wow fadeInUp" data-wow-delay="0.4s">
                <div class="service-item rounded-4 bg-white border h-100 shadow-sm overflow-hidden">
                    <div class="service-img position-relative overflow-hidden" style="height: 230px;">
                        <img src="{{ url_for('serve_template_assets', filename='Perruques Lace & Tissages.jpg') }}" class="w-100 h-100" style="object-fit: cover; object-position: center; display: block;" alt="Perruques HD Lace">
                        <span class="position-absolute top-0 end-0 bg-primary text-white text-xs px-3 py-1 m-3 rounded-pill fw-bold">Dès 90 CHF/€</span>
                    </div>
                    <div class="service-content p-4">
                        <h4 class="font-playfair mb-3">Perruques Lace & Tissages</h4>
                        <p class="text-muted small mb-4">Customisation de tulle invisible, pose sécurisée Glueless ou collée, tissages cousus fermés pour un rendu naturel.</p>
                        <a href="{{ url_for('salon_web.list_salons') }}" class="btn btn-outline-primary rounded-pill btn-sm px-4">Voir les Salons</a>
                    </div>
                </div>
            </div>

            <!-- Item 5: Nattes Collées -->
            <div class="col-md-6 col-lg-4 col-xl-4 wow fadeInUp" data-wow-delay="0.5s">
                <div class="service-item rounded-4 bg-white border h-100 shadow-sm overflow-hidden">
                    <div class="service-img position-relative overflow-hidden" style="height: 230px;">
                        <img src="{{ url_for('serve_template_assets', filename='Nattes Collées Graphiques.png') }}" class="w-100 h-100" style="object-fit: cover; object-position: center; display: block;" alt="Cornrows">
                        <span class="position-absolute top-0 end-0 bg-primary text-white text-xs px-3 py-1 m-3 rounded-pill fw-bold">Dès 50 CHF/€</span>
                    </div>
                    <div class="service-content p-4">
                        <h4 class="font-playfair mb-3">Nattes Collées Graphiques</h4>
                        <p class="text-muted small mb-4">Cornrows géométriques personnalisés, tracés précis au millimètre, coiffures d'apparat pour enfants et adultes.</p>
                        <a href="{{ url_for('salon_web.list_salons') }}" class="btn btn-outline-primary rounded-pill btn-sm px-4">Voir les Salons</a>
                    </div>
                </div>
            </div>

            <!-- Item 6: Barber Homme -->
            <div class="col-md-6 col-lg-4 col-xl-4 wow fadeInUp" data-wow-delay="0.6s">
                <div class="service-item rounded-4 bg-white border h-100 shadow-sm overflow-hidden">
                    <div class="service-img position-relative overflow-hidden" style="height: 230px;">
                        <img src="{{ url_for('serve_template_assets', filename='Coupe Homme & Barber.jpg') }}" class="w-100 h-100" style="object-fit: cover; object-position: center; display: block;" alt="Barber Afro">
                        <span class="position-absolute top-0 end-0 bg-primary text-white text-xs px-3 py-1 m-3 rounded-pill fw-bold">Dès 40 CHF/€</span>
                    </div>
                    <div class="service-content p-4">
                        <h4 class="font-playfair mb-3">Coupe Homme & Barber</h4>
                        <p class="text-muted small mb-4">Dégradé américain à blanc (taper, fade), traçage net des contours, rituel serviette chaude et entretien de la barbe.</p>
                        <a href="{{ url_for('salon_web.list_salons') }}" class="btn btn-outline-primary rounded-pill btn-sm px-4">Voir les Salons</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Services End -->

<!-- Featured Salons Start -->
<div class="container-fluid py-5 bg-light">
    <div class="container py-5">
        <div class="section-title mb-5 wow fadeInUp" data-wow-delay="0.1s">
            <div class="sub-style">
                <h4 class="sub-title px-3 mb-0">Adresses Recommandées</h4>
            </div>
            <h1 class="display-4 mb-4 font-playfair">Nos Salons Partenaires d'Élite</h1>
            <p class="mb-0 text-muted fs-6" style="max-width: 750px; margin: 0 auto;">
                Explorez des établissements reconnus pour leur professionnalisme, leur accueil chaleureux et la qualité constante de leurs réalisations.
            </p>
        </div>

        <div class="row g-4">
            {% for salon in featured_salons %}
                <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.{{ loop.index }}s">
                    <div class="salon-card h-100 d-flex flex-column">
                        <div class="position-relative" style="height: 230px;">
                            <img src="{{ salon.cover_photo }}" class="w-100 h-100 object-fit-cover" alt="{{ salon.name }}">
                            <div class="position-absolute top-0 start-0 m-3">
                                {% if salon.is_partner_plus %}
                                    <span class="badge bg-secondary text-white rounded-pill px-3 py-2 fw-bold shadow-sm">
                                        <i class="fas fa-crown me-1"></i> Partenaire Plus
                                    </span>
                                {% else %}
                                    <span class="badge bg-primary text-white rounded-pill px-3 py-2 fw-bold shadow-sm">
                                        <i class="fas fa-check-circle me-1"></i> Certifié
                                    </span>
                                {% endif %}
                            </div>
                            <!-- Bouton Favori -->
                            <div class="position-absolute top-0 end-0 m-3" style="z-index: 5;">
                                {% if current_user.is_authenticated %}
                                    <button type="button" 
                                            class="btn btn-light rounded-circle p-0 shadow-sm d-flex align-items-center justify-content-center favorite-toggle-btn border-0" 
                                            data-salon-id="{{ salon.id }}" 
                                            style="width: 36px; height: 36px; background: rgba(255,255,255,0.92); backdrop-filter: blur(4px);" 
                                            title="{{ 'Retirer des favoris' if salon.id in user_fav_ids else 'Ajouter aux favoris' }}">
                                        <i class="{{ 'fas' if salon.id in user_fav_ids else 'far' }} fa-heart {{ 'text-danger' if salon.id in user_fav_ids else 'text-muted' }}" style="font-size: 15px;"></i>
                                    </button>
                                {% else %}
                                    <a href="{{ url_for('auth_web.login', next=request.path) }}" 
                                       class="btn btn-light rounded-circle p-0 shadow-sm d-flex align-items-center justify-content-center border-0" 
                                       style="width: 36px; height: 36px; background: rgba(255,255,255,0.92); backdrop-filter: blur(4px);" 
                                       title="Connectez-vous pour ajouter aux favoris">
                                        <i class="far fa-heart text-muted" style="font-size: 15px;"></i>
                                    </a>
                                {% endif %}
                            </div>
                            <div class="position-absolute bottom-0 end-0 m-3 bg-white px-2 py-1 rounded-3 shadow-sm d-flex align-items-center gap-1">
                                <i class="fas fa-star text-warning small"></i>
                                <span class="fw-bold text-dark small">{{ salon.average_rating }}</span>
                                <span class="text-muted text-xs">({{ salon.approved_reviews_count }})</span>
                            </div>
                        </div>

                        <div class="p-4 d-flex flex-column flex-grow-1">
                            <h4 class="font-playfair mb-1">{{ salon.name }}</h4>
                            <p class="text-muted small mb-2"><i class="fas fa-map-marker-alt text-primary me-1"></i>{{ salon.address }}, {{ salon.city.name if salon.city else '' }}</p>
                            
                            <p class="text-secondary-dark small mb-3 flex-grow-1" style="line-height: 1.6; color: #475569;">
                                {{ salon.description[:110] }}{% if salon.description|length > 110 %}...{% endif %}
                            </p>

                            <!-- Specialties Badges -->
                            <div class="d-flex flex-wrap gap-1 mb-4">
                                {% for cat in salon.specialties[:3] %}
                                    <span class="badge bg-light text-dark border small">{{ cat.name }}</span>
                                {% endfor %}
                            </div>

                            <div class="pt-3 border-top d-flex justify-content-between align-items-center mt-auto">
                                <div>
                                    <span class="text-muted d-block text-xs">Rendez-vous</span>
                                    <span class="text-success fw-bold small"><i class="fas fa-calendar-check me-1"></i>Disponible</span>
                                </div>
                                <a href="{{ url_for('salon_web.detail', slug=salon.slug) }}" class="btn btn-primary rounded-pill btn-sm px-4">
                                    Voir le Salon
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>

        <div class="text-center mt-5">
            <a href="{{ url_for('salon_web.list_salons') }}" class="btn btn-outline-primary rounded-pill py-3 px-5 fw-bold">
                <i class="fas fa-list me-2"></i> Voir Tous les Salons ({{ all_salons|length if all_salons else 'Disponibles' }})
            </a>
        </div>
    </div>
</div>
<!-- Featured Salons End -->

<!-- Interactive Map Section Start -->
<div class="container-fluid py-5" id="carte-salons">
    <div class="container py-5">
        <div class="section-title mb-5 wow fadeInUp" data-wow-delay="0.1s">
            <div class="sub-style">
                <h4 class="sub-title px-3 mb-0">Géolocalisation</h4>
            </div>
            <h1 class="display-4 mb-4 font-playfair">Trouvez un Salon Proche de Chez Vous</h1>
            <p class="mb-0 text-muted fs-6" style="max-width: 750px; margin: 0 auto;">
                Consultez la carte interactive de nos salons partenaires à Lausanne, Genève, Sion, Paris et Lyon pour réserver dans votre quartier.
            </p>
        </div>

        <div class="map-frame bg-white p-3 border shadow-sm">
            <div id="map" style="height: 520px; width: 100%; border-radius: 14px;"></div>
        </div>
    </div>
</div>
<!-- Interactive Map Section End -->

<!-- Features & Counters Start -->
<div class="container-fluid feature py-5 bg-white">
    <div class="container py-5">
        <div class="section-title mb-5 wow fadeInUp" data-wow-delay="0.1s">
            <div class="sub-style">
                <h4 class="sub-title px-3 mb-0">Pourquoi Choisir AfroCoiff'</h4>
            </div>
            <h1 class="display-4 mb-4 font-playfair">La Plateforme Conçue Pour Vos Exigences</h1>
        </div>

        <div class="row g-4 text-center">
            <div class="col-md-6 col-lg-3 wow fadeInUp" data-wow-delay="0.1s">
                <div class="p-4 rounded-4 bg-light h-100 border">
                    <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center mx-auto mb-4 shadow" style="width: 70px; height: 70px;">
                        <i class="fas fa-shield-alt fs-3"></i>
                    </div>
                    <h4 class="font-playfair mb-3">Salons Certifiés</h4>
                    <p class="text-muted small mb-0">Tous les salons sont vérifiés pour garantir des normes élevées d'hygiène, d'écoute et de professionnalisme.</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-3 wow fadeInUp" data-wow-delay="0.2s">
                <div class="p-4 rounded-4 bg-light h-100 border">
                    <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center mx-auto mb-4 shadow" style="width: 70px; height: 70px;">
                        <i class="fas fa-gift fs-3"></i>
                    </div>
                    <h4 class="font-playfair mb-3">Jusqu'à -50% Fidélité</h4>
                    <p class="text-muted small mb-0">Chaque dépense vous crédite des points convertibles en remises substantielles sur vos prochaines coiffures.</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-3 wow fadeInUp" data-wow-delay="0.3s">
                <div class="p-4 rounded-4 bg-light h-100 border">
                    <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center mx-auto mb-4 shadow" style="width: 70px; height: 70px;">
                        <i class="fas fa-clock fs-3"></i>
                    </div>
                    <h4 class="font-playfair mb-3">Réservation 24h/24</h4>
                    <p class="text-muted small mb-0">Réservez en quelques clics depuis votre mobile ou ordinateur, à toute heure du jour et de la nuit.</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-3 wow fadeInUp" data-wow-delay="0.4s">
                <div class="p-4 rounded-4 bg-light h-100 border">
                    <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center mx-auto mb-4 shadow" style="width: 70px; height: 70px;">
                        <i class="fas fa-qrcode fs-3"></i>
                    </div>
                    <h4 class="font-playfair mb-3">Paiement QR & Reçu</h4>
                    <p class="text-muted small mb-0">Paiement en ligne sécurisé ou validation sur place via QR code avec reçu officiel téléchargeable.</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Features & Counters End -->

<!-- Active Promotions Banner Start -->
{% if promotions %}
<div class="container-fluid py-5 bg-light">
    <div class="container py-4">
        <div class="section-title mb-5 wow fadeInUp" data-wow-delay="0.1s">
            <div class="sub-style">
                <h4 class="sub-title px-3 mb-0">Offres Exceptionnelles</h4>
            </div>
            <h1 class="display-4 mb-3 font-playfair">Codes Promotions Du Moment</h1>
        </div>

        <div class="row g-4 justify-content-center">
            {% for promo in promotions[:3] %}
                <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.{{ loop.index }}s">
                    <div class="bg-white p-4 rounded-4 border shadow-sm h-100 d-flex flex-column justify-content-between">
                        <div>
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <span class="badge bg-secondary text-white px-3 py-1 rounded-pill fw-bold">-{{ promo.discount_percent }}%</span>
                                <small class="text-muted"><i class="far fa-clock me-1"></i>Valable jusqu'au {{ promo.end_date.strftime('%d/%m/%Y') }}</small>
                            </div>
                            <h5 class="font-playfair mb-2">{{ promo.salon.name }}</h5>
                            <p class="text-muted small mb-3">{{ promo.description }}</p>
                        </div>
                        <div class="p-3 bg-light rounded-3 d-flex justify-content-between align-items-center border">
                            <span class="font-monospace fw-bold text-primary">{{ promo.code }}</span>
                            <a href="{{ url_for('salon_web.detail', slug=promo.salon.slug) }}" class="btn btn-primary btn-sm rounded-pill px-3">Profiter</a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}
<!-- Active Promotions Banner End -->

<!-- Call to Action Gérants Start -->
<div class="container-fluid py-5" style="background: linear-gradient(135deg, #0D7C66 0%, #064E3B 100%);">
    <div class="container py-4 text-center text-white">
        <div class="row justify-content-center">
            <div class="col-lg-9">
                <span class="badge bg-secondary text-white rounded-pill px-4 py-2 text-uppercase mb-3 fw-bold" style="letter-spacing: 1px;">Vous Êtes Coiffeur ou Gérant de Salon ?</span>
                <h2 class="display-4 font-playfair text-white mb-4">Rejoignez le Réseau AfroCoiff' et Développez Votre Clientèle</h2>
                <p class="fs-6 text-light mb-5" style="line-height: 1.8; opacity: 0.9;">
                    Bénéficiez d'une visibilité ciblée, d'un outil de réservation automatisé, de relevés comptables complets en PDF et d'un programme de fidélisation innovant pour fidéliser vos clients.
                </p>
                <div class="d-flex justify-content-center gap-3 flex-wrap">
                    <a href="{{ url_for('auth_web.register') }}" class="btn btn-secondary rounded-pill text-white py-3 px-5 fw-bold shadow">
                        <i class="fas fa-store me-2"></i> Inscrire Mon Salon Gratuitement
                    </a>
                    <a href="{{ url_for('salon_web.manage') }}" class="btn btn-outline-light rounded-pill py-3 px-4">
                        En savoir plus sur l'espace Partenaire
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Call to Action Gérants End -->

{% endblock %}

{% block scripts %}
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Initialiser la carte Leaflet
        const salons = {{ salons_json | tojson | safe }};
        const mapContainer = document.getElementById('map');
        
        if (mapContainer && typeof L !== 'undefined') {
            const defaultLat = salons.length > 0 && salons[0].latitude ? salons[0].latitude : 46.5197;
            const defaultLng = salons.length > 0 && salons[0].longitude ? salons[0].longitude : 6.6323;

            const map = L.map('map', { scrollWheelZoom: false }).setView([defaultLat, defaultLng], 11);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; OpenStreetMap contributors'
            }).addTo(map);

            const greenIcon = L.divIcon({
                className: 'custom-map-marker',
                html: '<div style="background-color: #0D7C66; color: white; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.3); border: 2px solid white;"><i class="fas fa-scissors" style="font-size: 14px;"></i></div>',
                iconSize: [34, 34],
                iconAnchor: [17, 34],
                popupAnchor: [0, -34]
            });

            const bounds = [];
            salons.forEach(salon => {
                if (salon.latitude && salon.longitude) {
                    bounds.push([salon.latitude, salon.longitude]);
                    const popupContent = `
                        <div style="font-family: 'Open Sans', sans-serif; min-width: 200px; padding: 5px;">
                            <h6 style="font-family: 'Playfair Display', serif; font-weight: bold; margin-bottom: 4px; color: #0D7C66;">${salon.name}</h6>
                            <p style="font-size: 12px; color: #64748B; margin-bottom: 6px;"><i class="fas fa-map-marker-alt me-1 text-primary"></i>${salon.address}</p>
                            <a href="/salons/${salon.slug}" style="display: inline-block; background-color: #0D7C66; color: white; text-decoration: none; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: bold;">Voir le salon</a>
                        </div>
                    `;
                    L.marker([salon.latitude, salon.longitude], { icon: greenIcon })
                        .addTo(map)
                        .bindPopup(popupContent);
                }
            });

            if (bounds.length > 1) {
                map.fitBounds(bounds, { padding: [40, 40] });
            }
        }
    });
</script>
{% endblock %}