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

{% block title %}Panier introuvable | Ludik Event{% endblock %}

{% block body %}
<div class="max-w-7xl mx-auto px-4 py-24 text-center">
    <div class="bg-white rounded-[3rem] shadow-xl p-12 border border-slate-100 max-w-3xl mx-auto">
        <div class="w-24 h-24 bg-red-50 text-red-500 rounded-full flex items-center justify-center mx-auto 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="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        </div>
        
        <h1 class="text-3xl md:text-4xl font-black text-slate-900 uppercase italic tracking-tighter mb-6">
            Oups ! Panier introuvable
        </h1>
        
        <p class="text-lg text-slate-600 mb-8 leading-relaxed">
            Nous sommes désolés, nous ne trouvons pas votre panier pour votre réservation.<br>
            <span class="font-bold text-[#f39e36]">Elle s'est perdue dans nos structures gonflables !</span>
        </p>

        <a href="{{ path('reservation_catalogue') }}" class="inline-flex items-center gap-3 px-8 py-4 bg-slate-900 text-white rounded-2xl font-black uppercase tracking-widest hover:bg-[#fc0e50] transition-all shadow-lg hover:scale-105">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
            Recommencer ma réservation
        </a>
    </div>
</div>
{% endblock %}