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

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

<BaseLayout
  title={`${generator.title} Generator — Randify`}
  description={generator.description}
>
  <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} Generator
      </h1>
      <p class="mt-2 text-base text-zinc-400">{generator.description}</p>
    </header>

    <main>
      <CardGenerator />
    </main>

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