@namespace MidrandBooks.Components.Pages
@using Microsoft.AspNetCore.Components

<div id="notfound-razor" class="w-full max-w-xl mx-auto px-4 py-16 text-center space-y-6">
    <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-slate-100 text-slate-400 border border-slate-200/60">
        <svg class="h-10 w-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
        </svg>
    </div>

    <div class="space-y-2">
        <h2 class="font-serif text-3xl font-extrabold text-slate-800 tracking-tight">404</h2>
        <h3 class="font-serif text-lg font-bold text-slate-700">Page Not Found</h3>
        <p class="text-xs text-slate-500 max-w-sm mx-auto leading-relaxed">
            The literary masterpiece or digital section you are trying to find doesn't exist or has been relocated to another shelf.
        </p>
    </div>

    <div class="flex justify-center gap-3 pt-2">
        <button @onclick="HandleBackToHome" class="px-5 py-2 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-bold text-xs transition-all shadow-md cursor-pointer">
            Return to Storefront
        </button>
    </div>
</div>

@code {
    [Parameter] public EventCallback OnBackToHome { get; set; }

    private async Task HandleBackToHome()
    {
        await OnBackToHome.InvokeAsync();
    }
}