{% extends 'revervation/base.twig' %}

{% block title %}Erreur de vérification - Ludikevent{% endblock %}

{% block body %}
    <div class="min-h-screen flex items-center justify-center p-6 bg-slate-50">
        <div class="max-w-md w-full bg-white p-10 rounded-[2.5rem] shadow-xl shadow-slate-200/50 border border-slate-100">

            <div class="text-center">
                <div class="inline-flex p-5 bg-red-50 rounded-3xl text-red-500 mb-8 animate-bounce">
                    <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>

                <h1 class="text-2xl font-black italic uppercase text-slate-900 leading-tight mb-4">
                    Code <br><span class="text-red-500">Invalide</span>
                </h1>

                <div class="bg-red-50/50 border border-red-100 rounded-2xl p-4 mb-8">
                    <p class="text-red-600 font-bold text-sm">
                        {{ error|default('Le code de sécurité est incorrect ou a expiré (15 min).') }}
                    </p>
                </div>

                <p class="text-slate-500 text-sm leading-relaxed mb-10">
                    Pour des raisons de sécurité, l'accès à votre contrat nécessite une validation par mail valide. Veuillez vérifier votre saisie ou demander un nouveau code.
                </p>

                <div class="space-y-4">
                    {# Retour à la page de saisie #}
                    <a data-turbo="fals" href="{{ path('gestion_contrat_finish') }}" class="w-full py-5 bg-slate-900 hover:bg-slate-800 text-white font-black uppercase tracking-widest rounded-2xl transition-all shadow-lg shadow-slate-200">
                        Réessayer la saisie
                    </a>
                </div>

                <div class="mt-12 pt-8 border-t border-slate-100">
                    <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mb-2">Support Ludikevent</p>
                    <p class="text-slate-900 font-black italic">06 14 17 24 47</p>
                </div>
            </div>

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