<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { REPO } from '../lib/links';
import LangToggle from './LangToggle.vue';
import IconGitea from './icons/IconGitea.vue';

const { t } = useI18n();

const navLinks = [
  { href: '#features', key: 'navFeatures' },
  { href: '#workspace', key: 'navWorkspace' },
  { href: '#download', key: 'navDownload' },
  { href: '#how', key: 'navHow' },
  { href: '#security', key: 'navSecurity' },
  { href: '#faq', key: 'navFaq' },
] as const;
</script>

<template>
  <header
    class="sticky top-0 z-50 border-b border-[#1c1c1f] bg-[rgba(9,9,11,0.72)] backdrop-blur-[14px]"
  >
    <div class="mx-auto flex h-16 max-w-[1200px] items-center justify-between gap-6 px-6">
      <a href="#top" class="flex items-center gap-2.5 text-zinc-100 no-underline">
        <img
          src="/assets/arboretum-mark.png"
          alt="Arboretum"
          width="28"
          height="28"
          class="block h-7 w-7 object-contain"
        />
        <span class="font-mono text-[17px] font-semibold tracking-[-0.01em]">Arboretum</span>
      </a>

      <nav class="hidden items-center gap-[30px] min-[900px]:flex">
        <a
          v-for="link in navLinks"
          :key="link.href"
          :href="link.href"
          class="text-[14.5px] text-zinc-400 no-underline transition-colors hover:text-zinc-100"
        >
          {{ t(link.key) }}
        </a>
      </nav>

      <div class="flex items-center gap-3.5">
        <LangToggle />
        <a
          :href="REPO"
          target="_blank"
          rel="noopener"
          aria-label="Gitea"
          class="inline-flex items-center gap-[7px] rounded-lg border border-zinc-800 px-[13px] py-[7px] text-[13.5px] font-medium text-zinc-300 no-underline transition-colors hover:border-emerald-500/50 hover:text-emerald-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-500/70"
        >
          <IconGitea :size="16" />
          Gitea
        </a>
      </div>
    </div>
  </header>
</template>
