---
import DefaultLayout from "../../layouts/DefaultLayout.astro";
import { listDocuments } from "../../lib/documents";

const documents = listDocuments().filter((d) => d.visible === true);
---

<DefaultLayout title="Dokumenty">
  <section class="max-w-6xl mx-auto px-4 py-10">
    <h1 class="text-4xl md:text-5xl font-bold text-[--f-header]">Dokumenty</h1>

    <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      {documents.map((doc) => (
        <a
          href={`/dokumenty/${doc.slug}`}
          class="group rounded-2xl border border-[--f-border-color]
                 bg-[--f-background] p-5 shadow-sm
                 transition hover:-translate-y-0.5 hover:shadow-md"
        >
          <h3 class="text-xl font-bold group-hover:underline">{doc.title}</h3>

          {doc.intro && (
            <p class="mt-3 text-sm opacity-80 leading-relaxed">{doc.intro}</p>
          )}

          <span class="mt-4 inline-block text-sm opacity-70">Otwórz →</span>
        </a>
      ))}
    </div>
  </section>
</DefaultLayout>
