<template>
  <div class="min-h-screen bg-sky-dark text-sky-text flex flex-col">
    <header class="p-4 flex justify-between items-center">
      <NuxtLink :to="localePath('/')" class="text-sky-accent font-narrative font-bold">
        Skycel
      </NuxtLink>
      <div class="flex items-center gap-4">
        <NuxtLink :to="localePath('/')" class="text-sky-text/70 hover:text-sky-accent text-sm font-ui transition-colors">
          {{ $t('common.back_to_adventure') }}
        </NuxtLink>
        <UiLanguageSwitcher />
      </div>
    </header>

    <main class="flex-1">
      <slot />
    </main>

    <footer class="p-4 text-center text-sky-text/50 text-sm font-ui">
      {{ $t('footer.copyright', { year: new Date().getFullYear() }) }}
    </footer>
  </div>
</template>

<script setup lang="ts">
const localePath = useLocalePath()
</script>
