<header class="w-full  border-b border-[#0b3c5d]"
    style="background-image: url('{{ asset('site/Sites/images/bg-header.png') }}');">
    <nav class="max-w-[1700px] lg:grid lg:grid-cols-12 mx-auto px-6 lg:px-10 lg:py-12 py-5  items-center justify-between">

        <a href="{{url('/')}}" class=" col-span-3 hidden lg:flex   items-center gap-3 ">
            <div class="absolute top-[22px] ml-[50px] rounded-full border-2 border-[#facc15] flex items-center justify-center bg-[#042a46]">
                <img src="{{ asset('site/Sites/images/logo.png') }}" alt="Tutera Learning" class="w-[200px] lg:w-[150px]  desk:w-[180px] xldesk:w-full ">
            </div>
        </a>

        <ul class="hidden   lg:flex justify-center col-span-6 items-center gap-10 text-[#FFFFFF] fo-b  2xl:text-[20px] text-[16px]">
            <li><a href="{{url('/')}}" class="hover:text-[#facc15] transition ">Home</a></li>
            <li><a href="{{url('about')}}" class="hover:text-[#facc15] transition">About</a></li>
            <li><a href="{{url('find-tutor')}}" class="hover:text-[#facc15] transition">Find a Tutor</a></li>
            <li><a href="{{url('blogs')}}" class="hover:text-[#facc15] transition">Blogs</a></li>
            <li><a href="{{url('contact-us')}}" class="hover:text-[#facc15] transition">Contact Us</a></li>
        </ul>

        <div class="hidden lg:flex col-span-3 items-center  gap-4">

            @if (auth()->check())
            @php
                $route = 'home';
                if(auth()->user()->role==1)
                {
                    $route = "admin.dashboard";
                }elseif(auth()->user()->role==2)
                {
                    $route = "tutor.dashboard";

                }elseif(auth()->user()->role==3)
                {
                    $route = "student.dashboard";

                }
            @endphp
            <a href="{{route($route)}}"
                class="xldesk:px-16 px-10 xldesk:py-4 py-3   rounded-full fm-xb bg-[#facc15]  text-[#000000]
               hover:bg-yellow-400 transition font-semibold">
                Dashboard
            </a>
            <a href="{{route('logout')}}"
                class="xldesk:px-16 px-10 xldesk:py-4 py-3   rounded-full fm-xb bg-[#facc15]  text-[#000000]
               hover:bg-yellow-400 transition font-semibold">
                Logout
            </a>
            @else
                <a href="{{url('login')}}"
                class="xldesk:px-11 px-8 xldesk:py-4 py-3 border-[1.5] rounded-full border  border-[#F4C701] text-[#F4C701]
               hover:bg-[#F4C701] hover:text-[#042a46] transition font-semibold">
                Log In
            </a>

            <a href="{{route('register')}}"
                class="xldesk:px-16 px-10 xldesk:py-4 py-3   rounded-full fm-xb bg-[#facc15]  text-[#000000]
               hover:bg-yellow-400 transition font-semibold">
                Sign Up
            </a>
            
            @endif
            
        </div>
        <div class="flex justify-between w-full">
            <a href="{{url('/')}}" class=" col-span-3 flex lg:hidden   items-center gap-3 ">
                <div class=" rounded-full border-2 border-[#facc15] flex items-center justify-center bg-[#042a46]">
                    <img src="{{ asset('site/Sites/images/logo.png') }}" alt="Tutera Learning" class="w-30">
                </div>
            </a>

            <button class="lg:hidden text-[#FFFFFF] text-3xl cursor-pointer" onclick="toggleMenu()">
                ☰
            </button>
        </div>

    </nav>


    <div id="mobileMenu" class="hidden absolute w-full lg:hidden bg-[#042a46] px-6 pb-6 pt-5 z-10">
        <div class="flex flex-col gap-4 text-[#FFFFFF]">
            <a href="{{url('/')}}" class="hover:text-[#facc15]">Home</a>
            <a href="{{url('about')}}" class="hover:text-[#facc15]">About</a>
            <a href="{{url('find-tutor')}}" class="hover:text-[#facc15]">Find a Tutor</a>
            <a href="{{url('blogs')}}" class="hover:text-[#facc15]">Blogs</a>
            <a href="{{url('contact-us')}}" class="hover:text-[#facc15]">Contact Us</a>
            <div class="flex lg:hidden col-span-3 items-center  gap-4">
                <a href="{{url('login')}}"
                    class="px-8 py-3 border-[1.5] rounded-full border  border-[#F4C701] text-[#F4C701]
               hover:bg-[#F4C701] hover:text-[#042a46] transition font-semibold">
                    Log In
                </a>

                <a href="{{route('register')}}"
                    class="px-10 py-3  rounded-full fm-xb bg-[#facc15]  text-[#000000]
               hover:bg-yellow-400 transition font-semibold">
                    Sign Up
                </a>
            </div>
        </div>
    </div>
    @php
    $BoldText = 'Home';
    $normalText = 'Home';
    if(Route::is('about')){
    $BoldText = 'About';
    $normalText = 'Us';
    }
    elseif(Route::is('find-tutor'))
    {
    $BoldText = 'Find';
    $normalText = 'A Tutor';
    }
    elseif(Route::is('tutor.detail'))
    {
    $BoldText = 'Tutor';
    $normalText = 'Profile';
    }
    elseif(Route::is('blogs'))
    {
    $BoldText = 'Blogs';
    $normalText = 'We Have';
    }
    elseif(Route::is('safety-and-security'))
    {
    $BoldText = 'Safety & Security  ';
    $normalText = 'Policy';
    }
    elseif(Route::is('privacy-policy'))
    {
    $BoldText = 'Privacy';
    $normalText = 'Policy';
    }
    elseif(Route::is('cookie-policy'))
    {
    $BoldText = 'Cookie';
    $normalText = 'Policy';
    }
    elseif(Route::is('terms'))
    {
    $BoldText = 'Terms';
    $normalText = 'Of Use';
    }
    elseif(Route::is('contact-us'))
    {
    $BoldText = 'Contact';
    $normalText = 'Us';
    }
    elseif(Route::is('blogDetail'))
    {
    $BoldText = 'Blog';
    $normalText = ' Detail';
    }
    

    @endphp
    
    @include(Route::is('home') ? 'site.components.bannerSectionHome' : 'site.components.bannerSection' ,['BoldText'=>$BoldText,'normalText'=>$normalText])


</header>

<script>
    function toggleMenu() {
        document.getElementById('mobileMenu').classList.toggle('hidden');
    }
</script>