{% extends 'base.twig' %}

{% block title %}Sécurité Active - Ludikevent{% endblock %}

{% block body %}
    <div class="min-h-screen flex items-center justify-center bg-[#F8FAFC] py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-md w-full bg-white rounded-[2.5rem] p-10 shadow-[0_20px_50px_rgba(0,0,0,0.05)] border border-gray-100 text-center">

            {# Logo Ludikevent #}
            <div class="flex justify-center mb-8">
                <img src="{{ asset('provider/images/logo.png') }}" class="h-12 w-auto" alt="Ludikevent"/>
            </div>

            {# Icône de succès avec animation douce #}
            <div class="w-20 h-20 bg-emerald-50 text-emerald-500 rounded-[2rem] flex items-center justify-center mx-auto mb-6 shadow-inner animate-bounce">
                <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                </svg>
            </div>

            {# Titre de succès #}
            <h1 class="text-2xl font-black text-slate-900 uppercase tracking-tighter leading-none mb-3">
                Sécurité Active
            </h1>

            {# Séparateur visuel vert #}
            <div class="h-1 w-8 bg-emerald-500 mx-auto mb-6 rounded-full"></div>

            {# Message de confirmation #}
            <p class="text-slate-400 text-sm leading-relaxed mb-10 px-4">
                Félicitations ! Votre authentification à deux facteurs (**2FA**) est désormais configurée avec succès.
                <br><br>
                <span class="text-[10px] font-bold uppercase tracking-widest bg-emerald-50 text-emerald-600 px-4 py-1.5 rounded-full border border-emerald-100">
                Compte protégé
            </span>
            </p>

            {# Boutons d'action #}
            <div class="space-y-4">
                <a href="{{ path('app_home') }}"
                   class="block w-full py-4 bg-slate-900 text-white rounded-2xl font-bold hover:bg-indigo-600 hover:scale-[1.02] transition-all shadow-xl shadow-slate-200 uppercase text-xs tracking-[0.2em]">
                    Se connecter maintenant
                </a>

                <div class="pt-4">
                    <p class="text-[10px] text-slate-400 uppercase tracking-widest font-bold">
                        Important : ne supprimez pas votre application Authenticator
                    </p>
                </div>
            </div>

        </div>
    </div>
{% endblock %}
