@php
    use App\Models\Setting;
    $contactPhone = Setting::get('contact_phone', config('umami.phone', '392 204 3500'));
@endphp
<x-layout.app>
    <x-slot:title>Link Scaduto</x-slot:title>

    <div class="min-h-[60vh] flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8 pt-36 md:pt-44">
        <div class="max-w-md w-full space-y-8 text-center bg-white p-10 rounded-2xl shadow-xl">
            <div>
                <!-- Warning Icon -->
                <div class="mx-auto flex items-center justify-center h-20 w-20 rounded-full bg-yellow-100">
                    <svg class="h-10 w-10 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                    </svg>
                </div>

                <h2 class="mt-6 text-2xl font-extrabold text-umami-dark">
                    Link Scaduto
                </h2>

                <p class="mt-4 text-gray-600 text-sm leading-relaxed">
                    {{ $message ?? 'Il link per modificare la prenotazione e scaduto o non e valido.' }}
                </p>
            </div>

            <div class="border-t border-gray-200 pt-6">
                <p class="text-sm text-gray-500 mb-4">
                    Per modificare o cancellare la prenotazione, contattaci telefonicamente:
                </p>

                <a href="tel:{{ preg_replace('/\s+/', '', $contactPhone) }}"
                   class="inline-flex items-center justify-center gap-2 bg-umami-accent text-white font-bold py-3 px-6 rounded-xl hover:bg-umami-accent/90 transition-colors">
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                    </svg>
                    Chiama {{ $contactPhone }}
                </a>
            </div>

            <div>
                <a href="{{ route('home', ['locale' => app()->getLocale()]) }}"
                   class="text-sm text-gray-500 hover:text-umami-accent transition-colors">
                    &larr; Torna alla Home
                </a>
            </div>
        </div>
    </div>
</x-layout.app>