@php
    $gridVersion = request()->query('grid') === 'v2' ? 'v2' : 'v1';
@endphp
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}" data-grid-version="{{ $gridVersion }}">
<head>
    <title>{{ $page_title ?? 'Skinbase' }}</title>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="description" content="{{ $page_meta_description ?? '' }}">
    <meta name="keywords" content="{{ $page_meta_keywords ?? '' }}">
    @isset($page_robots)
        <meta name="robots" content="{{ $page_robots }}" />
    @endisset
    @isset($page_canonical)
        <link rel="canonical" href="{{ $page_canonical }}" />
    @endisset
    @isset($page_rel_prev)
        <link rel="prev" href="{{ $page_rel_prev }}" />
    @endisset
    @isset($page_rel_next)
        <link rel="next" href="{{ $page_rel_next }}" />
    @endisset

    {{-- Global RSS feed discovery --}}
    <link rel="alternate" type="application/rss+xml" title="Skinbase Latest Artworks" href="{{ url('/rss') }}">

    <!-- Icons (kept for now to preserve current visual output) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />

    <link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
    <link rel="shortcut icon" href="/favicon/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
    <link rel="manifest" href="/favicon/site.webmanifest" />


    @vite(['resources/css/app.css','resources/css/nova-grid.css','resources/scss/nova.scss','resources/js/nova.js','resources/js/entry-search.jsx'])
    <style>
        /* Card enter animation */
        .nova-card-enter { opacity: 0; transform: translateY(10px) scale(0.995); }
        .nova-card-enter.nova-card-enter-active { transition: transform 380ms cubic-bezier(.2,.9,.2,1), opacity 380ms ease-out; opacity: 1; transform: none; }

        /* Auth card consistency */
        .auth-card { max-width: 720px; margin-left: auto; margin-right: auto; }
        .auth-card h1 { font-size: 1.25rem; line-height: 1.2; }
        .auth-card p { color: rgba(203,213,225,0.9); }
        /* Global heading styles for better hierarchy */
        h1, h2, h3, h4, h5, h6 { color: #ffffff; margin-top: 1rem; margin-bottom: 0.5rem; }
        h1 { font-size: 2.25rem; line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }
        h2 { font-size: 1.5rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
        h3 { font-size: 1.125rem; line-height: 1.2; font-weight: 600; }
        h4 { font-size: 1rem; line-height: 1.25; font-weight: 600; }
        h5 { font-size: 0.95rem; line-height: 1.25; font-weight: 600; }
        h6 { font-size: 0.85rem; line-height: 1.3; font-weight: 600; text-transform: uppercase; opacity: 0.85; }

        /* Prose (typography plugin) overrides */
        .prose h1 { font-size: 2.25rem; }
        .prose h2 { font-size: 1.5rem; }
        .prose h3 { font-size: 1.125rem; }
        .prose h4, .prose h5, .prose h6 { font-weight: 600; }

        /* Alpine: hide x-cloak elements until Alpine picks them up */
        [x-cloak] { display: none !important; }
    </style>
    @stack('head')
    @if(isset($page) && is_array($page))
        @inertiaHead
    @endif

    @if(config('services.google_adsense.publisher_id'))
    {{-- Google AdSense — consent-gated loader --}}
    {{-- Script is only injected after the user accepts all cookies. --}}
    {{-- If consent was given on a previous visit it fires on page load. --}}
    <script>
    (function () {
        var PUB = '{{ config('services.google_adsense.publisher_id') }}';
        var SCRIPT_ID = 'adsense-js';

        function injectAdsense() {
            if (document.getElementById(SCRIPT_ID)) return;
            var s = document.createElement('script');
            s.id = SCRIPT_ID;
            s.async = true;
            s.crossOrigin = 'anonymous';
            s.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=' + PUB;
            document.head.appendChild(s);
        }

        // Expose so Alpine consent banner can trigger immediately on accept
        window.sbLoadAds = injectAdsense;

        // If the user already consented on a previous visit, load straight away
        if (localStorage.getItem('sb_cookie_consent') === 'all') {
            injectAdsense();
        }

        // Handle consent granted in another tab
        window.addEventListener('storage', function (e) {
            if (e.key === 'sb_cookie_consent' && e.newValue === 'all') {
                injectAdsense();
            }
        });
    })();
    </script>
    @endif
</head>
@php
    $authBgRoutes = [
        'login', 'register', 'register.notice', 'password.request', 'password.reset',
        'verification.notice', 'registration.verify', 'setup.password.create', 'setup.username.create', 'password.confirm'
    ];
    $useAuthBackground = request()->route() && in_array(request()->route()->getName(), $authBgRoutes);
    $authBackgrounds = [
        '/gfx/skinbase_back_001.webp',
        '/gfx/skinbase_back_002.webp',
        '/gfx/skinbase_back_003.webp',
        '/gfx/skinbase_back_004.webp',
    ];
    $selectedAuthBg = $useAuthBackground ? $authBackgrounds[array_rand($authBackgrounds)] : null;
@endphp

<body class="bg-nova-900 text-white min-h-screen flex flex-col" @if($selectedAuthBg) style="background: url('{{ $selectedAuthBg }}') center/cover no-repeat; background-attachment: fixed;" @endif>

<!-- React Topbar mount point -->
<div id="topbar-root"
  @auth
    data-user-id="{{ Auth::id() }}"
    data-display-name="{{ Auth::user()->name ?? '' }}"
    data-username="{{ Auth::user()->username ?? '' }}"
    data-avatar-url="{{ \App\Support\AvatarUrl::forUser((int) Auth::id(), optional(Auth::user()->profile)->avatar_hash, 64) }}"
    data-upload-url="{{ Route::has('upload') ? route('upload') : '/upload' }}"
  @endauth
></div>
@include('layouts.nova.toolbar')
<main class="flex-1 @yield('main-class', 'pt-16')">
    @yield('content')
</main>

@include('layouts.nova.footer')

{{-- Toast notifications (Alpine) --}}
@php
    $toastMessage = session('status') ?? session('error') ?? null;
    $toastType = session('error') ? 'error' : 'success';
    $toastBorder = session('error') ? 'border-red-500' : 'border-green-500';
@endphp
@if($toastMessage)
    <div x-data="{show:true}" x-show="show" x-init="setTimeout(()=>show=false,4000)" x-cloak
         class="fixed right-4 bottom-6 z-50">
        <div class="max-w-sm w-full rounded-lg shadow-lg overflow-hidden bg-nova-600 border {{ $toastBorder }}">
            <div class="px-4 py-3 flex items-start gap-3">
                <div class="flex-shrink-0">
                    @if(session('error'))
                        <svg class="w-6 h-6 text-red-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6"/></svg>
                    @else
                        <svg class="w-6 h-6 text-green-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    @endif
                </div>
                <div class="flex-1 text-sm text-white/95">{!! nl2br(e($toastMessage)) !!}</div>
                <button @click="show=false" class="text-white/60 hover:text-white">
                    <svg class="w-5 h-5" viewBox="0 0 20 20" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 6l8 8M6 14L14 6"/></svg>
                </button>
            </div>
        </div>
    </div>
@endif
{{-- Cookie Consent Banner --}}
<div
    x-data="{
        show: false,
        init() {
            if (!localStorage.getItem('sb_cookie_consent')) {
                this.show = true;
            }
        },
        accept() {
            localStorage.setItem('sb_cookie_consent', 'all');
            this.show = false;
            if (typeof window.sbLoadAds === 'function') window.sbLoadAds();
        },
        essential() {
            localStorage.setItem('sb_cookie_consent', 'essential');
            this.show = false;
        }
    }"
    x-show="show"
    x-cloak
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0 translate-y-4"
    x-transition:enter-end="opacity-100 translate-y-0"
    x-transition:leave="transition ease-in duration-200"
    x-transition:leave-start="opacity-100 translate-y-0"
    x-transition:leave-end="opacity-0 translate-y-4"
    class="fixed bottom-0 left-0 right-0 z-50 border-t border-orange-400/30 bg-orange-950/50 backdrop-blur-2xl px-4 md:px-8 py-5"
    role="dialog"
    aria-label="Cookie consent"
    aria-live="polite"
>
    <div class="max-w-6xl mx-auto flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6">
        <div class="flex items-start gap-3 flex-1">
            <span class="text-orange-400 mt-0.5 shrink-0 text-lg">🍪</span>
            <p class="text-sm text-orange-100/90 leading-relaxed">
                We use <strong class="text-white">essential cookies</strong> to keep you logged in and protect your session.
                With your permission we also load <strong class="text-white">advertising cookies</strong> from third-party networks.
                <a href="/privacy-policy#cookies" class="text-orange-300 hover:text-orange-200 hover:underline ml-1">Learn more ↗</a>
            </p>
        </div>
        <div class="flex items-center gap-2 shrink-0">
            <button
                @click="essential()"
                class="rounded-lg border border-orange-400/40 px-4 py-2 text-sm text-orange-200 hover:text-white hover:border-orange-400/70 hover:bg-white/5 transition-colors"
            >Essential only</button>
            <button
                @click="accept()"
                class="rounded-lg bg-orange-500 hover:bg-orange-400 px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-orange-900/40 transition-colors"
            >Accept all</button>
        </div>
    </div>
</div>

@stack('scripts')
</body>
</html>
