<div class="text-center max-w-md mx-auto animate-[fadeIn_0.5s_ease-out]">
    <div class="relative">
        <div class="text-[150px] font-black text-slate-200 leading-none select-none drop-shadow-sm tracking-tighter">
            404
        </div>
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="w-24 h-24 bg-white rounded-full flex items-center justify-center shadow-xl border border-slate-100 text-app-primary">
                <i class="fa-solid fa-map-location-dot text-4xl"></i>
            </div>
        </div>
    </div>
    
    <div class="mt-8">
        <h1 class="text-3xl md:text-4xl font-black text-slate-900 tracking-tight mb-3">{{!empty($title) ? $title : 'Page Not Found'}}</h1>
        <p class="text-slate-500 font-medium mb-10 text-lg">
            {{!empty($content) ? $content : 'The page you are looking for cannot be found. It may have been moved, renamed, or is temporarily unavailable.'}}
        </p>
        
        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
            <a href="{{APP_URL}}/tracking" class="w-full sm:w-auto px-8 py-4 bg-white hover:bg-slate-50 border border-slate-200 text-slate-700 font-bold rounded-2xl transition-all shadow-sm flex items-center justify-center gap-2">
                <i class="fa-solid fa-magnifying-glass"></i> Track Cargo
            </a>
            <a href="{{APP_URL}}" class="w-full sm:w-auto px-8 py-4 bg-app-primary hover:bg-app-primaryHover text-white font-bold rounded-2xl transition-all shadow-lg shadow-app-primary/30 flex items-center justify-center gap-2 active:scale-95">
                <i class="fa-solid fa-house"></i> Return to Port
            </a>
        </div>
    </div>
</div>