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

{% block title %}Contrat introuvable - Ludikevent{% endblock %}

{% block body %}
    <div class="min-h-[80vh] flex items-center justify-center p-6">
        <div class="max-w-md w-full text-center">

            {# --- ILLUSTRATION --- #}
            <div class="mb-8 relative">
                <div class="w-24 h-24 bg-blue-50 rounded-full flex items-center justify-center mx-auto text-blue-500 shadow-inner">
                    <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.172 9.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div class="absolute -top-2 -right-2 w-8 h-8 bg-amber-100 rounded-full flex items-center justify-center text-amber-600 border-2 border-white shadow-sm">
                    <span class="font-bold text-lg">?</span>
                </div>
            </div>

            {# --- TEXTE D'ERREUR --- #}
            <h1 class="text-3xl font-black italic uppercase tracking-tighter text-slate-900 mb-4">
                Oups ! <span class="text-blue-600">Contrat introuvable</span>
            </h1>

            <p class="text-slate-500 mb-10 leading-relaxed font-medium">
                Désolé, nous ne parvenons pas à trouver le contrat correspondant à ce numéro.
                Il a peut-être été expiré, supprimé ou l'adresse saisie est incorrecte.
            </p>

            {# --- BOUTON DE RETOUR --- #}
            <div class="space-y-6">
                <a href="{{ path('reservation') }}"
                   class="inline-flex items-center justify-center w-full py-5 px-8 bg-blue-600 hover:bg-blue-700 text-white font-black uppercase tracking-widest rounded-2xl transition-all shadow-xl shadow-blue-200 group">
                    <svg class="w-5 h-5 mr-3 transform group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                    </svg>
                    Accueil
                </a>

                <div class="pt-6 border-t border-slate-100">
                    <p class="text-[10px] text-slate-400 uppercase font-black tracking-[0.2em] mb-2">
                        Besoin d'assistance ?
                    </p>
                    <p class="text-slate-600 font-bold">06 14 17 24 47</p>
                </div>
            </div>

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