<template>
  <section id="hero" class="px-6 py-16 md:py-24 md:px-12 max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">
    <div>
      <h1 class="text-4xl md:text-5xl font-extrabold leading-tight mb-6">
        Безопасный и быстрый VPN <br /> от <span class="text-blue-600 dark:text-blue-400">uVPN</span>
      </h1>
      <p class="text-gray-500 dark:text-gray-400 text-lg mb-8 max-w-md">
        Защитите свои данные, обходите блокировки и оставайтесь анонимными в сети с нашим современным VPN-сервисом на базе Xray.
      </p>
      <button class="bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 transition px-8 py-4 rounded-xl font-bold text-lg shadow-lg shadow-blue-600/30 flex items-center gap-2 text-white">
        <Zap class="w-5 h-5" /> Начать бесплатно
      </button>
      <p class="text-gray-500 text-sm mt-4">30-дневная гарантия возврата денег</p>
    </div>
    <!-- <div class="flex justify-center">
      <img
        src="/images/earth.png"
        alt="VPN защита"
      />
    </div> -->

    <div class="h-100 md:h-125 w-full">
      <Hero3D />
    </div>
  </section>
</template>

<script setup>
import { Zap } from '@lucide/vue'
import Hero3D from './Hero3D.vue'
</script>