import Link from "next/link";
import { getAllGuides } from "@/lib/content";
import { GuideCard } from "@/components/guides/GuideCard";
import { Header } from "@/components/layout/Header";

const FEATURED_SLUGS = [
  "erstes-modell-drucken",
  "pla-perfekt-einstellen",
  "stringing-reduzieren",
  "retraction-kalibrieren",
  "guide-orcaslicer-einsteiger",
  "klipper-grundlagen-ersteinrichtung",
];

export default function Home() {
  const allGuides = getAllGuides();
  const featured = FEATURED_SLUGS.map((slug) =>
    allGuides.find((g) => g.slug === slug)
  ).filter(Boolean);

  return (
    <div className="flex flex-col">
      <Header />

      {/* Hero */}
      <section className="relative overflow-hidden border-b border-border">
        <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/5 via-transparent to-emerald-500/5" />
        <div className="relative max-w-5xl mx-auto px-4 py-20 lg:py-28 text-center">
          <h1 className="text-4xl lg:text-5xl font-bold tracking-tight mb-4">
            3D-Druck Wissen,{" "}
            <span className="text-accent">das funktioniert.</span>
          </h1>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto mb-8">
            Praxisnahe Guides fuer fortgeschrittene Hobbyisten. Kalibrierung,
            Materialien, Slicer-Tipps und Fehlerbehebung — alles an einem Ort.
          </p>
          <div className="flex items-center justify-center gap-3">
            <Link
              href="/guides"
              className="inline-flex items-center px-5 py-2.5 rounded-lg bg-accent text-accent-foreground font-medium text-sm hover:bg-emerald-700 dark:hover:bg-emerald-400 transition-colors"
            >
              Alle Guides
              <svg
                className="ml-1.5 w-4 h-4"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                viewBox="0 0 24 24"
              >
                <path d="M5 12h14M12 5l7 7-7 7" />
              </svg>
            </Link>
            <Link
              href="/rechner"
              className="inline-flex items-center px-5 py-2.5 rounded-lg border border-border font-medium text-sm hover:bg-surface-hover transition-colors"
            >
              Filament-Rechner
            </Link>
          </div>
        </div>
      </section>

      {/* Featured Guides */}
      {featured.length > 0 && (
        <section className="max-w-5xl mx-auto px-4 py-16">
          <div className="flex items-center justify-between mb-8">
            <h2 className="text-2xl font-bold">Beliebte Guides</h2>
            <Link
              href="/guides"
              className="text-sm text-accent hover:underline"
            >
              Alle anzeigen →
            </Link>
          </div>
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {featured.map((guide) =>
              guide ? <GuideCard key={guide.slug} guide={guide} /> : null
            )}
          </div>
        </section>
      )}

      {/* Stats */}
      <section className="border-t border-border bg-surface">
        <div className="max-w-5xl mx-auto px-4 py-12">
          <div className="grid grid-cols-3 gap-8 text-center">
            <div>
              <div className="text-3xl font-bold text-accent">
                {allGuides.length || "50"}+
              </div>
              <div className="text-sm text-muted-foreground mt-1">Guides</div>
            </div>
            <div>
              <div className="text-3xl font-bold text-accent">6</div>
              <div className="text-sm text-muted-foreground mt-1">
                Kategorien
              </div>
            </div>
            <div>
              <div className="text-3xl font-bold text-accent">15+</div>
              <div className="text-sm text-muted-foreground mt-1">
                Materialien
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-border">
        <div className="max-w-5xl mx-auto px-4 py-8 flex items-center justify-between text-sm text-muted-foreground">
          <span>&copy; 2026 molzi3d.de</span>
          <div className="flex gap-4">
            <Link href="/impressum" className="hover:text-foreground">
              Impressum
            </Link>
            <Link href="/datenschutz" className="hover:text-foreground">
              Datenschutz
            </Link>
          </div>
        </div>
      </footer>
    </div>
  );
}
