---
import { getCollection } from "astro:content";
import BaseLayout from "@/layouts/BaseLayout.astro";
import { useT } from "@/i18n/translations";
import type { Lang } from "@/i18n/translations";

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

const allPosts = await getCollection("blog");
const posts = allPosts
  .filter((post) => post.data.lang === "en" && post.data.draft !== true)
  .sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());

const pageTitle = `${T.blog} | Randify`;
const pageDesc = T.blogDesc;

const blogSchema = {
  "@context": "https://schema.org",
  "@type": "Blog",
  name: pageTitle,
  description: pageDesc,
  url: `https://randify.pro${Astro.url.pathname}`,
  inLanguage: lang,
  blogPost: posts.map((post) => ({
    "@type": "BlogPosting",
    headline: post.data.title,
    description: post.data.description,
    datePublished: post.data.pubDate.toISOString(),
    url: `https://randify.pro/blog/${post.id.replace(/^en\//, "").replace(/\.md$/, "")}/`,
  })),
};
---

<BaseLayout title={pageTitle} description={pageDesc}>
  <script
    type="application/ld+json"
    set:html={JSON.stringify(blogSchema)}
    slot="head"
  />
  <div class="max-w-4xl mx-auto px-4 py-12 sm:py-20">
    <nav aria-label="Breadcrumb" class="mb-6">
      <a
        href="/"
        class="inline-flex items-center gap-1.5 text-sm text-zinc-400 hover:text-accent transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 rounded"
      >
        <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"></path>
        </svg>
        {T.backToGenerators}
      </a>
    </nav>
    <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.blog}
      </h1>
      <p class="mt-3 text-base text-zinc-300 max-w-md">
        {T.blogDesc}
      </p>
    </header>

    <main class="mt-8">
      {
        posts.length === 0 ? (
          <p class="text-zinc-400">{T.noPosts}</p>
        ) : (
          <ul class="space-y-6" role="list" aria-label="Blog posts">
            {posts.map((post) => (
              <li>
                <a
                   href={`/blog/${post.id.replace(/^en\//, "").replace(/\.md$/, "")}/`}
                  class="group block rounded-xl border border-zinc-800/60 bg-zinc-900/40 p-6 hover:border-accent/40 hover:bg-zinc-900/60 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950"
                >
                  <div class="flex flex-wrap items-center gap-2 mb-3">
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-accent/10 text-accent border border-accent/20">
                      {post.data.category}
                    </span>
                    {post.data.tags.map((tag) => (
                      <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-zinc-800 text-zinc-400 border border-zinc-700/60">
                        {tag}
                      </span>
                    ))}
                  </div>
                  <h2 class="text-xl font-semibold text-zinc-100 group-hover:text-accent transition-colors mb-2">
                    {post.data.title}
                  </h2>
                  <p class="text-zinc-400 text-sm leading-relaxed mb-3">
                    {post.data.description}
                  </p>
                  <time
                    class="text-xs text-zinc-500"
                    datetime={post.data.pubDate.toISOString()}
                  >
                    {post.data.pubDate.toLocaleDateString("en-US", {
                      year: "numeric",
                      month: "long",
                      day: "numeric",
                    })}
                  </time>
                </a>
              </li>
            ))}
          </ul>
        )
      }
    </main>
  </div>
</BaseLayout>