<template>
  <header class="flex items-center justify-between px-6 py-4 md:px-12 border-b border-gray-200 dark:border-gray-800 sticky top-0 bg-white/80 dark:bg-gray-900/80 backdrop-blur-xs z-50">
    
    <!-- Логотип -->
    <router-link to="/" class="flex items-center gap-3 hover:opacity-90 transition">
      <img src="/images/logo.png" alt="uVPN logo" class="size-8" />
      <span class="text-xl font-bold tracking-tight">uVPN</span>
    </router-link>

    <!-- Навигация: теперь это router-link с хэшем секции -->
    <nav class="hidden md:flex items-center gap-6 text-sm text-gray-500 dark:text-gray-400">
      <router-link :to="{ path: '/', hash: '#hero' }" class="hover:text-gray-900 dark:hover:text-white text-gray-500 dark:text-gray-400 transition">Главная</router-link>
      <router-link :to="{ path: '/', hash: '#features' }" class="hover:text-gray-900 dark:hover:text-white text-gray-500 dark:text-gray-400 transition">Преимущества</router-link>
      <router-link :to="{ path: '/', hash: '#pricing' }" class="hover:text-gray-900 dark:hover:text-white text-gray-500 dark:text-gray-400 transition">Тарифы</router-link>
      <router-link :to="{ path: '/', hash: '#steps' }" class="hover:text-gray-900 dark:hover:text-white text-gray-500 dark:text-gray-400 transition">Как начать</router-link>
      <router-link :to="{ path: '/', hash: '#testimonials' }" class="hover:text-gray-900 dark:hover:text-white text-gray-500 dark:text-gray-400 transition">Отзывы</router-link>
      <router-link :to="{ path: '/', hash: '#faq' }" class="hover:text-gray-900 dark:hover:text-white text-gray-500 dark:text-gray-400 transition">FAQ</router-link>
    </nav>

    <!-- Кнопка тарифов -->
    <a href="https://app.uvpn.shop" target="_blank" class="bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 transition px-5 py-2 rounded-lg font-medium text-sm text-white">
      Попробовать бесплатно
    </a>
  </header>

  <IpSecurity />

</template>

<script setup>
import IpSecurity from './IpSecurity.vue';
</script>
