---
import BaseLayout from '../../../layouts/BaseLayout.astro';
import WheelSpinner from '../../../components/generators/WheelSpinner.astro';
import AdBanner from '../../../components/AdBanner.astro';
import SeoBlock from '../../../components/SeoBlock.astro';
import { generators } from '../../../data/generators';

const generator = generators.find((g) => g.slug === 'wheel')!;
---

<BaseLayout title={generator.ruSeoTitle} description={generator.ruSeoDescription} lang="ru">
  <div class="max-w-2xl mx-auto px-4 py-12 sm:py-20">
    <nav aria-label="Breadcrumb" class="mb-10">
      <a href="/ru/" class="inline-flex items-center gap-1.5 text-sm text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded" aria-label="Все генераторы">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
        Все генераторы
      </a>
    </nav>
    <header class="mb-2">
      <div class="flex items-center gap-2 mb-4">
        <span class="inline-block w-2.5 h-2.5 rounded-full bg-[#534AB7]" aria-hidden="true"></span>
        <span class="text-sm font-medium text-zinc-400 uppercase tracking-widest">randify</span>
      </div>
      <h1 class="text-3xl sm:text-4xl font-bold text-zinc-100">Колесо фортуны онлайн</h1>
      <p class="mt-2 text-base text-zinc-400">{generator.ruDescription}</p>
    </header>
    <main><WheelSpinner /></main>
    <div class="mt-12 flex justify-center"><AdBanner size="tile" /></div>
    <SeoBlock lang="ru" howTo={[
      'Введите варианты в поле — по одному на строку (от 2 до 24).',
      'Колесо обновляется автоматически.',
      'Нажмите «Крутить» и дождитесь результата.',
      'Победитель выделяется — скопируйте его кнопкой «Копировать».',
    ]} whenTo={[
      'Случайный выбор победителя розыгрыша.',
      'Принятие решений в команде.',
      'Распределение ролей или задач между участниками.',
    ]} />
  </div>
</BaseLayout>