@extends('public.layouts.app')

@section('content')
<main class="flex-grow w-full max-w-md mx-auto px-6 pt-12 pb-32">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
        <div class="lg:col-span-7 space-y-8">
            <!-- Error Header -->
            <div class="space-y-4">
                <div class="inline-flex items-center justify-center w-20 h-20 bg-red-100 rounded-full mb-4">
                    <span class="material-symbols-outlined text-6xl text-red-600">error</span>
                </div>
                <h1 class="font-headline text-4xl md:text-5xl text-primary leading-tight">
                    Ödeme <span class="italic">Başarısız</span>
                </h1>
                <p class="text-on-surface-variant text-lg max-w-xl leading-relaxed">
                    Üzgünüz, ödeme işleminiz tamamlanamadı.
                    Lütfen tekrar deneyiniz veya farklı bir ödeme yöntemi kullanınız.
                </p>
            </div>

            <!-- Possible Reasons -->
            <div class="bg-surface-container-low rounded-xl p-8 space-y-6">
                <h2 class="font-headline text-2xl text-primary">Olası Nedenler</h2>
                <ul class="space-y-3 text-on-surface-variant">
                    <li class="flex items-start gap-3">
                        <span class="material-symbols-outlined text-error mt-0.5">cancel</span>
                        <span>Yetersiz bakiye</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <span class="material-symbols-outlined text-error mt-0.5">cancel</span>
                        <span>Kart bilgilerinde hata</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <span class="material-symbols-outlined text-error mt-0.5">cancel</span>
                        <span>Banka onayı reddedildi</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <span class="material-symbols-outlined text-error mt-0.5">cancel</span>
                        <span>İnternet bağlantısı sorunu</span>
                    </li>
                </ul>
            </div>

            <!-- Action Buttons -->
            <div class="flex flex-col gap-4 pt-4">
                <a href="{{ route('public.reservation.show', $reservation->restaurant->slug) }}"
                    class="flex-1 inline-flex items-center justify-center gap-2 px-8 py-4 bg-gradient-to-br from-[#00261e] to-[#0b3d33] text-white rounded-full font-label text-sm font-semibold uppercase tracking-widest hover:scale-[1.02] active:scale-95 transition-all duration-300 shadow-lg">
                    <span class="material-symbols-outlined text-sm">refresh</span>
                    TEKRAR DENE
                </a>
                <a href="/"
                    class="flex-1 inline-flex items-center justify-center gap-2 px-8 py-4 bg-surface-container-high text-primary rounded-full font-label text-sm font-semibold uppercase tracking-widest hover:bg-surface-container-highest transition-all duration-300">
                    <span class="material-symbols-outlined text-sm">home</span>
                    ANA SAYFAYA DÖN
                </a>
            </div>
        </div>
    </div>
</main>
@endsection