<header class="fixed w-full bg-white shadow-sm z-50">
    <div class="container mx-auto px-6 py-4">
        <div class="flex items-center justify-between">
            <div class="text-2xl font-bold text-gray-800">
                <a href="/">Kcashok</a>
            </div>
            
            <!-- Desktop Navigation -->
            <nav class="hidden md:flex space-x-8">
                <a href="#home" class="text-gray-800 hover:text-blue-600 transition">Home</a>
                <a href="#about" class="text-gray-800 hover:text-blue-600 transition">About</a>
                <a href="#services" class="text-gray-800 hover:text-blue-600 transition">Services</a>
                <a href="#portfolio" class="text-gray-800 hover:text-blue-600 transition">Portfolio</a>
                <a href="#contact" class="text-gray-800 hover:text-blue-600 transition">Contact</a>
            </nav>
            
            <!-- Mobile menu button -->
            <div class="md:hidden">
                <button id="mobileMenuButton" class="text-gray-800 focus:outline-none">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                    </svg>
                </button>
            </div>
        </div>
        
        <!-- Mobile Navigation -->
        <div id="mobileMenu" class="hidden md:hidden pt-4">
            <div class="flex flex-col space-y-3">
                <a href="#home" class="block px-3 py-2 text-gray-800 hover:bg-gray-100 rounded">Home</a>
                <a href="#about" class="block px-3 py-2 text-gray-800 hover:bg-gray-100 rounded">About</a>
                <a href="#services" class="block px-3 py-2 text-gray-800 hover:bg-gray-100 rounded">Services</a>
                <a href="#portfolio" class="block px-3 py-2 text-gray-800 hover:bg-gray-100 rounded">Portfolio</a>
                <a href="#contact" class="block px-3 py-2 text-gray-800 hover:bg-gray-100 rounded">Contact</a>
            </div>
        </div>
    </div>
</header>

@push('scripts')
<script>
    // Mobile Menu Toggle
    document.getElementById('mobileMenuButton').addEventListener('click', function() {
        const menu = document.getElementById('mobileMenu');
        menu.classList.toggle('hidden');
    });
    
    // Close mobile menu when clicking a link
    document.querySelectorAll('#mobileMenu a').forEach(link => {
        link.addEventListener('click', function() {
            document.getElementById('mobileMenu').classList.add('hidden');
        });
    });
</script>
@endpush