<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <?php
        $siteSettings = \App\Models\GeneralSetting::getContent();
        $theme = $siteSettings['theme'] ?? [];
        $brandPrimary = $theme['primary'] ?? '#1d4ed8';
        $brandSecondary = $theme['secondary'] ?? '#0f172a';
        $brandAccent = $theme['accent'] ?? '#e1252b';
        $siteLogo = $siteSettings['site']['logo'] ?? null;
        $siteName = $siteSettings['site']['name'] ?? config('app.name');
        $logoUrl = $siteLogo
            ? ((str_starts_with($siteLogo, 'http://') || str_starts_with($siteLogo, 'https://'))
                ? $siteLogo
                : asset('storage/' . ltrim($siteLogo, '/')))
            : null;
        $title = $title ?? 'Something went wrong';
        $code = $code ?? '500';
        $eyebrow = $eyebrow ?? 'Error';
        $message = $message ?? 'Something unexpected happened.';
        $primaryUrl = $primaryUrl ?? url('/');
        $primaryLabel = $primaryLabel ?? 'Go Home';
        $secondaryUrl = $secondaryUrl ?? route('contact');
        $secondaryLabel = $secondaryLabel ?? 'Contact Support';
        $navLinks = [
            ['label' => 'Countries', 'url' => route('countries.index')],
            ['label' => 'Services', 'url' => route('services')],
            ['label' => 'Events', 'url' => route('events.index')],
            ['label' => 'Blogs', 'url' => route('blogs.index')],
        ];
    ?>
    <title><?php echo e($code); ?> - <?php echo e($title); ?> | <?php echo e($siteName); ?></title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
    <style>
        :root {
            --brand-primary: <?php echo e($brandPrimary); ?>;
            --brand-secondary: <?php echo e($brandSecondary); ?>;
            --brand-accent: <?php echo e($brandAccent); ?>;
            --page-bg: #ffffff;
            --text-dark: #121826;
            --text-soft: #7a859d;
            --line: #e7ebf3;
            --sky: rgba(83, 191, 255, 0.22);
            --yellow: #ffe100;
            --purple: #8153f6;
        }

        * { box-sizing: border-box; }
        html, body { margin: 0; padding: 0; }
        body {
            font-family: 'Inter', sans-serif;
            background: var(--page-bg);
            color: var(--text-dark);
        }

        a { color: inherit; text-decoration: none; }

        .page {
            width: min(1400px, calc(100% - 40px));
            min-height: 100vh;
            margin: 0 auto;
            padding: 28px 0 36px;
            display: flex;
            flex-direction: column;
        }

        .topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 14px;
        }

        .brand img {
            max-height: 46px;
            width: auto;
            object-fit: contain;
        }

        .brand-fallback {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--brand-primary);
            color: #fff;
            font-weight: 900;
            font-size: 20px;
        }

        .brand-name {
            font-size: 16px;
            font-weight: 800;
            letter-spacing: -0.02em;
        }

        .nav {
            display: flex;
            align-items: center;
            gap: 42px;
            font-size: 17px;
            font-weight: 500;
        }

        .nav-link:hover {
            opacity: 0.68;
        }

        .cta-btn {
            background: #151515;
            color: #fff;
            padding: 16px 28px;
            border-radius: 4px;
            font-size: 16px;
            font-weight: 700;
            transition: opacity .2s ease;
        }

        .cta-btn:hover {
            opacity: 0.88;
        }

        .hero {
            flex: 1;
            display: grid;
            grid-template-columns: minmax(380px, 530px) minmax(520px, 1fr);
            align-items: center;
            gap: 36px;
            padding: 48px 24px 28px 24px;
        }

        .copy {
            max-width: 500px;
            align-self: center;
        }

        .eyebrow {
            color: #a0a8b8;
            font-size: 16px;
            letter-spacing: 0.02em;
            margin: 0 0 18px;
        }

        .oops {
            margin: 0;
            font-size: clamp(60px, 5.8vw, 84px);
            line-height: 0.94;
            letter-spacing: -0.06em;
            font-weight: 900;
            color: #151515;
        }

        .title {
            margin: 22px 0 0;
            font-size: clamp(42px, 4.4vw, 64px);
            line-height: 1.06;
            letter-spacing: -0.06em;
            font-weight: 400;
            color: #151515;
        }

        .message {
            margin: 40px 0 0;
            font-size: 17px;
            line-height: 1.85;
            color: var(--text-soft);
        }

        .help {
            margin-top: 34px;
            font-size: 16px;
            color: var(--text-soft);
        }

        .link-row {
            margin-top: 18px;
            display: flex;
            flex-wrap: wrap;
            gap: 16px 26px;
            align-items: center;
        }

        .text-link {
            display: inline-block;
            padding-bottom: 4px;
            border-bottom: 1px solid rgba(18, 24, 38, 0.55);
            font-size: 17px;
            transition: opacity .2s ease;
        }

        .text-link:hover {
            opacity: 0.65;
        }

        .art {
            position: relative;
            min-height: 520px;
        }

        .num {
            position: absolute;
            font-size: clamp(200px, 27vw, 340px);
            line-height: 0.82;
            font-weight: 900;
            letter-spacing: -0.1em;
            user-select: none;
            animation: floatY 6s ease-in-out infinite;
        }

        .n1 { left: 1%; top: 29%; color: var(--yellow); }
        .n2 { left: 24%; top: 21%; color: var(--brand-accent); animation-delay: .7s; }
        .n3 { left: 49%; top: 29%; color: var(--purple); animation-delay: 1.4s; }

        .circle {
            position: absolute;
            border-radius: 50%;
            background: var(--sky);
            animation: drift 8s ease-in-out infinite;
        }

        .c1 { width: 138px; height: 138px; left: 28%; top: 11%; }
        .c2 { width: 280px; height: 280px; right: 4%; top: 23%; animation-delay: 1.1s; }

        .dot-grid {
            position: absolute;
            left: 27%;
            top: 29%;
            width: 180px;
            height: 122px;
            opacity: .55;
            background-image: radial-gradient(rgba(255, 88, 112, 0.8) 1.3px, transparent 1.3px);
            background-size: 12px 12px;
        }

        .plus {
            position: absolute;
            font-size: 48px;
            line-height: 1;
            font-weight: 300;
            animation: drift 7.5s ease-in-out infinite;
        }

        .p1 { right: 10%; top: 9%; color: #1298ff; }
        .p2 { right: 0%; top: 22%; color: #1298ff; animation-delay: .9s; }
        .p3 { right: 20%; top: 20%; color: #ff596f; animation-delay: 1.4s; }
        .p4 { left: 8%; bottom: 24%; color: #8b5cf6; animation-delay: 1.1s; }
        .p5 { left: 16%; bottom: 31%; color: #8b5cf6; animation-delay: 1.7s; }
        .p6 { left: 24%; bottom: 23%; color: #8b5cf6; animation-delay: 2.1s; }

        .orbit {
            position: absolute;
            left: 38%;
            bottom: 12%;
            width: 430px;
            height: 116px;
            border: 3px solid #158dff;
            border-radius: 999px;
            transform: rotate(-18deg);
            animation: floatY 7s ease-in-out infinite;
        }

        .astronaut {
            position: absolute;
            left: 47%;
            top: 31%;
            width: 164px;
            height: 290px;
            transform: rotate(-11deg);
            animation: floatY 5.5s ease-in-out infinite;
            animation-delay: .5s;
        }

        .astro-head {
            position: absolute;
            left: 46px;
            top: 0;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: #f2f5f9;
            box-shadow: inset -8px -10px 0 rgba(20, 24, 38, 0.06);
        }

        .astro-visor {
            position: absolute;
            left: 57px;
            top: 12px;
            width: 50px;
            height: 34px;
            border-radius: 20px;
            background: #121826;
        }

        .astro-body {
            position: absolute;
            left: 28px;
            top: 64px;
            width: 112px;
            height: 118px;
            border-radius: 34px;
            background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
            box-shadow: inset -12px -16px 0 rgba(15, 23, 42, 0.05);
        }

        .astro-pack {
            position: absolute;
            left: 78px;
            top: 82px;
            width: 40px;
            height: 72px;
            border-radius: 18px;
            background: #ffe600;
        }

        .astro-arm-left,
        .astro-arm-right,
        .astro-leg-left,
        .astro-leg-right {
            position: absolute;
            background: #f3f5f8;
            border-radius: 999px;
        }

        .astro-arm-left {
            left: -2px;
            top: 94px;
            width: 78px;
            height: 26px;
            transform: rotate(26deg);
        }

        .astro-arm-right {
            right: -12px;
            top: 92px;
            width: 90px;
            height: 26px;
            transform: rotate(-23deg);
        }

        .astro-leg-left {
            left: 48px;
            bottom: 26px;
            width: 28px;
            height: 102px;
            transform: rotate(14deg);
        }

        .astro-leg-right {
            left: 90px;
            bottom: 26px;
            width: 28px;
            height: 102px;
            transform: rotate(-14deg);
        }

        .astro-accent {
            position: absolute;
            left: 28px;
            top: 104px;
            width: 112px;
            height: 64px;
            border-radius: 28px;
            background: linear-gradient(90deg, rgba(255, 88, 112, 0.95), rgba(255, 225, 0, 0.92));
            mix-blend-mode: multiply;
            opacity: 0.92;
        }

        @keyframes floatY {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-12px); }
        }

        @keyframes drift {
            0%, 100% { transform: translate3d(0, 0, 0); }
            50% { transform: translate3d(12px, -10px, 0); }
        }

        @media (max-width: 1100px) {
            .nav { display: none; }
            .hero {
                grid-template-columns: 1fr;
                gap: 10px;
                padding-top: 28px;
            }
            .copy {
                max-width: 100%;
            }
            .art {
                min-height: 420px;
            }
            .num {
                font-size: clamp(150px, 26vw, 240px);
            }
            .orbit {
                width: 280px;
                left: 40%;
            }
            .astronaut {
                transform: scale(.88) rotate(-11deg);
                transform-origin: center;
            }
        }

        @media (max-width: 720px) {
            .page {
                width: min(100%, calc(100% - 28px));
                padding-top: 18px;
            }
            .topbar {
                gap: 16px;
                flex-wrap: wrap;
            }
            .cta-btn {
                padding: 14px 20px;
            }
            .hero {
                padding: 20px 0 8px;
            }
            .title {
                font-size: 40px;
            }
            .message {
                margin-top: 28px;
            }
            .art {
                min-height: 280px;
            }
            .astronaut,
            .p1, .p2, .p3, .p4, .p5, .p6 {
                display: none;
            }
            .orbit {
                width: 180px;
                height: 74px;
                left: 46%;
                bottom: 10%;
            }
        }
    </style>
</head>
<body>
    <div class="page">
        <header class="topbar">
            <a href="<?php echo e(url('/')); ?>" class="brand">
                <?php if($logoUrl): ?>
                    <img src="<?php echo e($logoUrl); ?>" alt="<?php echo e($siteName); ?> logo" />
                <?php else: ?>
                    <span class="brand-fallback">G</span>
                    <span class="brand-name"><?php echo e($siteName); ?></span>
                <?php endif; ?>
            </a>

            <nav class="nav">
                <?php $__currentLoopData = $navLinks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $navLink): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <a class="nav-link" href="<?php echo e($navLink['url']); ?>"><?php echo e($navLink['label']); ?></a>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </nav>

            <a class="cta-btn" href="<?php echo e($primaryUrl); ?>"><?php echo e($primaryLabel); ?></a>
        </header>

        <main class="hero">
            <section class="copy">
                <p class="eyebrow">ERROR CODE: <?php echo e($code); ?></p>
                <h1 class="oops">
                    <?php if($code === '404'): ?>
                        OOOPS!!
                    <?php elseif($code === '403'): ?>
                        STOP!!
                    <?php elseif($code === '419'): ?>
                        EXPIRED!!
                    <?php elseif($code === '429'): ?>
                        EASY!!
                    <?php else: ?>
                        UH-OH!!
                    <?php endif; ?>
                </h1>
                <h2 class="title"><?php echo e($title); ?></h2>
                <p class="message"><?php echo e($message); ?></p>

                <div class="help">
                    Here are some helpful links instead:
                </div>

                <div class="link-row">
                    <a class="text-link" href="<?php echo e(url('/')); ?>">Home</a>
                    <?php $__currentLoopData = array_slice($navLinks, 0, 3); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $helpLink): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <a class="text-link" href="<?php echo e($helpLink['url']); ?>"><?php echo e($helpLink['label']); ?></a>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    <a class="text-link" href="<?php echo e($secondaryUrl); ?>"><?php echo e($secondaryLabel); ?></a>
                </div>
            </section>

            <section class="art" aria-hidden="true">
                <div class="circle c1"></div>
                <div class="circle c2"></div>
                <div class="dot-grid"></div>

                <div class="num n1"><?php echo e($code); ?></div>
                <div class="num n2"><?php echo e($code); ?></div>
                <div class="num n3"><?php echo e($code); ?></div>

                <div class="plus p1">+</div>
                <div class="plus p2">+</div>
                <div class="plus p3">+</div>
                <div class="plus p4">+</div>
                <div class="plus p5">+</div>
                <div class="plus p6">+</div>

                <div class="orbit"></div>

                <div class="astronaut">
                    <div class="astro-head"></div>
                    <div class="astro-visor"></div>
                    <div class="astro-body"></div>
                    <div class="astro-pack"></div>
                    <div class="astro-accent"></div>
                    <div class="astro-arm-left"></div>
                    <div class="astro-arm-right"></div>
                    <div class="astro-leg-left"></div>
                    <div class="astro-leg-right"></div>
                </div>
            </section>
        </main>
    </div>
</body>
</html>
<?php /**PATH C:\xampp\htdocs\gps-migration\resources\views\errors\_error-shell.blade.php ENDPATH**/ ?>