@props(['showHome' => true])

<nav x-data="{
    scrolled: false,
    mobileOpen: false
}" x-init="window.addEventListener('scroll', () => {
    scrolled = window.scrollY > 40
})" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
    :class="scrolled ? 'navbar-glass shadow-lg' : 'bg-transparent'">

    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="flex h-16 items-center justify-between lg:h-20">

            {{-- ==================== LOGO ==================== --}}
            <a href="{{ route('home') }}" class="flex items-center gap-3">
                <div class="flex h-10 w-10 items-center justify-center rounded-xl">
                    <img src="{{ asset('assets/img/logo.webp') }}" alt="Logo Ar Ruhama'" class="h-10 w-10 object-contain">
                </div>
                <div>
                    <p class="font-display text-lg font-bold leading-none" :class="scrolled ? 'text-white' : 'text-green-400'">Ar Ruhama'</p>
                    <p class="text-xs font-medium tracking-wider" :class="scrolled ? 'text-white' : 'text-green-400'">YAYASAN PENDIDIKAN</p>
                </div>
            </a>

            {{-- ==================== RIGHT CONTROLS ==================== --}}
            <div class="flex items-center gap-3">

                {{-- Dark Mode Toggle --}}
                <button @click="$store.darkMode.toggle()"
                    class="flex h-9 w-9 items-center justify-center rounded-lg text-green-300 transition-all duration-200 hover:text-white hover:bg-white/10"
                    :title="$store.darkMode.on ? 'Mode Terang' : 'Mode Gelap'">
                    <svg x-show="!$store.darkMode.on" class="h-5 w-5" fill="none" stroke="currentColor"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                    </svg>
                    <svg x-show="$store.darkMode.on" class="h-5 w-5" fill="none" stroke="currentColor"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                    </svg>
                </button>

                {{-- Home Button --}}
                @if ($showHome)
                    <a href="{{ route('home') }}"
                        class="hidden sm:inline-flex items-center gap-2 rounded-xl px-4 py-2 text-sm font-semibold text-green-900 transition-all duration-200 hover:opacity-90 hover:scale-105"
                        style="background: linear-gradient(135deg, #63e073, #4ade80);">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                        </svg>
                        Home
                    </a>
                @endif

                {{-- Mobile Menu Toggle --}}
                <button @click="mobileOpen = !mobileOpen"
                    class="flex h-9 w-9 items-center justify-center rounded-lg text-green-300 transition-all duration-200 hover:text-white hover:bg-white/10 lg:hidden">
                    <svg x-show="!mobileOpen" class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                    <svg x-show="mobileOpen" class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    {{-- ==================== MOBILE MENU ==================== --}}
    <div x-show="mobileOpen" x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 -translate-y-4" x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 -translate-y-4" class="navbar-glass border-t border-green-900/30 lg:hidden">

        <div class="space-y-1 px-4 py-4">
            {{-- Home --}}
            @if ($showHome)
                <a href="{{ route('home') }}" @click="mobileOpen = false"
                    class="flex items-center gap-3 rounded-lg px-4 py-2.5 text-sm font-medium text-green-200 transition-all duration-200 hover:text-white hover:bg-white/10">
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                    </svg>
                    Home
                </a>
            @endif

            {{-- Dashboard (jika user login) --}}
            @auth
                <a href="{{ route('dashboard') }}" @click="mobileOpen = false"
                    class="flex items-center gap-3 rounded-lg px-4 py-2.5 text-sm font-medium text-green-200 transition-all duration-200 hover:text-white hover:bg-white/10">
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
                    </svg>
                    Dashboard
                </a>
            @endauth

            {{-- Logout (jika user login) --}}
            @auth
                <form method="POST" action="{{ route('logout') }}" class="mt-2 border-t border-green-900/30 pt-3">
                    @csrf
                    <button type="submit"
                        class="flex w-full items-center gap-3 rounded-lg px-4 py-2.5 text-sm font-medium text-red-400 transition-all duration-200 hover:text-red-300 hover:bg-white/10">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                        </svg>
                        Keluar
                    </button>
                </form>
            @else
                {{-- Login link (jika guest) --}}
                <div class="mt-2 border-t border-green-900/30 pt-3">
                    <a href="{{ route('login') }}" @click="mobileOpen = false"
                        class="flex w-full items-center justify-center rounded-xl bg-brand px-4 py-3 text-sm font-semibold text-green-900 transition-all duration-200 hover:opacity-90">
                        Masuk
                    </a>
                </div>
            @endauth
        </div>
    </div>
</nav>