<nav class="bg-white/80 backdrop-blur-md border-b border-teal-100/50 shadow-sm fixed w-full z-50 transition-all duration-300" id="main-nav">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-20">
            <div class="flex items-center">
                <a href="{{ route('home') }}" class="flex-shrink-0 flex items-center group">
                    @php
                        $siteLogo = \App\Models\SiteSetting::where('key', 'site_logo')->value('value');
                    @endphp
                    @if($siteLogo)
                        <img src="{{ asset($siteLogo) }}" alt="Dr. Rajan Shah Logo" class="h-14 w-auto object-contain transition-transform group-hover:scale-105">
                    @else
                        <span class="text-2xl font-heading font-extrabold text-teal-700 tracking-tight group-hover:text-teal-600 transition-colors">Dr. Rajan Shah</span>
                    @endif
                </a>
            </div>
            <div class="hidden sm:ml-6 sm:flex sm:items-center sm:space-x-8">
                <a href="{{ route('home') }}" class="{{ request()->routeIs('home') ? 'text-teal-600 font-semibold' : 'text-gray-600 hover:text-teal-600 font-medium' }} relative group inline-flex items-center px-1 py-2 text-sm transition-colors duration-200">
                    Home
                    <span class="absolute bottom-0 left-0 w-full h-0.5 bg-teal-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 {{ request()->routeIs('home') ? 'scale-x-100' : 'origin-left' }}"></span>
                </a>
                <div class="relative group h-full flex items-center">
                    <button class="{{ request()->routeIs('about') || request()->routeIs('why-laparoscopy') ? 'text-teal-600 font-semibold' : 'text-gray-600 hover:text-teal-600 font-medium' }} relative inline-flex items-center px-1 py-2 text-sm transition-colors duration-200 h-full">
                        About
                        <svg class="ml-1 h-4 w-4 text-gray-400 group-hover:text-teal-500 transition-colors" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <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>
                        <span class="absolute bottom-4 left-0 w-full h-0.5 bg-teal-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 {{ request()->routeIs('about') || request()->routeIs('why-laparoscopy') ? 'scale-x-100' : 'origin-left' }}"></span>
                    </button>
                    <!-- Dropdown menu -->
                    <div class="absolute left-0 top-full w-48 bg-white/95 backdrop-blur-md shadow-xl rounded-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 border border-teal-50 overflow-hidden transform group-hover:translate-y-0 translate-y-2">
                        <a href="{{ route('about') }}" class="block px-4 py-3 text-sm text-gray-700 hover:bg-teal-50 hover:text-teal-700 transition-colors">About Dr. Rajan Shah</a>
                        <a href="{{ route('why-laparoscopy') }}" class="block px-4 py-3 text-sm text-gray-700 hover:bg-teal-50 hover:text-teal-700 transition-colors">Why Laparoscopy</a>
                    </div>
                </div>
                <a href="{{ route('services') }}" class="{{ request()->routeIs('services') ? 'text-teal-600 font-semibold' : 'text-gray-600 hover:text-teal-600 font-medium' }} relative group inline-flex items-center px-1 py-2 text-sm transition-colors duration-200">
                    Services
                    <span class="absolute bottom-0 left-0 w-full h-0.5 bg-teal-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 {{ request()->routeIs('services') ? 'scale-x-100' : 'origin-left' }}"></span>
                </a>
                <a href="{{ route('gallery') }}" class="{{ request()->routeIs('gallery') ? 'text-teal-600 font-semibold' : 'text-gray-600 hover:text-teal-600 font-medium' }} relative group inline-flex items-center px-1 py-2 text-sm transition-colors duration-200">
                    Gallery
                    <span class="absolute bottom-0 left-0 w-full h-0.5 bg-teal-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 {{ request()->routeIs('gallery') ? 'scale-x-100' : 'origin-left' }}"></span>
                </a>
                <a href="{{ route('blogs.index') }}" class="{{ request()->routeIs('blogs.*') ? 'text-teal-600 font-semibold' : 'text-gray-600 hover:text-teal-600 font-medium' }} relative group inline-flex items-center px-1 py-2 text-sm transition-colors duration-200">
                    Blog
                    <span class="absolute bottom-0 left-0 w-full h-0.5 bg-teal-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 {{ request()->routeIs('blogs.*') ? 'scale-x-100' : 'origin-left' }}"></span>
                </a>

                
                @php
                    $settings = \App\Models\SiteSetting::pluck('value', 'key')->toArray();
                    $facebook = $settings['facebook_url'] ?? '';
                    $instagram = $settings['instagram_url'] ?? '';
                    $tiktok = $settings['tiktok_url'] ?? '';
                @endphp

                <div class="flex items-center space-x-3 border-l border-teal-200 pl-6 ml-2">
                    <a href="{{ $facebook ?: '#' }}" target="_blank" class="text-teal-600 hover:text-teal-800 transition-colors">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.469h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.469h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                    </a>
                    <a href="{{ $instagram ?: '#' }}" target="_blank" class="text-teal-600 hover:text-teal-800 transition-colors">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
                    </a>
                    <a href="{{ $tiktok ?: '#' }}" target="_blank" class="text-teal-600 hover:text-teal-800 transition-colors">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93v7.2c0 1.63-.38 3.29-1.23 4.67-1.15 1.87-3.07 3.12-5.18 3.42-2.13.3-4.4-.1-6.17-1.22-1.78-1.12-3.08-2.9-3.48-4.94-.41-2.07.02-4.27 1.16-6.05 1.25-1.95 3.32-3.24 5.56-3.6 1.44-.22 2.92-.09 4.26.43V12.1c-1.07-.3-2.2-.3-3.26-.06-1.06.24-2.06.76-2.84 1.52-.78.75-1.34 1.72-1.57 2.77-.23 1.05-.14 2.16.27 3.14.41.97 1.11 1.8 1.98 2.3 1.12.65 2.51.78 3.74.4 1.24-.38 2.3-1.25 2.93-2.38.64-1.13.88-2.5.75-3.8v-16z"/></svg>
                    </a>
                </div>

                <a href="{{ route('contact') }}" class="ml-6 inline-flex items-center justify-center px-6 py-2.5 border border-transparent rounded-full shadow-md text-sm font-semibold text-white bg-teal-600 hover:bg-teal-700 hover:scale-105 active:scale-95 transition-all duration-300 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500">
                    Contact
                </a>
            </div>
            
            <!-- Mobile menu button -->
            <div class="flex items-center sm:hidden">
                <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-500 hover:text-teal-600 hover:bg-teal-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 transition-colors" aria-controls="mobile-menu" aria-expanded="false">
                    <span class="sr-only">Open main menu</span>
                    <!-- Icon when menu is closed. -->
                    <svg class="block h-6 w-6" id="menu-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                    <!-- Icon when menu is open. -->
                    <svg class="hidden h-6 w-6" id="close-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- Mobile Menu -->
    <div class="sm:hidden hidden bg-white/95 backdrop-blur-md border-b border-teal-100 shadow-md" id="mobile-menu">
        <div class="pt-2 pb-4 space-y-1">
            <a href="{{ route('home') }}" class="{{ request()->routeIs('home') ? 'bg-teal-50 border-teal-500 text-teal-700' : 'border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700' }} block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
            <a href="{{ route('about') }}" class="{{ request()->routeIs('about') ? 'bg-teal-50 border-teal-500 text-teal-700' : 'border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700' }} block pl-3 pr-4 py-2 border-l-4 text-base font-medium">About</a>
            <a href="{{ route('why-laparoscopy') }}" class="{{ request()->routeIs('why-laparoscopy') ? 'bg-teal-50 border-teal-500 text-teal-700' : 'border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700' }} block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Why Laparoscopy</a>
            <a href="{{ route('services') }}" class="{{ request()->routeIs('services') ? 'bg-teal-50 border-teal-500 text-teal-700' : 'border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700' }} block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Services</a>
            <a href="{{ route('gallery') }}" class="{{ request()->routeIs('gallery') ? 'bg-teal-50 border-teal-500 text-teal-700' : 'border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700' }} block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Gallery</a>
            <a href="{{ route('blogs.index') }}" class="{{ request()->routeIs('blogs.*') ? 'bg-teal-50 border-teal-500 text-teal-700' : 'border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700' }} block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Blog</a>

            
            <div class="px-4 mt-4 pb-6">
                <a href="{{ route('contact') }}" class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-full shadow-sm text-base font-medium text-white bg-teal-600 hover:bg-teal-700">
                    Contact
                </a>

                <div class="mt-6 flex justify-center space-x-6">
                    <a href="{{ $facebook ?: '#' }}" target="_blank" class="text-teal-600 hover:text-teal-800 transition-colors">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.469h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.469h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                    </a>
                    <a href="{{ $instagram ?: '#' }}" target="_blank" class="text-teal-600 hover:text-teal-800 transition-colors">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
                    </a>
                    <a href="{{ $tiktok ?: '#' }}" target="_blank" class="text-teal-600 hover:text-teal-800 transition-colors">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93v7.2c0 1.63-.38 3.29-1.23 4.67-1.15 1.87-3.07 3.12-5.18 3.42-2.13.3-4.4-.1-6.17-1.22-1.78-1.12-3.08-2.9-3.48-4.94-.41-2.07.02-4.27 1.16-6.05 1.25-1.95 3.32-3.24 5.56-3.6 1.44-.22 2.92-.09 4.26.43V12.1c-1.07-.3-2.2-.3-3.26-.06-1.06.24-2.06.76-2.84 1.52-.78.75-1.34 1.72-1.57 2.77-.23 1.05-.14 2.16.27 3.14.41.97 1.11 1.8 1.98 2.3 1.12.65 2.51.78 3.74.4 1.24-.38 2.3-1.25 2.93-2.38.64-1.13.88-2.5.75-3.8v-16z"/></svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</nav>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        const menuIcon = document.getElementById('menu-icon');
        const closeIcon = document.getElementById('close-icon');

        if(mobileMenuButton && mobileMenu) {
            mobileMenuButton.addEventListener('click', () => {
                const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
                mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
                mobileMenu.classList.toggle('hidden');
                menuIcon.classList.toggle('hidden');
                closeIcon.classList.toggle('hidden');
            });
        }
    });
</script>
