@component('layouts.app', [
    'title' => 'Page Not Found',
    'metaDescription' => 'This page doesn\'t exist. Head back to Yatra Card to keep exploring.',
])
    <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">404</p>
            <h1 class="mt-4 font-heading text-2xl font-extrabold text-slate-900 dark:text-white">
                This Route Doesn't Exist
            </h1>
            <p class="mt-3 text-sm leading-relaxed text-slate-500 dark:text-slate-400">
                The page you tapped for isn't here. It may have moved, or the link might be outdated.
            </p>
            <div class="mt-8 flex flex-wrap justify-center gap-4">
                <a href="{{ route('home') }}"
                   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">
                    Back to Home
                </a>
                <a href="{{ route('help') }}"
                   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">
                    Visit Help Center
                </a>
            </div>
        </div>
    </section>
@endcomponent