entscheidomat/app/ratgeber/[slug]/page.tsx

import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import Nav from "@/components/nav";
import Footer from "@/components/footer";
import ContextualGuideLink from "@/components/contextual-guide-link";
import RelatedGuideArticles from "@/components/related-guide-articles";
import { getGuide, GUIDES } from "@/lib/guides";
import { TOOL_PAGES } from "@/lib/tool-pages";

const SITE_URL = "https://entscheidomat.com";

export function generateStaticParams() {
  return GUIDES.map(({ slug }) => ({ slug }));
}

export async function generateMetadata({ params }: PageProps<"/ratgeber/[slug]">): Promise<Metadata> {
  const { slug } = await params;
  const guide = getGuide(slug);
  if (!guide) return {};

  return {
    title: guide.title,
    description: guide.description,
    alternates: { canonical: `/ratgeber/${guide.slug}` },
    openGraph: {
      type: "article",
      locale: "de_DE",
      url: `${SITE_URL}/ratgeber/${guide.slug}`,
      title: guide.title,
      description: guide.description,
      images: [{ url: guide.image.socialSrc, alt: guide.image.alt, width: 1200, height: 630 }],
      publishedTime: "2026-08-03T08:00:00+02:00",
      modifiedTime: "2026-08-03T08:00:00+02:00",
    },
    twitter: {
      card: "summary_large_image",
      title: guide.title,
      description: guide.description,
      images: [{ url: guide.image.socialSrc, alt: guide.image.alt }],
    },
  };
}

export default async function GuidePage({ params }: PageProps<"/ratgeber/[slug]">) {
  const { slug } = await params;
  const guide = getGuide(slug);
  if (!guide) notFound();

  const url = `${SITE_URL}/ratgeber/${guide.slug}`;
  const relatedTools = guide.relatedTools
    .map((slug) => TOOL_PAGES.find((tool) => tool.slug === slug))
    .filter((tool): tool is (typeof TOOL_PAGES)[number] => Boolean(tool));
  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "Article",
        headline: guide.title,
        description: guide.description,
        datePublished: "2026-08-03",
        dateModified: "2026-08-03",
        inLanguage: "de-DE",
        mainEntityOfPage: url,
        author: { "@type": "Person", name: "Timo Knuth" },
        publisher: {
          "@type": "Organization",
          name: "Entscheidomat",
          url: SITE_URL,
          logo: { "@type": "ImageObject", url: `${SITE_URL}/icon.svg`, width: 512, height: 512 },
        },
        image: { "@type": "ImageObject", url: `${SITE_URL}${guide.image.src}`, width: 1536, height: 1024 },
      },
      {
        "@type": "BreadcrumbList",
        itemListElement: [
          { "@type": "ListItem", position: 1, name: "Entscheidomat", item: SITE_URL },
          { "@type": "ListItem", position: 2, name: "Ratgeber", item: `${SITE_URL}/ratgeber` },
          { "@type": "ListItem", position: 3, name: guide.title, item: url },
        ],
      },
    ],
  };

  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c") }} />
      <Nav />
      <main className="flex-1 bg-paper pb-20 pt-28 sm:pt-32">
        <article className="mx-auto w-full max-w-3xl px-5 sm:px-8">
          <nav aria-label="Breadcrumb" className="text-sm text-ink-soft">
            <Link href="/" className="hover:text-[#0d7a57]">Entscheidomat</Link>
            <span aria-hidden className="px-2">/</span>
            <Link href="/ratgeber" className="hover:text-[#0d7a57]">Ratgeber</Link>
          </nav>
          <header className="mt-8 border-b border-line pb-10">
            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[#0d7a57]">{guide.readingTime}</p>
            <h1 className="mt-4 text-balance font-display text-5xl font-semibold leading-[0.95] tracking-[-0.045em] text-ink sm:text-6xl">{guide.title}</h1>
            <p className="mt-6 text-lg leading-relaxed text-ink-soft">{guide.description}</p>
            <p className="mt-6 text-sm text-ink-soft">Von Timo Knuth · Veröffentlicht und aktualisiert am {guide.updated}</p>
          </header>
          <figure className="mt-10 overflow-hidden rounded-3xl border border-line bg-surface shadow-soft">
            <Image src={guide.image.src} alt={guide.image.alt} width={1536} height={1024} priority sizes="(min-width: 1024px) 768px, 100vw" className="h-auto w-full object-cover" />
          </figure>
          <div className="mt-10 space-y-10 text-[1.0625rem] leading-8 text-ink-soft">
            {guide.sections.map((section) => (
              <section key={section.heading}>
                <h2 className="font-display text-3xl font-semibold leading-tight text-ink">{section.heading}</h2>
                <div className="mt-4 space-y-4">
                  {section.paragraphs.map((paragraph) => <p key={paragraph}>{paragraph}</p>)}
                </div>
                {section.bullets && (
                  <ul className="mt-5 space-y-3 border-l-2 border-[#0d7a57]/30 pl-5">
                    {section.bullets.map((bullet) => <li key={bullet}>{bullet}</li>)}
                  </ul>
                )}
                <ContextualGuideLink guide={guide} sectionHeading={section.heading} />
              </section>
            ))}
          </div>
          <RelatedGuideArticles guide={guide} />
          <aside className="mt-12 rounded-3xl border border-emerald-line bg-emerald-soft p-6 text-ink">
            <h2 className="font-display text-2xl font-semibold">Passendes Tool auswählen</h2>
            <p className="mt-2 leading-relaxed text-ink-soft">Für spielerische, folgenarme Entscheidungen kannst du die kostenlosen Tools direkt im Browser nutzen – ohne Anmeldung.</p>
            <div className="mt-4 flex flex-wrap gap-4 text-sm font-semibold text-[#0d7a57]">
              {relatedTools.map((tool) => (
                <Link key={tool.slug} href={`/${tool.slug}`} className="hover:underline">
                  {tool.label}
                </Link>
              ))}
            </div>
          </aside>
        </article>
      </main>
      <Footer />
    </>
  );
}