<template>
  <header class="sticky top-0 z-50 bg-neutral-200 shadow text-neutral-700">
    <AppStripe>
      <nav class="mx-auto py-4 flex items-center justify-between">
        <!-- your logo / home link -->
        <NuxtLink :to="p('/')" class="text-xl font-semibold flex items-center gap-2">
          <UIcon name="i-heroicons-home" />

          <span class="hidden md:inline">
            {{ c.header.home }}
          </span>
        </NuxtLink>


        <!-- nav links -->
        <ul class="flex space-x-6">
          <li>
            <!-- Mobile: Show only first word -->
            <NuxtLink
                :to="p('apartments')"
                class="block sm:hidden"
            >
              {{ c.header.apartments.split(' ')[0] }}
            </NuxtLink>

            <!-- Desktop: Show full text -->
            <NuxtLink
                :to="p('apartments')"
                class="hidden sm:block"
            >
              {{ c.header.apartments }}
            </NuxtLink>
          </li>
          <li>
            <NuxtLink :to="p('book')">{{ c.header.book }}</NuxtLink>
          </li>
          <li>
            <NuxtLink :to="p('contact')">{{ c.header.contact }}</NuxtLink>
          </li>
          <LocaleSwitcher/>
          <VariantSwitcher/>
        </ul>
      </nav>
    </AppStripe>
  </header>
</template>

<script setup lang="ts">
const {p, c} = useContent()
</script>
