@props(['objection', 'active'])

<div class="fixed bottom-0 left-0 w-full z-[9999] bg-white border-t-2 border-gray-300 p-2 pb-[env(safe-area-inset-bottom)] md:p-0 md:bg-transparent md:border-none md:relative md:z-auto md:mb-6">
    <nav class="flex gap-2 w-full" aria-label="Tabs">
        <a href="{{ route('objections.show', $objection) }}" 
           class="flex-1 py-3 px-1 text-center font-bold text-xs sm:text-base transition-colors {{ $active === 'home' ? 'bg-blue-600 text-white hover:bg-blue-800' : 'bg-gray-200 text-gray-900 hover:bg-gray-300' }}">
            Overview
        </a>
        <a href="{{ route('objections.discussion.index', $objection) }}" 
           class="flex-1 py-3 px-1 text-center font-bold text-xs sm:text-base transition-colors {{ $active === 'discussion' ? 'bg-blue-600 text-white hover:bg-blue-800' : 'bg-gray-200 text-gray-900 hover:bg-gray-300' }}">
            Discussion
        </a>
        <a href="{{ route('objections.documents.index', $objection) }}" 
           class="flex-1 py-3 px-1 text-center font-bold text-xs sm:text-base transition-colors {{ $active === 'documents' ? 'bg-blue-600 text-white hover:bg-blue-800' : 'bg-gray-200 text-gray-900 hover:bg-gray-300' }}">
            Documents
        </a>
        <a href="{{ route('objections.neighbours.index', $objection) }}" 
           class="flex-1 py-3 px-1 text-center font-bold text-xs sm:text-base transition-colors {{ $active === 'neighbours' ? 'bg-blue-600 text-white hover:bg-blue-800' : 'bg-gray-200 text-gray-900 hover:bg-gray-300' }}">
            Neighbours
        </a>
    </nav>
</div>