<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ __('marketing.server_error.title', [], app()->getLocale()) }} · Fotospiel</title>
    @vite(['resources/css/app.css'])
</head>
<body class="min-h-screen bg-gradient-to-br from-slate-900 via-gray-900 to-black text-white antialiased">
    @php
        $statusCode = $statusCode ?? null;
        if (! $statusCode && isset($exception) && method_exists($exception, 'getStatusCode')) {
            $statusCode = $exception->getStatusCode();
        }
        $statusCode = is_numeric($statusCode) ? (int) $statusCode : 500;
        if ($statusCode < 500 || $statusCode >= 600) {
            $statusCode = 500;
        }

        $tips = trans('marketing.server_error.tips');
        if (! is_array($tips) || empty($tips)) {
            $tips = [__(
                'marketing.server_error.tip_fallback',
                [],
                app()->getLocale()
            )];
        }
        $hintMessage = $hint ?? request()->attributes->get('serverErrorHint');
    @endphp

    <main class="relative mx-auto flex min-h-screen max-w-5xl flex-col items-center justify-center px-6 py-16 text-center">
        <div class="pointer-events-none absolute inset-0">
            <div class="absolute -left-32 -top-32 h-96 w-96 rounded-full bg-amber-500/30 blur-3xl"></div>
            <div class="absolute right-0 top-1/3 h-80 w-80 rounded-full bg-rose-500/20 blur-3xl"></div>
            <div class="absolute bottom-0 left-1/2 h-72 w-72 -translate-x-1/2 rounded-full bg-blue-500/20 blur-3xl"></div>
        </div>

        <section class="relative z-10 w-full space-y-8 rounded-3xl border border-white/10 bg-white/5 p-10 shadow-2xl shadow-black/40 backdrop-blur">
            <div class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-xs font-semibold uppercase tracking-widest text-amber-200 shadow-lg shadow-amber-500/30">
                {{ $statusCode }} · {{ __('marketing.server_error.title') }}
            </div>

            <h1 class="text-balance text-4xl font-bold leading-tight text-white sm:text-5xl md:text-6xl">
                {{ __('marketing.server_error.subtitle') }}
            </h1>

            <p class="text-sm text-white/60">
                {{ __('marketing.server_error.status_label') }}:
                <span class="font-mono">{{ $statusCode }}</span>
            </p>

            <p class="mx-auto max-w-2xl text-lg text-white/70 sm:text-xl">
                {{ __('marketing.server_error.description') }}
            </p>

            <div class="flex flex-col gap-6 rounded-3xl border border-white/10 bg-white/10 p-8 text-left shadow-lg shadow-black/30 backdrop-blur md:flex-row md:gap-8">
                <div class="md:w-1/3">
                    <h2 class="text-lg font-semibold uppercase tracking-widest text-amber-200">
                        {{ __('marketing.server_error.tip_heading') }}
                    </h2>
                    <div class="mt-4 h-1 w-16 rounded-full bg-amber-400"></div>
                </div>
                <ul class="space-y-3 text-base text-white/80 md:w-2/3">
                    @foreach($tips as $index => $tip)
                        <li class="flex items-start gap-3">
                            <span class="mt-1 flex h-6 w-6 flex-none items-center justify-center rounded-full bg-white/10 text-xs font-semibold text-amber-200">
                                {{ $index + 1 }}
                            </span>
                            <span>{{ $tip }}</span>
                        </li>
                    @endforeach
                </ul>
            </div>

            @if(! empty($hintMessage))
                <div class="rounded-3xl border border-amber-300/40 bg-amber-500/10 p-6 text-left text-white/80 shadow-inner shadow-amber-900/30">
                    <p class="text-xs font-semibold uppercase tracking-widest text-amber-200">
                        {{ __('marketing.server_error.hint_label') }}
                    </p>
                    <p class="mt-3 text-base text-white">
                        {{ $hintMessage }}
                    </p>
                </div>
            @endif

            <div class="flex flex-col gap-3 sm:flex-row sm:justify-center">
                <a
                    href="{{ route('marketing.home', ['locale' => app()->getLocale()]) }}"
                    class="inline-flex items-center justify-center rounded-full bg-white px-6 py-3 font-medium text-gray-900 shadow-lg shadow-amber-500/30 transition hover:-translate-y-1 hover:bg-amber-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
                >
                    {{ __('marketing.server_error.cta_home') }}
                </a>
                <a
                    href="{{ route('packages', ['locale' => app()->getLocale()]) }}"
                    class="inline-flex items-center justify-center rounded-full border border-white/40 px-6 py-3 font-medium text-white transition hover:-translate-y-1 hover:border-white hover:bg-white/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
                >
                    {{ __('marketing.server_error.cta_packages') }}
                </a>
                <a
                    href="{{ app()->getLocale() === 'en' ? route('marketing.contact', ['locale' => app()->getLocale()]) : route('kontakt', ['locale' => app()->getLocale()]) }}"
                    class="inline-flex items-center justify-center rounded-full border border-transparent bg-gradient-to-r from-amber-500 to-rose-500 px-6 py-3 font-medium text-white shadow-lg shadow-rose-500/30 transition hover:-translate-y-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
                >
                    {{ __('marketing.server_error.cta_contact') }}
                </a>
            </div>
        </section>
    </main>
</body>
</html>
