Replace entire repo content with updated code from /root/shahikitchen-website/

components/ScreenDisplay.tsx

@@ -12,6 +12,11 @@ import {
 import { menuCategories, allMenuItems, type MenuItem, type MenuCategory } from '@/lib/menu-data';
 import { useLanguage } from '@/lib/language-context';
 import { getTranslation } from '@/lib/translations';
+import {
+  getMenuItemDescription,
+  getMenuItemName,
+} from '@/application/i18n/menu-localization';
+import type { Language } from '@/domain/language/entities';
 
 interface ScreenDisplayProps {
   screen: 1 | 2;
@@ -102,9 +107,20 @@ function SpiceParticles() {
   );
 }
 
-function MenuCard({ item, isHighlighted, t }: { item: MenuItem; isHighlighted?: boolean; t: any }) {
+function MenuCard({
+  item,
+  isHighlighted,
+  language,
+  t,
+}: {
+  item: MenuItem;
+  isHighlighted?: boolean;
+  language: Language;
+  t: ReturnType<typeof getTranslation>;
+}) {
   const poster = getMenuPosterSrc(item, 'optimized');
-  const desc = (t as any).menuDescriptions?.[item.id] || item.description || '';
+  const displayName = getMenuItemName(language, item);
+  const desc = getMenuItemDescription(language, t, item);
 
   return (
     <motion.div
@@ -119,7 +135,7 @@ function MenuCard({ item, isHighlighted, t }: { item: MenuItem; isHighlighted?:
       <div className="relative h-36 bg-[#F2EDE4] overflow-hidden">
         <motion.img
           src={poster}
-          alt={item.name}
+          alt={displayName}
           className="absolute inset-0 w-full h-full object-cover"
           animate={{ scale: [1, 1.018, 1] }}
           transition={{ duration: 8.5, repeat: Infinity, ease: 'easeInOut' }}
@@ -147,7 +163,7 @@ function MenuCard({ item, isHighlighted, t }: { item: MenuItem; isHighlighted?:
 
       <div className="p-3.5 flex-1 flex flex-col">
         <div className="font-medium tracking-[-0.3px] text-[15px] leading-tight text-[#2C2A26] mb-1 line-clamp-1 group-hover:text-[#B38B4D] transition-colors">
-          {item.name}
+          {displayName}
         </div>
         <p className="text-[#6B665F] text-[12px] leading-snug line-clamp-2 flex-1">
           {desc}
@@ -257,7 +273,8 @@ export default function ScreenDisplay({ screen }: ScreenDisplayProps) {
     };
   }, []);
 
-  const translatedDesc = current ? ((t as any).menuDescriptions?.[current.id] || current.description) : '';
+  const currentDisplayName = current ? getMenuItemName(language, current) : '';
+  const translatedDesc = current ? getMenuItemDescription(language, t, current) : '';
 
   // =====================================================
   // CONTINUOUS MENU REEL (one line, loop like a film reel) - items move LEFT
@@ -282,6 +299,7 @@ export default function ScreenDisplay({ screen }: ScreenDisplayProps) {
   // ReelCard: large poster + number+name on left, price on right (opposite side, same line) so price is always clearly visible as cards move left in the reel. Sized big for 43" TV distance viewing.
   function ReelCard({ item, number }: { item: MenuItem; number: number }) {
     const numStr = String(number).padStart(2, '0');
+    const reelName = getMenuItemName(language, item);
 
     return (
       <div 
@@ -291,7 +309,7 @@ export default function ScreenDisplay({ screen }: ScreenDisplayProps) {
         <div className="relative bg-[#F2EDE4]" style={{ height: '320px' }}>
           <motion.img
             src={getMenuPosterSrc(item, 'optimized')}
-            alt={item.name}
+            alt={reelName}
             className="w-full h-full object-cover"
             animate={{ scale: [1, 1.015, 1] }}
             transition={{ duration: 6, repeat: Infinity, ease: 'easeInOut' }}
@@ -304,7 +322,7 @@ export default function ScreenDisplay({ screen }: ScreenDisplayProps) {
         </div>
         <div className="px-4 py-5 flex items-baseline justify-between gap-4">
           <div className="font-serif text-3xl tracking-[-0.5px] leading-none text-[#2C2A26]">
-            {numStr}. {item.name}
+            {numStr}. {reelName}
           </div>
           <div className="text-[#B38B4D] text-2xl font-semibold tracking-tight whitespace-nowrap">
             {item.price} kr
@@ -381,7 +399,7 @@ export default function ScreenDisplay({ screen }: ScreenDisplayProps) {
                 <motion.img
                   key={`${current.id}-poster`}
                   src={getMenuPosterSrc(current, 'optimized')}
-                  alt={current.name}
+                  alt={currentDisplayName}
                   className="absolute inset-0 w-full h-full object-cover"
                   initial={{ opacity: 0, scale: 1 }}
                   animate={{ opacity: 1, scale: [1, 1.06, 1] }}
@@ -420,7 +438,7 @@ export default function ScreenDisplay({ screen }: ScreenDisplayProps) {
                 </div>
 
                 <h1 className="font-serif text-[56px] md:text-[64px] leading-[0.88] tracking-[-3.2px] mb-2 text-[#B38B4D] drop-shadow-[0_0_10px_rgba(179,139,77,0.85)]">
-                  {current.name}
+                  {currentDisplayName}
                 </h1>
 
                 <div className="flex items-baseline gap-2 mb-4">