{{--
    Shared shell for all error pages. Deliberately self-contained: inline CSS,
    static assets only, no Vite, no database, no session. It must render even
    when everything behind it is on fire.
--}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex">
    <title>@yield('title') &middot; Money-Wise</title>
    <link rel="icon" href="{{ asset('favicon.svg') }}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sora:wght@700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { height: 100%; }
        body {
            font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
            color: #eef3fc;
            background:
                radial-gradient(52rem 34rem at 85% -12%, rgba(88, 185, 230, 0.28), transparent 60%),
                radial-gradient(40rem 30rem at -10% 110%, rgba(246, 183, 60, 0.12), transparent 55%),
                linear-gradient(150deg, #0d142e 0%, #15204a 55%, #1d4c66 100%);
            display: grid;
            place-items: center;
            padding: 2rem 1.25rem;
        }
        .mw-wash {
            position: fixed;
            inset: 0;
            pointer-events: none;
            background: url('{{ asset('images/pattern-kitenge.svg') }}') repeat;
            background-size: 340px;
            opacity: 0.05;
            filter: invert(1) brightness(1.7);
            -webkit-mask-image: radial-gradient(70rem 50rem at 50% 40%, #000, transparent 75%);
            mask-image: radial-gradient(70rem 50rem at 50% 40%, #000, transparent 75%);
        }
        main {
            position: relative;
            width: 100%;
            max-width: 44rem;
            text-align: center;
        }
        .mw-logo img { height: 2.1rem; }
        .mw-hairline {
            width: 4.5rem;
            height: 3px;
            margin: 2.2rem auto 1.6rem;
            border-radius: 999px;
            background: linear-gradient(90deg, #f6b73c, #58b9e6);
        }
        .mw-code {
            font: 800 clamp(4.5rem, 14vw, 7.5rem)/1 'Sora', sans-serif;
            letter-spacing: -0.04em;
            background: linear-gradient(115deg, #8ed4f2 10%, #58b9e6 45%, #b9c6e7 90%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 24px 60px rgba(13, 20, 46, 0.55);
        }
        h1 {
            margin-top: 0.9rem;
            font: 800 clamp(1.45rem, 4.5vw, 2.1rem)/1.2 'Sora', sans-serif;
            letter-spacing: -0.02em;
            color: #fff;
        }
        .mw-lede {
            max-width: 33rem;
            margin: 0.85rem auto 0;
            color: #b9c6e7;
            font-size: 1rem;
            line-height: 1.65;
        }
        .mw-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.75rem;
            margin-top: 2rem;
        }
        .mw-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            padding: 0.85rem 1.6rem;
            border-radius: 999px;
            font-size: 0.95rem;
            font-weight: 700;
            text-decoration: none;
            transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
        }
        .mw-btn:hover { transform: translateY(-1px); }
        .mw-btn-primary {
            background: #58b9e6;
            color: #0d142e;
            box-shadow: 0 16px 34px -14px rgba(88, 185, 230, 0.55);
        }
        .mw-btn-primary:hover { background: #8ed4f2; }
        .mw-btn-ghost {
            border: 1px solid rgba(255, 255, 255, 0.28);
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
        }
        .mw-btn-ghost:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.09); }
        .mw-btn svg { width: 1.05rem; height: 1.05rem; flex: none; }
        .mw-note {
            margin-top: 1.9rem;
            color: #7d90c4;
            font-size: 0.82rem;
            line-height: 1.6;
        }
        .mw-foot {
            margin-top: 2.6rem;
            color: #5d6fa8;
            font-size: 0.74rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }
    </style>
</head>
<body>
    <div class="mw-wash" aria-hidden="true"></div>
    <main>
        <a class="mw-logo" href="{{ url('/') }}" aria-label="Money-Wise home">
            <img src="{{ asset('images/logo-white.png') }}" alt="Money-Wise">
        </a>
        <div class="mw-hairline" aria-hidden="true"></div>
        <p class="mw-code">@yield('code')</p>
        <h1>@yield('headline')</h1>
        <p class="mw-lede">@yield('message')</p>
        <div class="mw-actions">
            <a class="mw-btn mw-btn-primary" href="{{ url('/') }}">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 10.5 9-7.5 9 7.5"/><path d="M5 9.5V21h14V9.5"/></svg>
                Back to the homepage
            </a>
            <a class="mw-btn mw-btn-ghost" id="mw-wa" href="https://wa.me/254112440122?text={{ urlencode('Habari Money-Wise! I ran into a problem on the website (error '.trim($__env->yieldContent('code')).').') }}" target="_blank" rel="noopener">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2a10 10 0 0 0-8.7 14.9L2 22l5.3-1.4A10 10 0 1 0 12 2Zm0 18.2c-1.5 0-3-.4-4.2-1.1l-.3-.2-3.1.8.8-3-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.6-6.1c-.3-.1-1.5-.8-1.8-.9-.2-.1-.4-.1-.6.1-.2.3-.7.9-.8 1-.2.2-.3.2-.6.1a6.8 6.8 0 0 1-3.4-3c-.3-.4 0-.5.2-.7l.5-.6c.1-.2.1-.4 0-.5l-.8-2c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.9.9-1.2 2.1-.6 3.5a12 12 0 0 0 4.6 4.9c1.7 1 2.6 1.1 3.5.9.6-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2 0-.1-.2-.2-.5-.3Z"/></svg>
                Report it on WhatsApp
            </a>
        </div>
        <p class="mw-note">@yield('note')</p>
        <p class="mw-foot">Money-Wise &middot; Invest in knowledge</p>
    </main>
    <script>
        // Attach the page the visitor was on to the WhatsApp report, so the
        // team knows exactly where it happened.
        (function () {
            var link = document.getElementById('mw-wa');
            if (! link) return;
            link.href += encodeURIComponent(' Page: ' + window.location.href);
        })();
    </script>
</body>
</html>
