@props([
    'title',
    'subtitle' => null,
    'backUrl' => null,
    'badge' => null,
    'hideAfia' => false,
])

<div class="sticky top-0 z-20 border-b border-slate-200 bg-white/95 backdrop-blur lg:hidden">
    <div class="flex items-center gap-3 px-4 py-3">
        @if ($backUrl)
            <a href="{{ $backUrl }}"
               class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-200 text-slate-600 transition hover:bg-slate-50">
                <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"/></svg>
            </a>
        @endif
        <div class="min-w-0 flex-1">
            @if ($subtitle)
                <p class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">{{ $subtitle }}</p>
            @endif
            <h1 class="truncate text-base font-semibold text-slate-900">{{ $title }}</h1>
        </div>
        @if ($badge)
            <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600">{{ $badge }}</span>
        @endif
        @unless ($hideAfia)
            @include('partials.afia-button', ['compact' => true])
        @endunless
        {{ $actions ?? '' }}
    </div>
    {{ $slot }}
</div>