<x-app-layout>
    <x-slot name="header">
        <div>
            <p class="text-sm font-semibold uppercase tracking-wide text-red-600 dark:text-red-400">Payment Failed</p>
            <h2 class="mt-1 text-2xl font-bold text-slate-950 dark:text-white">Payment Was Not Completed</h2>
        </div>
    </x-slot>

    <div class="mx-auto max-w-3xl">
        <section class="rounded-lg border border-red-200 bg-white p-6 shadow-sm dark:border-red-900/50 dark:bg-slate-900">
            <div class="rounded-lg bg-red-50 p-5 dark:bg-red-950/40">
                <p class="text-sm font-bold uppercase tracking-wide text-red-700 dark:text-red-200">Not Activated</p>
                <h3 class="mt-2 text-2xl font-black text-slate-950 dark:text-white">Your subscription was not activated.</h3>
                <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">
                    ViZuTrade only activates subscriptions after real gateway verification confirms a successful payment.
                </p>
            </div>

            @if ($payment)
                <dl class="mt-6 grid gap-4 sm:grid-cols-2">
                    <div class="rounded-lg border border-blue-100 p-4 dark:border-blue-900/50">
                        <dt class="text-xs font-bold uppercase text-blue-700 dark:text-blue-300">Plan</dt>
                        <dd class="mt-1 text-sm font-black text-slate-950 dark:text-white">{{ $payment->plan?->name ?? 'Subscription Plan' }}</dd>
                    </div>
                    <div class="rounded-lg border border-blue-100 p-4 dark:border-blue-900/50">
                        <dt class="text-xs font-bold uppercase text-blue-700 dark:text-blue-300">Reference</dt>
                        <dd class="mt-1 break-all text-sm font-black text-slate-950 dark:text-white">{{ $payment->reference }}</dd>
                    </div>
                </dl>
            @endif

            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
                <a href="{{ route('pricing') }}" class="rounded-lg bg-blue-600 px-4 py-3 text-center text-sm font-bold text-white transition hover:-translate-y-0.5 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400">
                    Back to Pricing
                </a>
                <a href="{{ route('subscriptions.index') }}" class="rounded-lg border border-blue-100 px-4 py-3 text-center text-sm font-bold text-blue-700 transition hover:-translate-y-0.5 hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">
                    View Subscription
                </a>
            </div>
        </section>
    </div>
</x-app-layout>
