<template>
  <section class="py-14 sm:py-16 lg:py-20">
    <div class="container mx-auto max-w-6xl px-4">
      <div class="flex flex-col gap-3 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">6 сценариев с AI-собеседником</h2>
          <p class="mt-2 text-slate-600">AI ведёт разговор, исправляет ошибки, даёт подсказки и перевод сообщений.</p>
        </div>
        <div class="text-sm text-slate-500">Карточки анимируются при наведении.</div>
      </div>
      <div class="mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
        <div
          v-for="(item, idx) in dialogs"
          :key="item.title"
          class="card-surface fade-up"
          :style="{ animationDelay: `${idx * 0.07}s` }"
        >
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
              <div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-50 text-lg">{{ item.emoji }}</div>
              <div>
                <p class="text-sm text-slate-500">{{ item.label }}</p>
                <h3 class="font-heading text-lg">{{ item.title }}</h3>
              </div>
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5l7 7-7 7" />
            </svg>
          </div>
          <p class="mt-3 text-sm text-slate-600">{{ item.desc }}</p>
          <div class="mt-4 flex flex-wrap gap-2 text-xs text-slate-700">
            <span class="rounded-full bg-blue-50 px-3 py-1 text-blue-800">Исправление ошибок</span>
            <span class="rounded-full bg-indigo-50 px-3 py-1 text-indigo-800">Подсказки</span>
            <span class="rounded-full bg-emerald-50 px-3 py-1 text-emerald-800">Перевод</span>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const dialogs = [
  { emoji: '🍣', label: 'Ресторан', title: 'Бронь и заказ', desc: 'Практикуй заказ блюд, замену ингредиентов и small talk с официантом.' },
  { emoji: '🛍️', label: 'Магазин', title: 'Покупки и возврат', desc: 'Спрашивай про размеры, оформляй возвраты и уточняй акции.' },
  { emoji: '✈️', label: 'Путешествия', title: 'Аэропорт и отель', desc: 'Check-in, паспортный контроль, просьбы на стойке регистрации.' },
  { emoji: '💼', label: 'Работа', title: 'Созвоны и письма', desc: 'Стэнд-апы, уточнение задач, переговоры с заказчиком.' },
  { emoji: '⚕️', label: 'Врач', title: 'Запись и симптомы', desc: 'Опиши симптомы, получи рекомендации и отработай мед. лексику.' },
  { emoji: '💬', label: 'Свободный диалог', title: 'Топики по запросу', desc: 'AI поддержит разговор на любую тему и подскажет формулировки.' }
]
</script>
