<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#07182E"/>
    <meta name="author" content="Techno Artisan">
    <meta name="referrer" content="origin">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="robots" content="noindex, nofollow">

    <title>{{ fcms__('global.website_title') }} | @yield('title')</title>

    <link rel="icon" href="/vendor/filament-cms/img/favicon-16.png">

    @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    @endif
</head>
<body class="bg-[linear-gradient(135deg,_#174bac,_#0f1629_50%,_#060c1c)] text-gray-100 min-h-screen">

{{-- fixed background image --}}
<div class="fixed inset-0 -z-10 pt-24">
    <picture class="block w-full h-full">
        <img
            src="/vendor/filament-cms/img/Techno_Artisan__Warehouse__HardGroove_Acid_Schranz_Hard_Techno.webp"
            alt="Techno Artisan + Warehouse - HardGroove, Acid, Schranz, Hard_Techno"
            class="w-full h-full object-cover"
            loading="eager"
            decoding="async"
        >
    </picture>
</div>

{{-- Navigation --}}
<nav class="fixed w-full top-0 z-50 bg-gray-900/90 backdrop-blur-md border-b border-blue-500/30">
    <div class="container mx-auto px-4 py-4">
        <div class="flex justify-between items-center">
            <div class="flex items-center justify-center text-2xl text-blue-400 glow-text top-title">
                <div class="w-16 glow rounded-full p-px bg-gradient-to-br from-blue-700 to-blue-900">
                    <a href="/{{ app()->getLocale() }}" title="{{ fcms__('global.navigation.home') }}">
                        <img src="{{ asset('vendor/filament-cms/img/Techno-Artisan__top-logo.png') }}"
                             alt="Techno Artisan Logo" class="rounded-full">
                    </a>
                </div>
                <a href="/{{ app()->getLocale() }}" title="{{ fcms__('global.navigation.home') }}" class="ml-10 font-brand light">
                    {{ fcms__('global.top_navigation_title') }}
                </a>
            </div>
        </div>
    </div>
</nav>

{{-- Error Content --}}
<main class="min-h-screen flex bg-gray-900/40 items-center justify-center px-4 pt-20 pb-24">
    <div class="text-center max-w-2xl mx-auto">

        {{-- Error Code --}}
        <div class="text-[8rem] sm:text-[12rem] font-bold leading-none
                    text-transparent bg-clip-text
                    bg-linear-to-b from-blue-400 to-blue-900
                    drop-shadow-[0_0_40px_rgba(59,130,246,0.4)]
                    select-none">
            @yield('code')
        </div>

        {{-- Headline --}}
        <h1 class="text-2xl sm:text-3xl font-bold text-white mt-4 mb-3 tracking-wide">
            @yield('headline')
        </h1>

        {{-- Message --}}
        <p class="text-gray-400 text-lg mb-10 leading-relaxed">
            @yield('message')
        </p>

        {{-- Back Home Button --}}
        <a href="/{{ app()->getLocale() }}"
           title="{{ fcms__('errors.back_home_title') }}"
           class="inline-block px-8 py-3 rounded-full
                  border border-blue-500/60
                  bg-blue-900/30 hover:bg-blue-800/50
                  text-blue-300 hover:text-white
                  backdrop-blur-sm
                  transition-all duration-300
                  tracking-widest uppercase text-sm font-semibold
                  shadow-[0_0_20px_rgba(59,130,246,0.2)] hover:shadow-[0_0_30px_rgba(59,130,246,0.4)]">
            ← {{ fcms__('errors.back_home') }}
        </a>

    </div>
</main>

@include(FilamentCms::getViewPrefix() . '.partials.footer', ['currentLocale' => app()->getLocale(), 'pageKey' => 'home'])

</body>
</html>
