{{-- TabBar: Inicio · Fermentos · Planificador · Lab · Comunidad (Perfil vive en el topbar) --}}
@php
    $tabs = [
        ['route' => 'home',      'match' => 'home',       'label' => 'Inicio',       'icon' => 'fa-house'],
        ['route' => 'catalogue', 'match' => 'catalogue',  'label' => 'Fermentos',    'icon' => 'fa-jar'],
        ['route' => 'plan',      'match' => 'plan',       'label' => 'Plan', 'icon' => 'fa-calendar-day'],
        ['route' => 'tools',     'match' => 'tools*',     'label' => 'Lab',          'icon' => 'fa-flask'],
        ['route' => 'community', 'match' => 'community*', 'label' => 'Comunidad',    'icon' => 'fa-users'],
    ];
@endphp
<nav style="flex-shrink:0;position:relative;z-index:20;display:flex;align-items:center;justify-content:space-around;padding:8px 4px max(20px, calc(8px + env(safe-area-inset-bottom, 0px)));background:var(--surface-card);border-top:1px solid var(--border-subtle);box-shadow:0 -2px 12px rgba(27,36,29,.05);">
    @foreach($tabs as $t)
        @php $on = request()->routeIs($t['match']); @endphp
        <a href="{{ route($t['route']) }}"
           style="text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;min-width:0;padding:4px 0;">
            <span style="width:46px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;
                         background:{{ $on ? 'var(--green-050)' : 'transparent' }};
                         color:{{ $on ? 'var(--green-700)' : 'var(--ink-400)' }};transition:background .16s ease,color .16s ease;">
                <i class="fa-solid {{ $t['icon'] }}" style="font-size:18px;"></i>
            </span>
            <span style="font:{{ $on ? 700 : 500 }} 10px/1 var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:{{ $on ? 'var(--green-700)' : 'var(--ink-400)' }};">{{ $t['label'] }}</span>
        </a>
    @endforeach
</nav>