<template>
  <section id="steps" 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 text-center">
      <div>
        <div class="w-16 h-16 bg-blue-600 dark:bg-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-5">
          <Download class="w-8 h-8 text-white" />
        </div>
        <h3 class="text-xl font-semibold mb-3">Скачайте приложение</h3>
        <p class="text-gray-500 dark:text-gray-400">Доступно на Windows, macOS, Android, iOS и Linux.</p>
      </div>
      <div>
        <div class="w-16 h-16 bg-blue-600 dark:bg-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-5">
          <CreditCard class="w-8 h-8 text-white" />
        </div>
        <h3 class="text-xl font-semibold mb-3">Выберите тариф</h3>
        <p class="text-gray-500 dark:text-gray-400">Оформите подписку за пару минут.</p>
      </div>
      <div>
        <div class="w-16 h-16 bg-blue-600 dark:bg-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-5">
          <Shield class="w-8 h-8 text-white" />
        </div>
        <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 { Download, CreditCard, Shield } from '@lucide/vue'
</script>