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

{% set page_title = page_title|default('Inscription · RueduProf 2026') %}
{% set meta_description = meta_description|default('Page d’inscription moderne RueduProf, responsive desktop et mobile, en Twig + Bootstrap.') %}
{% set site_name = site_name|default('RueduProf') %}
{% set header_cta_label = header_cta_label|default('Se connecter') %}
{% set header_cta_href = header_cta_href|default('#connexion') %}
{% set nav_items = nav_items|default([
    {'label': 'Trouver un prof', 'href': '#'},
    {'label': 'Devenir prof', 'href': '#'},
    {'label': 'Tarifs', 'href': '#'},
    {'label': 'FAQ', 'href': '#'}
]) %}

{% set register_form = register_form|default({
    'title': 'Créez votre compte RueduProf',
    'subtitle': 'Inscrivez-vous pour trouver un prof ou publier votre profil en quelques étapes.',
    'role': 'student',
    'providers': ['Google', 'Apple'],
    'subjects': ['Maths', 'Français', 'Anglais', 'Physique'],
    'levels': ['Primaire', 'Collège', 'Lycée', 'Supérieur'],
    'steps': [
        'Créez votre compte en moins de 2 minutes',
        'Complétez votre besoin ou votre profil',
        'Recevez des réponses et planifiez vos cours'
    ]
}) %}

{% set auth_showcase = auth_showcase|default({
    'eyebrow': 'Inscription premium',
    'title': 'Entrez dans une expérience marketplace plus propre et plus rassurante.',
    'copy': 'Une inscription guidée, mobile-first, avec des choix clairs et une perception plus premium du service dès le premier écran.',
    'bullets': [
        'Choix de profil immédiat : élève/parent ou professeur',
        'Champs hiérarchisés pour limiter l’abandon',
        'Formulaire conçu pour bien performer en mobile et desktop'
    ],
    'stats': [
        {'value': '3 étapes', 'label': 'avant votre premier contact'},
        {'value': '+ clair', 'label': 'sur mobile'},
        {'value': '+ premium', 'label': 'dans la perception'}
    ],
    'quote': {
        'text': 'En quelques clics j’ai pu créer mon compte, préciser mon besoin et contacter un prof.',
        'author': 'Camille, élève'
    },
    'floating': {
        'label': 'Point fort UX',
        'title': 'Inscription guidée',
        'text': 'Le design accompagne l’utilisateur avec des sections lisibles et des preuves visibles.'
    }
}) %}

{% block body %}
<section class="auth-page auth-page-register py-4 py-lg-5" id="inscription">
    <div class="container-xxl">
        <div class="auth-shell auth-shell-register">
            <div class="row g-0">
                <div class="col-lg-5 auth-showcase-col order-2 order-lg-1">
                    {% include 'components/_auth_showcase.html.twig' with { auth_showcase: auth_showcase } only %}
                </div>
                <div class="col-lg-7 auth-form-col order-1 order-lg-2">
                    <div class="auth-form-panel auth-form-panel-register 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">Inscription</div>
                                <h2 class="auth-form-title mb-1">{{ register_form.title }}</h2>
                                <p class="text-muted mb-0">{{ register_form.subtitle }}</p>
                            </div>
                            <a href="#connexion" class="auth-switch-link">Déjà membre ? <span>Se connecter</span></a>
                        </div>

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

                        <div class="row g-3 mb-4">
                            {% for provider in register_form.providers %}
                                <div class="col-md-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-person-plus"></i>
                                        {% endif %}
                                        S'inscrire avec {{ provider }}
                                    </button>
                                </div>
                            {% endfor %}
                        </div>

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

                        <form method="post" class="row g-3" id="connexion">
                            <div class="col-12">
                                <label class="form-label fw-semibold">Je suis</label>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="auth-choice h-100">
                                            <input class="form-check-input" type="radio" name="role" value="student" {% if register_form.role == 'student' %}checked{% endif %}>
                                            <span class="auth-choice-icon"><i class="bi bi-search-heart"></i></span>
                                            <span class="auth-choice-content">
                                                <strong>Élève / parent</strong>
                                                <small>Je cherche un prof rapidement</small>
                                            </span>
                                        </label>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="auth-choice h-100">
                                            <input class="form-check-input" type="radio" name="role" value="teacher" {% if register_form.role == 'teacher' %}checked{% endif %}>
                                            <span class="auth-choice-icon"><i class="bi bi-mortarboard"></i></span>
                                            <span class="auth-choice-content">
                                                <strong>Professeur</strong>
                                                <small>Je souhaite publier mon profil</small>
                                            </span>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Prénom</label>
                                <div class="form-icon-control">
                                    <i class="bi bi-person"></i>
                                    <input type="text" name="first_name" class="form-control form-control-lg" placeholder="Prénom">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Nom</label>
                                <div class="form-icon-control">
                                    <i class="bi bi-person-badge"></i>
                                    <input type="text" name="last_name" class="form-control form-control-lg" placeholder="Nom">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <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" placeholder="vous@exemple.fr" autocomplete="email">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Téléphone</label>
                                <div class="form-icon-control">
                                    <i class="bi bi-telephone"></i>
                                    <input type="tel" name="phone" class="form-control form-control-lg" placeholder="06 00 00 00 00">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Matière principale</label>
                                <select class="form-select form-select-lg rounded-4" name="subject">
                                    {% for subject in register_form.subjects %}
                                        <option>{{ subject }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Niveau</label>
                                <select class="form-select form-select-lg rounded-4" name="level">
                                    {% for level in register_form.levels %}
                                        <option>{{ level }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Mot de passe</label>
                                <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="Choisissez un mot de passe" autocomplete="new-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 class="auth-password-meter mt-2">
                                    <span class="is-active"></span>
                                    <span class="is-active"></span>
                                    <span></span>
                                    <span></span>
                                </div>
                                <div class="small text-muted mt-2">Utilisez 8 caractères ou plus, avec une combinaison de lettres et chiffres.</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Ville</label>
                                <div class="form-icon-control">
                                    <i class="bi bi-geo-alt"></i>
                                    <input type="text" name="city" class="form-control form-control-lg" placeholder="Paris, Lyon, Marseille...">
                                </div>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-semibold">Votre objectif</label>
                                <textarea class="form-control rounded-4" rows="4" name="goal" placeholder="Décrivez brièvement votre besoin ou votre profil."></textarea>
                            </div>
                            <div class="col-12">
                                <div class="form-check auth-legal-check">
                                    <input class="form-check-input" type="checkbox" value="1" id="consentRules" checked>
                                    <label class="form-check-label" for="consentRules">
                                        J'accepte les conditions générales d'utilisation et la politique de confidentialité.
                                    </label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-check auth-legal-check">
                                    <input class="form-check-input" type="checkbox" value="1" id="consentNews">
                                    <label class="form-check-label" for="consentNews">
                                        Je souhaite recevoir des conseils, nouveautés et rappels utiles par email.
                                    </label>
                                </div>
                            </div>
                            <div class="col-12 d-grid d-lg-flex gap-3 mt-2">
                                <button class="btn btn-primary btn-lg btn-pill flex-grow-1" type="submit">Créer mon compte</button>
                                <button class="btn btn-light btn-lg btn-pill auth-outline-btn" type="button">Voir un exemple de profil</button>
                            </div>
                        </form>

                        <div class="auth-form-note mt-4 mb-4">
                            <div class="auth-form-note-icon"><i class="bi bi-stars"></i></div>
                            <div>
                                <div class="fw-bold mb-1">Inscription guidée</div>
                                <p class="mb-0 text-muted">Le formulaire distingue clairement les usages élève/parent et professeur pour mieux orienter l’utilisateur dès le départ.</p>
                            </div>
                        </div>

                        <div class="auth-steps">
                            {% for step in register_form.steps %}
                                <div class="auth-step">
                                    <div class="auth-step-index">{{ loop.index }}</div>
                                    <div class="auth-step-text">{{ step }}</div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}