@php
    $navCourses = \App\Models\Course::active()->ordered()->take(5)->get();
@endphp

<!-- Sticky Header Navigation -->
<header x-data="{
    scrolled: false,
    mobileMenuOpen: false,
    coursesDropdownOpen: false
}"
    x-init="window.addEventListener('scroll', () => { scrolled = window.pageYOffset > 50 })"
    :class="scrolled ? 'h-16 lg:h-20 shadow-xl' : 'h-20 lg:h-24 shadow-md'"
    class="fixed top-0 left-0 right-0 z-50 bg-white transition-all duration-300">

    <div class="container mx-auto px-4 lg:px-8 h-full">
        <div class="flex items-center justify-between h-full">

            <!-- Logo -->
            <a href="/" class="flex items-center space-x-3">
                <img src="https://demo.softsaro.com.np/angeltechnicalcollege/public/images/logo.png" alt="{{ $siteSettings->site_name }} Logo" class="w-44 lg:w-56 transition-all duration-300">
            </a>

            <!-- Desktop Navigation -->
            <nav class="hidden lg:flex items-center space-x-8">
                <a href="{{ route('home') }}" class="text-gray-700 hover:text-primary-600 font-medium transition-colors duration-200">Home</a>

                <!-- Courses Dropdown -->
                <div class="relative" @mouseenter="coursesDropdownOpen = true" @mouseleave="coursesDropdownOpen = false">
                    <button class="text-gray-700 hover:text-primary-600 font-medium transition-colors duration-200 flex items-center">
                        Courses
                        <i class="fas fa-chevron-down ml-1 text-xs transition-transform duration-200" :class="coursesDropdownOpen ? 'rotate-180' : ''"></i>
                    </button>

                    <!-- Dropdown Menu -->
                    <div x-cloak
                         x-show="coursesDropdownOpen"
                         x-transition:enter="transition ease-out duration-200"
                         x-transition:enter-start="opacity-0 transform scale-95"
                         x-transition:enter-end="opacity-100 transform scale-100"
                         x-transition:leave="transition ease-in duration-150"
                         x-transition:leave-start="opacity-100 transform scale-100"
                         x-transition:leave-end="opacity-0 transform scale-95"
                         class="absolute top-full left-0 mt-2 w-72 bg-white rounded-xl shadow-2xl py-4 px-2 ring-1 ring-black/5">
                        @forelse($navCourses as $navCourse)
                        <a href="{{ route('course.show', $navCourse->slug) }}" class="flex items-center px-4 py-3 hover:bg-primary-50 rounded-lg transition-colors duration-200 group">
                            <i class="{{ $navCourse->icon_class ?: 'fas fa-graduation-cap' }} text-primary-600 text-xl w-8"></i>
                            <div class="ml-3">
                                <div class="font-semibold text-gray-800 group-hover:text-primary-600">{{ $navCourse->title }}</div>
                                <div class="text-xs text-gray-500">{{ Str::limit($navCourse->short_description ?: 'View course details', 42) }}</div>
                            </div>
                        </a>
                        @empty
                        <a href="{{ route('course.index') }}" class="flex items-center px-4 py-3 hover:bg-primary-50 rounded-lg transition-colors duration-200 group">
                            <i class="fas fa-graduation-cap text-primary-600 text-xl w-8"></i>
                            <div class="ml-3">
                                <div class="font-semibold text-gray-800 group-hover:text-primary-600">All Courses</div>
                                <div class="text-xs text-gray-500">Explore available programs</div>
                            </div>
                        </a>
                        @endforelse
                        <a href="{{ route('course.index') }}" class="flex items-center px-4 py-3 mt-2 border-t border-gray-100 hover:bg-primary-50 rounded-lg transition-colors duration-200 group">
                            <i class="fas fa-arrow-right text-primary-600 text-lg w-8"></i>
                            <div class="ml-3 font-semibold text-gray-800 group-hover:text-primary-600">View All Courses</div>
                        </a>
                    </div>
                </div>

                <a href="{{ route('about') }}" class="text-gray-700 hover:text-primary-600 font-medium transition-colors duration-200">About</a>
                {{-- <a href="{{ route('home') }}#countries" class="text-gray-700 hover:text-primary-600 font-medium transition-colors duration-200">Study Abroad</a> --}}
                {{-- <a href="{{ route('home') }}#countries" class="text-gray-700 hover:text-primary-600 font-medium transition-colors duration-200">Countries</a> --}}
                <a href="{{ route('home') }}#success-stories" class="text-gray-700 hover:text-primary-600 font-medium transition-colors duration-200">Success Stories</a>
                <a href="{{ route('home') }}#gallery" class="text-gray-700 hover:text-primary-600 font-medium transition-colors duration-200">Gallery</a>
                <a href="{{ route('blog.index') }}" class="text-gray-700 hover:text-primary-600 font-medium transition-colors duration-200">Blog</a>
                <a href="{{ route('contact') }}" class="text-gray-700 hover:text-primary-600 font-medium transition-colors duration-200">Contact</a>
            </nav>

            <!-- CTA Buttons - Desktop -->
            <div class="hidden lg:flex items-center space-x-4">
                <a href="tel:{{ $siteSettings->phone }}" class="flex items-center space-x-2 px-5 py-2.5 text-white rounded-full font-semibold hover:opacity-90 transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5"
                   style="background:#027fc5;">
                    <i class="fas fa-phone-alt"></i>
                    <span>Call Now</span>
                </a>
                <a href="{{ route('course.index') }}#course-application" class="flex items-center space-x-2 px-5 py-2.5 text-white rounded-full font-semibold hover:opacity-90 transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5"
                   style="background:#027fc5;">
                    <i class="fas fa-file-alt"></i>
                    <span>Apply Now</span>
                </a>
            </div>

            <!-- Mobile Menu Button -->
            <button @click="mobileMenuOpen = !mobileMenuOpen" class="lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors duration-200">
                <svg x-cloak x-show="!mobileMenuOpen" class="w-6 h-6 text-gray-700" 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-cloak x-show="mobileMenuOpen" class="w-6 h-6 text-gray-700" 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>

    <!-- Mobile Menu -->
    <div x-cloak
         x-show="mobileMenuOpen"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 transform -translate-y-4"
         x-transition:enter-end="opacity-100 transform translate-y-0"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 transform translate-y-0"
         x-transition:leave-end="opacity-0 transform -translate-y-4"
         class="lg:hidden bg-white border-t border-gray-200 shadow-xl">
        <div class="container mx-auto px-4 py-4 max-h-[calc(100vh-80px)] overflow-y-auto">
            <nav class="flex flex-col space-y-1">
                <a href="{{ route('home') }}" @click="mobileMenuOpen = false" class="px-4 py-3 text-gray-700 hover:bg-primary-50 hover:text-primary-600 rounded-lg font-medium transition-colors duration-200">
                    <i class="fas fa-home w-6"></i> Home
                </a>

                <!-- Mobile Courses Submenu -->
                <div x-data="{ open: false }">
                    <button @click="open = !open" class="w-full px-4 py-3 text-gray-700 hover:bg-primary-50 hover:text-primary-600 rounded-lg font-medium transition-colors duration-200 flex items-center justify-between">
                        <span><i class="fas fa-graduation-cap w-6"></i> Courses</span>
                        <i class="fas fa-chevron-down text-sm transition-transform duration-200" :class="open ? 'rotate-180' : ''"></i>
                    </button>
                    <div x-cloak
                         x-show="open"
                         x-transition:enter="transition ease-out duration-200"
                         x-transition:enter-start="opacity-0"
                         x-transition:enter-end="opacity-100"
                         class="ml-4 mt-1 space-y-1">
                        @foreach($navCourses as $navCourse)
                        <a href="{{ route('course.show', $navCourse->slug) }}" @click="mobileMenuOpen = false" class="block px-4 py-2 text-sm text-gray-600 hover:bg-primary-50 hover:text-primary-600 rounded-lg">{{ $navCourse->title }}</a>
                        @endforeach
                        <a href="{{ route('course.index') }}" @click="mobileMenuOpen = false" class="block px-4 py-2 text-sm font-semibold text-primary-600 hover:bg-primary-50 rounded-lg">View All Courses</a>
                    </div>
                </div>

                <a href="{{ route('home') }}#countries" @click="mobileMenuOpen = false" class="px-4 py-3 text-gray-700 hover:bg-primary-50 hover:text-primary-600 rounded-lg font-medium transition-colors duration-200">
                    <i class="fas fa-plane-departure w-6"></i> Study Abroad
                </a>
                <a href="{{ route('home') }}#countries" @click="mobileMenuOpen = false" class="px-4 py-3 text-gray-700 hover:bg-primary-50 hover:text-primary-600 rounded-lg font-medium transition-colors duration-200">
                    <i class="fas fa-globe-americas w-6"></i> Countries
                </a>
                <a href="{{ route('home') }}#success-stories" @click="mobileMenuOpen = false" class="px-4 py-3 text-gray-700 hover:bg-primary-50 hover:text-primary-600 rounded-lg font-medium transition-colors duration-200">
                    <i class="fas fa-star w-6"></i> Success Stories
                </a>
                <a href="{{ route('home') }}#gallery" @click="mobileMenuOpen = false" class="px-4 py-3 text-gray-700 hover:bg-primary-50 hover:text-primary-600 rounded-lg font-medium transition-colors duration-200">
                    <i class="fas fa-images w-6"></i> Gallery
                </a>
                <a href="{{ route('blog.index') }}" @click="mobileMenuOpen = false" class="px-4 py-3 text-gray-700 hover:bg-primary-50 hover:text-primary-600 rounded-lg font-medium transition-colors duration-200">
                    <i class="fas fa-blog w-6"></i> Blog
                </a>
                <a href="{{ route('about') }}" @click="mobileMenuOpen = false" class="px-4 py-3 text-gray-700 hover:bg-primary-50 hover:text-primary-600 rounded-lg font-medium transition-colors duration-200">
                    <i class="fas fa-info-circle w-6"></i> About
                </a>
                <a href="{{ route('contact') }}" @click="mobileMenuOpen = false" class="px-4 py-3 text-gray-700 hover:bg-primary-50 hover:text-primary-600 rounded-lg font-medium transition-colors duration-200">
                    <i class="fas fa-envelope w-6"></i> Contact
                </a>
            </nav>

            <!-- Mobile CTA Buttons -->
            <div class="mt-6 space-y-3 pb-4">
                <a href="tel:{{ $siteSettings->phone }}" class="flex items-center justify-center space-x-2 px-5 py-3 text-white rounded-full font-semibold hover:opacity-90 transition-all duration-300 shadow-lg"
                   style="background:#027fc5;">
                    <i class="fas fa-phone-alt"></i>
                    <span>Call Now</span>
                </a>
                <a href="{{ route('course.index') }}#course-application" @click="mobileMenuOpen = false" class="flex items-center justify-center space-x-2 px-5 py-3 text-white rounded-full font-semibold hover:opacity-90 transition-all duration-300 shadow-lg"
                   style="background:#027fc5;">
                    <i class="fas fa-file-alt"></i>
                    <span>Apply Now</span>
                </a>
            </div>
        </div>
    </div>
</header>

<!-- IMPORTANT: give your page content a top padding equal to the header's tallest
     height (h-24 = 6rem on desktop, h-20 = 5rem on mobile) so it isn't hidden
     underneath the fixed header, e.g. <main class="pt-20 lg:pt-24"> -->