feat: make entire cart drawer UI and WhatsApp order draft fully language-compatible (Swedish default + en/hi/ur translations for title, notes, buttons, and drafted message)

components/CartDrawer.tsx

@@ -30,6 +30,8 @@
 
 import { useCart } from './CartContext';
 import Link from 'next/link';
+import { useLanguage } from "@/lib/language-context";
+import { getTranslation } from "@/lib/translations";
 
 export default function CartDrawer() {
   const { 
@@ -42,6 +44,9 @@ export default function CartDrawer() {
     clearCart 
   } = useCart();
 
+  const { language } = useLanguage();
+  const t = getTranslation(language);
+
   /**
    * WHATSAPP DEEP LINK ORDERING
    * 
@@ -58,16 +63,24 @@ export default function CartDrawer() {
       .map((item) => `${item.quantity} × ${item.name}  —  ${item.price * item.quantity} kr`)
       .join('\n');
 
-    const message = 
-`Hello Shahi Kitchen 👋
+    const now = new Date();
+    const suggested = new Date(now.getTime() + 30 * 60 * 1000);
+    // Use locale-appropriate time formatting so the suggested time in the draft feels native
+    const timeLocale = language === 'sv' ? 'sv-SE' : 'en-GB';
+    const suggestedTime = suggested.toLocaleTimeString(timeLocale, { hour: '2-digit', minute: '2-digit' });
 
-I would like to place an order:
+    const msg = t.cartDrawer;
+    const message = 
+`${msg.messageHello}
+
+${msg.messageIntro}
 
 ${lines}
+${msg.messageConfirm.replace('{time}', suggestedTime)}
 
-Total: ${totalPrice} kr
+${msg.messageTotal}: ${totalPrice} kr
 
-Thank you!`;
+${msg.messageThanks}`;
 
     const encoded = encodeURIComponent(message);
     // This is the same WhatsApp business number used for table reservations on the homepage
@@ -92,10 +105,10 @@ Thank you!`;
         {/* HEADER — Title + item count + quick clear + close button */}
         <div className="flex items-center justify-between p-6 border-b border-[#EDE6D9]">
           <div className="flex items-center gap-3">
-            <h2 className="text-2xl tracking-[-0.5px]">Your Basket</h2>
+            <h2 className="text-2xl tracking-[-0.5px]">{t.cartDrawer.title}</h2>
             {items.length > 0 && (
               <span className="text-xs px-2.5 py-0.5 rounded-full bg-[#EDE6D9] text-[#6B665F]">
-                {items.length} {items.length === 1 ? 'item' : 'items'}
+                {items.length} {items.length === 1 ? t.cartDrawer.item : t.cartDrawer.items}
               </span>
             )}
           </div>
@@ -105,7 +118,7 @@ Thank you!`;
                 onClick={clearCart}
                 className="text-xs text-[#B38B4D] hover:underline"
               >
-                Clear
+                {t.cartDrawer.clear}
               </button>
             )}
             <button 
@@ -123,13 +136,13 @@ Thank you!`;
           {items.length === 0 ? (
             <div className="flex flex-col items-center justify-center h-full text-center">
               <div className="text-6xl mb-4">🛒</div>
-              <p className="text-lg text-[#6B665F]">Your basket is empty</p>
+              <p className="text-lg text-[#6B665F]">{t.cartDrawer.empty}</p>
               <Link 
                 href="/menu" 
                 onClick={closeCart}
                 className="mt-6 text-[#B38B4D] hover:underline"
               >
-                Browse the menu →
+                {t.cartDrawer.browseMenu}
               </Link>
             </div>
           ) : (
@@ -167,7 +180,7 @@ Thank you!`;
                         onClick={() => removeFromCart(item.id)}
                         className="ml-auto text-xs text-[#B38B4D] hover:underline"
                       >
-                        Remove
+                        {t.cartDrawer.remove}
                       </button>
                     </div>
                   </div>
@@ -185,37 +198,41 @@ Thank you!`;
               onClick={clearCart} 
               className="text-xs text-[#8A8478] hover:text-[#B38B4D] mb-3 underline"
             >
-              Clear basket
+              {t.cartDrawer.clearBasket}
             </button>
 
             <div className="flex justify-between text-lg font-medium mb-4">
-              <span>Total</span>
+              <span>{t.cartDrawer.total}</span>
               <span>{totalPrice.toFixed(0)} kr</span>
             </div>
 
+            <p className="text-xs text-center text-[#6B665F] mb-3">
+              {t.cartDrawer.pickupNote}
+            </p>
+
             <button
               onClick={orderViaWhatsApp}
               className="btn-primary w-full py-4 rounded-full text-base tracking-[0.5px] font-medium mb-2 flex items-center justify-center gap-2"
             >
-              Send order via WhatsApp
+              {t.cartDrawer.sendViaWhatsApp}
             </button>
 
             <button
               onClick={() => window.open('tel:031288910', '_self')}
               className="btn-outline w-full py-3 rounded-full text-sm tracking-[0.5px] font-medium mb-3"
             >
-              Call 031-28 89 10
+              {t.cartDrawer.call}
             </button>
 
             <button
               onClick={closeCart}
               className="w-full text-sm text-[#6B665F] hover:text-[#2C2A26] pt-1"
             >
-              Continue browsing
+              {t.cartDrawer.continueBrowsing}
             </button>
 
             <p className="text-[10px] text-center text-[#8A8478] mt-4">
-              WhatsApp opens with your order pre-filled. We will confirm availability.
+              {t.cartDrawer.whatsappHint}
             </p>
           </div>
         )}