{% extends 'base.html.twig' %}

{% set page_title = page_title|default('Cours particuliers 2026 · Listing profs premium') %}
{% set meta_description = meta_description|default('Page listing des professeurs RueduProf en Twig + Bootstrap, pensée pour convertir mieux sur desktop et mobile.') %}
{% set site_name = site_name|default('RueduProf') %}
{% set nav_items = nav_items|default([
    {'label': 'Trouver un prof', 'href': '#listing-search'},
    {'label': 'Matières', 'href': '#itemlist'},
    {'label': 'Avis', 'href': '#why-rueduprof'},
    {'label': 'Devenir prof', 'href': '#become-teacher'}
]) %}

{% set listing = listing|default({
    'subject': 'Maths',
    'city': 'Paris',
    'count': 248,
    'avg_rating': 4.8,
    'response_rate': 97,
    'online_share': 64,
    'sort': 'Les mieux notés',
    'active_filters': ['Lycée', 'En ligne', 'Réponse rapide'],
    'teachers': [
        {
            'first_name': 'Sarah',
            'last_name': 'Martin',
            'headline': 'Professeure de maths · Collège, lycée et supérieur',
            'city': 'Paris 15e',
            'price_from': 29,
            'rating': 4.9,
            'reviews_count': 128,
            'students_count': 312,
            'response_time': 'répond en moins de 2h',
            'experience_years': 9,
            'verified': true,
            'featured': true,
            'availability': 'Disponible cette semaine',
            'bio': 'Approche structurée, rassurante et très efficace pour reprendre confiance et progresser durablement.',
            'avatar': null,
            'teaches': ['Maths', 'Physique'],
            'levels': ['Collège', 'Lycée', 'Supérieur'],
            'modes': ['En ligne', 'À domicile'],
            'badges': ['Top prof', 'Très demandé'],
            'highlights': ['Plan de progression clair', 'Compte-rendu après chaque séance', 'Prépa brevet et bac'],
        },
        {
            'first_name': 'Yanis',
            'last_name': 'Belaid',
            'headline': 'Ingénieur data · Cours de maths et stats',
            'city': 'Boulogne-Billancourt',
            'price_from': 32,
            'rating': 4.8,
            'reviews_count': 84,
            'students_count': 190,
            'response_time': 'répond dans la journée',
            'experience_years': 6,
            'verified': true,
            'featured': false,
            'availability': 'Créneaux le soir',
            'bio': 'Idéal pour lycée, supérieur et remise à niveau méthodologique, avec exercices progressifs.',
            'avatar': null,
            'teaches': ['Maths', 'Statistiques'],
            'levels': ['Lycée', 'Prépa', 'Supérieur'],
            'modes': ['En ligne', 'Chez le professeur'],
            'badges': ['Excellents avis'],
            'highlights': ['Pédagogie visuelle', 'Supports PDF inclus', 'Très bon pour Parcoursup'],
        },
        {
            'first_name': 'Clara',
            'last_name': 'Roche',
            'headline': 'Professeure certifiée · Spécialiste collège et seconde',
            'city': 'Lyon 6e',
            'price_from': 26,
            'rating': 4.9,
            'reviews_count': 66,
            'students_count': 204,
            'response_time': 'répond en moins de 4h',
            'experience_years': 11,
            'verified': true,
            'featured': false,
            'availability': 'Week-end possible',
            'bio': 'Très forte sur les bases, la méthodologie et la motivation des élèves qui décrochent.',
            'avatar': null,
            'teaches': ['Maths', 'Aide aux devoirs'],
            'levels': ['Primaire', 'Collège', 'Seconde'],
            'modes': ['À domicile', 'En ligne'],
            'badges': ['Profil rassurant'],
            'highlights': ['Suivi parents', 'Méthode pas à pas', 'Exercices adaptés'],
        },
        {
            'first_name': 'Nicolas',
            'last_name': 'Fournier',
            'headline': 'Agrégé de mathématiques · Prépa, licence, concours',
            'city': 'Bordeaux Centre',
            'price_from': 45,
            'rating': 5.0,
            'reviews_count': 41,
            'students_count': 97,
            'response_time': 'répond en moins de 3h',
            'experience_years': 13,
            'verified': true,
            'featured': false,
            'availability': 'Quelques places restantes',
            'bio': 'Positionnement premium pour objectifs ambitieux : concours, classes préparatoires et supérieur.',
            'avatar': null,
            'teaches': ['Maths', 'Analyse', 'Algèbre'],
            'levels': ['Prépa', 'Supérieur'],
            'modes': ['En ligne'],
            'badges': ['Expert concours'],
            'highlights': ['Prépa intensive', 'Copies corrigées', 'Visio haut de gamme'],
        },
        {
            'first_name': 'Leïla',
            'last_name': 'Haddad',
            'headline': 'Étudiante ENS · Coaching maths lycée et bac',
            'city': 'Toulouse',
            'price_from': 24,
            'rating': 4.7,
            'reviews_count': 53,
            'students_count': 146,
            'response_time': 'répond dans la journée',
            'experience_years': 4,
            'verified': true,
            'featured': false,
            'availability': 'Disponible en visio',
            'bio': 'Super bon fit pour élèves de première et terminale qui veulent reprendre rythme et méthode.',
            'avatar': null,
            'teaches': ['Maths'],
            'levels': ['Première', 'Terminale'],
            'modes': ['En ligne', 'À domicile'],
            'badges': ['Bon rapport qualité-prix'],
            'highlights': ['Fiches méthode', 'Préparation bac', 'Ton dynamique'],
        },
        {
            'first_name': 'Thomas',
            'last_name': 'Nguyen',
            'headline': 'Prof de maths en ligne · Remise à niveau adultes et étudiants',
            'city': 'Lille',
            'price_from': 28,
            'rating': 4.8,
            'reviews_count': 37,
            'students_count': 102,
            'response_time': 'répond en moins de 6h',
            'experience_years': 7,
            'verified': true,
            'featured': false,
            'availability': 'Matin et pause déjeuner',
            'bio': 'Format très flexible, parfait pour études supérieures, reconversion et besoins ciblés.',
            'avatar': null,
            'teaches': ['Maths', 'Statistiques', 'Excel'],
            'levels': ['Terminale', 'Supérieur', 'Adultes'],
            'modes': ['En ligne'],
            'badges': ['Flexible'],
            'highlights': ['Créneaux rapides', 'Replay possible', 'Objectifs concrets'],
        }
    ]
}) %}

{% block body %}
<section class="listing-hero-section pt-4 pt-lg-5 pb-4 pb-lg-5" id="listing-search">
    <div class="container-xxl position-relative">
        <nav aria-label="breadcrumb" class="mb-3">
            <ol class="breadcrumb small mb-0">
                <li class="breadcrumb-item"><a href="#">Accueil</a></li>
                <li class="breadcrumb-item"><a href="#">Cours particuliers</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ listing.subject }} à {{ listing.city }}</li>
            </ol>
        </nav>

        <div class="listing-hero-shell p-3 p-md-4 p-xl-5">
            <div class="row g-4 align-items-end">
                <div class="col-xl-7">
                    <div class="d-flex flex-wrap gap-2 mb-3">
                        <span class="badge rounded-pill text-bg-light px-3 py-2 fw-semibold badge-soft">Thème listing 2026</span>
                        <span class="badge rounded-pill px-3 py-2 badge-verified"><i class="bi bi-stars me-1"></i>Conversion mobile + desktop</span>
                    </div>
                    <h1 class="display-4 fw-bold text-white mb-3">Trouvez le bon prof de {{ listing.subject }} plus vite.</h1>
                    <p class="listing-hero-copy mb-4">Une page listing pensée comme un vrai produit marketplace 2026 : filtres visibles, résultats plus crédibles, hiérarchie plus premium et CTA plus nets sur mobile comme sur desktop.</p>

                    <div class="row g-3 listing-kpis">
                        <div class="col-6 col-md-3">
                            <div class="stat-card h-100 stat-card-dark">
                                <div class="stat-value">{{ listing.count }}</div>
                                <div class="stat-label">profs visibles</div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="stat-card h-100 stat-card-dark">
                                <div class="stat-value">{{ listing.avg_rating }}/5</div>
                                <div class="stat-label">note moyenne</div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="stat-card h-100 stat-card-dark">
                                <div class="stat-value">{{ listing.response_rate }}%</div>
                                <div class="stat-label">réponse rapide</div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="stat-card h-100 stat-card-dark">
                                <div class="stat-value">{{ listing.online_share }}%</div>
                                <div class="stat-label">cours en ligne</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-5">
                    <div class="search-glass-card p-3 p-md-4">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Matière</label>
                                <select class="form-select form-select-lg rounded-4">
                                    <option>{{ listing.subject }}</option>
                                    <option>Physique</option>
                                    <option>Français</option>
                                    <option>Anglais</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Ville</label>
                                <input type="text" class="form-control form-control-lg rounded-4" value="{{ listing.city }}" placeholder="Ville ou code postal">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Niveau</label>
                                <select class="form-select form-select-lg rounded-4">
                                    <option>Lycée</option>
                                    <option>Collège</option>
                                    <option>Supérieur</option>
                                    <option>Adultes</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Lieu du cours</label>
                                <select class="form-select form-select-lg rounded-4">
                                    <option>En ligne</option>
                                    <option>À domicile</option>
                                    <option>Chez le professeur</option>
                                </select>
                            </div>
                            <div class="col-12 d-grid d-md-flex gap-3">
                                <button class="btn btn-primary btn-lg btn-pill flex-grow-1" type="button"><i class="bi bi-search me-2"></i>Rechercher</button>
                                <button class="btn btn-light btn-lg btn-pill listing-secondary-btn d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobileFilters"><i class="bi bi-sliders me-2"></i>Filtres</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="pb-4 pb-lg-5" id="itemlist">
    <div class="container-xxl">
        <div class="row g-4 g-xl-5 align-items-start">
            <div class="col-xl-3 d-none d-xl-block">
                <aside class="filter-sidebar sticky-lg-top">
                    <div class="content-panel mb-4">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h2 class="h5 mb-0">Filtres</h2>
                            <a href="#" class="small text-decoration-none">Réinitialiser</a>
                        </div>

                        <div class="filter-group">
                            <div class="filter-label">Format</div>
                            <div class="vstack gap-2">
                                <label class="filter-check"><input class="form-check-input" type="checkbox" checked> En ligne</label>
                                <label class="filter-check"><input class="form-check-input" type="checkbox"> À domicile</label>
                                <label class="filter-check"><input class="form-check-input" type="checkbox"> Chez le prof</label>
                            </div>
                        </div>

                        <div class="filter-group">
                            <div class="filter-label">Niveau</div>
                            <div class="vstack gap-2">
                                <label class="filter-check"><input class="form-check-input" type="checkbox"> Primaire</label>
                                <label class="filter-check"><input class="form-check-input" type="checkbox"> Collège</label>
                                <label class="filter-check"><input class="form-check-input" type="checkbox" checked> Lycée</label>
                                <label class="filter-check"><input class="form-check-input" type="checkbox"> Supérieur</label>
                            </div>
                        </div>

                        <div class="filter-group">
                            <div class="filter-label">Budget</div>
                            <input type="range" class="form-range" min="15" max="80" value="45">
                            <div class="d-flex justify-content-between small text-secondary">
                                <span>15€</span>
                                <span>45€ / h</span>
                                <span>80€</span>
                            </div>
                        </div>

                        <div class="filter-group mb-0">
                            <div class="filter-label">Confiance</div>
                            <div class="vstack gap-2">
                                <label class="filter-check"><input class="form-check-input" type="checkbox" checked> Profils vérifiés</label>
                                <label class="filter-check"><input class="form-check-input" type="checkbox" checked> Réponse rapide</label>
                                <label class="filter-check"><input class="form-check-input" type="checkbox"> Très bien notés</label>
                            </div>
                        </div>
                    </div>

                    <div class="mini-panel listing-side-panel">
                        <div class="section-eyebrow">Pourquoi ça convertit mieux</div>
                        <h3 class="h5 mb-3">Le bon niveau d'information avant le clic</h3>
                        <ul class="mini-list mb-0">
                            <li>cards plus premium et plus lisibles</li>
                            <li>prix, avis et disponibilité visibles immédiatement</li>
                            <li>filtres plus clairs et adaptés au mobile</li>
                        </ul>
                    </div>
                </aside>
            </div>

            <div class="col-xl-9">
                <div class="results-toolbar mb-4">
                    <div>
                        <div class="section-eyebrow mb-2">Résultats</div>
                        <h2 class="h3 mb-2">{{ listing.count }} profs de {{ listing.subject }} disponibles</h2>
                        <p class="text-secondary mb-0">Résultats triés pour rassurer vite : qualité du profil, avis, disponibilité et clarté de l'offre.</p>
                    </div>
                    <div class="toolbar-actions">
                        <button class="btn btn-light btn-pill d-xl-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobileFilters"><i class="bi bi-sliders me-2"></i>Filtres</button>
                        <select class="form-select rounded-pill toolbar-select">
                            <option>{{ listing.sort }}</option>
                            <option>Les plus proches</option>
                            <option>Prix croissant</option>
                            <option>Réponse la plus rapide</option>
                        </select>
                    </div>
                </div>

                <div class="d-flex flex-wrap gap-2 mb-4">
                    {% for chip in listing.active_filters %}
                        <span class="active-filter-chip">{{ chip }} <i class="bi bi-x-lg"></i></span>
                    {% endfor %}
                    <span class="active-filter-chip active-filter-chip-light">Profils vérifiés <i class="bi bi-patch-check-fill"></i></span>
                </div>

                <div class="row g-4">
                    {% for teacher in listing.teachers %}
                        <div class="col-12 col-xxl-6">
                            <article class="teacher-list-card h-100 {% if teacher.featured %}teacher-list-card-featured{% endif %}">
                                <div class="teacher-list-top d-flex gap-3 gap-md-4 align-items-start">
                                    <div class="teacher-card-avatar-wrap">
                                        {% if teacher.avatar %}
                                            <img src="{{ teacher.avatar }}" alt="{{ teacher.first_name }} {{ teacher.last_name }}" class="teacher-card-avatar">
                                        {% else %}
                                            <div class="teacher-card-avatar teacher-avatar-fallback">{{ teacher.first_name|slice(0,1) }}{{ teacher.last_name|slice(0,1) }}</div>
                                        {% endif %}
                                    </div>

                                    <div class="flex-grow-1 min-w-0">
                                        <div class="d-flex flex-wrap gap-2 mb-2">
                                            {% for badge in teacher.badges %}
                                                <span class="badge text-bg-light border rounded-pill px-3 py-2 fw-semibold badge-soft">{{ badge }}</span>
                                            {% endfor %}
                                            {% if teacher.verified %}
                                                <span class="badge rounded-pill badge-verified px-3 py-2"><i class="bi bi-patch-check-fill me-1"></i>Vérifié</span>
                                            {% endif %}
                                        </div>

                                        <div class="d-flex flex-wrap align-items-start justify-content-between gap-3 mb-2">
                                            <div>
                                                <h3 class="h4 mb-1">{{ teacher.first_name }} {{ teacher.last_name }}</h3>
                                                <p class="text-secondary mb-0">{{ teacher.headline }}</p>
                                            </div>
                                            <div class="teacher-price-box text-md-end">
                                                <div class="teacher-price">{{ teacher.price_from }}€<span>/h</span></div>
                                                <div class="small text-secondary">à partir de</div>
                                            </div>
                                        </div>

                                        <div class="d-flex flex-wrap gap-3 meta-inline meta-inline-list mb-3">
                                            <span><i class="bi bi-geo-alt"></i>{{ teacher.city }}</span>
                                            <span><i class="bi bi-star-fill"></i>{{ teacher.rating }}/5 · {{ teacher.reviews_count }} avis</span>
                                            <span><i class="bi bi-lightning-charge"></i>{{ teacher.response_time }}</span>
                                        </div>
                                    </div>
                                </div>

                                <p class="teacher-card-copy mb-3">{{ teacher.bio }}</p>

                                <div class="d-flex flex-wrap gap-2 mb-3">
                                    {% for subject in teacher.teaches %}
                                        <span class="subject-pill subject-pill-muted">{{ subject }}</span>
                                    {% endfor %}
                                </div>

                                <div class="row g-3 mb-4">
                                    <div class="col-sm-6">
                                        <div class="teacher-mini-box h-100">
                                            <div class="info-label">Niveaux</div>
                                            <p class="mb-0">{{ teacher.levels|join(' · ') }}</p>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="teacher-mini-box h-100">
                                            <div class="info-label">Formats</div>
                                            <p class="mb-0">{{ teacher.modes|join(' · ') }}</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="teacher-proof-row mb-4">
                                    {% for point in teacher.highlights %}
                                        <div class="teacher-proof-item"><i class="bi bi-check2-circle"></i>{{ point }}</div>
                                    {% endfor %}
                                </div>

                                <div class="teacher-card-footer d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
                                    <div>
                                        <div class="availability-pill"><i class="bi bi-calendar2-check me-2"></i>{{ teacher.availability }}</div>
                                        <div class="small text-secondary mt-2">{{ teacher.students_count }} élèves accompagnés · {{ teacher.experience_years }} ans d'expérience</div>
                                    </div>
                                    <div class="d-grid d-sm-flex gap-2">
                                        <a href="#" class="btn btn-outline-dark btn-pill px-4">Voir le profil</a>
                                        <a href="#" class="btn btn-primary btn-pill px-4">Contacter</a>
                                    </div>
                                </div>
                            </article>
                        </div>
                    {% endfor %}
                </div>

                <div class="content-panel mt-4 mt-lg-5" id="why-rueduprof">
                    <div class="row g-4 align-items-center">
                        <div class="col-lg-7">
                            <div class="section-eyebrow">Bloc éditorial</div>
                            <h2 class="section-title mb-3">Une zone de réassurance utile pour le SEO et la conversion</h2>
                            <p class="mb-0 text-secondary">Sur desktop, ce bloc sert à enrichir la page catégorie avec du contenu éditorial propre. Sur mobile, il garde du rythme après les cartes profs et évite une page qui se résume à une simple liste brute.</p>
                        </div>
                        <div class="col-lg-5">
                            <div class="teacher-mini-box h-100 listing-trust-box">
                                <div class="d-flex align-items-center gap-3 mb-3">
                                    <div class="feature-icon mb-0"><i class="bi bi-shield-check"></i></div>
                                    <div>
                                        <div class="fw-bold">UI pensée marketplace</div>
                                        <div class="text-secondary small">Lisibilité, preuve sociale, filtres et CTA</div>
                                    </div>
                                </div>
                                <div class="d-flex flex-column gap-2 small text-secondary">
                                    <div>• parfait pour Symfony + Twig + Bootstrap</div>
                                    <div>• facile à brancher sur vos vraies données</div>
                                    <div>• cohérent avec la fiche prof déjà créée</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <nav class="mt-4 mt-lg-5" aria-label="Pagination des professeurs">
                    <ul class="pagination pagination-modern mb-0">
                        <li class="page-item disabled"><span class="page-link">Précédent</span></li>
                        <li class="page-item active"><span class="page-link">1</span></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">Suivant</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</section>

<div class="offcanvas offcanvas-end" tabindex="-1" id="mobileFilters" aria-labelledby="mobileFiltersLabel">
    <div class="offcanvas-header border-bottom">
        <h5 class="offcanvas-title fw-bold" id="mobileFiltersLabel">Filtres</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
    </div>
    <div class="offcanvas-body">
        <div class="filter-group">
            <div class="filter-label">Format</div>
            <div class="vstack gap-2">
                <label class="filter-check"><input class="form-check-input" type="checkbox" checked> En ligne</label>
                <label class="filter-check"><input class="form-check-input" type="checkbox"> À domicile</label>
                <label class="filter-check"><input class="form-check-input" type="checkbox"> Chez le prof</label>
            </div>
        </div>
        <div class="filter-group">
            <div class="filter-label">Niveau</div>
            <div class="vstack gap-2">
                <label class="filter-check"><input class="form-check-input" type="checkbox"> Collège</label>
                <label class="filter-check"><input class="form-check-input" type="checkbox" checked> Lycée</label>
                <label class="filter-check"><input class="form-check-input" type="checkbox"> Supérieur</label>
            </div>
        </div>
        <div class="filter-group mb-4">
            <div class="filter-label">Confiance</div>
            <div class="vstack gap-2">
                <label class="filter-check"><input class="form-check-input" type="checkbox" checked> Profils vérifiés</label>
                <label class="filter-check"><input class="form-check-input" type="checkbox" checked> Réponse rapide</label>
            </div>
        </div>
        <div class="d-grid gap-2 mt-4">
            <button type="button" class="btn btn-primary btn-lg btn-pill">Appliquer les filtres</button>
            <button type="button" class="btn btn-light btn-lg btn-pill">Réinitialiser</button>
        </div>
    </div>
</div>

<div class="mobile-listing-bar d-xl-none">
    <button class="btn btn-light btn-pill" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobileFilters"><i class="bi bi-sliders me-2"></i>Filtres</button>
    <button class="btn btn-primary btn-pill" type="button"><i class="bi bi-lightning-charge me-2"></i>{{ listing.count }} résultats</button>
</div>
{% endblock %}