@model ErrorViewModel
@{
    ViewData["Title"] = "Error";
}

<div class="hero min-h-screen bg-base-200">
    <div class="hero-content text-center">
        <div class="max-w-md">
            <div class="text-9xl mb-8">🚫</div>
            <h1 class="text-5xl font-bold text-error mb-4">Oops!</h1>
            <h2 class="text-2xl font-semibold mb-6">Terjadi Kesalahan</h2>
            <p class="text-base-content opacity-70 mb-8">
                Maaf, terjadi kesalahan yang tidak terduga. Tim kami telah diberitahu dan sedang menangani masalah ini.
            </p>
            
            @if (Model.ShowRequestId)
            {
                <div class="alert alert-warning mb-6">
                    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
                    </svg>
                    <div>
                        <h3 class="font-bold">Request ID untuk referensi:</h3>
                        <div class="text-xs opacity-75 font-mono">@Model.RequestId</div>
                    </div>
                </div>
            }
            
            <div class="space-y-4">
                <a asp-controller="Home" asp-action="Index" class="btn btn-primary btn-lg">
                    🏠 Kembali ke Beranda
                </a>
                <button onclick="window.history.back()" class="btn btn-outline btn-lg">
                    ⬅️ Halaman Sebelumnya
                </button>
            </div>
            
            <div class="divider">ATAU</div>
            
            <div class="text-sm text-base-content opacity-60">
                <p>Jika masalah terus berlanjut, silakan hubungi:</p>
                <a href="mailto:support@banksampah.com" class="link link-primary">support@banksampah.com</a>
            </div>
        </div>
    </div>
</div>