@php
    $scriptNonce = $cspNonce ?? request()->attributes->get('csp_script_nonce');
@endphp

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" @class(['dark' => ($appearance ?? 'system') == 'dark'])>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        @if($scriptNonce)
            <meta name="csp-nonce" content="{{ $scriptNonce }}">
        @endif

        {{-- Inline script to detect system dark mode preference and apply it immediately --}}
        <script @if($scriptNonce) nonce="{{ $scriptNonce }}" @endif>
            (function() {
                const appearance = '{{ $appearance ?? "system" }}';
                window.__CSP_NONCE = '{{ $scriptNonce }}';

                if (appearance === 'system') {
                    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

                    if (prefersDark) {
                        document.documentElement.classList.add('dark');
                    }
                }
            })();
        </script>

        <title inertia>{{ config('app.name', 'Laravel') }}</title>

        <link rel="icon" href="{{ asset('favicon.ico') }}" type="image/x-icon">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">

        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />

        @viteReactRefresh
        @vite(['resources/css/app.css', 'resources/js/app.tsx', "resources/js/pages/{$page['component']}.tsx"])
        @inertiaHead
    </head>
    <body class="font-sans antialiased">
        @php
            $noscriptLocale = in_array(app()->getLocale(), ['de', 'en'], true) ? app()->getLocale() : 'de';
        @endphp
        <noscript>
            <style>
                #app { display: none !important; }
            </style>
            <div class="min-h-screen bg-slate-950 text-white" style="background:#0b1224;color:#fff;">
                <div class="mx-auto flex max-w-4xl flex-col gap-10 px-6 py-14">
                    <header class="space-y-2">
                        <p class="text-xs font-semibold uppercase tracking-[0.2em] text-pink-300">Fotospiel</p>
                        <h1 class="text-3xl font-semibold sm:text-4xl">Diese Anwendung benötigt JavaScript</h1>
                        <p class="text-base text-white/70 sm:text-lg">Aktiviere JavaScript, um die interaktive Oberfläche zu nutzen.</p>
                    </header>

                    <section class="grid gap-4 sm:grid-cols-2">
                        <div class="rounded-2xl border border-white/10 bg-white/5 p-5 shadow-lg backdrop-blur" style="border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.05);">
                            <h2 class="text-xl font-semibold text-white">Was sonst fehlt</h2>
                            <ul class="mt-3 space-y-2 text-sm text-white/80">
                                <li>• Live-Navigation und Aktionen</li>
                                <li>• Inline-Formulare und Validierung</li>
                                <li>• Hintergrund-Sync und Benachrichtigungen</li>
                            </ul>
                        </div>
                        <div class="rounded-2xl border border-white/10 bg-white/5 p-5 shadow-lg backdrop-blur" style="border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.05);">
                            <h2 class="text-xl font-semibold text-white">Nächste Schritte</h2>
                            <ol class="mt-3 space-y-2 text-sm text-white/80">
                                <li>1) JavaScript im Browser aktivieren</li>
                                <li>2) Seite neu laden</li>
                                <li>3) Optional: Admin-App zum Homescreen hinzufügen</li>
                            </ol>
                            <div class="mt-4 flex flex-wrap gap-3">
                                <a href="{{ route('marketing.contact', ['locale' => $noscriptLocale]) }}" class="inline-flex items-center justify-center rounded-full bg-pink-500 px-4 py-2 text-sm font-semibold text-white shadow-lg transition hover:bg-pink-400" style="color:#fff;text-decoration:none;background:#ec4899;">
                                    Support kontaktieren
                                </a>
                                <a href="{{ route('impressum', ['locale' => $noscriptLocale]) }}" class="inline-flex items-center justify-center rounded-full border border-white/20 px-4 py-2 text-sm font-semibold text-white/80 transition hover:border-white/40" style="color:#e5e7eb;text-decoration:none;border:1px solid rgba(255,255,255,0.2);">
                                    Impressum
                                </a>
                                <a href="{{ route('datenschutz', ['locale' => $noscriptLocale]) }}" class="inline-flex items-center justify-center rounded-full border border-white/20 px-4 py-2 text-sm font-semibold text-white/80 transition hover:border-white/40" style="color:#e5e7eb;text-decoration:none;border:1px solid rgba(255,255,255,0.2);">
                                    Datenschutz
                                </a>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </noscript>
        @inertia
    </body>
</html>
