<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@yield('title', 'Booklio')</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-[#F8FAFC] font-sans text-[#111827]">
    <main class="flex min-h-screen items-center justify-center px-6 py-12">
        <section class="w-full max-w-lg rounded-xl border border-[#E5E7EB] bg-white p-8 text-center shadow-[0_8px_24px_rgba(15,23,42,0.06)]">
            <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-[#2563EB] text-2xl font-extrabold text-white">B</div>
            <p class="mt-6 text-sm font-bold uppercase tracking-wide text-[#2563EB]">@yield('code')</p>
            <h1 class="mt-2 text-2xl font-extrabold">@yield('heading')</h1>
            <p class="mt-3 text-sm leading-6 text-[#6B7280]">@yield('message')</p>
            <a href="{{ route('landing') }}" class="mt-6 inline-flex h-11 items-center justify-center rounded-lg bg-[#2563EB] px-5 text-sm font-bold text-white shadow-[0_8px_24px_rgba(37,99,235,0.20)]">Back to Home</a>
        </section>
    </main>
</body>
</html>
