<template>
  <UApp>
    <UToaster />
    <UContainer>
      <header class="py-4 flex items-center justify-between">
        <div class="flex items-center gap-4">
          <NuxtLink to="/" class="flex items-center gap-2 hover:opacity-80 transition-opacity">
            <UIcon name="i-heroicons-rocket-launch" class="text-primary-500" />
            <h1 class="font-semibold">Urgent Tools</h1>
          </NuxtLink>
          <nav class="hidden md:flex items-center gap-1" role="navigation" aria-label="Main navigation">
            <NuxtLink 
              to="/" 
              class="px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
              :class="{ 'bg-gray-100 dark:bg-gray-800': $route.path === '/' }"
            >
              Dashboard
            </NuxtLink>
            <NuxtLink 
              to="/mix" 
              class="px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
              :class="{ 'bg-gray-100 dark:bg-gray-800': $route.path === '/mix' }"
            >
              Revenue Mix
            </NuxtLink>
            <NuxtLink 
              to="/budget" 
              class="px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
              :class="{ 'bg-gray-100 dark:bg-gray-800': $route.path === '/budget' }"
            >
              Budget
            </NuxtLink>
            <NuxtLink 
              to="/scenarios" 
              class="px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
              :class="{ 'bg-gray-100 dark:bg-gray-800': $route.path === '/scenarios' }"
            >
              Scenarios
            </NuxtLink>
            <NuxtLink 
              to="/cash" 
              class="px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
              :class="{ 'bg-gray-100 dark:bg-gray-800': $route.path === '/cash' }"
            >
              Cash
            </NuxtLink>
            <NuxtLink 
              to="/glossary" 
              class="px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
              :class="{ 'bg-gray-100 dark:bg-gray-800': $route.path === '/glossary' }"
            >
              Glossary
            </NuxtLink>
          </nav>
        </div>
        <ColorModeToggle />
      </header>
      <NuxtPage />
    </UContainer>
    <NuxtRouteAnnouncer />
  </UApp>
</template>

<script setup lang="ts">
// noop
</script>
