@extends('layouts.app')

@section('title', 'Halaman Tidak Ditemukan')

@section('content')
<div class="min-h-[60vh] flex flex-col items-center justify-center text-center px-4 py-20 relative overflow-hidden">
    <!-- Ultra Clean 404 Header (Sharp) -->
    <div class="mb-14">
        <h1 class="text-[120px] md:text-[220px] font-black text-gray-900 leading-none tracking-tighter select-none">404</h1>
        <div class="h-2 w-32 md:w-56 bg-green-600 mx-auto rounded-full mt-4 shadow-[0_0_15px_rgba(22,163,74,0.3)]"></div>
    </div>

    <!-- Error Message -->
    <div class="max-w-xl mx-auto space-y-6">
        <h2 class="text-3xl md:text-5xl font-black text-gray-950 uppercase tracking-tighter leading-none">HALAMAN TIDAK DITEMUKAN</h2>
        <p class="text-gray-500 font-bold text-sm md:text-base leading-relaxed opacity-80 max-w-md mx-auto">
            Maaf Bos, sepertinya halaman yang Anda cari sudah dihapus atau link-nya salah ketik.
        </p>
    </div>

    <!-- Action Buttons -->
    <div class="mt-14 flex flex-col sm:flex-row gap-5 items-center">
        <a href="{{ route('home') }}" class="w-full sm:w-auto bg-green-700 text-white font-black px-12 py-5 rounded-[2rem] shadow-xl shadow-green-900/20 hover:bg-black hover:-translate-y-1 active:scale-95 transition-all uppercase tracking-widest text-xs flex items-center justify-center gap-3">
            <i class="fa-solid fa-house text-lg"></i> Ke Beranda Utama
        </a>
        <button onclick="window.history.back()" class="w-full sm:w-auto bg-white text-gray-950 font-black px-12 py-5 rounded-[2rem] shadow-xl border-2 border-gray-100 hover:bg-gray-50 hover:-translate-y-1 active:scale-95 transition-all uppercase tracking-widest text-[10px] flex items-center justify-center gap-3">
            <i class="fa-solid fa-arrow-left text-lg"></i> Kembali ke Tadi
        </button>
    </div>

    <!-- Quick Search -->
    <div class="mt-20 w-full max-w-sm">
        <p class="text-[10px] font-black uppercase tracking-[0.4em] text-gray-400 mb-5 opacity-60">Pencarian Cepat:</p>
        <form action="{{ route('post.search') }}" class="relative group">
            <input type="text" name="q" placeholder="Cari berita lain..." 
                   class="w-full bg-white border-4 border-gray-50 rounded-[2rem] py-4.5 pl-8 pr-16 focus:ring-8 focus:ring-green-500/5 focus:border-green-600 transition-all font-black text-gray-950 shadow-xl group-hover:shadow-2xl text-[11px]">
            <button type="submit" class="absolute right-6 top-1/2 -translate-y-1/2 text-gray-300 hover:text-green-700 transition">
                <i class="fa-solid fa-magnifying-glass text-xl"></i>
            </button>
        </form>
    </div>
</div>
@endsection