---
import { getCollection } from "astro:content";
import { getLangFromUrl } from "../i18n/utils";
import GuideCard from "./GuideCard.astro";

const lang = getLangFromUrl(Astro.url);
const guides = await getCollection("guides", ({ data }) => {
  return data.lang === lang;
});

// Nimm die ersten 3 Guides
const previewGuides = guides.slice(0, 3);
---

<section class="max-w-7xl mx-auto px-4 py-20 border-t border-border">
  <div class="text-center max-w-3xl mx-auto mb-16">
    <h2 class="text-heading-mobile md:text-heading text-text-primary mb-4">
      {lang === "de" ? "Hilfreiche Guides" : "Helpful Guides"}
    </h2>
    <p class="text-subheading-mobile md:text-subheading text-text-secondary">
      {
        lang === "de"
          ? "Lerne Memoro kennen und nutze es optimal mit unseren Guides."
          : "Learn about Memoro and use it optimally with our guides."
      }
    </p>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    {
      previewGuides.map((guide) => (
        <GuideCard 
          title={guide.data.title} 
          description={guide.data.description}
          difficulty={guide.data.difficulty}
          duration={guide.data.duration}
          category={guide.data.category}
          slug={guide.slug}
          lang={lang}
          image={guide.data.image}
        />
      ))
    }
  </div>

  <div class="text-center mt-8">
    <a
      href={`/${lang}/guides`}
      class="inline-flex items-center text-primary-DEFAULT hover:text-primary-hover transition-colors"
    >
      {lang === "de" ? "Alle Guides ansehen" : "View all guides"}
      <svg
        class="w-4 h-4 ml-2"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M9 5l7 7-7 7"></path>
      </svg>
    </a>
  </div>
</section>