<template>
  <section id="pricing" 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">
      Прозрачные тарифы
    </h2>
    <div class="grid md:grid-cols-3 gap-8">
      <!-- Тариф Месяц -->
      <div class="bg-white dark:bg-gray-900 rounded-2xl p-8 flex flex-col border border-gray-200 dark:border-gray-800 hover:border-blue-600 transition">
        <h3 class="text-xl font-semibold mb-2">Месяц</h3>
        <p class="text-4xl font-extrabold mb-4">$11.99<span class="text-lg font-normal text-gray-500 dark:text-gray-400">/мес</span></p>
        <ul class="text-gray-500 dark:text-gray-400 space-y-3 mb-8 flex-1">
          <li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Все устройства</li>
          <li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Безлимитный трафик</li>
          <li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Поддержка 24/7</li>
        </ul>
        <button class="w-full bg-gray-800 hover:bg-gray-700 transition py-3 rounded-xl font-medium text-white">
          Выбрать
        </button>
      </div>
      <!-- Тариф Год (выделенный) -->
      <div class="bg-white dark:bg-gray-900 rounded-2xl p-8 flex flex-col border-2 border-blue-600 relative transform scale-105 shadow-2xl shadow-blue-600/20">
        <span class="absolute top-0 right-0 bg-blue-600 dark:bg-blue-500 text-gray-900 dark:text-white text-xs font-bold px-4 py-1 rounded-bl-xl rounded-tr-xl">ПОПУЛЯРНЫЙ</span>
        <h3 class="text-xl font-semibold mb-2">Год</h3>
        <p class="text-4xl font-extrabold mb-4">$4.99<span class="text-lg font-normal text-gray-500 dark:text-gray-400">/мес</span></p>
        <ul class="text-gray-500 dark:text-gray-400 space-y-3 mb-8 flex-1">
          <li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Все устройства</li>
          <li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Безлимитный трафик</li>
          <li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Приоритетная поддержка</li>
        </ul>
        <button class="w-full bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 transition py-3 rounded-xl font-bold text-white">
          Выбрать тариф
        </button>
      </div>
      <!-- Тариф 2 года -->
      <div class="bg-white dark:bg-gray-900 rounded-2xl p-8 flex flex-col border border-gray-200 dark:border-gray-800 hover:border-blue-600 transition">
        <h3 class="text-xl font-semibold mb-2">2 года</h3>
        <p class="text-4xl font-extrabold mb-4">$2.99<span class="text-lg font-normal text-gray-500 dark:text-gray-400">/мес</span></p>
        <ul class="text-gray-500 dark:text-gray-400 space-y-3 mb-8 flex-1">
          <li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Все устройства</li>
          <li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Безлимитный трафик</li>
          <li class="flex items-center gap-2"><Check class="w-4 h-4 text-green-400" /> Максимальная экономия</li>
        </ul>
        <button class="w-full bg-gray-800 hover:bg-gray-700 transition py-3 rounded-xl font-medium text-white">
          Выбрать
        </button>
      </div>
    </div>
  </section>
</template>

<script setup>
import { Check } from '@lucide/vue'
</script>