@extends('theme-default::layouts.base')
@section('title', '404 — Page Not Found')

@section('content')
<div class="min-h-[70vh] flex items-center justify-center px-4">
    <div class="text-center max-w-md">
        <div class="relative inline-block mb-8">
            <span class="text-[10rem] font-black text-gray-100 leading-none select-none">404</span>
            <div class="absolute inset-0 flex items-center justify-center">
                <div class="w-20 h-20 bg-indigo-600 rounded-2xl flex items-center justify-center shadow-xl">
                    <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
        </div>
        <h1 class="text-2xl font-bold text-gray-900 mb-3">Page Not Found</h1>
        <p class="text-gray-500 mb-8 leading-relaxed">
            The page you're looking for doesn't exist or has been moved.
        </p>
        <div class="flex items-center justify-center gap-3">
            <a href="/" class="btn-primary">
                ← Back to Home
            </a>
            <a href="javascript:history.back()" class="btn-outline">
                Go Back
            </a>
        </div>
    </div>
</div>
@endsection
