feat: optimize event capturing and playback accuracy

components/RelatedProducts.tsx

@@ -13,11 +13,11 @@ interface RelatedProductsProps {
 export default async function RelatedProducts({ currentSlug, categories, locale }: RelatedProductsProps) {
   const allProducts = await getAllProducts(locale);
   const t = await getTranslations('Products');
-  
+
   // Filter products: same category, not current product
   const related = allProducts
-    .filter(p => 
-      p.slug !== currentSlug && 
+    .filter(p =>
+      p.slug !== currentSlug &&
       p.frontmatter.categories.some(cat => categories.includes(cat))
     )
     .slice(0, 3); // Limit to 3 for better spacing
@@ -42,17 +42,19 @@ export default async function RelatedProducts({ currentSlug, categories, locale
           const catSlug = categorySlugs.find(slug => {
             const key = slug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
             const title = t(`categories.${key}.title`);
-            return product.frontmatter.categories.some(cat => 
+            return product.frontmatter.categories.some(cat =>
               cat.toLowerCase().replace(/\s+/g, '-') === slug || cat === title
             );
           }) || 'low-voltage-cables';
-          
+
           const translatedProductSlug = await mapFileSlugToTranslated(product.slug, locale);
-          
+          const translatedCategorySlug = await mapFileSlugToTranslated(catSlug, locale);
+          const productsBase = await mapFileSlugToTranslated('products', locale);
+
           return (
-            <Link 
-              key={product.slug} 
-              href={`/${locale}/products/${catSlug}/${translatedProductSlug}`}
+            <Link
+              key={product.slug}
+              href={`/${locale}/${productsBase}/${translatedCategorySlug}/${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">