---
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.seoTitle}
  description={generator.seoDescription}
>
  <div class="max-w-2xl mx-auto px-4 py-12 sm:py-20">
    <nav aria-label="Breadcrumb" class="mb-10">
      <a
        href="/"
        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="Back to all generators"
      >
        <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>
        All generators
      </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">
        {generator.title}
      </h1>
      <p class="mt-2 text-base text-zinc-400">{generator.description}</p>
    </header>

    <main>
      <WheelSpinner />
    </main>

    <div class="mt-12 flex justify-center">
      <AdBanner size="tile" />
    </div>

    <SeoBlock
      howTo={[
        'Type your items into the text box — one per line.',
        'Click "Update wheel" to apply changes.',
        'Hit "Spin" and watch the wheel decide.',
        'Copy the result or spin again.',
      ]}
      whenTo={[
        'Picking a winner for a giveaway or raffle.',
        'Deciding whose turn it is in a game or meeting.',
        'Choosing a random activity, movie, or restaurant.',
        'Any decision you want to leave to chance.',
      ]}
    />
  </div>
</BaseLayout>