@php
$practiceName = \App\Models\SiteSetting::get('practice_name', 'Shavhani Attorneys');
$tagline = \App\Models\SiteSetting::get('tagline', 'Think Is Practical');

$navLinks = [
    ['route' => 'home', 'label' => 'Home', 'match' => 'home'],
    ['route' => 'about', 'label' => 'About', 'match' => 'about'],
    ['route' => 'services.index', 'label' => 'Practice Areas', 'match' => 'services.*'],
    ['route' => 'blog.index', 'label' => 'Blog', 'match' => 'blog.*'],
    ['route' => 'faq', 'label' => 'FAQ', 'match' => 'faq'],
    ['route' => 'contact', 'label' => 'Contact', 'match' => 'contact'],
];
@endphp

<nav role="navigation" aria-label="Main navigation" class="bg-white border-b border-slate-200 sticky top-0 z-50">
    <div class="firm-container">
        <div class="flex items-center justify-between h-20">
            <a href="{{ route('home') }}" class="flex items-center gap-3 group focus:outline-none focus:ring-2 focus:ring-firm-red-500 rounded" aria-label="{{ $practiceName }} - Home">
                <x-logo hide-text="true" size="sm" />
                <div class="hidden sm:block leading-tight">
                    <span class="block font-serif font-bold text-firm-ink text-lg group-hover:text-firm-red-500">{{ $practiceName }}</span>
                    <span class="block text-xs text-slate-500 uppercase tracking-wider">{{ $tagline }}</span>
                </div>
            </a>

            <!-- Desktop -->
            <div class="hidden lg:flex items-center gap-1">
                @foreach($navLinks as $link)
                <a href="{{ route($link['route']) }}"
                   class="px-3 py-2 text-sm font-medium transition-colors {{ request()->routeIs($link['match']) ? 'text-firm-ink border-b-2 border-firm-red-500' : 'text-slate-600 hover:text-firm-ink' }}"
                   aria-current="{{ request()->routeIs($link['match']) ? 'page' : 'false' }}">
                    {{ $link['label'] }}
                </a>
                @endforeach
                <a href="{{ route('book.index') }}" class="btn-primary ml-4 text-sm px-5 py-2.5">
                    Request Consultation
                </a>
            </div>

            <!-- Mobile toggle -->
            <button type="button"
                    class="lg:hidden p-2 text-slate-600 hover:text-firm-ink hover:bg-firm-surface rounded"
                    aria-label="Toggle menu"
                    aria-expanded="false"
                    aria-controls="mobile-menu"
                    id="mobile-menu-button">
                <svg id="mobile-menu-icon-open" class="h-6 w-6" 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>
                <svg id="mobile-menu-icon-close" class="h-6 w-6 hidden" 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>

    <!-- Mobile menu -->
    <div class="lg:hidden mobile-menu" id="mobile-menu" role="menu" aria-hidden="true">
        <div class="firm-container py-3 space-y-1">
            @foreach($navLinks as $index => $link)
            <a href="{{ route($link['route']) }}"
               class="mobile-menu-item block px-3 py-2.5 text-base font-medium {{ request()->routeIs($link['match']) ? 'bg-firm-surface text-firm-ink font-semibold' : 'text-slate-700 hover:bg-firm-surface' }}"
               style="--item-index: {{ $index }}"
               role="menuitem">{{ $link['label'] }}</a>
            @endforeach
            <a href="{{ route('book.index') }}"
               class="mobile-menu-item block btn-primary mt-2 text-center"
               style="--item-index: {{ count($navLinks) }}"
               role="menuitem">Request Consultation</a>
        </div>
    </div>
</nav>

<script>
(function () {
    const menu = document.getElementById('mobile-menu');
    const button = document.getElementById('mobile-menu-button');
    const iconOpen = document.getElementById('mobile-menu-icon-open');
    const iconClose = document.getElementById('mobile-menu-icon-close');
    function setMenuIcons(open) {
        iconOpen.classList.toggle('hidden', open);
        iconClose.classList.toggle('hidden', !open);
    }

    function openMobileMenu() {
        menu.setAttribute('aria-hidden', 'false');
        button.setAttribute('aria-expanded', 'true');
        setMenuIcons(true);
        requestAnimationFrame(function () {
            menu.classList.add('mobile-menu-open');
        });
    }

    function closeMobileMenu() {
        menu.classList.remove('mobile-menu-open');
        menu.setAttribute('aria-hidden', 'true');
        button.setAttribute('aria-expanded', 'false');
        setMenuIcons(false);
    }

    function toggleMobileMenu() {
        if (menu.classList.contains('mobile-menu-open')) {
            closeMobileMenu();
        } else {
            openMobileMenu();
        }
    }

    button.addEventListener('click', toggleMobileMenu);

    menu.querySelectorAll('a').forEach(function (link) {
        link.addEventListener('click', closeMobileMenu);
    });

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && menu.classList.contains('mobile-menu-open')) {
            closeMobileMenu();
            button.focus();
        }
    });

    window.addEventListener('resize', function () {
        if (window.innerWidth >= 1024 && menu.classList.contains('mobile-menu-open')) {
            menu.classList.remove('mobile-menu-open');
            menu.setAttribute('aria-hidden', 'true');
            button.setAttribute('aria-expanded', 'false');
            setMenuIcons(false);
        }
    });
})();
</script>