<template>
  <section id="features" class="px-6 py-20 md:px-12 max-w-7xl mx-auto">
    <h2 class="text-3xl md:text-4xl font-bold text-center mb-14">
      Почему выбирают uVPN
    </h2>
    <div class="grid md:grid-cols-3 gap-8">
      <div class="bg-white dark:bg-gray-900 rounded-2xl p-8 text-center hover:bg-gray-100 dark:hover:bg-gray-800 transition border border-gray-200 dark:border-gray-800">
        <Zap class="w-12 h-12 text-blue-600 dark:text-blue-400 mx-auto mb-4" />
        <h3 class="text-xl font-semibold mb-3">Высокая скорость</h3>
        <p class="text-gray-500 dark:text-gray-400">Серверы в 90+ странах с пропускной способностью до 10 Гбит/с.</p>
      </div>
      <div class="bg-white dark:bg-gray-900 rounded-2xl p-8 text-center hover:bg-gray-100 dark:hover:bg-gray-800 transition border border-gray-200 dark:border-gray-800">
        <Shield class="w-12 h-12 text-blue-600 dark:text-blue-400 mx-auto mb-4" />
        <h3 class="text-xl font-semibold mb-3">Полная безопасность</h3>
        <p class="text-gray-500 dark:text-gray-400">Шифрование AES-256 и политика отсутствия логов.</p>
      </div>
      <div class="bg-white dark:bg-gray-900 rounded-2xl p-8 text-center hover:bg-gray-100 dark:hover:bg-gray-800 transition border border-gray-200 dark:border-gray-800">
        <Globe class="w-12 h-12 text-blue-600 dark:text-blue-400 mx-auto mb-4" />
        <h3 class="text-xl font-semibold mb-3">Глобальный доступ</h3>
        <p class="text-gray-500 dark:text-gray-400">Обходите цензуру и получайте доступ к любому контенту из любой точки мира.</p>
      </div>
    </div>
  </section>
</template>

<script setup>
import { Zap, Shield, Globe } from '@lucide/vue'
</script>