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

{% block title %}Confirmation de commande | Ludik Event{% endblock %}

{% block body %}
<div class="min-h-screen bg-slate-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-md">
        <div class="bg-white py-8 px-4 shadow-xl shadow-slate-200 sm:rounded-3xl sm:px-10 border border-slate-100 text-center">

            <div class="mx-auto flex items-center justify-center h-20 w-20 rounded-full bg-green-100 mb-6 animate-in zoom-in duration-500">
                <svg class="h-10 w-10 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
            </div>

            <h2 class="text-3xl font-black text-slate-900 mb-2 uppercase italic tracking-tight">Merci !</h2>
            <p class="text-lg text-slate-600 font-medium mb-8">Votre demande a bien été envoyée.</p>

            <div class="space-y-4 text-sm text-slate-500 bg-slate-50 p-6 rounded-2xl border border-slate-100">
                <p>Notre équipe va étudier votre demande et vous recevrez un devis complet par email dans les plus brefs délais.</p>
                <p>Pensez à vérifier vos courriers indésirables (spam).</p>
            </div>

            <div class="mt-8">
                <a href="{{ path('reservation') }}" class="w-full flex justify-center py-4 px-4 border border-transparent rounded-2xl shadow-lg text-sm font-bold text-white bg-slate-900 hover:bg-[#f39e36] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-900 transition-all uppercase tracking-widest">
                    Retour à l'accueil
                </a>
            </div>
        </div>
    </div>
</div>,flowConfirmed

<local-storage-clear keys="lp_list,lp_options"></local-storage-clear>
{% endblock %}