@inject NavigationManager Navigation

<style>
    .nav-scrollbar::-webkit-scrollbar {
        width: 5px;
    }

    .nav-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }

    .nav-scrollbar::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 10px;
    }

        .nav-scrollbar::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.3);
        }
</style>

<div class="flex items-center justify-between px-4 pt-4 pb-3 gap-2.5 bg-[#003b71]">
    <!-- SAQA Logo -->
    <img src="data:image/png;base64,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" alt="SAQA Logo" class="h-[52px] w-auto max-w-[170px] object-contain flex-1 min-w-0 bg-transparent p-0" />
    <input type="checkbox" title="Navigation menu" class="peer appearance-none cursor-pointer w-[38px] h-[38px] text-white border border-white/10 rounded-lg bg-[#ffffff14] hover:bg-[#ffffff2e] bg-[url('data:image/svg+xml,%3csvg_xmlns=%27http://www.w3.org/2000/svg%27_viewBox=%270_0_24_24%27_fill=%27none%27_stroke=%27currentColor%27_stroke-width=%272%27%3e%3cline_x1=%273%27_y1=%276%27_x2=%2721%27_y2=%276%27/%3e%3cline_x1=%273%27_y1=%2712%27_x2=%2721%27_y2=%2712%27/%3e%3cline_x1=%273%27_y1=%2718%27_x2=%2721%27_y2=%2718%27/%3e%3c/svg%3e')] bg-no-repeat bg-center bg-[length:20px] md:hidden transition-colors z-20 flex-shrink-0" />
</div>

<!-- Header Brand Text Area -->
<div class="px-[18px] pb-3.5 mb-1 border-b border-white/10 flex flex-col bg-[#003b71] leading-[1.2]">
    <strong class="text-white text-[14px] font-bold tracking-[0.02em] block">SAQA TMC</strong>
    <span class="text-[11px] text-[#8aa4c4]">Travel and Expense Portal</span>
</div>

<div class="hidden peer-checked:flex md:flex flex-col flex-1 h-[calc(100vh-130px)] md:overflow-y-auto nav-scrollbar bg-[#003b71]" onclick="document.querySelector('.peer').click()">
    <nav class="flex flex-col px-3 py-3 w-full">

        <div class="text-[10px] uppercase text-[#647892] tracking-[0.12em] px-3 pt-2 pb-2 font-semibold">Main</div>

        <!-- Overview -->
        <NavLink class="group flex items-center w-full px-3 py-2.5 text-[13px] font-medium rounded-lg text-[#b8c8df] hover:text-white hover:bg-white/5 transition-all duration-150 border-l-[3px] border-transparent [&.active]:bg-gradient-to-r [&.active]:from-[#00a3a12e] [&.active]:to-transparent [&.active]:text-white [&.active]:border-[#00a3a1] mb-0.5" href="" Match="NavLinkMatch.All">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-[18px] h-[18px] mr-3 flex-shrink-0">
                <path d="M3 12l9-9 9 9" />
                <path d="M5 10v10a1 1 0 001 1h3v-7h6v7h3a1 1 0 001-1V10" />
            </svg>
            Overview
        </NavLink>

        <!-- Booking -->
        <NavLink class="group flex items-center justify-between w-full px-3 py-2.5 text-[13px] font-medium rounded-lg text-[#b8c8df] hover:text-white hover:bg-white/5 transition-all duration-150 border-l-[3px] border-transparent [&.active]:bg-gradient-to-r [&.active]:from-[#00a3a12e] [&.active]:to-transparent [&.active]:text-white [&.active]:border-[#00a3a1] mb-0.5" href="booking">
            <div class="flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-[18px] h-[18px] mr-3 flex-shrink-0">
                    <path d="M17.8 19.2L16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2 3.4 7.6l5.6 3-4 4-3-1L1 14l4 2 2 4 1.4-1.4-1-3 4-4 3 5.6 1.4-1.4z" />
                </svg>
                Booking
            </div>
            <span class="bg-[#00a3a1] text-white px-[7px] py-[1px] rounded-full text-[10px] font-bold">3</span>
        </NavLink>

        <!-- Trip Reports -->
        <NavLink class="group flex items-center w-full px-3 py-2.5 text-[13px] font-medium rounded-lg text-[#b8c8df] hover:text-white hover:bg-white/5 transition-all duration-150 border-l-[3px] border-transparent [&.active]:bg-gradient-to-r [&.active]:from-[#00a3a12e] [&.active]:to-transparent [&.active]:text-white [&.active]:border-[#00a3a1] mb-0.5" href="trip-reports">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-[18px] h-[18px] mr-3 flex-shrink-0">
                <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
                <path d="M14 2v6h6" /><path d="M16 13H8M16 17H8M10 9H8" />
            </svg>
            Trip Reports
        </NavLink>

        <!-- Financial Management -->
        <NavLink class="group flex items-center w-full px-3 py-2.5 text-[13px] font-medium rounded-lg text-[#b8c8df] hover:text-white hover:bg-white/5 transition-all duration-150 border-l-[3px] border-transparent [&.active]:bg-gradient-to-r [&.active]:from-[#00a3a12e] [&.active]:to-transparent [&.active]:text-white [&.active]:border-[#00a3a1] mb-0.5" href="financial">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-[18px] h-[18px] mr-3 flex-shrink-0">
                <line x1="12" y1="1" x2="12" y2="23" />
                <path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6" />
            </svg>
            Financial Management
        </NavLink>

        <!-- Forex and Expenses -->
        <NavLink class="group flex items-center w-full px-3 py-2.5 text-[13px] font-medium rounded-lg text-[#b8c8df] hover:text-white hover:bg-white/5 transition-all duration-150 border-l-[3px] border-transparent [&.active]:bg-gradient-to-r [&.active]:from-[#00a3a12e] [&.active]:to-transparent [&.active]:text-white [&.active]:border-[#00a3a1] mb-0.5" href="forex">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-[18px] h-[18px] mr-3 flex-shrink-0">
                <path d="M7 17l10-10M7 7h.01M17 17h.01" />
                <circle cx="12" cy="12" r="10" />
            </svg>
            Forex and Expenses
        </NavLink>

        <!-- Visa Services -->
        <NavLink class="group flex items-center justify-between w-full px-3 py-2.5 text-[13px] font-medium rounded-lg text-[#b8c8df] hover:text-white hover:bg-white/5 transition-all duration-150 border-l-[3px] border-transparent [&.active]:bg-gradient-to-r [&.active]:from-[#00a3a12e] [&.active]:to-transparent [&.active]:text-white [&.active]:border-[#00a3a1] mb-0.5" href="visa">
            <div class="flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-[18px] h-[18px] mr-3 flex-shrink-0">
                    <path d="M14 3H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2V9z" />
                    <path d="M14 3v6h6" />
                    <circle cx="12" cy="14" r="2" />
                </svg>
                Visa Services
            </div>
            <span class="bg-[#00a3a1] text-white px-[7px] py-[1px] rounded-full text-[10px] font-bold">2</span>
        </NavLink>

        <!-- Mobile App -->
        <NavLink class="group flex items-center w-full px-3 py-2.5 text-[13px] font-medium rounded-lg text-[#b8c8df] hover:text-white hover:bg-white/5 transition-all duration-150 border-l-[3px] border-transparent [&.active]:bg-gradient-to-r [&.active]:from-[#00a3a12e] [&.active]:to-transparent [&.active]:text-white [&.active]:border-[#00a3a1] mb-0.5" href="mobile">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-[18px] h-[18px] mr-3 flex-shrink-0">
                <rect x="7" y="2" width="10" height="20" rx="2" />
                <line x1="12" y1="18" x2="12.01" y2="18" />
            </svg>
            Mobile App
        </NavLink>

        <!-- Compliance and Policy -->
        <NavLink class="group flex items-center w-full px-3 py-2.5 text-[13px] font-medium rounded-lg text-[#b8c8df] hover:text-white hover:bg-white/5 transition-all duration-150 border-l-[3px] border-transparent [&.active]:bg-gradient-to-r [&.active]:from-[#00a3a12e] [&.active]:to-transparent [&.active]:text-white [&.active]:border-[#00a3a1] mb-0.5" href="compliance">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-[18px] h-[18px] mr-3 flex-shrink-0">
                <path d="M12 2l9 4v6c0 5-3.5 9.5-9 10-5.5-.5-9-5-9-10V6l9-4z" />
                <path d="M9 12l2 2 4-4" />
            </svg>
            Compliance and Policy
        </NavLink>

        <!-- Value-Added Services -->
        <NavLink class="group flex items-center w-full px-3 py-2.5 text-[13px] font-medium rounded-lg text-[#b8c8df] hover:text-white hover:bg-white/5 transition-all duration-150 border-l-[3px] border-transparent [&.active]:bg-gradient-to-r [&.active]:from-[#00a3a12e] [&.active]:to-transparent [&.active]:text-white [&.active]:border-[#00a3a1] mb-0.5" href="vas">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-[18px] h-[18px] mr-3 flex-shrink-0">
                <circle cx="12" cy="12" r="10" />
                <path d="M2 12h20" />
                <path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z" />
            </svg>
            Value-Added Services
        </NavLink>

        <div class="text-[10px] uppercase text-[#647892] tracking-[0.12em] px-3 pt-4 pb-2 font-semibold">Integrations</div>

        <!-- SLA and Monthly Reports -->
        <NavLink class="group flex items-center w-full px-3 py-2.5 text-[13px] font-medium rounded-lg text-[#b8c8df] hover:text-white hover:bg-white/5 transition-all duration-150 border-l-[3px] border-transparent [&.active]:bg-gradient-to-r [&.active]:from-[#00a3a12e] [&.active]:to-transparent [&.active]:text-white [&.active]:border-[#00a3a1] mb-0.5" href="sla-reports">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-[18px] h-[18px] mr-3 flex-shrink-0">
                <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
                <path d="M14 2v6h6" />
                <path d="M16 13H8M16 17H8M10 9H8" />
            </svg>
            SLA and Monthly Reports
        </NavLink>

        <!-- GDS Amadeus Sync -->
        <NavLink class="group flex items-center w-full px-3 py-2.5 text-[13px] font-medium rounded-lg text-[#b8c8df] hover:text-white hover:bg-white/5 transition-all duration-150 border-l-[3px] border-transparent [&.active]:bg-gradient-to-r [&.active]:from-[#00a3a12e] [&.active]:to-transparent [&.active]:text-white [&.active]:border-[#00a3a1] mb-0.5" href="gds-sync">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-[18px] h-[18px] mr-3 flex-shrink-0">
                <rect x="3" y="3" width="18" height="18" rx="2" />
                <path d="M3 9h18M9 21V9" />
            </svg>
            GDS Amadeus Sync
        </NavLink>

    </nav>

    <!-- 24/7 Support CTA -->
    <div class="m-3 mt-auto p-4 bg-gradient-to-br from-[#00a3a1] to-[#0066b3] rounded-xl text-white">
        <h4 class="text-[13px] font-bold mb-1">24/7 Travel Desk</h4>
        <p class="text-[11px] text-[#d9f1f0] mb-2.5 leading-snug">VIP & after-hours consultant support, lounge access, emergencies.</p>
        <a href="/contact" class="bg-white text-[#003b71] px-3 py-1.5 rounded-md text-[11px] font-semibold hover:bg-gray-100 transition-colors inline-block text-center">
            Contact Now
        </a>
    </div>
</div>