<template>
  <nav class="fixed bottom-0 left-0 right-0 z-30 border-t border-surface-border bg-white/95 p-2 backdrop-blur lg:hidden">
    <div class="grid grid-cols-5 gap-1 text-center text-xs text-text-secondary">
      <NuxtLink to="/" class="rounded-lg p-2 hover:bg-brand-50">Home</NuxtLink>
      <NuxtLink to="/calendar" class="rounded-lg p-2 hover:bg-brand-50">Calendar</NuxtLink>
      <NuxtLink to="/report" class="rounded-lg bg-brand-500 p-2 font-medium text-white">Report</NuxtLink>
      <NuxtLink to="/team" class="rounded-lg p-2 hover:bg-brand-50">Team</NuxtLink>
      <NuxtLink to="/settings" class="rounded-lg p-2 hover:bg-brand-50">Settings</NuxtLink>
    </div>
  </nav>
</template>
