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

{% set page_title = page_title|default('Connexion · RueduProf 2026') %}
{% set meta_description = meta_description|default('Page de connexion moderne RueduProf, responsive desktop et mobile, en Twig + Bootstrap.') %}
{% set site_name = site_name|default('RueduProf') %}
{% set header_cta_label = header_cta_label|default('Créer un compte') %}
{% set header_cta_href = header_cta_href|default('#inscription') %}
{% set nav_items = nav_items|default([
    {'label': 'Trouver un prof', 'href': '#'},
    {'label': 'Devenir prof', 'href': '#'},
    {'label': 'Comment ça marche', 'href': '#'},
    {'label': 'Aide', 'href': '#'}
]) %}

{% set login_form = login_form|default({
    'title': 'Bon retour sur RueduProf',
    'subtitle': 'Connectez-vous pour retrouver vos demandes, vos messages et vos prochains cours.',
    'email': '',
    'remember': true,
    'alert': 'Exemple de zone flash : erreur de mot de passe, compte à vérifier, ou message de succès après une réinitialisation.',
    'providers': ['Google', 'Apple'],
    'proofs': [
        'Messagerie sécurisée avec les professeurs',
        'Historique des demandes et favoris',
        'Accès rapide sur mobile et desktop'
    ]
}) %}

{% set auth_showcase = auth_showcase|default({
    'eyebrow': 'Connexion premium',
    'title': 'Reprenez vos cours en quelques secondes.',
    'copy': 'Une page de connexion plus haut de gamme, plus lisible et mieux structurée pour rassurer immédiatement les parents, élèves et professeurs.',
    'bullets': [
        'Tunnel simple avec récupération de mot de passe visible',
        'Signaux de confiance clairs dès le premier écran',
        'CTA et champs optimisés pour le tactile'
    ],
    'stats': [
        {'value': '1 clic', 'label': 'pour retrouver vos messages'},
        {'value': '100%', 'label': 'responsive'},
        {'value': '0 friction', 'label': 'dans le parcours'}
    ],
    'quote': {
        'text': 'Je retrouve tout de suite mes échanges avec les profs et mes demandes en cours.',
        'author': 'Nadia, parent utilisatrice'
    },
    'floating': {
        'label': 'Point fort UX',
        'title': 'Connexion rassurante',
        'text': 'Formulaire lisible, liens d’aide visibles et structure pensée pour la conversion.'
    }
}) %}

{% block body %}
<section class="auth-page py-4 py-lg-5" id="connexion">
    <div class="container-xxl">
        <div class="auth-shell">
            <div class="row g-0">
                <div class="col-lg-6 auth-showcase-col">
                    {% include 'components/_auth_showcase.html.twig' with { auth_showcase: auth_showcase } only %}
                </div>
                <div class="col-lg-6 auth-form-col">
                    <div class="auth-form-panel h-100">
                        <div class="d-flex justify-content-between align-items-center gap-3 flex-wrap mb-4">
                            <div>
                                <div class="section-eyebrow mb-2">Connexion</div>
                                <h2 class="auth-form-title mb-1">{{ login_form.title }}</h2>
                                <p class="text-muted mb-0">{{ login_form.subtitle }}</p>
                            </div>
                            <a href="#inscription" class="auth-switch-link">Pas encore inscrit ? <span>Créer un compte</span></a>
                        </div>

                        <div class="auth-tabs mb-4">
                            <a href="#" class="auth-tab-link is-active">Connexion</a>
                            <a href="#inscription" class="auth-tab-link">Inscription</a>
                        </div>

                        <div class="alert alert-light auth-alert border mb-4" role="alert">
                            <i class="bi bi-info-circle me-2"></i>{{ login_form.alert }}
                        </div>

                        <div class="row g-3 mb-4">
                            {% for provider in login_form.providers %}
                                <div class="col-sm-6">
                                    <button class="btn auth-social-btn w-100" type="button">
                                        {% if provider == 'Google' %}
                                            <i class="bi bi-google"></i>
                                        {% elseif provider == 'Apple' %}
                                            <i class="bi bi-apple"></i>
                                        {% else %}
                                            <i class="bi bi-box-arrow-in-right"></i>
                                        {% endif %}
                                        Continuer avec {{ provider }}
                                    </button>
                                </div>
                            {% endfor %}
                        </div>

                        <div class="auth-divider mb-4"><span>ou avec votre email</span></div>

                        <form method="post" class="row g-3">
                            <div class="col-12">
                                <label class="form-label fw-semibold">Adresse email</label>
                                <div class="form-icon-control">
                                    <i class="bi bi-envelope"></i>
                                    <input type="email" name="email" class="form-control form-control-lg" value="{{ login_form.email }}" placeholder="vous@exemple.fr" autocomplete="email">
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="d-flex justify-content-between align-items-center mb-2 gap-2 flex-wrap">
                                    <label class="form-label fw-semibold mb-0">Mot de passe</label>
                                    <a href="#" class="small text-decoration-none">Mot de passe oublié ?</a>
                                </div>
                                <div class="form-icon-control password-control">
                                    <i class="bi bi-lock"></i>
                                    <input type="password" name="password" class="form-control form-control-lg" placeholder="Votre mot de passe" autocomplete="current-password">
                                    <button class="password-toggle" type="button" data-toggle-password aria-label="Afficher le mot de passe">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="col-12 d-flex justify-content-between align-items-center gap-3 flex-wrap">
                                <div class="form-check form-switch auth-switch">
                                    <input class="form-check-input" type="checkbox" id="rememberMe" {% if login_form.remember %}checked{% endif %}>
                                    <label class="form-check-label" for="rememberMe">Rester connecté</label>
                                </div>
                                <div class="auth-mini-proof">
                                    <i class="bi bi-shield-lock"></i>
                                    <span>Espace sécurisé</span>
                                </div>
                            </div>

                            <div class="col-12 d-grid mt-2">
                                <button class="btn btn-primary btn-lg btn-pill" type="submit">Se connecter</button>
                            </div>
                        </form>

                        <div class="auth-form-note mt-4">
                            <div class="auth-form-note-icon"><i class="bi bi-lightning-charge-fill"></i></div>
                            <div>
                                <div class="fw-bold mb-1">Pensé pour la conversion</div>
                                <p class="mb-0 text-muted">Liens utiles, signaux de confiance et hiérarchie claire pour réduire la friction dès la connexion.</p>
                            </div>
                        </div>

                        <div class="row g-2 mt-4">
                            {% for proof in login_form.proofs %}
                                <div class="col-md-6 col-xl-12">
                                    <div class="auth-inline-proof">
                                        <i class="bi bi-check2-circle"></i>
                                        <span>{{ proof }}</span>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}