---
import { getCollection } from 'astro:content'
import BaseLayout from '@/layouts/BaseLayout.astro'
const articles = (await getCollection('kb')).sort((a, b) => a.data.order - b.data.order)
// Группировка по category
const byCat = new Map<string, typeof articles>()
for (const a of articles) {
  if (!byCat.has(a.data.category)) byCat.set(a.data.category, [])
  byCat.get(a.data.category)!.push(a)
}
---
<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">Пошаговые инструкции по работе с Food Market.</p>
    <div class="mt-10 space-y-8">
      {Array.from(byCat.entries()).map(([cat, items]) => (
        <section>
          <h2 class="text-xs uppercase tracking-wide font-semibold text-slate-500 mb-3">{cat}</h2>
          <ul class="divide-y divide-slate-200 border border-slate-200 rounded-xl bg-white">
            {items.map((a) => (
              <li>
                <a href={`/kb/${a.slug}`} class="block px-5 py-4 hover:bg-slate-50 flex items-center justify-between gap-3">
                  <span class="font-medium">{a.data.title}</span>
                  <span class="text-slate-400 text-sm">→</span>
                </a>
              </li>
            ))}
          </ul>
        </section>
      ))}
    </div>
  </section>
</BaseLayout>
