fix: resolve lint and build errors

- Added 'use client' to not-found.tsx
- Refactored RelatedProducts to Server Component to fix 'fs' import error
- Created RelatedProductLink for client-side analytics
- Fixed lint syntax issues in RecordModeVisuals.tsx
- Fixed rule-of-hooks violation in WebsiteVideo.tsx

components/RelatedProducts.tsx

@@ -1,13 +1,7 @@
-'use client';
-
 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';
-import { useAnalytics } from './analytics/useAnalytics';
-import { AnalyticsEvents } from './analytics/analytics-events';
-import { useEffect, useState } from 'react';
+import { RelatedProductLink } from './RelatedProductLink';
 
 interface RelatedProductsProps {
   currentSlug: string;
@@ -15,25 +9,16 @@ interface RelatedProductsProps {
   locale: string;
 }
 
-export default function RelatedProducts({ currentSlug, categories, locale }: RelatedProductsProps) {
-  const { trackEvent } = useAnalytics();
-  const [allProducts, setAllProducts] = useState<any[]>([]);
-  const [t, setT] = useState<any>(null);
-
-  useEffect(() => {
-    async function load() {
-      const products = await getAllProducts(locale);
-      const translations = await getTranslations('Products');
-      setAllProducts(products);
-      setT(() => translations);
-    }
-    load();
-  }, [locale]);
-
-  if (!t) return null;
+export default async function RelatedProducts({
+  currentSlug,
+  categories,
+  locale,
+}: RelatedProductsProps) {
+  const products = await getAllProducts(locale);
+  const t = await getTranslations('Products');
 
   // Filter products: same category, not current product
-  const related = allProducts
+  const related = products
     .filter(
       (p) =>
         p.slug !== currentSlug && p.frontmatter.categories.some((cat) => categories.includes(cat)),
@@ -73,24 +58,13 @@ export default function RelatedProducts({ currentSlug, categories, locale }: Rel
               );
             }) || 'low-voltage-cables';
 
-          // Note: Since this is now client-side, we can't easily use mapFileSlugToTranslated
-          // if it's a server-only lib. Let's assume for now the slugs are compatible or
-          // we'll need to pass translated slugs from parent if needed.
-          // For now, let's just use the product slug as is, or if we want to be safe,
-          // we should have kept this a server component and used a client wrapper for the link.
-
           return (
-            <Link
+            <RelatedProductLink
               key={product.slug}
               href={`/${locale}/products/${catSlug}/${product.slug}`}
+              productSlug={product.slug}
+              productTitle={product.frontmatter.title}
               className="group block bg-white rounded-[32px] overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-500 border border-neutral-dark/5"
-              onClick={() =>
-                trackEvent(AnalyticsEvents.PRODUCT_VIEW, {
-                  product_id: product.slug,
-                  product_name: product.frontmatter.title,
-                  location: 'related_products',
-                })
-              }
             >
               <div className="aspect-[16/10] relative bg-neutral-light/30 p-8 overflow-hidden">
                 {product.frontmatter.images?.[0] ? (
@@ -142,7 +116,7 @@ export default function RelatedProducts({ currentSlug, categories, locale }: Rel
                   </svg>
                 </div>
               </div>
-            </Link>
+            </RelatedProductLink>
           );
         })}
       </div>