---
import { getCollection } from 'astro:content'
import BaseLayout from '@/layouts/BaseLayout.astro'
const posts = (await getCollection('blog')).sort((a, b) => +b.data.date - +a.data.date)
const fmt = (d: Date) => d.toLocaleDateString('ru-KZ', { day: '2-digit', month: 'long', year: 'numeric' })
---
<BaseLayout title="Блог" description="Блог Food Market: новости, релизы, лучшие практики автоматизации розничных магазинов в Казахстане.">
  <section class="max-w-3xl mx-auto px-4 sm:px-6 py-14">
    <h1 class="text-4xl font-extrabold">Блог</h1>
    <p class="text-slate-500 mt-2">Запуски, миграции, лучшие практики розницы.</p>
    <div class="mt-10 space-y-4">
      {posts.map((p) => (
        <a href={`/blog/${p.slug}`} class="block rounded-xl border border-slate-200 bg-white p-5 hover:shadow-md hover:border-brand transition">
          <div class="text-xs text-slate-500">{fmt(p.data.date)}</div>
          <h2 class="text-xl font-bold mt-1">{p.data.title}</h2>
          <p class="text-sm text-slate-600 mt-2">{p.data.description}</p>
          <span class="text-xs text-brand mt-3 inline-block">Читать →</span>
        </a>
      ))}
    </div>
  </section>
</BaseLayout>
