import { getAllGuides, getGuideCategories } from "@/lib/content";
import { GuideCard } from "@/components/guides/GuideCard";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Alle Guides",
  description: "Alle 3D-Druck Guides auf einen Blick — sortiert nach Kategorie.",
};

export default function GuidesPage() {
  const guides = getAllGuides();
  const categories = getGuideCategories();

  if (guides.length === 0) {
    return (
      <div className="p-8 text-center text-muted-foreground">
        <p className="text-lg mb-2">Noch keine Guides vorhanden.</p>
        <p className="text-sm">
          Guides werden als Markdown-Dateien in{" "}
          <code className="bg-muted px-1.5 py-0.5 rounded text-xs">
            src/content/guides/
          </code>{" "}
          abgelegt.
        </p>
      </div>
    );
  }

  return (
    <div className="p-6 lg:p-8 max-w-4xl">
      <h1 className="text-3xl font-bold mb-2">Guides</h1>
      <p className="text-muted-foreground mb-8">
        {guides.length} Guides in {categories.length} Kategorien
      </p>

      {categories.map((category) => {
        const categoryGuides = guides.filter((g) => g.category === category);
        if (categoryGuides.length === 0) return null;

        return (
          <section key={category} className="mb-10">
            <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
              <span className="w-1.5 h-1.5 rounded-full bg-accent" />
              {category}
              <span className="text-sm font-normal text-muted-foreground">
                ({categoryGuides.length})
              </span>
            </h2>
            <div className="grid gap-3 sm:grid-cols-2">
              {categoryGuides.map((guide) => (
                <GuideCard key={guide.slug} guide={guide} />
              ))}
            </div>
          </section>
        );
      })}
    </div>
  );
}
