@php
    $user = Auth::user();
    $name = trim((string) ($user?->name ?? ''));
    $surname = trim((string) ($user?->surname ?? ''));

    if ($user && ! $user->relationLoaded('dealer')) {
        $user->load(['dealer', 'branch']);
    }
    $mobileDealerName = $user?->dealer?->name ?? '—';
    $mobileBranchName = $user?->branch?->name ?? 'No Branch Assigned';

    if ($name === '') {
        $initials = 'U';
    } elseif ($surname !== '') {
        $initials = \Illuminate\Support\Str::upper(
            \Illuminate\Support\Str::substr($name, 0, 1)
            .\Illuminate\Support\Str::substr($surname, 0, 1)
        );
    } else {
        $initials = \Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr($name, 0, 2));
    }
@endphp

<nav class="fixed top-0 left-0 h-14 w-full bg-[var(--dealer-topbar-color)] border-b border-gray-200 shadow-sm z-50">
    <div class="relative h-full px-3 flex items-center">
        <div class="flex items-center">
            <button
                type="button"
                @click="sidebarOpen = !sidebarOpen"
                class="relative top-1 inline-flex items-center justify-center p-1.5 rounded-md border border-neutral-700 bg-neutral-700 text-white shadow-sm hover:bg-neutral-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-white"
                aria-label="Open menu"
            >
                <svg class="h-[18px] w-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
            </button>
        </div>

        {{-- Centered cluster: centered horizontally, title + dealer/branch context --}}
        <div class="pointer-events-none absolute inset-y-0 inset-x-14 flex items-center justify-center">
            <div class="flex flex-col items-center justify-center min-w-0 max-w-full px-1">
                <div class="flex items-end gap-2 min-w-0 max-w-full">
                    <img
                        src="{{ $dealerLogoUrl ?? asset('images/mega-theron-logo.png') }}"
                        alt="Mega Theron Group"
                        class="h-9 w-auto max-w-[160px] object-contain block shrink-0"
                    />
                    <h1 class="min-w-0 truncate text-sm font-semibold text-[var(--dealer-topbar-text-color)] leading-tight">
                        @isset($header)
                            {{ $header }}
                        @else
                            {{ __('Enterprise OS') }}
                        @endisset
                    </h1>
                </div>
                <p class="text-[10px] sm:text-xs text-[var(--dealer-topbar-subtext-color)] truncate max-w-full mt-0.5" aria-label="Dealer and branch context">
                    {{ $mobileDealerName }} · {{ $mobileBranchName }}
                </p>
            </div>
        </div>

        <div class="ml-auto flex items-center justify-end">
            <x-dropdown align="right" width="auto">
                <x-slot name="trigger">
                    <button
                        type="button"
                        class="relative top-1 grid place-items-center h-9 w-9 aspect-square rounded-full border border-neutral-700 bg-[var(--dealer-accent-2-muted-color)] text-[12px] font-semibold tracking-wide text-[var(--dealer-accent-2-text-color)] shadow-sm hover:bg-neutral-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-white shrink-0"
                        aria-label="Open user menu"
                    >
                        <span class="relative top-px block leading-none">{{ $initials }}</span>
                    </button>
                </x-slot>

                <x-slot name="content">
                    <div class="px-3 py-2 border-b border-gray-100 text-xs text-gray-600 space-y-0.5">
                        <div class="font-medium text-gray-900 text-sm">{{ trim($name . ' ' . $surname) ?: '—' }}</div>
                        <div>{{ $mobileDealerName }}</div>
                        <div>Branch: {{ $mobileBranchName }}</div>
                    </div>
                    <x-dropdown-link :href="route('profile.edit')" class="whitespace-nowrap px-3 py-1 text-sm">
                        {{ __('Profile') }}
                    </x-dropdown-link>

                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <x-dropdown-link
                            :href="route('logout')"
                            class="whitespace-nowrap px-3 py-1 text-sm text-red-700 hover:bg-red-50 focus:bg-red-50"
                            onclick="event.preventDefault(); this.closest('form').submit();"
                        >
                            {{ __('Log Out') }}
                        </x-dropdown-link>
                    </form>
                </x-slot>
            </x-dropdown>
        </div>
    </div>
</nav>