@php
    $mobileUser = auth('mobile')->user();
    $userName = $mobileUser?->contact?->full_name ?: $mobileUser?->username ?: $mobileUser?->email ?: 'Client';
    $notifications = [
        [
            'title' => 'Welcome to the client portal',
            'body' => 'Your mobile dashboard is ready to use.',
            'time' => 'Just now',
            'unread' => true,
        ],
        [
            'title' => 'POPIA accepted',
            'body' => 'Your privacy notice acceptance was recorded successfully.',
            'time' => '2h ago',
            'unread' => true,
        ],
        [
            'title' => 'Newsletter published',
            'body' => 'A new compliance update newsletter is available to read.',
            'time' => 'Yesterday',
            'unread' => false,
        ],
    ];

    $unreadCount = collect($notifications)->where('unread', true)->count();
@endphp

<header class="fixed inset-x-0 top-0 z-30 border-b border-white/10 bg-slate-900/95 text-white backdrop-blur"
    style="background: linear-gradient(90deg, #003B40 0%, #2E98A6 100%);">
    <div class="mobile-shell-frame mx-auto flex items-center justify-between gap-3 px-4 py-2.5" style="padding-top: calc(0.45rem + env(safe-area-inset-top));">
        <div class="min-w-0 flex items-center gap-3">
            <img
                src="{{ asset('images/logo_icon.jpg') }}"
                alt="Licentia"
                class="mobile-avatar rounded-2xl object-cover shadow-lg shadow-black/15"
            />
            <div class="min-w-0">
                <p id="mobile-shell-title" class="truncate text-sm font-semibold">{{ $pageTitle ?? 'Mobile Portal' }}</p>
                <p class="truncate text-xs text-white/80">{{ $userName }}</p>
            </div>
        </div>

        <div class="flex items-center gap-2">
            <details class="group relative">
                <summary class="flex list-none cursor-pointer items-center rounded-2xl border border-white/20 bg-white/10 px-3 py-2 text-white transition hover:bg-white/15">
                    <div class="relative">
                        <svg class="mobile-icon-md" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                            <path d="M12 3a4 4 0 0 0-4 4v1.11c0 .49-.18.96-.51 1.32L6.2 10.86A3 3 0 0 0 5.5 12.9V15l-1.28 2.56A1 1 0 0 0 5.11 19h13.78a1 1 0 0 0 .89-1.45L18.5 15v-2.1a3 3 0 0 0-.7-2.04l-1.29-1.43A1.98 1.98 0 0 1 16 8.11V7a4 4 0 0 0-4-4Zm0 18a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 21Z" />
                        </svg>
                        @if ($unreadCount > 0)
                            <span class="absolute -right-1 -top-1 inline-flex min-h-4 min-w-4 items-center justify-center rounded-full bg-emerald-400 px-1 text-[10px] font-bold text-slate-900">
                                {{ $unreadCount }}
                            </span>
                        @endif
                    </div>
                </summary>

                <div class="absolute right-0 top-[calc(100%+0.75rem)] w-[18rem] rounded-3xl bg-white p-3 text-slate-900 shadow-2xl ring-1 ring-black/5">
                    <div class="mb-2 flex items-center justify-between px-1">
                        <p class="text-sm font-semibold text-slate-900">Notifications</p>
                        <span class="text-[11px] text-slate-400">Sample data</span>
                    </div>

                    <div class="space-y-2">
                        @foreach ($notifications as $notification)
                            <div class="rounded-2xl border border-slate-100 bg-slate-50 px-3 py-3">
                                <div class="flex items-start justify-between gap-2">
                                    <p class="text-xs font-semibold text-slate-900">{{ $notification['title'] }}</p>
                                    @if ($notification['unread'])
                                        <span class="mt-0.5 h-2.5 w-2.5 rounded-full bg-emerald-500"></span>
                                    @endif
                                </div>
                                <p class="mt-1 text-xs leading-5 text-slate-600">{{ $notification['body'] }}</p>
                                <p class="mt-2 text-[11px] text-slate-400">{{ $notification['time'] }}</p>
                            </div>
                        @endforeach
                    </div>
                </div>
            </details>

            <form method="POST" action="{{ route('m.logout') }}">
                @csrf
                <button
                    type="submit"
                    class="rounded-2xl border border-white/20 bg-white/10 px-3 py-2 text-xs font-semibold tracking-wide text-white transition hover:bg-white/15"
                >
                    Logout
                </button>
            </form>
        </div>
    </div>
</header>