fix: add proper locale detection and URL parsing to 404 page

- Add detectLocaleFromURL helper function to extract locale from URL path
- Handle both params-based and URL-based locale detection
- Make params optional since it's undefined when 404 is triggered
- Use regex to extract locale from URL path (e.g., /en/page -> en)
- Remove debug logging and clean up imports

Note: Currently falling back to default Next.js 404 due to layout component issues

src/app/[locale]/not-found.tsx

@@ -0,0 +1,263 @@
+import { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import { getProducts, getProductImage, getProductPrice } from "@/lib/saleor";
+import { 
+  getSaleorLocale, 
+  isValidLocale, 
+  DEFAULT_LOCALE, 
+  LOCALE_COOKIE,
+  type Locale 
+} from "@/lib/i18n/locales";
+import type { Product } from "@/types/saleor";
+import Link from "next/link";
+import Image from "next/image";
+import { Star, ArrowRight } from "lucide-react";
+import { headers } from "next/headers";
+import { cookies } from "next/headers";
+
+export const metadata: Metadata = {
+  title: "Page Not Found | ManoonOils",
+  description: "Discover our bestselling natural oils for hair and skin care.",
+};
+
+interface NotFoundProps {
+  params?: Promise<{ locale: string }>;
+}
+
+function detectLocaleFromURL(pathname: string): Locale {
+  const match = pathname.match(/^\/(sr|en|de|fr)(?:\/|$)/);
+  if (match && isValidLocale(match[1])) {
+    return match[1];
+  }
+  return DEFAULT_LOCALE;
+}
+
+export default async function NotFound({ params }: NotFoundProps) {
+  const headersList = await headers();
+  const pathname = headersList.get("x-invoke-path") || headersList.get("x-matched-path") || "/";
+  
+  // Try to get locale from params first, then detect from URL
+  let locale: string;
+  
+  if (params) {
+    const paramsData = await params;
+    locale = paramsData.locale;
+  } else {
+    // Detect from URL path
+    locale = detectLocaleFromURL(pathname);
+  }
+  
+  // Validate locale
+  const validLocale: Locale = isValidLocale(locale) ? locale : DEFAULT_LOCALE;
+  
+  const t = await getTranslations({ locale: validLocale, namespace: "NotFound" });
+  const productReviewT = await getTranslations({ locale: validLocale, namespace: "ProductReviews" });
+  
+  const saleorLocale = getSaleorLocale(validLocale);
+  
+  // Fetch products
+  let products: Product[] = [];
+  try {
+    products = await getProducts(saleorLocale);
+  } catch (error) {
+    console.error("Error fetching products for 404 page:", error);
+  }
+  
+  // Get first 4 products as bestsellers
+  const bestsellers = products.slice(0, 4);
+  
+  // Get product reviews
+  const productReviews = productReviewT.raw("reviews") as Array<{
+    id: number;
+    name: string;
+    location: string;
+    text: string;
+    rating: number;
+  }>;
+
+  // Get urgency messages
+  const urgencyMessages = [
+    t("urgency1"),
+    t("urgency2"),
+    t("urgency3", { amount: "3,000" }),
+    t("urgency4"),
+    t("urgency5"),
+  ];
+
+  return (
+    <div className="min-h-screen bg-white">
+      {/* Hero Section */}
+      <section className="pt-24 pb-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-gray-50 to-white">
+        <div className="max-w-4xl mx-auto text-center">
+          <div>
+            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-serif italic text-[#1A1A1A] mb-4 leading-tight">
+              {t("title")}
+            </h1>
+            <p className="text-xl sm:text-2xl text-[#666666] mb-8 font-light">
+              {t("subtitle")}
+            </p>
+            
+            <Link
+              href={`/${validLocale}/products`}
+              className="inline-flex items-center gap-2 px-8 py-4 bg-[#1A1A1A] text-white text-sm uppercase tracking-[0.15em] font-medium hover:bg-[#333333] transition-colors duration-300"
+            >
+              {t("shopBestsellers")}
+              <ArrowRight className="w-4 h-4" />
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Urgency Messages */}
+      <div className="bg-gradient-to-r from-amber-50 to-orange-50 border-y border-amber-100 py-3">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <p className="text-center text-sm sm:text-base text-amber-800 font-medium">
+            {urgencyMessages[0]}
+          </p>
+        </div>
+      </div>
+
+      {/* Bestsellers Section */}
+      <section className="py-16 sm:py-20 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-7xl mx-auto">
+          <div className="text-center mb-12">
+            <span className="text-xs tracking-[0.3em] uppercase text-[#6B7280] mb-4 block">
+              Popular
+            </span>
+            <h2 className="font-serif italic text-3xl sm:text-4xl lg:text-5xl text-[#1A1A1A] tracking-tight">
+              {t("bestsellersTitle")}
+            </h2>
+          </div>
+
+          {bestsellers.length > 0 ? (
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">
+              {bestsellers.map((product) => {
+                const image = getProductImage(product);
+                const price = getProductPrice(product);
+                const isAvailable = product.variants?.[0]?.quantityAvailable > 0;
+
+                return (
+                  <div key={product.id} className="group">
+                    <Link href={`/${validLocale}/products/${product.slug}`} className="block">
+                      <div className="relative w-full aspect-square bg-[#f8f9fa] overflow-hidden mb-4">
+                        {image ? (
+                          <Image
+                            src={image}
+                            alt={product.name}
+                            fill
+                            className="object-cover object-center transition-transform duration-700 ease-out group-hover:scale-105"
+                            sizes="(max-width: 768px) 50vw, 25vw"
+                          />
+                        ) : (
+                          <div className="absolute inset-0 flex items-center justify-center text-[#999999]">
+                            <span className="text-sm">No Image</span>
+                          </div>
+                        )}
+
+                        {!isAvailable && (
+                          <div className="absolute inset-0 bg-white/80 flex items-center justify-center">
+                            <span className="text-sm uppercase tracking-[0.1em] text-[#666666]">
+                              Out of Stock
+                            </span>
+                          </div>
+                        )}
+
+                        <div className="absolute inset-x-0 bottom-0 p-4 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
+                          <div className="w-full py-3 bg-black text-white text-xs uppercase tracking-[0.1em] text-center">
+                            View Product
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="text-center">
+                        <h3 className="text-[15px] font-medium text-[#1a1a1a] mb-1 group-hover:text-[#666666] transition-colors line-clamp-1">
+                          {product.name}
+                        </h3>
+                        <p className="text-[14px] text-[#666666]">
+                          {price || "Contact for price"}
+                        </p>
+                      </div>
+                    </Link>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="text-center py-12">
+              <p className="text-[#666666]">No products available at the moment.</p>
+            </div>
+          )}
+        </div>
+      </section>
+
+      {/* Testimonials Section */}
+      <section className="py-16 sm:py-20 px-4 sm:px-6 lg:px-8 bg-[#F0F7FA]">
+        <div className="max-w-7xl mx-auto">
+          <div className="text-center mb-12">
+            <span className="text-xs tracking-[0.3em] uppercase text-[#6B7280] mb-4 block">
+              Testimonials
+            </span>
+            <h2 className="font-serif italic text-3xl sm:text-4xl lg:text-5xl text-[#1A1A1A] tracking-tight">
+              {t("testimonialsTitle")}
+            </h2>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {productReviews.slice(0, 6).map((review) => (
+              <div key={review.id} className="bg-white rounded-lg p-6 shadow-sm">
+                <div className="flex gap-1 mb-4">
+                  {[...Array(5)].map((_, i) => (
+                    <Star
+                      key={i}
+                      className={`w-4 h-4 ${
+                        i < review.rating
+                          ? "fill-amber-400 text-amber-400"
+                          : "fill-gray-200 text-gray-200"
+                      }`}
+                    />
+                  ))}
+                </div>
+                
+                <p className="text-[#1A1A1A] mb-4 text-sm leading-relaxed">
+                  &ldquo;{review.text}&rdquo;
+                </p>
+                
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-full bg-gradient-to-br from-[#c9a962] to-[#e8967a] flex items-center justify-center text-white font-medium text-sm">
+                    {review.name.charAt(0)}
+                  </div>
+                  <div>
+                    <p className="font-medium text-[#1A1A1A] text-sm">{review.name}</p>
+                    <p className="text-xs text-[#6B7280]">{review.location}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Final CTA Section */}
+      <section className="py-16 sm:py-24 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-4xl mx-auto text-center">
+          <div>
+            <h2 className="font-serif italic text-3xl sm:text-4xl lg:text-5xl text-[#1A1A1A] mb-4 tracking-tight">
+              {t("finalCTATitle")}
+            </h2>
+            <p className="text-lg sm:text-xl text-[#666666] mb-8 font-light">
+              {t("finalCTASubtitle")}
+            </p>
+            
+            <Link
+              href={`/${validLocale}/products`}
+              className="inline-flex items-center gap-2 px-10 py-4 bg-[#1A1A1A] text-white text-sm uppercase tracking-[0.15em] font-medium hover:bg-[#333333] transition-colors duration-300"
+            >
+              {t("viewAllProducts")}
+              <ArrowRight className="w-4 h-4" />
+            </Link>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

src/components/404/UrgencyMessages.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useTranslations } from "next-intl";
+
+export default function UrgencyMessages() {
+  const t = useTranslations("NotFound");
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const messages = [
+    t("urgency1"),
+    t("urgency2"),
+    t("urgency3", { amount: "3,000" }),
+    t("urgency4"),
+    t("urgency5"),
+  ];
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % messages.length);
+    }, 5000);
+
+    return () => clearInterval(interval);
+  }, [messages.length]);
+
+  return (
+    <div className="bg-gradient-to-r from-amber-50 to-orange-50 border-y border-amber-100 py-3 overflow-hidden">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <AnimatePresence mode="wait">
+          <motion.p
+            key={currentIndex}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -20 }}
+            transition={{ duration: 0.5 }}
+            className="text-center text-sm sm:text-base text-amber-800 font-medium"
+          >
+            {messages[currentIndex]}
+          </motion.p>
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}

src/i18n/messages/de.json

@@ -384,5 +384,20 @@
     "orderNumber": "Bestellnummer",
     "confirmationEmail": "Sie erhalten in Kürze eine Bestätigungs-E-Mail. Wir werden Sie kontaktieren, um Nachnahme zu arrangieren.",
     "continueShoppingBtn": "Weiter einkaufen"
+  },
+  "NotFound": {
+    "title": "Wir konnten diese Seite nicht finden...",
+    "subtitle": "...aber wir haben etwas Besseres für Sie gefunden",
+    "shopBestsellers": "Bestseller Shoppen",
+    "bestsellersTitle": "Unsere Bestseller Shoppen",
+    "testimonialsTitle": "Schließen Sie sich 50.000+ zufriedenen Kunden an",
+    "finalCTATitle": "Bereit, Ihre Reise zu beginnen?",
+    "finalCTASubtitle": "Entdecken Sie den natürlichen Unterschied",
+    "viewAllProducts": "Alle Produkte Shoppen",
+    "urgency1": "🔥 500+ Menschen kaufen gerade unsere Bestseller",
+    "urgency2": "⚡ Nur noch 50 Flaschen unseres beliebtesten Serums",
+    "urgency3": "📦 Kostenloser Versand bei Bestellungen über {amount}",
+    "urgency4": "⭐ 4,9/5 Bewertung von 50.000+ zufriedenen Kunden",
+    "urgency5": "🚀 Bestellungen werden innerhalb von 24 Stunden versandt"
   }
 }

src/i18n/messages/en.json

@@ -431,5 +431,20 @@
     "orderNumber": "Order Number",
     "confirmationEmail": "You will receive a confirmation email shortly. We will contact you to arrange Cash on Delivery.",
     "continueShoppingBtn": "Continue Shopping"
+  },
+  "NotFound": {
+    "title": "We couldn't find that page...",
+    "subtitle": "...but we found something better for you",
+    "shopBestsellers": "Shop Bestsellers",
+    "bestsellersTitle": "Shop Our Bestsellers",
+    "testimonialsTitle": "Join 50,000+ Happy Customers",
+    "finalCTATitle": "Ready to Start Your Journey?",
+    "finalCTASubtitle": "Discover the natural difference",
+    "viewAllProducts": "Shop All Products",
+    "urgency1": "🔥 500+ people are shopping our bestsellers right now",
+    "urgency2": "⚡ Only 50 bottles left of our most popular serum",
+    "urgency3": "📦 Free shipping on orders over {amount}",
+    "urgency4": "⭐ 4.9/5 rating from 50,000+ happy customers",
+    "urgency5": "🚀 Orders ship within 24 hours"
   }
 }

src/i18n/messages/fr.json

@@ -384,5 +384,20 @@
     "orderNumber": "Numéro de Commande",
     "confirmationEmail": "Vous recevrez bientôt un email de confirmation. Nous vous contacterons pour organiser le paiement contre-remboursement.",
     "continueShoppingBtn": "Continuer les Achats"
+  },
+  "NotFound": {
+    "title": "Nous n'avons pas trouvé cette page...",
+    "subtitle": "...mais nous avons trouvé quelque chose de mieux pour vous",
+    "shopBestsellers": "Acheter les Best-sellers",
+    "bestsellersTitle": "Acheter Nos Best-sellers",
+    "testimonialsTitle": "Rejoignez 50 000+ Clients Satisfaits",
+    "finalCTATitle": "Prêt à Commencer Votre Voyage?",
+    "finalCTASubtitle": "Découvrez la différence naturelle",
+    "viewAllProducts": "Voir Tous les Produits",
+    "urgency1": "🔥 500+ personnes achètent nos best-sellers en ce moment",
+    "urgency2": "⚡ Plus que 50 bouteilles de notre sérum le plus populaire",
+    "urgency3": "📦 Livraison gratuite pour les commandes supérieures à {amount}",
+    "urgency4": "⭐ Note de 4,9/5 de 50 000+ clients satisfaits",
+    "urgency5": "🚀 Les commandes sont expédiées sous 24 heures"
   }
 }

src/i18n/messages/sr.json

@@ -430,5 +430,20 @@
     "orderNumber": "Broj narudžbine",
     "confirmationEmail": "Uскoro ćete primiti email potvrde. Kontaktiraćemo vas da dogovorimo pouzećem plaćanje.",
     "continueShoppingBtn": "Nastavi kupovinu"
+  },
+  "NotFound": {
+    "title": "Nismo mogli da pronađemo tu stranicu...",
+    "subtitle": "...ali smo pronašli nešto bolje za vas",
+    "shopBestsellers": "Kupi Najprodavanije",
+    "bestsellersTitle": "Kupi Naše Najprodavanije Proizvode",
+    "testimonialsTitle": "Pridruži se 50,000+ Zadovoljnih Kupaca",
+    "finalCTATitle": "Spremni da Zapocnete Svoje Putovanje?",
+    "finalCTASubtitle": "Otkrijte prirodnu razliku",
+    "viewAllProducts": "Pogledaj Sve Proizvode",
+    "urgency1": "🔥 500+ ljudi kupuje naše najprodavanije proizvode upravo sada",
+    "urgency2": "⚡ Preostalo samo 50 bočica našeg najpopularnijeg seruma",
+    "urgency3": "📦 Besplatna dostava za porudžbine preko {amount} RSD",
+    "urgency4": "⭐ Ocena 4.9/5 od 50,000+ zadovoljnih kupaca",
+    "urgency5": "🚀 Porudžbine se šalju u roku od 24 sata"
   }
 }