@props(['mobileNavItems' => [], 'navItems' => []])

<nav class="mobile-bottom-nav" role="navigation" aria-label="Mobile navigation">
    @foreach(array_slice($mobileNavItems, 0, 2) as $item)
        <a class="mobile-nav-item {{ $item['is_active'] ? 'active' : '' }}" href="{{ $item['url'] }}" aria-label="{{ $item['label'] }}">
            <x-app.nav-icon :icon="$item['icon']" :size="22" />
            <span class="nav-label">{{ $item['label'] }}</span>
        </a>
    @endforeach

    <button type="button" class="mobile-nav-item" id="mobileMenuToggle" aria-label="Open menu" aria-expanded="false">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        <span class="nav-label">Menu</span>
    </button>

    @foreach(array_slice($mobileNavItems, 2, 2) as $item)
        <a class="mobile-nav-item {{ $item['is_active'] ? 'active' : '' }}" href="{{ $item['url'] }}" aria-label="{{ $item['label'] }}">
            <x-app.nav-icon :icon="$item['icon']" :size="22" />
            <span class="nav-label">{{ $item['label'] }}</span>
        </a>
    @endforeach
</nav>

<div class="arena-overlay" id="offcanvasOverlay" aria-hidden="true"></div>

<div class="offcanvas-arena" id="mobileOffcanvas" role="dialog" aria-modal="true" aria-label="Navigation menu">
    <div class="offcanvas-header">
        <span class="section-title">Menu</span>
        <button type="button" class="modal-close" id="offcanvasClose" aria-label="Close menu">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>
    </div>
    <nav style="padding: 8px 0; overflow-y:auto; flex:1;">
        @foreach($navItems as $item)
            <a class="sidebar-item {{ $item['is_active'] ? 'active' : '' }}" href="{{ $item['url'] }}">
                <x-app.nav-icon :icon="$item['icon']" />
                <span>{{ $item['label'] }}</span>
            </a>
        @endforeach
    </nav>
</div>
