feat: implement i18n for product and category, add 5 new locales

apps/spa/src/pages/ProductDetailPage.tsx

@@ -133,7 +133,7 @@ export default function ProductDetailPage() {
       price: currentVariant.price || product.price || 0,
       productName: displayName,
       variantSize: currentVariant.size,
-      productImage: product.images?.[0]?.url || getCategoryImage(product.category.name)
+      productImage: product.images?.[0]?.url || getCategoryImage(typeof product.category.name === 'string' ? product.category.name : (product.category.name as any)?.en || '')
     })
   }
 
@@ -160,7 +160,7 @@ export default function ProductDetailPage() {
           <Link to="/shop" className="hover:text-spa-forest transition-colors">{t('common.shop')}</Link>
           <span>/</span>
           <Link to={`/category/${product.category.id}`} className="hover:text-spa-forest transition-colors">
-            {product.category.name}
+            {typeof product.category.name === 'string' ? product.category.name : (product.category.name as any)?.[i18n.language] || (product.category.name as any)?.en || ''}
           </Link>
           <span>/</span>
           <span className="text-spa-forest">{displayName}</span>
@@ -172,9 +172,9 @@ export default function ProductDetailPage() {
           <div className="w-full">
             <ProductImageGallery
               images={product.images || []}
-              fallback={getCategoryImage(product.category.name)}
+              fallback={getCategoryImage(typeof product.category.name === 'string' ? product.category.name : (product.category.name as any)?.en || '')}
               alt={product.scent.name}
-              badgeText={product.category.name}
+              badgeText={typeof product.category.name === 'string' ? product.category.name : (product.category.name as any)?.[i18n.language] || (product.category.name as any)?.en || ''}
             />
           </div>
 
@@ -182,7 +182,7 @@ export default function ProductDetailPage() {
           <div className="space-y-8">
             <div className="space-y-2">
               <p className="text-spa-forest uppercase tracking-[0.3em] text-xs font-bold opacity-80">
-                {product.category.name}
+                {typeof product.category.name === 'string' ? product.category.name : (product.category.name as any)?.[i18n.language] || (product.category.name as any)?.en || ''}
               </p>
               <h1 className="text-5xl font-bold leading-tight text-pop-black">
                 {displayName}
@@ -258,7 +258,7 @@ export default function ProductDetailPage() {
                   to={`/category/${product.category.id}`}
                   className="text-pop-black font-bold hover:text-spa-forest transition-colors"
                 >
-                  {product.category.name}
+                  {typeof product.category.name === 'string' ? product.category.name : (product.category.name as any)?.[i18n.language] || (product.category.name as any)?.en || ''}
                 </Link>
               </div>
             </div>