---
import BaseLayout from "@/layouts/BaseLayout.astro";
import GeneratorCard from "@/components/GeneratorCard.astro";
import AdBanner from "@/components/AdBanner.astro";
import { generators } from "@/data/generators";
import { useT } from "@/i18n/translations";
import type { Lang } from "@/i18n/translations";

const lang = (Astro.currentLocale as Lang) || "en";
const T = useT(lang);

const webSiteSchema = {
  "@context": "https://schema.org",
  "@type": "WebSite",
  name: "Randify.pro",
  url: "https://randify.pro/",
  description: T.defaultDesc,
  inLanguage: lang,
};
---

<BaseLayout>
  <script
    type="application/ld+json"
    set:html={JSON.stringify(webSiteSchema)}
    slot="head"
  />
  <div class="max-w-4xl mx-auto px-4 py-12 sm:py-20">
    <header class="mb-12">
      <div class="relative flex items-center gap-2 mb-6">
        <div
          class="absolute -left-16 -top-12 w-64 h-64 rounded-full bg-accent/20 blur-3xl pointer-events-none"
          aria-hidden="true"
        ></div>
        <span
          class="inline-block w-3 h-3 rounded-full bg-accent"
          aria-hidden="true"></span>
        <span class="text-xl font-bold tracking-tight text-zinc-100"
          >{T.brandLabel}</span
        >
      </div>
      <h1 class="text-3xl sm:text-4xl font-bold text-zinc-100 leading-tight">
        {T.homeTitle}
      </h1>
      <p class="mt-3 text-base text-zinc-300 max-w-md">
        {T.homeSubtitle}
      </p>
    </header>

    <AdBanner size="leaderboard" />

    <main class="mt-8">
      <div
        class="grid gap-3"
        style="grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-auto-rows: 1fr;"
        role="list"
        aria-label="Generator catalog"
      >
        {
          generators.map((generator) => (
            <div role="listitem">
              <GeneratorCard generator={generator} />
            </div>
          ))
        }
      </div>
    </main>
  </div>
</BaseLayout>