slug i18n

components/RelatedProducts.tsx

@@ -1,4 +1,5 @@
 import { getAllProducts } from '@/lib/mdx';
+import { mapFileSlugToTranslated } from '@/lib/slugs';
 import { getTranslations } from 'next-intl/server';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -35,7 +36,7 @@ export default async function RelatedProducts({ currentSlug, categories, locale
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-        {related.map((product) => {
+        {related.map(async (product) => {
           // Find the category slug for the link
           const categorySlugs = ['low-voltage-cables', 'medium-voltage-cables', 'high-voltage-cables', 'solar-cables'];
           const catSlug = categorySlugs.find(slug => {
@@ -46,10 +47,12 @@ export default async function RelatedProducts({ currentSlug, categories, locale
             );
           }) || 'low-voltage-cables';
           
+          const translatedProductSlug = await mapFileSlugToTranslated(product.slug, locale);
+          
           return (
             <Link 
               key={product.slug} 
-              href={`/${locale}/products/${catSlug}/${product.slug}`}
+              href={`/${locale}/products/${catSlug}/${translatedProductSlug}`}
               className="group block bg-white rounded-[32px] overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-500 border border-neutral-dark/5"
             >
               <div className="aspect-[16/10] relative bg-neutral-light/30 p-8 overflow-hidden">