SEO blogpost

components/related-guides.tsx

@@ -0,0 +1,39 @@
+import Link from "next/link";
+import { GUIDES } from "@/lib/guides";
+
+const MAX = 2;
+
+/**
+ * Zeigt die Ratgeber, die dieses Tool in ihren relatedTools führen.
+ * Gegenrichtung zum Tool-Link im Ratgeber – für kontextbezogenes internes Linking.
+ */
+export default function RelatedGuides({ toolSlug }: { toolSlug: string }) {
+  const matching = GUIDES.filter((guide) =>
+    guide.relatedTools.includes(toolSlug),
+  ).slice(0, MAX);
+
+  if (matching.length === 0) return null;
+
+  return (
+    <article className="p-6 sm:p-7 bg-paper/90 rounded-2xl border border-line shadow-soft">
+      <h2 className="font-display text-xl font-semibold text-ink mb-3">
+        Passende Ratgeber
+      </h2>
+      <ul className="space-y-4">
+        {matching.map((guide) => (
+          <li key={guide.slug}>
+            <Link
+              href={`/ratgeber/${guide.slug}`}
+              className="font-medium text-[#c97d60] hover:underline underline-offset-2 transition-colors"
+            >
+              {guide.title}
+            </Link>
+            <p className="mt-1 text-sm leading-relaxed text-ink-soft">
+              {guide.excerpt}
+            </p>
+          </li>
+        ))}
+      </ul>
+    </article>
+  );
+}