@extends('errors.layout')
@section('title', '500 — Internal Server Error')
@section('content')
<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="#fee2e2"/>
            <circle cx="100" cy="100" r="72" fill="#fff" stroke="#ef4444" 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">500</text>
            <circle cx="40" cy="40" r="6" fill="#ff8a00"/>
            <circle cx="170" cy="60" r="4" fill="#ef4444"/>
            <circle cx="160" cy="160" r="5" fill="#3b6df0"/>
        </svg>
    </div>
    <h1 class="font-display font-extrabold text-3xl lg:text-5xl mt-6 leading-tight">{{ __('Internal Server Error') }}</h1>
    <p class="text-slate-500 text-[15px] mt-3 max-w-md mx-auto">{{ __('Something went wrong on our end. Our team has been notified and is on it. Please try again in a moment.') }}</p>

    @if(isset($exception) && env('APP_DEBUG'))
        <details class="mt-6 max-w-xl mx-auto text-left bg-rose-50 border border-rose-200 rounded-xl p-4">
            <summary class="text-[12px] font-semibold text-rose-700 cursor-pointer">{{ __('Error log (debug)') }}</summary>
            <pre class="text-[11px] text-rose-700 mt-3 overflow-x-auto whitespace-pre-wrap break-words">{{ $exception->getMessage() }}</pre>
        </details>
    @endif

    <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:location.reload()" 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="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg>
            {{ __('Try again') }}
        </a>
    </div>
</div>
@endsection