{% extends 'base.twig' %}

{% block title %}Signature confirmée - Ludikevent{% endblock %}

{% block body %}
    <div class="min-h-screen flex items-center justify-center bg-slate-50 py-12 px-4 sm:px-6 lg:px-8 font-sans">
        <div class="max-w-md w-full space-y-8 p-10 bg-white rounded-2xl shadow-xl border border-slate-100 text-center">

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

            {# Icône de succès #}
            <div class="flex justify-center">
                <div class="rounded-full bg-emerald-100 p-3">
                    <svg class="h-12 w-12 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                </div>
            </div>

            {# Contenu principal #}
            <div class="space-y-4">
                <h1 class="text-2xl font-extrabold text-slate-900">
                    Signature effectuée !
                </h1>
                <p class="text-slate-500 text-sm">
                    La signature numérique du devis <span class="font-bold text-blue-600">#{{ devis.num }}</span> a été validée avec succès.
                </p>
            </div>

            {# ALERT PAIEMENT ACOMPTE #}
            <div class="bg-amber-50 border-l-4 border-amber-400 p-4 my-6 text-left">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-amber-400" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-bold text-amber-800">Action requise : Paiement de l'acompte</p>
                        <p class="text-xs text-amber-700 mt-1">
                            Vous disposez de <strong>3 jours</strong> pour effectuer le paiement de l'acompte afin de valider définitivement votre réservation. Passé ce délai, votre réservation sera <strong>automatiquement annulée</strong>.
                        </p>
                    </div>
                </div>
            </div>

            <hr class="border-slate-100">

            {# Prochaines étapes #}
            <div class="space-y-6 text-left">
                <div class="flex items-start space-x-3">
                    <div class="flex-shrink-0">
                        <span class="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 text-blue-600 text-xs font-bold">1</span>
                    </div>
                    <p class="text-sm text-slate-600">
                        Vous allez recevoir prochainement votre <span class="font-semibold">contrat de location</span> par e-mail.
                    </p>
                </div>

                <div class="flex items-start space-x-3">
                    <div class="flex-shrink-0">
                        <span class="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 text-blue-600 text-xs font-bold">2</span>
                    </div>
                    <p class="text-sm text-slate-600">
                        Un <span class="font-semibold text-blue-600">lien sécurisé</span> vous sera transmis pour gérer vos documents et effectuer votre paiement.
                    </p>
                </div>
            </div>

            {# Footer / Bouton retour #}
            <div class="pt-6">
                <p class="text-xs text-slate-400 mb-6 italic">
                    Une copie du devis signé a été envoyée à : {{ devis.customer.email }}
                </p>
                <a href="https://reservation.ludikevent.fr" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-xl text-white bg-blue-600 hover:bg-blue-700 transition-colors shadow-lg shadow-blue-200 w-full">
                    Retour au site
                </a>
            </div>

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