@props(['title' => null, 'description' => null, 'canonical' => null, 'noindex' => false])
@php
    // Links appear as their pages are built; nothing points at a missing route.
    $links = collect([
        ['Features', 'features'],
        ['Individual', 'cms.individual'],
        ['Organisation', 'cms.organisation'],
        ['Pricing', 'pricing'],
        ['Manual', 'manual'],
        ['FAQ', 'faq'],
    ])->filter(fn ($l) => Route::has($l[1]));
    $announcements = \App\Modules\CMS\Models\CmsAnnouncement::activeFor('public')->latest('starts_at')->limit(3)->get();
@endphp
<x-layouts.base :title="$title" :description="$description" :canonical="$canonical" :noindex="$noindex" body-class="bg-white text-slate-900">
    <div x-data="{ open: false }" class="flex min-h-full flex-col">
        @foreach ($announcements as $announcement)
            <div x-data="{ hidden: (() => { try { return localStorage.getItem('fms-ann-{{ $announcement->id }}') === '1' } catch (e) { return false } })() }"
                 x-show="! hidden" role="status"
                 @class([
                     'border-b px-4 py-2 text-center text-sm',
                     'border-sky-200 bg-sky-50 text-sky-900' => $announcement->level === 'info',
                     'border-emerald-200 bg-emerald-50 text-emerald-900' => $announcement->level === 'success',
                     'border-amber-200 bg-amber-50 text-amber-900' => $announcement->level === 'warning',
                 ])>
                <strong>{{ $announcement->title }}</strong>
                @if ($announcement->body) — {{ $announcement->body }} @endif
                @if ($announcement->link_url)
                    <a href="{{ $announcement->link_url }}" class="ml-1 font-medium underline" rel="noopener">{{ $announcement->link_text ?: 'Learn more' }}</a>
                @endif
                <button type="button" class="ml-3 opacity-60 hover:opacity-100" aria-label="Dismiss announcement"
                        @click="hidden = true; try { localStorage.setItem('fms-ann-{{ $announcement->id }}', '1') } catch (e) {}">✕</button>
            </div>
        @endforeach
        <header class="sticky top-0 z-30 border-b border-slate-200/80 bg-white/85 backdrop-blur-md" x-on:keydown.escape.window="open = false">
            <div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6">
                <a href="{{ route('home') }}" class="flex items-center gap-2.5 font-semibold tracking-tight text-slate-900">
                    <span class="grid h-9 w-9 place-items-center rounded-xl bg-brand-600 text-sm font-bold text-white shadow-md shadow-brand-600/30">{{ mb_substr(config('app.name'), 0, 1) }}</span>
                    {{ config('app.name') }}
                </a>

                <nav class="hidden items-center gap-1 text-sm md:flex" aria-label="Main">
                    @foreach ($links as [$label, $route])
                        <a href="{{ route($route) }}" class="rounded-lg px-3 py-2 transition-colors {{ request()->routeIs($route) ? 'bg-brand-50 font-medium text-brand-700' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900' }}">{{ $label }}</a>
                    @endforeach
                </nav>

                <div class="hidden items-center gap-3 md:flex">
                    @auth('web')
                        <x-ui.button :href="route('individual.dashboard')">Open my dashboard</x-ui.button>
                    @else
                        <a href="{{ route('login') }}" class="rounded-lg px-3 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-100">Log in</a>
                        <x-ui.button :href="route('register')">Get started</x-ui.button>
                    @endauth
                </div>

                <button type="button" class="-mr-2 rounded-lg p-2 text-slate-600 hover:bg-slate-100 md:hidden" x-on:click="open = !open" :aria-expanded="open.toString()" aria-label="Toggle menu">
                    <x-ui.icon name="menu" class="h-6 w-6" x-show="! open" />
                    <x-ui.icon name="x" class="h-6 w-6" x-show="open" x-cloak />
                </button>
            </div>

            <nav x-show="open" x-cloak x-transition.origin.top class="border-t border-slate-200 bg-white px-4 pb-4 pt-2 shadow-lg md:hidden" aria-label="Mobile">
                @foreach ($links as [$label, $route])
                    <a href="{{ route($route) }}" @class(['block rounded-lg px-3 py-2.5 text-base', 'bg-brand-50 font-medium text-brand-700' => request()->routeIs($route), 'text-slate-700 hover:bg-slate-50' => ! request()->routeIs($route)])>{{ $label }}</a>
                @endforeach
                <div class="mt-3 grid grid-cols-2 gap-3 border-t border-slate-100 pt-4">
                    @auth('web')
                        <x-ui.button :href="route('individual.dashboard')" class="col-span-2">Open my dashboard</x-ui.button>
                    @else
                        <x-ui.button variant="secondary" :href="route('login')">Log in</x-ui.button>
                        <x-ui.button :href="route('register')">Get started</x-ui.button>
                    @endauth
                </div>
            </nav>
        </header>

        <main id="main" class="page-enter flex-1">
            {{ $slot }}
        </main>

        <footer class="border-t border-slate-200 bg-slate-50">
            <div class="mx-auto flex max-w-7xl flex-col gap-2 px-4 py-8 text-sm text-slate-500 sm:flex-row sm:justify-between sm:px-6">
                <p>&copy; {{ now()->year }} {{ config('app.name') }}. All rights reserved.</p>
                <div class="flex gap-4">
                    @foreach ([['About', 'about'], ['Contact', 'contact'], ['Terms', 'terms'], ['Privacy', 'privacy']] as [$label, $route])
                        @if (Route::has($route))
                            <a href="{{ route($route) }}" class="hover:text-brand-700">{{ $label }}</a>
                        @endif
                    @endforeach
                </div>
            </div>
        </footer>
    </div>
</x-layouts.base>