<template>
  <div class="min-h-screen bg-gray-950">


    <main>
      <nav class="fixed top-0 left-0 right-0 z-50 bg-gray-950/80 backdrop-blur-md border-b border-gray-800">
        <div class="max-w-4xl mx-auto px-4 h-16 flex items-center justify-between">
        <span class="text-white font-bold text-lg tracking-tight">
          <span class="text-indigo-400">&lt;</span>dev<span class="text-indigo-400">/&gt;</span>
        </span>
          <div class="hidden md:flex items-center gap-6">
            <a
                v-for="link in navLinks"
                :key="link.href"
                :href="link.href"
                class="text-gray-400 hover:text-white transition-colors duration-200 text-sm font-medium"
            >
              {{ link.label }}
            </a>
          </div>
          <UButton
              size="sm"
              color="primary"
              variant="soft"
              icon="i-heroicons-envelope"
              @click="scrollToContact"
          >
            Контакт
          </UButton>
        </div>
      </nav>
    </main>

    <footer class="py-8 px-4 border-t border-gray-800 text-center text-gray-600 text-sm">
      <p>© {{ new Date().getFullYear() }} Алексей Разработчик. Все права защищены.</p>
    </footer>
  </div>
</template>

<script setup lang="ts">
const navLinks = [
  { href: '#about', label: 'О себе' },
  { href: '#skills', label: 'Навыки' },
  { href: '#projects', label: 'Проекты' },
  { href: '#contact', label: 'Контакт' },
];

function scrollToContact() {
  document.querySelector('#contact')?.scrollIntoView({ behavior: 'smooth' });
}

useHead({
  title: 'Алексей — Fullstack Developer',
  meta: [
    {
      name: 'description',
      content: 'Fullstack Developer специализирующийся на NestJS, Nuxt 3 и TypeScript. Открыт для новых проектов.',
    },
  ],
});
</script>
