@php
    $isStudent = Auth::user() && Auth::user()->role === 'student';
    $navClass = $isStudent 
        ? 'bg-[#fffdf2]/80 backdrop-blur-xl border-b border-amber-200/40 sticky top-0 z-50 shadow-[0_4px_30px_rgba(245,158,11,0.04)]' 
        : 'bg-white border-b border-gray-100';
@endphp
<nav x-data="{ open: false }" class="{{ $navClass }}">
    <!-- Primary Navigation Menu -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16 relative">
            <div class="flex">
                <!-- Logo -->
                <div class="shrink-0 flex items-center">
                    <a href="{{ route('dashboard') }}">
                        <x-application-logo class="block h-9 w-auto fill-current text-gray-800" />
                    </a>
                </div>

                <!-- Navigation Links -->
                <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
                    @if(Auth::user()->role === 'admin')
                        <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
                            {{ __('Admin Dashboard') }}
                        </x-nav-link>
                        <x-nav-link :href="route('lessons.index')" :active="request()->routeIs('lessons.*')">
                            {{ __('Lessons') }}
                        </x-nav-link>
                        <x-nav-link :href="route('quizzes.index')" :active="request()->routeIs('quizzes.*')">
                            {{ __('Quizzes') }}
                        </x-nav-link>
                    @endif
                </div>
            </div>

            <!-- Student Navigation Links (Centered) -->
            @if(Auth::user()->role === 'student')
                <div class="hidden sm:flex absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 space-x-4 items-center">
                    @php
                        $isDashboard = request()->routeIs('dashboard');
                        $isQuizzes = request()->routeIs('student.quizzes.*');
                        $isLeaderboard = request()->routeIs('student.leaderboard');
                    @endphp

                    <!-- Dashboard Link -->
                    <a href="{{ route('dashboard') }}" 
                       class="inline-flex items-center px-4 py-2 text-sm font-black rounded-full border-2 transition duration-150 ease-in-out {{ $isDashboard ? 'border-yellow-500 bg-amber-400/20' : 'border-transparent bg-amber-400/20 shadow-[0_0_10px_rgba(251,191,36,0.15)] hover:bg-amber-400/30' }}"
                       style="{{ $isDashboard ? 'box-shadow: 0 0 20px #FBBF24; color: #330016;' : 'color: #450320;' }}">
                       <span class="hidden md:inline mr-1.5">🏆</span>{{ __('Dashboard') }}
                    </a>

                    <!-- Browse Quizzes Link -->
                    <a href="{{ route('student.quizzes.index') }}" 
                       class="inline-flex items-center px-4 py-2 text-sm font-black rounded-full border-2 transition duration-150 ease-in-out {{ $isQuizzes ? 'border-yellow-500 bg-amber-400/20' : 'border-transparent bg-amber-400/20 shadow-[0_0_10px_rgba(251,191,36,0.15)] hover:bg-amber-400/30' }}"
                       style="{{ $isQuizzes ? 'box-shadow: 0 0 20px #FBBF24; color: #330016;' : 'color: #450320;' }}">
                       <span class="hidden md:inline mr-1.5">📚</span>{{ __('Browse Quizzes') }}
                    </a>

                    <!-- Leaderboard Link -->
                    <a href="{{ route('student.leaderboard') }}" 
                       class="inline-flex items-center px-4 py-2 text-sm font-black rounded-full border-2 transition duration-150 ease-in-out {{ $isLeaderboard ? 'border-yellow-500 bg-amber-400/20' : 'border-transparent bg-amber-400/20 shadow-[0_0_10px_rgba(251,191,36,0.15)] hover:bg-amber-400/30' }}"
                       style="{{ $isLeaderboard ? 'box-shadow: 0 0 20px #FBBF24; color: #330016;' : 'color: #450320;' }}">
                       <span class="hidden md:inline mr-1.5">🏅</span>{{ __('Leaderboard') }}
                    </a>
                </div>
            @endif

            <!-- Settings Dropdown -->
            <div class="hidden sm:flex sm:items-center sm:ms-6">
                <x-dropdown align="right" width="48">
                    <x-slot name="trigger">
                        <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md focus:outline-none transition ease-in-out duration-150 {{ $isStudent ? 'text-amber-900/70 hover:text-amber-900 font-bold bg-transparent hover:bg-amber-100/40' : 'text-gray-500 hover:text-gray-700 bg-white hover:bg-gray-50' }}">
                            @if(Auth::user()->role === 'student')
                                <img src="{{ Auth::user()->trophy_badge }}" class="w-8 h-8 rounded-full me-2 border-2 border-gray-100 shadow-sm object-contain">
                            @endif
                            <div>{{ Auth::user()->name }}</div>

                            <div class="ms-1">
                                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                </svg>
                            </div>
                        </button>
                    </x-slot>

                    <x-slot name="content">
                        <x-dropdown-link :href="route('profile.edit')">
                            {{ __('Profile') }}
                        </x-dropdown-link>

                        <!-- Authentication -->
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf

                            <x-dropdown-link :href="route('logout')"
                                    onclick="event.preventDefault();
                                                this.closest('form').submit();">
                                {{ __('Log Out') }}
                            </x-dropdown-link>
                        </form>
                    </x-slot>
                </x-dropdown>
            </div>

            <!-- Hamburger -->
            <div class="-me-2 flex items-center sm:hidden">
                <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                        <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- Responsive Navigation Menu -->
    <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden {{ $isStudent ? 'bg-[#fffbeb]/95 backdrop-blur-xl border-b border-amber-200/50' : 'bg-white' }}">
        <div class="pt-2 pb-3 space-y-1">
            @if(Auth::user()->role === 'admin')
                <x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
                    {{ __('Admin Dashboard') }}
                </x-responsive-nav-link>
                <x-responsive-nav-link :href="route('lessons.index')" :active="request()->routeIs('lessons.*')">
                    {{ __('Lessons') }}
                </x-responsive-nav-link>
                <x-responsive-nav-link :href="route('quizzes.index')" :active="request()->routeIs('quizzes.*')">
                    {{ __('Quizzes') }}
                </x-responsive-nav-link>
            @else
                @php
                    $isDashboard = request()->routeIs('dashboard');
                    $isQuizzes = request()->routeIs('student.quizzes.*');
                    $isLeaderboard = request()->routeIs('student.leaderboard');
                @endphp
                <x-responsive-nav-link :href="route('dashboard')" :active="$isDashboard"
                    class="font-black rounded-lg transition duration-150"
                    style="{{ $isDashboard ? 'box-shadow: inset 0 0 10px #FBBF24; border-left: 4px solid #F59E0B; background-color: rgba(245, 158, 11, 0.2); color: #330016;' : 'color: #450320; background-color: rgba(245, 158, 11, 0.1); border-left-color: transparent;' }}">
                    {{ __('Dashboard') }}
                </x-responsive-nav-link>
                <x-responsive-nav-link :href="route('student.quizzes.index')" :active="$isQuizzes"
                    class="font-black rounded-lg transition duration-150"
                    style="{{ $isQuizzes ? 'box-shadow: inset 0 0 10px #FBBF24; border-left: 4px solid #F59E0B; background-color: rgba(245, 158, 11, 0.2); color: #330016;' : 'color: #450320; background-color: rgba(245, 158, 11, 0.1); border-left-color: transparent;' }}">
                    {{ __('Browse Quizzes') }}
                </x-responsive-nav-link>
                <x-responsive-nav-link :href="route('student.leaderboard')" :active="$isLeaderboard"
                    class="font-black rounded-lg transition duration-150"
                    style="{{ $isLeaderboard ? 'box-shadow: inset 0 0 10px #FBBF24; border-left: 4px solid #F59E0B; background-color: rgba(245, 158, 11, 0.2); color: #330016;' : 'color: #450320; background-color: rgba(245, 158, 11, 0.1); border-left-color: transparent;' }}">
                    {{ __('Leaderboard') }}
                </x-responsive-nav-link>
            @endif
        </div>

        <!-- Responsive Settings Options -->
        <div class="pt-4 pb-1 border-t border-gray-200">
            <div class="px-4">
                <div class="font-medium text-base text-gray-800">{{ Auth::user()->name }}</div>
                <div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
            </div>

            <div class="mt-3 space-y-1">
                <x-responsive-nav-link :href="route('profile.edit')">
                    {{ __('Profile') }}
                </x-responsive-nav-link>

                <!-- Authentication -->
                <form method="POST" action="{{ route('logout') }}">
                    @csrf

                    <x-responsive-nav-link :href="route('logout')"
                            onclick="event.preventDefault();
                                        this.closest('form').submit();">
                        {{ __('Log Out') }}
                    </x-responsive-nav-link>
                </form>
            </div>
        </div>
    </div>
</nav>