@component('layouts.app', [
    'title' => 'Something Went Wrong',
    'metaDescription' => 'We hit an unexpected error. Our team has been notified — try again in a moment.',
])
    <section class="flex min-h-[70vh] items-center justify-center px-6 py-32 dark:bg-ink">
        <div class="reveal mx-auto max-w-lg text-center">
            <p class="font-heading text-7xl font-extrabold text-primary/20 dark:text-secondary/20">500</p>
            <h1 class="mt-4 font-heading text-2xl font-extrabold text-slate-900 dark:text-white">
                Something Went Wrong on Our End
            </h1>
            <p class="mt-3 text-sm leading-relaxed text-slate-500 dark:text-slate-400">
                This wasn't caused by anything you did. Our team has been notified — please try again in a moment.
            </p>
            <div class="mt-8 flex flex-wrap justify-center gap-4">
                <button type="button" onclick="window.location.reload()"
                        class="rounded-xl bg-primary px-6 py-3 text-sm font-semibold text-white shadow-lg transition duration-300 hover:scale-105 dark:bg-secondary dark:text-ink">
                    Try Again
                </button>
                <a href="{{ route('home') }}"
                   class="rounded-xl border border-slate-200 px-6 py-3 text-sm font-semibold text-slate-700 transition duration-300 hover:border-primary hover:text-primary dark:border-white/10 dark:text-slate-200">
                    Back to Home
                </a>
            </div>
            <p class="mt-8 text-xs text-slate-400 dark:text-slate-500">
                Still stuck? <a href="{{ route('contact') }}" class="font-semibold text-primary underline dark:text-secondary">Contact support</a>.
            </p>
        </div>
    </section>
@endcomponent