@once
    <style>
        .site-header {
            background: rgba(255, 255, 255, .92);
            border-bottom: 1px solid var(--line, var(--color-outline-variant, #dbe6ef));
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            z-index: 1030;
        }

        .brand-mark {
            width: 42px;
            height: 42px;
            border: 1px solid var(--line, var(--color-outline-variant, #dbe6ef));
            border-radius: 12px;
            background: #fff;
            display: grid;
            place-items: center;
            flex-shrink: 0;
            overflow: hidden;
            padding: 3px;
        }

        .brand-mark img {
            display: block;
            height: 100%;
            object-fit: contain;
            width: 100%;
        }

        .site-nav-link {
            color: #516275;
            font-weight: 700;
            text-decoration: none;
            transition: color .2s ease;
        }

        .site-nav-link:hover {
            color: var(--brand, var(--color-primary, #004b89));
        }

        .site-nav-link.active {
            color: var(--brand, var(--color-primary, #004b89));
        }

        .site-header .btn-primary {
            --bs-btn-bg: var(--brand, var(--color-primary, #004b89));
            --bs-btn-border-color: var(--brand, var(--color-primary, #004b89));
            --bs-btn-hover-bg: #003b6d;
            --bs-btn-hover-border-color: #003b6d;
            font-weight: 700;
        }

        .site-header .btn-outline-primary {
            --bs-btn-color: var(--brand, var(--color-primary, #004b89));
            --bs-btn-border-color: var(--brand, var(--color-primary, #004b89));
            --bs-btn-hover-bg: var(--brand, var(--color-primary, #004b89));
            --bs-btn-hover-border-color: var(--brand, var(--color-primary, #004b89));
            font-weight: 700;
        }

        .btn-primary-action,
        .btn-outline-action {
            align-items: center;
            border-radius: 8px;
            display: inline-flex;
            font-family: 'JetBrains Mono', Inter, monospace;
            font-size: 13px;
            font-weight: 700;
            gap: 8px;
            justify-content: center;
            min-height: 42px;
            padding: 10px 18px;
            text-decoration: none;
            transition: filter .15s, background .15s, border-color .15s, color .15s;
        }

        .btn-primary-action {
            background: var(--brand, var(--color-primary, #004b89));
            border: 1px solid var(--brand, var(--color-primary, #004b89));
            color: #fff;
        }

        .btn-primary-action:hover {
            color: #fff;
            filter: brightness(1.08);
        }

        .btn-outline-action {
            background: #fff;
            border: 1px solid var(--line, var(--color-outline-variant, #c2c6d2));
            color: var(--color-on-surface, #172635);
        }

        .btn-outline-action:hover {
            background: var(--color-surface-container-low, #eef4ff);
            color: var(--brand, var(--color-primary, #004b89));
        }

        .site-profile-link {
            align-items: center;
            color: var(--color-on-surface, #172635);
            display: inline-flex;
            font-weight: 700;
            gap: 10px;
            max-width: 260px;
            text-decoration: none;
        }

        .site-profile-icon {
            align-items: center;
            background: var(--brand, var(--color-primary, #004b89));
            border-radius: 999px;
            color: #fff;
            display: inline-flex;
            height: 38px;
            justify-content: center;
            width: 38px;
        }

        .site-profile-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .site-profile-copy {
            display: flex;
            flex-direction: column;
            line-height: 1.1;
            min-width: 0;
            text-align: right;
        }

        .site-profile-greeting {
            color: var(--color-on-surface, #172635);
            font-size: 13px;
            font-weight: 800;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .site-profile-role {
            color: #7a8797;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .05em;
            margin-top: 2px;
            text-transform: uppercase;
        }

        .site-profile-menu-button {
            align-items: center;
            background: transparent;
            border: 0;
            color: var(--color-on-surface, #172635);
            display: inline-flex;
            font-weight: 700;
            gap: 10px;
            max-width: 260px;
            padding: 0;
        }

        .site-profile-menu-button::after {
            display: none;
        }

        .site-profile-dropdown {
            border: 1px solid var(--line, var(--color-outline-variant, #dbe6ef));
            border-radius: 14px;
            box-shadow: 0 18px 42px rgba(18, 50, 74, .14);
            min-width: 210px;
            padding: 8px;
        }

        .site-profile-dropdown .dropdown-item {
            align-items: center;
            border-radius: 10px;
            display: flex;
            font-weight: 700;
            gap: 10px;
            padding: 10px 12px;
        }

        .site-profile-dropdown .dropdown-item:hover {
            background: #eef7ff;
            color: var(--brand, var(--color-primary, #004b89));
        }

        .site-profile-dropdown .dropdown-item.text-danger:hover {
            background: #fff1f1;
            color: #9f1d1d !important;
        }

        .site-profile-dropdown .dropdown-header {
            color: #7a8797;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .04em;
            padding: 8px 12px 6px;
            text-transform: uppercase;
        }

        .site-bottom-nav {
            display: none;
        }

        @media (max-width: 991.98px) {
            body {
                padding-bottom: 88px;
            }

            .site-profile-link {
                max-width: min(44vw, 220px);
            }

            .site-bottom-nav {
                background: rgba(255, 255, 255, .96);
                border-top: 1px solid var(--line, var(--color-outline-variant, #dbe6ef));
                bottom: 0;
                box-shadow: 0 -14px 34px rgba(18, 50, 74, .14);
                display: block;
                left: 0;
                padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
                position: fixed;
                right: 0;
                z-index: 1040;
            }

            .site-bottom-nav-inner {
                align-items: end;
                display: grid;
                gap: 4px;
                grid-template-columns: repeat(var(--bottom-nav-count, 5), minmax(0, 1fr));
                margin: 0 auto;
                max-width: 620px;
            }

            .site-bottom-link {
                align-items: center;
                border-radius: 14px;
                color: #8a94a3;
                display: flex;
                flex-direction: column;
                font-size: 11px;
                font-weight: 700;
                gap: 3px;
                justify-content: center;
                min-height: 56px;
                padding: 6px 4px;
                text-decoration: none;
                transition: background .18s ease, color .18s ease, transform .18s ease;
            }

            .site-bottom-link .material-symbols-outlined {
                color: currentColor;
                font-size: 23px;
                line-height: 1;
            }

            .site-bottom-link:hover,
            .site-bottom-link.active {
                background: #eef7ff;
                color: var(--brand, var(--color-primary, #004b89));
            }

            .site-bottom-link:hover {
                transform: translateY(-1px);
            }

            .site-bottom-link.is-primary {
                margin-top: -28px;
            }

            .site-bottom-link.is-primary .site-bottom-primary-icon {
                align-items: center;
                background: linear-gradient(135deg, var(--brand, var(--color-primary, #004b89)), #4f46e5);
                border: 6px solid #fff;
                border-radius: 999px;
                box-shadow: 0 12px 24px rgba(0, 75, 137, .26);
                color: #fff;
                display: inline-flex;
                height: 58px;
                justify-content: center;
                margin-bottom: 1px;
                width: 58px;
            }

            .site-bottom-link.is-primary .material-symbols-outlined {
                color: #fff;
                font-size: 30px;
            }

            .site-bottom-link.is-primary:hover,
            .site-bottom-link.is-primary.active {
                background: transparent;
                color: var(--brand, var(--color-primary, #004b89));
            }
        }

        @media (max-width: 575.98px) {
            .brand-mark {
                height: 38px;
                width: 38px;
            }

            .site-profile-link {
                gap: 6px;
                max-width: 150px;
            }

            .site-profile-icon {
                height: 36px;
                width: 36px;
            }
        }

        @media (max-width: 380px) {
            .site-profile-text,
            .site-profile-copy {
                display: none;
            }
        }
    </style>
@endonce

@php
    $headerCustomer = $frontendCustomer ?? null;

    if (! $headerCustomer instanceof \App\Models\CustomerProfile && session()->has('frontend_customer_id')) {
        $headerCustomer = \App\Models\CustomerProfile::query()->find(session('frontend_customer_id'));
    }

    $headerCustomerLabel = null;
    $headerCustomerRoute = route('frontend.customer.login');

    if ($headerCustomer instanceof \App\Models\CustomerProfile) {
        $headerCustomerLabel = $headerCustomer->name ?: $headerCustomer->mobile;
        $headerCustomerRoute = $headerCustomer->isProfileComplete()
            ? route('frontend.customer.dashboard')
            : route('frontend.customer.profile');
    }

    $headerProvider = $frontendProvider ?? null;

    if (! $headerProvider instanceof \App\Models\ProviderProfile && session()->has('frontend_provider_id')) {
        $headerProvider = \App\Models\ProviderProfile::query()->find(session('frontend_provider_id'));
    }

    $headerProviderLabel = null;
    $headerProviderRoute = route('frontend.provider.login');

    if ($headerProvider instanceof \App\Models\ProviderProfile) {
        $headerProviderLabel = $headerProvider->business_name ?: ($headerProvider->name ?: $headerProvider->mobile);
        $headerProviderRoute = $headerProvider->isProfileComplete()
            ? route('frontend.provider.dashboard')
            : route('frontend.provider.profile');
    }

    $activeCategoryType = request()->routeIs('frontend.category-list') ? request()->route('type') : null;
    $activeCategoryType = [
        'job' => 'jobs',
        'rent' => 'rentals',
        'rental' => 'rentals',
        'hostel' => 'hostels',
        'service' => 'services',
    ][$activeCategoryType] ?? $activeCategoryType;

    $headerProviderComplete = $headerProvider instanceof \App\Models\ProviderProfile
        ? $headerProvider->isProfileComplete()
        : false;
    $headerCustomerComplete = $headerCustomer instanceof \App\Models\CustomerProfile
        ? $headerCustomer->isProfileComplete()
        : false;

    if ($headerProvider instanceof \App\Models\ProviderProfile) {
        $bottomNavItems = [
            ['label' => 'Home', 'icon' => 'home', 'href' => $headerProviderComplete ? route('frontend.provider.dashboard') : route('frontend.provider.profile'), 'active' => request()->routeIs('frontend.provider.dashboard')],
            ['label' => 'Listings', 'icon' => 'list_alt', 'href' => $headerProviderComplete ? route('frontend.provider.lists') : route('frontend.provider.profile'), 'active' => request()->routeIs('frontend.provider.lists*')],
            ['label' => 'Add', 'icon' => 'add', 'href' => $headerProviderComplete ? route('frontend.provider.add-list') : route('frontend.provider.profile'), 'active' => request()->routeIs('frontend.provider.add-list'), 'primary' => true],
            ['label' => 'Reviews', 'icon' => 'reviews', 'href' => $headerProviderComplete ? route('frontend.provider.reviews') : route('frontend.provider.profile'), 'active' => request()->routeIs('frontend.provider.reviews*')],
            ['label' => 'Subs', 'icon' => 'credit_card', 'href' => $headerProviderComplete ? route('frontend.provider.subscription') : route('frontend.provider.profile'), 'active' => request()->routeIs('frontend.provider.subscription*')],
        ];
    } elseif ($headerCustomer instanceof \App\Models\CustomerProfile) {
        $bottomNavItems = [
            ['label' => 'Home', 'icon' => 'home', 'href' => $headerCustomerComplete ? route('frontend.customer.dashboard') : route('frontend.customer.profile'), 'active' => request()->routeIs('frontend.customer.dashboard')],
            ['label' => 'Saved', 'icon' => 'bookmark', 'href' => $headerCustomerComplete ? route('frontend.customer.saved') : route('frontend.customer.profile'), 'active' => request()->routeIs('frontend.customer.saved')],
            ['label' => 'Explore', 'icon' => 'search', 'href' => route('frontend.category-list'), 'active' => request()->routeIs('frontend.category-list')],
            ['label' => 'Profile', 'icon' => 'person', 'href' => route('frontend.customer.profile'), 'active' => request()->routeIs('frontend.customer.profile'), 'primary' => true],
        ];
    } else {
        $bottomNavItems = [
            ['label' => 'Home', 'icon' => 'home', 'href' => route('frontend.home'), 'active' => request()->routeIs('frontend.home')],
            ['label' => 'Explore', 'icon' => 'search', 'href' => route('frontend.category-list'), 'active' => request()->routeIs('frontend.category-list') && ! $activeCategoryType],
            ['label' => 'Jobs', 'icon' => 'work', 'href' => route('frontend.category-list', ['type' => 'jobs']), 'active' => $activeCategoryType === 'jobs', 'primary' => true],
            ['label' => 'Provider', 'icon' => 'storefront', 'href' => route('frontend.provider.login'), 'active' => request()->routeIs('frontend.provider.login')],
            ['label' => 'Sign up', 'icon' => 'person_add', 'href' => route('frontend.customer.login'), 'active' => request()->routeIs('frontend.customer.login')],
        ];
    }
@endphp

<header class="site-header sticky-top">
    <nav class="container d-flex align-items-center justify-content-between py-3">
        <a class="d-flex align-items-center gap-2 text-decoration-none" href="{{ route('frontend.home') }}">
            <span class="brand-mark">
                <img src="{{ asset('images/Fily-logo.png') }}" alt="Fily logo">
            </span>
            <span class="fw-bold fs-4 text-dark">Fily</span>
        </a>

        <div class="d-none d-lg-flex align-items-center gap-4">
            <a class="site-nav-link" href="{{ route('frontend.home') }}">Home</a>
            <a class="site-nav-link {{ request()->routeIs('frontend.category-list') && ! $activeCategoryType ? 'active' : '' }}" href="{{ route('frontend.category-list') }}">Explore</a>
            <a class="site-nav-link {{ $activeCategoryType === 'jobs' ? 'active' : '' }}" href="{{ route('frontend.category-list', ['type' => 'jobs']) }}">Jobs</a>
            <a class="site-nav-link {{ $activeCategoryType === 'rentals' ? 'active' : '' }}" href="{{ route('frontend.category-list', ['type' => 'rentals']) }}">Rentals</a>
            <a class="site-nav-link {{ $activeCategoryType === 'services' ? 'active' : '' }}" href="{{ route('frontend.category-list', ['type' => 'services']) }}">Services</a>
            <a class="site-nav-link" href="{{ route('frontend.home') }}#plans">Pricing</a>
            <a class="site-nav-link" href="{{ route('frontend.home') }}#contact">Contact</a>
        </div>

        <div class="d-flex align-items-center gap-2">
            @if ($headerCustomer instanceof \App\Models\CustomerProfile)
                <div class="dropdown">
                    <button class="site-profile-menu-button dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <span class="site-profile-copy">
                            <span class="site-profile-greeting">Hello, {{ $headerCustomerLabel }}</span>
                            <span class="site-profile-role">Customer</span>
                        </span>
                        <span class="site-profile-icon"><span class="material-symbols-outlined">person</span></span>
                    </button>
                    <div class="dropdown-menu dropdown-menu-end site-profile-dropdown">
                        <div class="dropdown-header">Website</div>
                        <a class="dropdown-item" href="{{ route('frontend.home') }}"><span class="material-symbols-outlined">home</span>Home</a>
                        <a class="dropdown-item" href="{{ route('frontend.category-list') }}"><span class="material-symbols-outlined">search</span>Explore</a>
                        <a class="dropdown-item" href="{{ route('frontend.category-list', ['type' => 'jobs']) }}"><span class="material-symbols-outlined">work</span>Jobs</a>
                        <a class="dropdown-item" href="{{ route('frontend.category-list', ['type' => 'rentals']) }}"><span class="material-symbols-outlined">apartment</span>Rentals</a>
                        <a class="dropdown-item" href="{{ route('frontend.category-list', ['type' => 'services']) }}"><span class="material-symbols-outlined">design_services</span>Services</a>
                        <a class="dropdown-item" href="{{ route('frontend.home') }}#plans"><span class="material-symbols-outlined">payments</span>Pricing</a>
                        <a class="dropdown-item" href="{{ route('frontend.home') }}#contact"><span class="material-symbols-outlined">support_agent</span>Contact</a>
                        <hr class="dropdown-divider">
                        <div class="dropdown-header">Account</div>
                        <a class="dropdown-item" href="{{ route('frontend.customer.profile') }}"><span class="material-symbols-outlined">person</span>Profile</a>
                        <form action="{{ route('frontend.customer.logout') }}" method="POST">
                            @csrf
                            <button class="dropdown-item text-danger" type="submit"><span class="material-symbols-outlined">logout</span>Logout</button>
                        </form>
                    </div>
                </div>
            @elseif ($headerProvider instanceof \App\Models\ProviderProfile)
                <div class="dropdown">
                    <button class="site-profile-menu-button dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <span class="site-profile-copy">
                            <span class="site-profile-greeting">Hello, {{ $headerProviderLabel }}</span>
                            <span class="site-profile-role">Provider</span>
                        </span>
                        <span class="site-profile-icon"><span class="material-symbols-outlined">storefront</span></span>
                    </button>
                    <div class="dropdown-menu dropdown-menu-end site-profile-dropdown">
                        <div class="dropdown-header">Website</div>
                        <a class="dropdown-item" href="{{ route('frontend.home') }}"><span class="material-symbols-outlined">home</span>Home</a>
                        <a class="dropdown-item" href="{{ route('frontend.category-list') }}"><span class="material-symbols-outlined">search</span>Explore</a>
                        <a class="dropdown-item" href="{{ route('frontend.category-list', ['type' => 'jobs']) }}"><span class="material-symbols-outlined">work</span>Jobs</a>
                        <a class="dropdown-item" href="{{ route('frontend.category-list', ['type' => 'rentals']) }}"><span class="material-symbols-outlined">apartment</span>Rentals</a>
                        <a class="dropdown-item" href="{{ route('frontend.category-list', ['type' => 'services']) }}"><span class="material-symbols-outlined">design_services</span>Services</a>
                        <a class="dropdown-item" href="{{ route('frontend.home') }}#plans"><span class="material-symbols-outlined">payments</span>Pricing</a>
                        <a class="dropdown-item" href="{{ route('frontend.home') }}#contact"><span class="material-symbols-outlined">support_agent</span>Contact</a>
                        <hr class="dropdown-divider">
                        <div class="dropdown-header">Account</div>
                        <a class="dropdown-item" href="{{ route('frontend.provider.profile') }}"><span class="material-symbols-outlined">storefront</span>Profile</a>
                        <form action="{{ route('frontend.provider.logout') }}" method="POST">
                            @csrf
                            <button class="dropdown-item text-danger" type="submit"><span class="material-symbols-outlined">logout</span>Logout</button>
                        </form>
                    </div>
                </div>
            @else
                <a class="btn btn-outline-primary rounded-pill px-3 d-none d-md-inline-flex" href="{{ route('frontend.provider.login') }}">Be Provider</a>
                <a class="btn btn-primary rounded-pill px-3" href="{{ route('frontend.customer.login') }}">Sign in</a>
            @endif
        </div>
    </nav>
</header>

<nav class="site-bottom-nav" aria-label="Mobile navigation">
    <div class="site-bottom-nav-inner" style="--bottom-nav-count: {{ count($bottomNavItems) }};">
        @foreach ($bottomNavItems as $item)
            <a class="site-bottom-link {{ ! empty($item['primary']) ? 'is-primary' : '' }} {{ $item['active'] ? 'active' : '' }}" href="{{ $item['href'] }}">
                @if (! empty($item['primary']))
                    <span class="site-bottom-primary-icon"><span class="material-symbols-outlined">{{ $item['icon'] }}</span></span>
                @else
                    <span class="material-symbols-outlined">{{ $item['icon'] }}</span>
                @endif
                <span>{{ $item['label'] }}</span>
            </a>
        @endforeach
    </div>
</nav>