@if(($config['widgets']['mobile_bottom_navbar'] ?? true))
<style data-mobile-bottom-nav-style>
    @media (max-width: 767px) {
        body { padding-bottom: var(--mobile-nav-height, 60px); }
        [data-mobile-menu-toggle] { display: none !important; }
    }
</style>

<nav data-widget="mobile_bottom_navbar" class="md:hidden fixed bottom-0 left-0 right-0 z-40 border-t shadow-lg" style="background-color: var(--bg-secondary); border-color: var(--border-color);" x-data="{ activeView: 'all', searchOpen: false }" x-init="document.documentElement.style.setProperty('--mobile-nav-height', $el.offsetHeight + 'px')" @filter-view.window="activeView = $event.detail.type" @open-mobile-search.window="searchOpen = true" @close-mobile-search.window="searchOpen = false" x-show="!searchOpen">
    <div class="flex items-center justify-around py-3 px-4">
        <a href="#" @click.prevent="activeView = 'all'; $dispatch('filter-view', {type: 'all'}); window.dispatchEvent(new CustomEvent('mobile-nav-home'));" class="flex flex-col items-center gap-1 transition-colors" :style="activeView === 'all' ? 'color: var(--accent-color)' : 'color: var(--text-secondary)'">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
            </svg>
            <span class="text-sm">Home</span>
        </a>
        
        <a href="#" @click.prevent="activeView = 'games'; $dispatch('filter-view', {type: 'games'}); window.dispatchEvent(new CustomEvent('mobile-nav-games'));" class="flex flex-col items-center gap-1 transition-colors" :style="activeView === 'games' ? 'color: var(--accent-color)' : 'color: var(--text-secondary)'">
            <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 512 512" class="size-6">
                            <path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="40" d="M467.51 248.83c-18.4-83.18-45.69-136.24-89.43-149.17A91.5 91.5 0 0 0 352 96c-26.89 0-48.11 16-96 16s-69.15-16-96-16a99 99 0 0 0-27.2 3.66C89 112.59 61.94 165.7 43.33 248.83c-19 84.91-15.56 152 21.58 164.88c26 9 49.25-9.61 71.27-37c25-31.2 55.79-40.8 119.82-40.8s93.62 9.6 118.66 40.8c22 27.41 46.11 45.79 71.42 37.16c41.02-14.01 40.44-79.13 21.43-165.04Z">
                            </path>
                            <circle cx="292" cy="224" r="20" fill="currentColor"></circle>
                            <path fill="currentColor" d="M336 288a20 20 0 1 1 20-19.95A20 20 0 0 1 336 288"></path>
                            <circle cx="336" cy="180" r="20" fill="currentColor"></circle>
                            <circle cx="380" cy="224" r="20" fill="currentColor"></circle>
                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="36" d="M160 176v96m48-48h-96"></path>
                        </svg>
            <span class="text-sm">Games</span>
        </a>
        
        <a href="#" @click.prevent="activeView = 'apps'; $dispatch('filter-view', {type: 'apps'}); window.dispatchEvent(new CustomEvent('mobile-nav-apps'));" class="flex flex-col items-center gap-1 transition-colors" :style="activeView === 'apps' ? 'color: var(--accent-color)' : 'color: var(--text-secondary)'">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
            </svg>
            <span class="text-sm">Apps</span>
        </a>
        
        <button @click="$dispatch('open-mobile-search')" class="flex flex-col items-center gap-1 transition-colors" style="color: var(--text-secondary);">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
            </svg>
            <span class="text-sm">Search</span>
        </button>
    </div>
</nav>
@endif