@extends('errors.layout')
@section('content')
@php
    $code = trim((string) View::yieldContent('code'));
    $codePalette = [
        '401' => ['bg' => '#fef3c7', 'stroke' => '#f59e0b', 'sub' => __('You need to be authorized to view this page.')],
        '403' => ['bg' => '#fee2e2', 'stroke' => '#ef4444', 'sub' => __('You don\'t have permission to access this resource.')],
        '419' => ['bg' => '#dbe6ff', 'stroke' => '#3b6df0', 'sub' => __('Your session has expired. Please refresh and try again.')],
        '429' => ['bg' => '#fef3c7', 'stroke' => '#f59e0b', 'sub' => __('Too many requests. Please slow down and try again shortly.')],
        '503' => ['bg' => '#e0f2fe', 'stroke' => '#0ea5e9', 'sub' => __('Service is temporarily unavailable. We\'ll be back soon.')],
    ];
    $pal = $codePalette[$code] ?? ['bg' => '#dbe6ff', 'stroke' => '#3b6df0', 'sub' => ''];
@endphp
<div class="max-w-2xl mx-auto text-center">
    <div class="float-anim inline-block">
        <svg width="200" height="200" viewBox="0 0 200 200" fill="none" class="mx-auto">
            <circle cx="100" cy="100" r="92" fill="{{ $pal['bg'] }}"/>
            <circle cx="100" cy="100" r="72" fill="#fff" stroke="{{ $pal['stroke'] }}" stroke-width="2" stroke-dasharray="4 6"/>
            <text x="100" y="118" text-anchor="middle" font-family="Plus Jakarta Sans, sans-serif" font-weight="900" font-size="56" fill="#0a1430">{{ $code }}</text>
            <circle cx="40" cy="40" r="6" fill="#ff8a00"/>
            <circle cx="170" cy="60" r="4" fill="{{ $pal['stroke'] }}"/>
            <circle cx="160" cy="160" r="5" fill="#10b981"/>
        </svg>
    </div>
    <h1 class="font-display font-extrabold text-3xl lg:text-5xl mt-6 leading-tight">@yield('title')</h1>
    <p class="text-slate-500 text-[15px] mt-3 max-w-md mx-auto">@yield('message')@if($pal['sub'])<br><span class="text-slate-400">{{ $pal['sub'] }}</span>@endif</p>

    <div class="flex items-center justify-center gap-3 mt-7 flex-wrap">
        <a href="{{ url('/') }}" class="bg-brand-500 hover:bg-brand-600 text-white font-bold px-6 py-3 rounded-full transition-colors flex items-center gap-2">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/></svg>
            {{ __('Back to home') }}
        </a>
        <a href="javascript:history.back()" class="bg-white hover:bg-slate-50 border-2 border-slate-200 text-deep font-bold px-6 py-3 rounded-full transition-colors flex items-center gap-2">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
            {{ __('Go back') }}
        </a>
    </div>
</div>
@endsection