---
import PageLayout from '@/layouts/PageLayout.astro';
import { Hero } from '@/components/hero';
import Button from '@/components/ui/form/Button/Button.astro';
import Icon from '@/components/ui/primitives/Icon/Icon.astro';
import BlogImageSVG from '@/components/blog/BlogImageSVG.astro';
import { Image } from 'astro:assets';
import { getCollection } from 'astro:content';
import { formatDate } from '@/lib/utils';
import { useTranslations } from '@/i18n/utils';
import type { Locale } from '@/i18n/ui';

interface Props {
  locale: Locale;
}

const { locale } = Astro.props;
const t = useTranslations(locale);

const allPosts = await getCollection('blog', ({ data }) => {
  return import.meta.env.PROD ? data.draft !== true : true;
});

const posts = allPosts.sort((a, b) => b.data.publishedAt.valueOf() - a.data.publishedAt.valueOf());

const getPostUrl = (postId: string) => {
  const slug = postId.replace(/^[a-z]{2}\//, '');
  return `/blog/${slug}`;
};
---

<PageLayout
  title={`${t('blog.title')} — Armarium`}
  description={t('blog.desc')}
  showScrollProgress
  locale={locale}
>
  <Hero layout="centered" size="sm">
    <h1 slot="title">{t('blog.title')}</h1>
    <p slot="description">{t('blog.desc')}</p>
  </Hero>

  <section class="bg-white dark:bg-gray-900 border-t border-border">
    <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
      <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
        {posts.map((post) => (
          <article class="p-4 bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
            <a href={getPostUrl(post.id)} class="block mb-5 rounded-lg overflow-hidden">
              {post.data.svgSlug ? (
                <BlogImageSVG slug={post.data.svgSlug} title={post.data.title} />
              ) : post.data.image ? (
                <Image src={post.data.image} alt={post.data.imageAlt ?? post.data.title} class="w-full h-48 object-cover rounded-lg" />
              ) : (
                <div class="w-full h-48 bg-gradient-to-br from-brand-500/20 to-brand-500/5 rounded-lg" />
              )}
            </a>
            {post.data.tags[0] && (
              <span class="bg-brand-500/10 text-brand-500 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
                {post.data.tags[0]}
              </span>
            )}
            <h2 class="my-2 text-2xl font-bold tracking-tight text-foreground dark:text-white">
              <a href={getPostUrl(post.id)} class="hover:text-brand-500 transition-colors">{post.data.title}</a>
            </h2>
            <p class="mb-4 font-light text-foreground-muted dark:text-gray-400">{post.data.description}</p>
            <div class="flex items-center space-x-4">
              <div class="w-10 h-10 rounded-full bg-brand-500/15 flex items-center justify-center text-brand-500 font-bold text-sm shrink-0">
                {post.data.author?.charAt(0) ?? 'A'}
              </div>
              <div class="font-medium text-foreground dark:text-white">
                <div>{post.data.author ?? 'Team'}</div>
                <div class="text-sm font-normal text-foreground-muted dark:text-gray-400">{formatDate(post.data.publishedAt)}</div>
              </div>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="py-[var(--space-section-md)] bg-background border-t border-border">
    <div class="mx-auto max-w-2xl px-6 text-center" data-reveal>
      <h2 class="font-display text-4xl font-bold text-foreground mb-4 text-balance">{t('cta.title')}</h2>
      <p class="text-lg text-foreground-muted mb-8 text-balance">{t('cta.desc')}</p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <Button size="lg" href="https://app.armarium.ch/register">
          {t('cta.register')}
          <Icon name="arrow-right" size="sm" />
        </Button>
      </div>
    </div>
  </section>
</PageLayout>
