refactor: centralize locale constants to prevent breaking changes

Created src/lib/i18n/locales.ts as single source of truth for:
- SUPPORTED_LOCALES array
- LOCALE_COOKIE name
- DEFAULT_LOCALE
- LOCALE_CONFIG (labels, flags, Saleor locale mapping)
- Helper functions (isValidLocale, getSaleorLocale, getLocaleFromPath)

Updated all files to use centralized constants:
- middleware.ts
- Header.tsx
- ProductCard.tsx
- sitemap.ts
- root layout and locale layout
- routing.ts

Benefits:
- Adding new locale only requires updating ONE file (locales.ts)
- No more hardcoded locale lists scattered across codebase
- Cookie name defined in one place
- Type-safe locale validation

src/components/product/ProductCard.tsx

@@ -6,6 +6,7 @@ import Link from "next/link";
 import { useTranslations } from "next-intl";
 import type { Product } from "@/types/saleor";
 import { getProductPrice, getProductImage, getLocalizedProduct } from "@/lib/saleor";
+import { isValidLocale, getSaleorLocale } from "@/lib/i18n/locales";
 
 interface ProductCardProps {
   product: Product;
@@ -13,13 +14,13 @@ interface ProductCardProps {
   locale?: string;
 }
 
-export default function ProductCard({ product, index = 0, locale = "SR" }: ProductCardProps) {
+export default function ProductCard({ product, index = 0, locale = "sr" }: ProductCardProps) {
   const t = useTranslations("ProductCard");
   const image = getProductImage(product);
   const price = getProductPrice(product);
-  const localized = getLocalizedProduct(product, locale);
+  const saleorLocale = isValidLocale(locale) ? getSaleorLocale(locale) : "SR";
+  const localized = getLocalizedProduct(product, saleorLocale);
   const isAvailable = product.variants?.[0]?.quantityAvailable > 0;
-  const urlLocale = locale === "SR" ? "sr" : "en";
 
   return (
     <motion.div
@@ -28,7 +29,7 @@ export default function ProductCard({ product, index = 0, locale = "SR" }: Produ
       viewport={{ once: true }}
       transition={{ duration: 0.5, delay: index * 0.1 }}
     >
-      <Link href={`/${urlLocale}/products/${localized.slug}`} className="group block">
+      <Link href={`/${locale}/products/${localized.slug}`} className="group block">
         <div className="relative w-full aspect-square bg-[#f8f9fa] overflow-hidden mb-4">
           {image ? (
             <img
@@ -75,4 +76,4 @@ export default function ProductCard({ product, index = 0, locale = "SR" }: Produ
       </Link>
     </motion.div>
   );
-}
+}