@extends('theme::layouts.app')

@section('title', 'Page Not Found — ' . config('kamal.identity.name'))

@section('content')
<section class="py-32 bg-white">
    <div class="{{ config('kamal.layout.container') }} mx-auto px-4 sm:px-6 lg:px-8 text-center max-w-2xl">
        <div class="text-[120px] md:text-[180px] font-serif font-bold leading-none" style="color: var(--color-primary);">
            404
        </div>

        <h1 class="text-3xl md:text-4xl font-serif font-bold mt-4 mb-4" style="color: var(--color-ink);">
            Page Not Found
        </h1>

        <p class="text-lg leading-relaxed mb-8" style="color: var(--color-muted);">
            The page you are looking for does not exist or has been moved. Let us help you find your way back.
        </p>

        <div class="flex flex-wrap justify-center gap-4">
            <a href="{{ route('home') }}"
               class="inline-flex items-center gap-2 px-7 py-3.5 btn-primary text-sm font-medium rounded-full transition">
                Back to Home
            </a>
            <a href="{{ route('programs') }}"
               class="inline-flex items-center gap-2 px-7 py-3.5 bg-white text-sm font-medium rounded-full border-2 transition hover:opacity-90"
               style="border-color: var(--color-line); color: var(--color-ink);">
                Explore Programs
            </a>
        </div>
    </div>
</section>
@endsection