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

{% set teacher = teacher|default({
    '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,
    'bio': 'Je propose un accompagnement structuré, rassurant et très concret. Mon approche combine remise à niveau, méthodologie et préparation aux examens, avec un suivi clair pour les parents et des objectifs simples à mesurer.',
    'long_bio': 'Diplômée d\'école d\'ingénieur et ancienne chargée de TD, j\'accompagne des élèves de tous niveaux depuis plusieurs années. J\'interviens autant pour consolider les bases que pour viser l\'excellence, en adaptant les supports au profil de chaque élève.',
    'avatar': null,
    'teaches': ['Maths', 'Physique', 'Aide aux devoirs'],
    'levels': ['Collège', 'Lycée', 'Prépa', 'Supérieur'],
    'modes': ['En ligne', 'À domicile', 'Chez le professeur'],
    'zones': ['Paris 15e', 'Paris 14e', 'Issy-les-Moulineaux'],
    'languages': ['Français', 'English'],
    'badges': ['Top prof', 'Pédagogie premium', 'Très demandé'],
    'highlights': [
        {'icon': 'bi-graph-up-arrow', 'title': 'Progression visible', 'text': 'Objectifs clairs, mini-bilans réguliers et feuille de route simple à suivre.'},
        {'icon': 'bi-camera-video', 'title': 'Cours hybrides', 'text': 'Même qualité de suivi en visio et à domicile, avec ressources partagées.'},
        {'icon': 'bi-shield-check', 'title': 'Profil rassurant', 'text': 'Identité vérifiée, avis détaillés et expérience confirmée.'}
    ],
    'pricing': [
        {'label': 'Cours découverte', 'price': '29€', 'note': '30 min en visio pour définir le niveau et le plan de travail.'},
        {'label': 'Cours standard', 'price': '44€ / h', 'note': 'Séance personnalisée avec exercices ciblés et compte-rendu.'},
        {'label': 'Pack examen', 'price': '199€', 'note': '5h + fiches méthode + plan de révision sur 2 semaines.'}
    ],
    'availability': [
        {'day': 'Lundi', 'slots': ['17:00', '18:00', '19:00']},
        {'day': 'Mardi', 'slots': ['18:00', '19:00']},
        {'day': 'Mercredi', 'slots': ['14:00', '15:00', '17:00']},
        {'day': 'Jeudi', 'slots': ['17:00', '18:00']},
        {'day': 'Vendredi', 'slots': ['17:00']},
        {'day': 'Samedi', 'slots': ['10:00', '11:00']}
    ],
    'reviews': [
        {'author': 'Camille, maman de Lucas', 'rating': 5, 'text': 'Très rassurante, très organisée. Mon fils a repris confiance en quelques semaines.'},
        {'author': 'Yasmine, Terminale', 'rating': 5, 'text': 'Explications ultra claires, beaucoup de méthode. J\'ai gagné 4 points de moyenne.'},
        {'author': 'Thomas, L1', 'rating': 4, 'text': 'Approche exigeante mais super efficace. Je recommande pour les bases et les DS.'}
    ],
    'faq': [
        {'q': 'Le premier échange est-il gratuit ?', 'a': 'Oui, un court appel ou une visio de cadrage permet de vérifier le niveau, les attentes et le bon feeling.'},
        {'q': 'Travaillez-vous en ligne ?', 'a': 'Oui, avec tableau numérique, partage d\'écran, supports PDF et devoirs envoyés après la séance.'},
        {'q': 'Faites-vous du suivi intensif avant examens ?', 'a': 'Oui, je propose des formats intensifs sur 1 à 3 semaines avec planning et entraînements ciblés.'}
    ]
}) %}

{% block title %}{{ teacher.first_name }} {{ teacher.last_name }} · Fiche prof{% endblock %}
{% block meta_description %}Découvrez le profil de {{ teacher.first_name }} {{ teacher.last_name }}, {{ teacher.headline|lower }}, à partir de {{ teacher.price_from }}€.{% endblock %}

{% block body %}
<section class="prof-hero-section overflow-hidden">
    <div class="container-xxl py-4 py-lg-5">
        <nav aria-label="breadcrumb" class="mb-4">
            <ol class="breadcrumb small mb-0">
                <li class="breadcrumb-item"><a href="#" class="text-decoration-none">Accueil</a></li>
                <li class="breadcrumb-item"><a href="#" class="text-decoration-none">Profs de maths</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ teacher.first_name }} {{ teacher.last_name }}</li>
            </ol>
        </nav>

        <div class="row g-4 g-xl-5 align-items-start">
            <div class="col-lg-8">
                <div class="hero-shell p-3 p-md-4 p-xl-5">
                    <div class="d-flex flex-column flex-md-row gap-4 align-items-start">
                        <div class="teacher-avatar-wrap">
                            {% if teacher.avatar %}
                                <img src="{{ teacher.avatar }}" class="teacher-avatar" alt="{{ teacher.first_name }} {{ teacher.last_name }}">
                            {% else %}
                                <div class="teacher-avatar teacher-avatar-fallback">
                                    <span>{{ teacher.first_name|slice(0,1) }}{{ teacher.last_name|slice(0,1) }}</span>
                                </div>
                            {% endif %}
                        </div>

                        <div class="flex-grow-1">
                            <div class="d-flex flex-wrap gap-2 mb-3">
                                {% 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>Profil vérifié</span>
                                {% endif %}
                            </div>

                            <h1 class="display-5 fw-bold mb-2">{{ teacher.first_name }} {{ teacher.last_name }}</h1>
                            <p class="hero-headline fs-4 mb-3">{{ teacher.headline }}</p>

                            <div class="d-flex flex-wrap gap-3 meta-inline mb-4">
                                <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-people"></i>{{ teacher.students_count }} élèves accompagnés</span>
                                <span><i class="bi bi-lightning-charge"></i>{{ teacher.response_time }}</span>
                            </div>

                            <p class="lead text-secondary-emphasis mb-4">{{ teacher.bio }}</p>

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

                            <div class="row g-3 stats-row">
                                <div class="col-6 col-md-3">
                                    <div class="stat-card h-100">
                                        <div class="stat-value">{{ teacher.price_from }}€</div>
                                        <div class="stat-label">à partir de</div>
                                    </div>
                                </div>
                                <div class="col-6 col-md-3">
                                    <div class="stat-card h-100">
                                        <div class="stat-value">{{ teacher.experience_years }} ans</div>
                                        <div class="stat-label">d'expérience</div>
                                    </div>
                                </div>
                                <div class="col-6 col-md-3">
                                    <div class="stat-card h-100">
                                        <div class="stat-value">{{ teacher.levels|length }}</div>
                                        <div class="stat-label">niveaux couverts</div>
                                    </div>
                                </div>
                                <div class="col-6 col-md-3">
                                    <div class="stat-card h-100">
                                        <div class="stat-value">{{ teacher.modes|length }}</div>
                                        <div class="stat-label">modes de cours</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4" id="reserver">
                <aside class="booking-card sticky-lg-top">
                    <div class="d-flex align-items-center justify-content-between mb-3">
                        <div>
                            <div class="small text-secondary">Tarif indicatif</div>
                            <div class="price-hero">{{ teacher.price_from }}€<span>/h</span></div>
                        </div>
                        <div class="text-end small text-secondary">
                            <div><i class="bi bi-shield-check me-1"></i>Paiement sécurisé</div>
                            <div><i class="bi bi-clock-history me-1"></i>{{ teacher.response_time }}</div>
                        </div>
                    </div>

                    <form class="vstack gap-3">
                        <div>
                            <label class="form-label">Matière</label>
                            <select class="form-select form-select-lg rounded-4">
                                {% for subject in teacher.teaches %}
                                    <option>{{ subject }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div>
                            <label class="form-label">Niveau</label>
                            <select class="form-select form-select-lg rounded-4">
                                {% for level in teacher.levels %}
                                    <option>{{ level }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div>
                            <label class="form-label">Votre besoin</label>
                            <textarea rows="4" class="form-control rounded-4" placeholder="Exemple : remise à niveau en maths pour une élève de seconde, 2 séances par semaine..."></textarea>
                        </div>
                        <button type="button" class="btn btn-primary btn-lg btn-pill w-100">Envoyer une demande</button>
                        <button type="button" class="btn btn-outline-dark btn-lg btn-pill w-100">Réserver un appel découverte</button>
                    </form>

                    <div class="booking-trust mt-4 pt-4 border-top">
                        <div class="trust-item"><i class="bi bi-check2-circle"></i>Réponse rapide et calendrier clair</div>
                        <div class="trust-item"><i class="bi bi-check2-circle"></i>Discussion directe avec le professeur</div>
                        <div class="trust-item"><i class="bi bi-check2-circle"></i>Parfaitement responsive mobile / desktop</div>
                    </div>
                </aside>
            </div>
        </div>
    </div>
</section>

<section class="py-4 py-lg-5">
    <div class="container-xxl">
        <div class="row g-4">
            {% for item in teacher.highlights %}
                <div class="col-md-4">
                    <div class="feature-card h-100">
                        <div class="feature-icon"><i class="bi {{ item.icon }}"></i></div>
                        <h3 class="h5 mb-2">{{ item.title }}</h3>
                        <p class="text-secondary mb-0">{{ item.text }}</p>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</section>

<section class="py-4 py-lg-5" id="cours">
    <div class="container-xxl">
        <div class="row g-4 g-xl-5">
            <div class="col-lg-8">
                <div class="content-panel mb-4">
                    <div class="section-eyebrow">À propos</div>
                    <h2 class="section-title">Une fiche prof qui inspire confiance dès le premier scroll</h2>
                    <p class="mb-3">{{ teacher.long_bio }}</p>
                    <p class="mb-0 text-secondary">Le design met l'accent sur la crédibilité, la lisibilité, les conversions et le mobile-first : CTA visibles, informations scannables, avis rassurants et contenu structuré par sections.</p>
                </div>

                <div class="content-panel mb-4">
                    <div class="section-eyebrow">Informations clés</div>
                    <h2 class="section-title">Matières, niveaux et modalités</h2>
                    <div class="row g-3 mt-1">
                        <div class="col-md-6">
                            <div class="info-box h-100">
                                <div class="info-label">Matières</div>
                                <div class="d-flex flex-wrap gap-2">
                                    {% for subject in teacher.teaches %}
                                        <span class="subject-pill subject-pill-muted">{{ subject }}</span>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-box h-100">
                                <div class="info-label">Niveaux</div>
                                <p class="mb-0">{{ teacher.levels|join(' · ') }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-box h-100">
                                <div class="info-label">Lieu du cours</div>
                                <p class="mb-0">{{ teacher.modes|join(' · ') }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-box h-100">
                                <div class="info-label">Zones desservies</div>
                                <p class="mb-0">{{ teacher.zones|join(' · ') }}</p>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="info-box">
                                <div class="info-label">Langues</div>
                                <p class="mb-0">{{ teacher.languages|join(' · ') }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content-panel mb-4" id="tarifs">
                    <div class="section-eyebrow">Tarifs</div>
                    <h2 class="section-title">Des offres lisibles et premium</h2>
                    <div class="row g-3 mt-1">
                        {% for item in teacher.pricing %}
                            <div class="col-md-4">
                                <div class="pricing-card h-100 {% if loop.first %}pricing-card-featured{% endif %}">
                                    <div class="pricing-name">{{ item.label }}</div>
                                    <div class="pricing-price">{{ item.price }}</div>
                                    <p class="text-secondary mb-0">{{ item.note }}</p>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>

                <div class="content-panel mb-4">
                    <div class="section-eyebrow">Disponibilités</div>
                    <h2 class="section-title">Créneaux visibles rapidement</h2>
                    <div class="availability-grid">
                        {% for slot in teacher.availability %}
                            <div class="availability-card">
                                <div class="availability-day">{{ slot.day }}</div>
                                <div class="d-flex flex-wrap gap-2">
                                    {% for hour in slot.slots %}
                                        <span class="time-pill">{{ hour }}</span>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>

                <div class="content-panel mb-4" id="avis">
                    <div class="section-eyebrow">Avis</div>
                    <h2 class="section-title">Ce que disent les élèves et les parents</h2>
                    <div class="row g-3 mt-1">
                        {% for review in teacher.reviews %}
                            <div class="col-md-6 col-xl-4">
                                <article class="review-card h-100">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <strong>{{ review.author }}</strong>
                                        <span class="review-stars">
                                            {% for i in 1..review.rating %}
                                                <i class="bi bi-star-fill"></i>
                                            {% endfor %}
                                        </span>
                                    </div>
                                    <p class="mb-0 text-secondary">“{{ review.text }}”</p>
                                </article>
                            </div>
                        {% endfor %}
                    </div>
                </div>

                <div class="content-panel" id="faq">
                    <div class="section-eyebrow">FAQ</div>
                    <h2 class="section-title">Questions fréquentes</h2>
                    <div class="accordion accordion-flush faq-accordion mt-3" id="faqAccordion">
                        {% for item in teacher.faq %}
                            <div class="accordion-item">
                                <h3 class="accordion-header">
                                    <button class="accordion-button {% if not loop.first %}collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#faq{{ loop.index }}" aria-expanded="{{ loop.first ? 'true' : 'false' }}" aria-controls="faq{{ loop.index }}">
                                        {{ item.q }}
                                    </button>
                                </h3>
                                <div id="faq{{ loop.index }}" class="accordion-collapse collapse {% if loop.first %}show{% endif %}" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body text-secondary">{{ item.a }}</div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="side-stack">
                    <div class="mini-panel">
                        <div class="section-eyebrow">Pourquoi ça convertit mieux</div>
                        <ul class="mini-list mb-0">
                            <li>Hiérarchie visuelle claire</li>
                            <li>CTA immédiat et sticky</li>
                            <li>Preuves sociales visibles</li>
                            <li>Informations compactes et crédibles</li>
                        </ul>
                    </div>
                    <div class="mini-panel">
                        <div class="section-eyebrow">Optimisé mobile</div>
                        <p class="mb-0 text-secondary">En bas d'écran, un CTA flottant reste accessible sur smartphone pour limiter la perte de conversion.</p>
                    </div>
                    <div class="mini-panel">
                        <div class="section-eyebrow">Intégration Twig</div>
                        <p class="mb-0 text-secondary">Toutes les données sont injectables par tableau Twig : matières, niveaux, tarifs, créneaux, avis et FAQ.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="mobile-cta-bar d-lg-none">
    <div>
        <div class="mobile-cta-price">{{ teacher.price_from }}€<span>/h</span></div>
        <div class="mobile-cta-meta">{{ teacher.response_time }}</div>
    </div>
    <a href="#reserver" class="btn btn-primary btn-pill">Contacter</a>
</div>
{% endblock %}