@php
    $mobileUser = auth('mobile')->user();
    $unreadNewsNotificationCount = $mobileUser
        ? $mobileUser->unreadNotifications()->where('type', \Modules\Mobile\Notifications\NewsLetterPublishedNotification::class)->count()
        : 0;

    $items = [
        [
            'route' => 'm.dashboard',
            'label' => 'Home',
            'icon' => '<path d="M12 3.172 3 10v10h6v-6h6v6h6V10l-9-6.828Z" />',
            'disabled' => false,
        ],
        [
            'route' => 'm.newsletters',
            'label' => 'News',
            'icon' => '<path d="M5 4.75A1.75 1.75 0 0 1 6.75 3h10.5A1.75 1.75 0 0 1 19 4.75v14.5A1.75 1.75 0 0 1 17.25 21H6.75A1.75 1.75 0 0 1 5 19.25V4.75Zm3 1.75v2h8v-2H8Zm0 4v1.5h8V10.5H8Zm0 4v1.5h5v-1.5H8Z" />',
            'disabled' => false,
            'badge' => $unreadNewsNotificationCount,
        ],
        [
            'route' => null,
            'url' => 'https://linktr.ee/LicentiaFranchiseSa',
            'label' => 'Social',
            'icon_image' => asset('images/icons/Link Icon - LinkTree (Black).png'),
            'disabled' => false,
        ],
        [
            'route' => 'm.todos',
            'label' => 'Todo',
            'icon' => '<path d="M9 6.75A1.75 1.75 0 0 1 10.75 5h2.5A1.75 1.75 0 0 1 15 6.75h2.25A1.75 1.75 0 0 1 19 8.5v9.75A1.75 1.75 0 0 1 17.25 20H6.75A1.75 1.75 0 0 1 5 18.25V8.5A1.75 1.75 0 0 1 6.75 6.75H9Zm1 0h4v-.25a.75.75 0 0 0-.75-.75h-2.5a.75.75 0 0 0-.75.75v.25Zm5.28 4.22a.75.75 0 0 0-1.06-1.06l-3 3-1.22-1.22a.75.75 0 0 0-1.06 1.06l1.75 1.75a.75.75 0 0 0 1.06 0l3.53-3.53Z" />',
            'disabled' => false,
        ],
        [
            'route' => 'm.profile',
            'label' => 'Profile',
            'icon' => '<path d="M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4Zm0 2c-4.418 0-8 2.239-8 5v1h16v-1c0-2.761-3.582-5-8-5Z" />',
            'disabled' => false,
        ],
    ];
@endphp

<footer class="fixed inset-x-0 bottom-0 z-30 bg-transparent">
    <div class="mobile-shell-frame mx-auto px-3 pb-3" style="padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));">
        <div class="flex items-center justify-around rounded-3xl bg-white px-3 py-3 shadow-[0_12px_26px_rgba(15,23,42,0.16)] ring-1 ring-slate-200">
            @foreach ($items as $item)
                @php
                    $isActive = $item['route'] ? request()->routeIs($item['route']) : false;
                    $baseClasses = 'mobile-nav-link flex flex-col items-center gap-1 rounded-2xl px-3 py-2 text-[11px] font-medium transition';
                    $matchPaths = [];

                    if ($item['route']) {
                        $matchPaths[] = route($item['route'], [], false);

                        if ($item['route'] === 'm.services') {
                            $matchPaths[] = route('m.services', [], false) . '/';
                        }
                    }
                @endphp

                @if ($item['disabled'])
                    <button
                        type="button"
                        disabled
                        class="{{ $baseClasses }} opacity-50"
                    >
                        <span class="inline-flex rounded-xl p-3 text-slate-500 ring-1 ring-slate-200">
                            @if (!empty($item['icon_image']))
                                <img src="{{ $item['icon_image'] }}" alt="{{ $item['label'] }}" class="h-6 w-6 object-contain" />
                            @else
                                <svg class="mobile-icon-md" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">{!! $item['icon'] !!}</svg>
                            @endif
                        </span>
                        <span>{{ $item['label'] }}</span>
                    </button>
                @else
                    <a
                        href="{{ $item['url'] ?? route($item['route']) }}"
                        @if ($item['route'] && empty($item['url'])) wire:navigate @endif
                        @if (!empty($item['url'])) target="_blank" rel="noopener noreferrer" @endif
                        @if (!empty($item['url'])) data-external-url="{{ $item['url'] }}" onclick="return window.handleMobileExternalLink ? window.handleMobileExternalLink(event, this.dataset.externalUrl) : true" @endif
                        @if ($item['route'] && empty($item['url'])) data-mobile-nav-link @endif
                        @if ($item['route'] && empty($item['url'])) data-mobile-route-match="{{ implode('|', $matchPaths) }}" @endif
                        class="{{ $baseClasses }} {{ $isActive ? 'is-active' : '' }}"
                        @if ($isActive) aria-current="page" @endif
                    >
                        <span class="mobile-nav-icon relative inline-flex rounded-xl p-3">
                            @if (!empty($item['icon_image']))
                                <img
                                    src="{{ $item['icon_image'] }}"
                                    alt="{{ $item['label'] }}"
                                    class="h-6 w-6 object-contain"
                                />
                            @else
                                <svg class="mobile-icon-md" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">{!! $item['icon'] !!}</svg>
                            @endif

                            @if (($item['badge'] ?? 0) > 0)
                                <span class="mobile-nav-badge absolute -right-1 -top-1 inline-flex min-h-5 min-w-5 items-center justify-center rounded-full bg-rose-500 px-1 text-[10px] font-bold text-white">
                                    {{ ($item['badge'] ?? 0) > 99 ? '99+' : ($item['badge'] ?? 0) }}
                                </span>
                            @endif
                        </span>
                        <span>{{ $item['label'] }}</span>
                    </a>
                @endif
            @endforeach
        </div>
    </div>
</footer>