<template>
  <section class="py-14 sm:py-16 lg:py-20">
    <div class="container mx-auto max-w-6xl px-4">
      <div class="mb-10 flex flex-col gap-3 sm:mb-12 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <p class="badge">Почему это удобно</p>
          <h2 class="font-heading text-2xl sm:text-3xl lg:text-4xl">Преимущества бота</h2>
          <p class="mt-2 text-slate-600">AI помогает учиться в любом чате Telegram, без лишних приложений.</p>
        </div>
        <div class="text-sm text-slate-500">Карточки реагируют на hover и подчеркивают ключевые функции.</div>
      </div>
      <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        <div
          v-for="(item, idx) in items"
          :key="item.title"
          class="card-surface fade-up"
          :style="{ animationDelay: `${idx * 0.06}s` }"
        >
          <div class="flex items-center gap-3">
            <div class="flex h-11 w-11 items-center justify-center rounded-full bg-blue-50 text-lg">{{ item.emoji }}</div>
            <h3 class="font-heading text-lg">{{ item.title }}</h3>
          </div>
          <p class="mt-3 text-sm text-slate-600">{{ item.desc }}</p>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const items = [
  { emoji: '🤖', title: 'AI внутри', desc: 'Умная проверка ответов, генерация заданий и диалоговая практика на лету.' },
  { emoji: '📱', title: 'Всегда под рукой', desc: 'Учись прямо в Telegram на телефоне или десктопе — ничего не нужно устанавливать.' },
  { emoji: '🎯', title: 'Персональный подход', desc: 'Задания и диалоги адаптируются под уровень A1–C2 и N5–N1.' },
  { emoji: '📚', title: 'Контекст важен', desc: 'Слова сохраняются вместе с примерами, чтобы запоминать в реальных ситуациях.' },
  { emoji: '🆓', title: 'Бесплатно', desc: 'Основной функционал доступен без оплаты — достаточно открыть бота.' },
  { emoji: '⚡', title: 'Быстрый старт', desc: 'Первые задания за минуту: бот сразу подбирает нужный сценарий.' }
]
</script>
