<template>
  
  <IpSecurity />

  <section id="hero" class="relative overflow-hidden px-6 py-16 md:py-24 md:px-12">
    <!-- Контейнер для параллакс-фона -->
    <div class="parallax-bg absolute inset-0 z-0"></div>
    <!-- Затемняющий слой -->
    <div class="absolute inset-0 z-1 bg-black/30 backdrop-blur-[1px]"></div>

    <div class="relative z-10 max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">
      <!-- Левая колонка -->
      <div class="text-white">
        <h1 class="text-4xl md:text-5xl font-extrabold leading-tight mb-6 drop-shadow-lg">
          Безопасный и быстрый интернет от <span class="text-blue-400">uVPN</span>
        </h1>
        <p class="text-gray-200 text-lg mb-8 max-w-md drop-shadow">
          Защитите свои данные и оставайтесь анонимными в сети с нашим современным VPN-сервисом на базе Xray.
        </p>
        <a 
          href="https://app.uvpn.shop" 
          target="_blank" 
          rel="noopener noreferrer"
          class="bg-blue-600 hover:bg-blue-700 transition px-8 py-4 rounded-xl font-bold text-lg shadow-lg shadow-blue-600/30 inline-flex items-center gap-2 text-white no-underline"
        >
          <Zap class="w-5 h-5" /> 
          Начать бесплатно
        </a>

        <p class="text-gray-300 text-sm mt-4 drop-shadow">30-дневная гарантия возврата денег</p>
      </div>

      <!-- Правая колонка с Землёй -->
      <div class="h-100 md:h-125 w-full">
        <Hero3D />
      </div>
    </div>
  </section>
</template>

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

<style scoped>
/* Параллакс-контейнер с фоновым изображением */
.parallax-bg {
  background-image: url('/images/space.webp'); /* локальный файл */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Параллакс через 3D-трансформацию (работает без fixed) */
  transform: translateZ(-1px) scale(2);
  transform-origin: center;
  will-change: transform;
}

/* Важно: родительский блок должен иметь perspective */
#hero {
  perspective: 1px;
  overflow-y: auto; /* для скролла внутри секции, если нужно */
}

/* На мобильных параллакс может быть излишним, отключаем по желанию */
@media (max-width: 768px) {
  .parallax-bg {
    transform: none;
  }
  #hero {
    perspective: none;
  }
}
</style>