'use client';

import React, { useState, useEffect, useRef } from 'react';
import { motion } from 'framer-motion';
import { 
  Clock, Users, Bike, Package, UtensilsCrossed, CheckCircle, 
  AlertCircle, Timer, ArrowRight 
} from 'lucide-react';
import { useLanguage } from '@/lib/language-context';
import { getTranslation } from '@/lib/translations';

import type {
  KitchenOrder as Order,
  KitchenOrderItem as OrderItem,
  OrderStatus,
} from '@/domain/kitchen-order/entities';
import { ORDER_STATUS_PIPELINE } from '@/domain/kitchen-order/entities';

export type { Order, OrderItem };

const STATUS_ORDER = ORDER_STATUS_PIPELINE;

function getStatusMeta(status: OrderStatus, t: any) {
  const statuses = t.screen?.statuses || {
    received: 'Order Received',
    review: 'In Review',
    preparing: 'Preparing',
    packing: 'Packing / Plating',
    ready: 'Ready',
  };
  const colors: Record<OrderStatus, string> = {
    received: 'bg-blue-100 text-blue-800 border-blue-200',
    review: 'bg-amber-100 text-amber-800 border-amber-200',
    preparing: 'bg-orange-100 text-orange-800 border-orange-200',
    packing: 'bg-purple-100 text-purple-800 border-purple-200',
    ready: 'bg-emerald-100 text-emerald-800 border-emerald-200',
  };
  const icons: Record<OrderStatus, React.ReactNode> = {
    received: <AlertCircle className="w-4 h-4" />,
    review: <Clock className="w-4 h-4" />,
    preparing: <UtensilsCrossed className="w-4 h-4" />,
    packing: <Package className="w-4 h-4" />,
    ready: <CheckCircle className="w-4 h-4" />,
  };
  return {
    label: statuses[status] || status,
    color: colors[status],
    icon: icons[status],
    progress: STATUS_ORDER.indexOf(status) / (STATUS_ORDER.length - 1),
  };
}

function getSourceMeta(source: Order['source']) {
  if (source === 'table') return { icon: <Users className="w-4 h-4" />, label: 'Restaurant', color: '#B38B4D' };
  if (source === 'foodora') return { icon: <Bike className="w-4 h-4" />, label: 'Foodora', color: '#E30613' };
  if (source === 'uber') return { icon: <Bike className="w-4 h-4" />, label: 'Uber Eats', color: '#000000' };
  if (source === 'wolt') return { icon: <Bike className="w-4 h-4" />, label: 'Wolt', color: '#00C2E0' };
  if (source === 'pickup') return { icon: <Package className="w-4 h-4" />, label: 'Pickup', color: '#B38B4D' };
  return { icon: <Bike className="w-4 h-4" />, label: 'Delivery', color: '#B38B4D' };
}

// Beautiful subtle particles (adapted from ScreenDisplay for order theme - gold "steam" specks)
function OrderParticles() {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext('2d', { alpha: true });
    if (!ctx) return;

    let width = window.innerWidth;
    let height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;

    const particles = Array.from({ length: 28 }, () => ({
      x: Math.random() * width,
      y: Math.random() * height * 0.85,
      vx: (Math.random() - 0.5) * 0.12,
      vy: -0.08 - Math.random() * 0.12,
      size: 1.0 + Math.random() * 1.6,
      alpha: 0.08 + Math.random() * 0.16,
      phase: Math.random() * Math.PI * 2,
      speed: 0.012 + Math.random() * 0.009,
    }));

    const onResize = () => {
      width = window.innerWidth;
      height = window.innerHeight;
      canvas.width = width;
      canvas.height = height;
    };
    window.addEventListener('resize', onResize);

    let rafId: number;

    const draw = () => {
      ctx.clearRect(0, 0, width, height);

      for (let i = 0; i < particles.length; i++) {
        const p = particles[i];
        p.x += p.vx + Math.sin(p.phase) * 0.04;
        p.y += p.vy;
        p.phase += p.speed;

        if (p.y < -8) {
          p.y = height * 0.88 + Math.random() * 30;
          p.x = Math.random() * width;
        }
        if (p.x < 0) p.x = width;
        if (p.x > width) p.x = 0;

        ctx.fillStyle = `hsla(38, 68%, 52%, ${p.alpha})`;
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
        ctx.fill();
      }
      rafId = requestAnimationFrame(draw);
    };

    draw();

    return () => {
      cancelAnimationFrame(rafId);
      window.removeEventListener('resize', onResize);
    };
  }, []);

  return (
    <canvas
      ref={canvasRef}
      className="fixed inset-0 pointer-events-none z-[1] opacity-60 mix-blend-multiply"
    />
  );
}

export default function OrderDisplay() {
  const { language } = useLanguage();
  const t = getTranslation(language);

  const [orders, setOrders] = useState<Order[]>(() => {
    const now = new Date();
    return [
      // Restaurant orders (tables) - 8 orders
      { id: 'T-05', source: 'table', label: 'Table 5', customer: 'Table 5', items: [{name: 'Butter Chicken', qty: 1}, {name: 'Garlic Naan', qty: 2}], status: 'preparing', receivedAt: new Date(now.getTime() - 1000*60*14), etaMinutes: 6 },
      { id: 'T-12', source: 'table', label: 'Table 12', customer: 'Table 12', items: [{name: 'Lamb Rogan Josh', qty: 2}, {name: 'Biryani', qty: 1}], status: 'ready', receivedAt: new Date(now.getTime() - 1000*60*22), etaMinutes: 0 },
      { id: 'T-03', source: 'table', label: 'Table 3', customer: 'Table 3', items: [{name: 'Samosa Chat', qty: 2}, {name: 'Chana Chat', qty: 1}], status: 'packing', receivedAt: new Date(now.getTime() - 1000*60*11), etaMinutes: 4 },
      { id: 'T-08', source: 'table', label: 'Table 8', customer: 'Table 8', items: [{name: 'Daal Makhani', qty: 1}, {name: 'Rice', qty: 2}], status: 'ready', receivedAt: new Date(now.getTime() - 1000*60*18), etaMinutes: 0 },
      { id: 'T-01', source: 'table', label: 'Table 1', customer: 'Table 1', items: [{name: 'Shahi Paneer', qty: 1}, {name: 'Naan', qty: 3}], status: 'preparing', receivedAt: new Date(now.getTime() - 1000*60*8), etaMinutes: 7 },
      { id: 'T-04', source: 'table', label: 'Table 4', customer: 'Table 4', items: [{name: 'Chicken Tikka', qty: 2}, {name: 'Rice', qty: 1}], status: 'review', receivedAt: new Date(now.getTime() - 1000*60*5), etaMinutes: 10 },
      { id: 'T-06', source: 'table', label: 'Table 6', customer: 'Table 6', items: [{name: 'Lahore Sizzler', qty: 1}, {name: 'Naan', qty: 2}], status: 'packing', receivedAt: new Date(now.getTime() - 1000*60*3), etaMinutes: 5 },
      { id: 'T-07', source: 'table', label: 'Table 7', customer: 'Table 7', items: [{name: 'Tikka Boti', qty: 1}, {name: 'Salad', qty: 1}], status: 'received', receivedAt: new Date(now.getTime() - 1000*60*1), etaMinutes: 12 },

      // Delivery Partners (online) - 8 orders (mix of platforms)
      { id: 'FD-3921', source: 'foodora', label: 'Foodora #FD-3921', customer: 'Aisha K.', items: [{name: 'Lahore Pizza', qty: 1}, {name: 'Mango Lassi', qty: 2}], status: 'packing', receivedAt: new Date(now.getTime() - 1000*60*9), etaMinutes: 3 },
      { id: 'W-884', source: 'wolt', label: 'Wolt #W-884', customer: 'Erik S.', items: [{name: 'Paneer Roll', qty: 3}], status: 'review', receivedAt: new Date(now.getTime() - 1000*60*4), etaMinutes: 11 },
      { id: 'FD-3928', source: 'foodora', label: 'Foodora #FD-3928', customer: 'Maria L.', items: [{name: 'Shahi Burger', qty: 2}, {name: 'Coca-Cola', qty: 2}], status: 'preparing', receivedAt: new Date(now.getTime() - 1000*60*7), etaMinutes: 8 },
      { id: 'UB-551', source: 'uber', label: 'Uber Eats #UB-551', customer: 'Johan P.', items: [{name: 'Chicken Tikka', qty: 1}, {name: 'Keema Naan', qty: 1}], status: 'received', receivedAt: new Date(now.getTime() - 1000*60*2), etaMinutes: 14 },
      { id: 'FD-3935', source: 'foodora', label: 'Foodora #FD-3935', customer: 'Omar B.', items: [{name: 'Butter Chicken', qty: 1}, {name: 'Naan', qty: 2}], status: 'preparing', receivedAt: new Date(now.getTime() - 1000*60*10), etaMinutes: 4 },
      { id: 'W-892', source: 'wolt', label: 'Wolt #W-892', customer: 'Lina T.', items: [{name: 'Veg Pizza', qty: 1}, {name: 'Lassi', qty: 1}], status: 'packing', receivedAt: new Date(now.getTime() - 1000*60*6), etaMinutes: 6 },
      { id: 'UB-562', source: 'uber', label: 'Uber Eats #UB-562', customer: 'Peter H.', items: [{name: 'Lamb Rogan Josh', qty: 1}, {name: 'Rice', qty: 2}], status: 'review', receivedAt: new Date(now.getTime() - 1000*60*12), etaMinutes: 9 },
      { id: 'FD-3940', source: 'foodora', label: 'Foodora #FD-3940', customer: 'Sara N.', items: [{name: 'Tikka Boti Roll', qty: 2}], status: 'packing', receivedAt: new Date(now.getTime() - 1000*60*15), etaMinutes: 2 },

      // Pickup orders (whatsapp/phone) - 8 orders
      { id: 'WA-4521', source: 'pickup', label: 'Pickup WA-4521', customer: 'Ahmed R.', items: [{name: 'Chicken Biryani', qty: 2}, {name: 'Raita', qty: 1}], status: 'preparing', receivedAt: new Date(now.getTime() - 1000*60*13), etaMinutes: 5 },
      { id: 'PH-783', source: 'pickup', label: 'Pickup PH-783', customer: 'Sara M.', items: [{name: 'Veg Pizza', qty: 1}, {name: 'Garlic Naan', qty: 2}], status: 'packing', receivedAt: new Date(now.getTime() - 1000*60*6), etaMinutes: 2 },
      { id: 'WA-4530', source: 'pickup', label: 'Pickup WA-4530', customer: 'Omar K.', items: [{name: 'Tikka Boti', qty: 1}], status: 'ready', receivedAt: new Date(now.getTime() - 1000*60*20), etaMinutes: 0 },
      { id: 'WA-4535', source: 'pickup', label: 'Pickup WA-4535', customer: 'Fatima L.', items: [{name: 'Shahi Paneer', qty: 1}, {name: 'Naan', qty: 1}], status: 'preparing', receivedAt: new Date(now.getTime() - 1000*60*8), etaMinutes: 7 },
      { id: 'PH-791', source: 'pickup', label: 'Pickup PH-791', customer: 'Hassan Q.', items: [{name: 'Daal Makhani', qty: 1}, {name: 'Rice', qty: 2}], status: 'review', receivedAt: new Date(now.getTime() - 1000*60*11), etaMinutes: 8 },
      { id: 'WA-4542', source: 'pickup', label: 'Pickup WA-4542', customer: 'Ayesha S.', items: [{name: 'Samosa Keema', qty: 3}], status: 'packing', receivedAt: new Date(now.getTime() - 1000*60*4), etaMinutes: 3 },
      { id: 'PH-802', source: 'pickup', label: 'Pickup PH-802', customer: 'Bilal M.', items: [{name: 'Lamm Vindaloo', qty: 1}, {name: 'Naan', qty: 2}], status: 'preparing', receivedAt: new Date(now.getTime() - 1000*60*9), etaMinutes: 6 },
      { id: 'WA-4550', source: 'pickup', label: 'Pickup WA-4550', customer: 'Zainab P.', items: [{name: 'Jalebi', qty: 2}, {name: 'Kulfi', qty: 1}], status: 'received', receivedAt: new Date(now.getTime() - 1000*60*1), etaMinutes: 13 },
    ];
  });

  const [lastUpdate, setLastUpdate] = useState(new Date());
  const [liveClock, setLiveClock] = useState(new Date());

  // Live clock
  useEffect(() => {
    const id = setInterval(() => setLiveClock(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

  // Simulate live backend updates (replace with real fetch / WebSocket / polling when ready)
  useEffect(() => {
    const interval = setInterval(() => {
      setOrders(prev => {
        let updated = [...prev];
        const now = new Date();

        // Occasionally advance a random non-ready order
        if (Math.random() < 0.65) {
          const candidates = updated
            .map((o, i) => ({o, i}))
            .filter(({o}) => o.status !== 'ready');
          if (candidates.length > 0) {
            const pick = candidates[Math.floor(Math.random() * candidates.length)];
            const currIdx = STATUS_ORDER.indexOf(pick.o.status);
            if (currIdx < STATUS_ORDER.length - 1) {
              updated[pick.i] = {
                ...pick.o,
                status: STATUS_ORDER[currIdx + 1],
              };
            }
          }
        }

        // Occasionally add a new incoming order (allow up to ~30 total so each category can have 6-10+ for reels)
        if (Math.random() < 0.28 && updated.length < 30) {
          const sources: Order['source'][] = ['table', 'foodora', 'wolt', 'uber', 'pickup'];
          const src = sources[Math.floor(Math.random() * sources.length)];
          const isTable = src === 'table';
          const isPickup = src === 'pickup';
          const num = Math.floor(1000 + Math.random() * 9000);
          const newOrder: Order = {
            id: isTable ? `T-${Math.floor(1+Math.random()*14)}` : isPickup ? `WA-${num}` : `${src.toUpperCase().slice(0,2)}-${num}`,
            source: src,
            label: isTable ? `Table ${Math.floor(1+Math.random()*14)}` : isPickup ? `Pickup WA-${num}` : `${src.charAt(0).toUpperCase() + src.slice(1)} #${src.slice(0,2).toUpperCase()}-${num}`,
            customer: isTable ? `Table ${Math.floor(1+Math.random()*14)}` : isPickup ? ['Ahmed R.', 'Sara M.', 'Omar K.', 'Fatima L.'][Math.floor(Math.random()*4)] : ['A. Khan', 'S. Patel', 'L. Berg', 'M. Lind'][Math.floor(Math.random()*4)],
            items: [
              { name: ['Butter Chicken','Lahore Pizza','Lamb Rogan Josh','Shahi Paneer','Tikka Boti Roll'][Math.floor(Math.random()*5)], qty: 1 + Math.floor(Math.random()*2) },
              { name: ['Naan','Rice','Lassi','Samosa','Salad'][Math.floor(Math.random()*5)], qty: 1 },
            ],
            status: 'received',
            receivedAt: now,
            etaMinutes: 10 + Math.floor(Math.random() * 8),
          };
          updated = [newOrder, ...updated].slice(0, 30);
        }

        // Occasionally remove a very old ready order (simulates pickup / serve)
        if (Math.random() < 0.22) {
          const readyIdx = updated.findIndex(o => o.status === 'ready' && (now.getTime() - o.receivedAt.getTime()) > 1000*60*3);
          if (readyIdx !== -1) updated.splice(readyIdx, 1);
        }

        return updated;
      });
      setLastUpdate(new Date());
    }, 6200); // ~every 6s for mesmerizing live feel

    return () => clearInterval(interval);
  }, []);

  // Group into the three required sections
  const restaurantOrders = orders.filter(o => o.source === 'table').sort((a,b) => b.receivedAt.getTime() - a.receivedAt.getTime());
  const deliveryOrders = orders.filter(o => ['foodora', 'uber', 'wolt', 'other'].includes(o.source)).sort((a,b) => b.receivedAt.getTime() - a.receivedAt.getTime());
  const pickupOrders = orders.filter(o => o.source === 'pickup').sort((a,b) => b.receivedAt.getTime() - a.receivedAt.getTime());
  const readyOrders = orders.filter(o => o.status === 'ready');

  const formatTime = (date: Date) => date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
  const getElapsed = (date: Date) => {
    const mins = Math.floor((Date.now() - date.getTime()) / 60000);
    return `${mins} ${t.screen?.elapsed || 'min'}`;
  };

  const screenLabel = t.screen?.display3 || 'DISPLAY 3';

  // Helper to render a vertical looping reel for a list of orders.
  // Viewport h-full (fills remaining screen height after headers).
  // Cards fixed px height => browser zoom changes # visible (fewer on zoom-in, more on zoom-out), like screen2.
  // Duplicates list for seamless upward CSS loop when count > visible.
  // Always fills screen top-to-bottom with no whitespace.
  const renderOrderReel = (ordersList: Order[], sectionLabel: string, sectionIcon: React.ReactNode) => {
    const count = ordersList.length;
    const shouldLoop = count > 3;
    const displayList = shouldLoop ? [...ordersList, ...ordersList] : ordersList;
    const duration = shouldLoop ? `${count * REEL_TIME_PER_ITEM}s` : undefined;

    return (
      <div className="flex flex-col h-full">
        <div className="flex items-center gap-3 mb-3 px-1 flex-none">
          {sectionIcon}
          <div className="font-medium tracking-[2px] text-sm text-[#B38B4D]">{sectionLabel}</div>
          <div className="flex-1 h-px bg-[#EDE6D9]" />
          <div className="text-xs text-[#6B665F] tabular-nums">{count} ACTIVE</div>
        </div>

        <div 
          className="reel-viewport h-full overflow-hidden"
        >
          <div 
            className="order-reel-track"
            style={{ 
              gap: '8px',
              animationDuration: duration,
              // If not looping, no animation
              animation: shouldLoop ? undefined : 'none'
            }}
          >
            {displayList.map((order, idx) => {
              const meta = getStatusMeta(order.status, t);
              const srcMeta = getSourceMeta(order.source);
              const elapsed = getElapsed(order.receivedAt);
              const isReady = order.status === 'ready';

              // Card with FIXED height in px. + h-full viewport (fills screen) means zoom in: fewer visible/column, zoom out: more visible. No whitespace, max top-bottom.
              return (
                <div 
                  key={`${order.id}-${idx}`}
                  className={`group relative bg-white rounded-2xl border shadow-md overflow-hidden flex flex-col ${isReady ? 'border-emerald-300 ring-1 ring-emerald-200' : 'border-[#EDE6D9]'}`}
                  style={{ height: `${REEL_CARD_HEIGHT}px` }}
                >
                  <div className="px-3 pt-2 pb-1 flex items-start justify-between gap-2 flex-none">
                    <div className="min-w-0">
                      <div className="font-mono text-lg tracking-[-0.5px] font-semibold text-[#2C2A26] leading-none truncate">
                        {order.label}
                      </div>
                      <div className="text-[10px] text-[#6B665F] mt-0.5 tracking-[0.3px] truncate">{order.customer} • {elapsed}</div>
                    </div>

                    <div className={`px-2 py-0.5 rounded-full text-[10px] font-medium tracking-wider border flex items-center gap-1 whitespace-nowrap flex-none ${meta.color}`}>
                      {meta.icon} {meta.label.toUpperCase().slice(0,6)}
                    </div>
                  </div>

                  {/* Compact items */}
                  <div className="px-3 pb-1 text-xs text-[#2C2A26]/90 flex-1 overflow-hidden">
                    {order.items.slice(0,2).map((it, i) => (
                      <div key={i} className="flex justify-between leading-tight py-px">
                        <span className="truncate">{it.qty}× {it.name}</span>
                      </div>
                    ))}
                    {order.items.length > 2 && <div className="text-[10px] text-[#6B665F]">+{order.items.length-2} more</div>}
                  </div>

                  {/* Compact progress */}
                  <div className="px-3 pb-2 pt-0.5 border-t border-[#EDE6D9]/60 bg-[#F8F5F0]/50 flex items-center gap-2 flex-none">
                    <div className="flex-1 h-1 bg-[#EDE6D9] rounded overflow-hidden">
                      <div 
                        className="h-full transition-all" 
                        style={{ 
                          width: `${meta.progress * 100}%`,
                          background: srcMeta.color 
                        }} 
                      />
                    </div>
                    <div className="text-[10px] font-medium whitespace-nowrap tabular-nums" style={{ color: srcMeta.color }}>
                      {isReady ? 'READY' : `${order.etaMinutes}m`}
                    </div>
                  </div>

                  {isReady && (
                    <div className="absolute top-1 right-1 px-2 py-0.5 bg-emerald-600 text-white text-[9px] tracking-widest rounded font-semibold">READY</div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  };

  // Reel settings for screen3 vertical marquees - dynamic with zoom like screen2
  // Fixed card height in px so that browser zoom in/out changes how many cards fit vertically in the column (less when zoom in, more when zoom out).
  // The reel viewport uses 100% of available column height (after section header) to fill the screen with no whitespace.
  const REEL_CARD_HEIGHT = 120; // px per order card - tune for ~3-5 at 100% on 43" TV. Zoom affects visible count.
  const REEL_TIME_PER_ITEM = 6; // seconds per order in the animation - slow upward movement

  return (
    <div className="h-screen bg-[#F8F5F0] text-[#2C2A26] overflow-hidden select-none flex flex-col screen-root">
      <OrderParticles />

      {/* Mesmerizing top bar - luxurious, welcoming, eye-catching for customers & riders. Taller, pulsing LIVE, centered tagline, elegant depth for 43" kiosk appeal. */}
      <div className="relative z-20 h-20 border-b border-[#EDE6D9]/50 bg-gradient-to-b from-[#F8F5F0] via-[#F8F5F0]/98 to-[#F8F5F0]/95 backdrop-blur-xl flex items-center px-10 text-sm flex-none shadow-[0_2px_8px_rgba(0,0,0,0.03)]">
        <div className="flex items-center gap-5">
          {/* Brand with depth and elegance */}
          <div className="flex items-baseline gap-1.5">
            <div className="font-serif text-[28px] tracking-[-2.2px] text-[#2C2A26] drop-shadow-sm">SHAHI KITCHEN</div>
            <div className="text-[9px] text-[#B38B4D] tracking-[2px] font-medium -mb-1">EST. 2016</div>
          </div>

          {/* Elegant status badges */}
          <div className="flex items-center gap-2">
            <div className="text-[11px] px-3.5 py-1 rounded-full border border-[#B38B4D]/60 text-[#B38B4D] tracking-[3px] font-medium bg-white/60 backdrop-blur-sm">
              {screenLabel}
            </div>
            <motion.div
              animate={{ scale: [1, 1.08, 1], opacity: [0.9, 1, 0.9] }}
              transition={{ duration: 2.2, repeat: Infinity, ease: "easeInOut" }}
              className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-[#B38B4D] text-white text-[10px] tracking-[2.5px] font-semibold shadow-sm"
            >
              <div className="w-1.5 h-1.5 rounded-full bg-white animate-pulse" />
              LIVE
            </motion.div>
          </div>
        </div>

        <div className="flex-1" />

        {/* Centered mesmerizing tagline */}
        <div className="hidden md:block text-center">
          <div className="text-[11px] tracking-[4.5px] text-[#B38B4D]/70 font-medium">YOUR JOURNEY TO FLAVOR • REAL-TIME MAGIC</div>
        </div>

        <div className="flex-1" />

        {/* Right info - elegant and clear */}
        <div className="flex items-center gap-7 text-[#6B665F] tracking-[1.5px] text-xs">
          <div className="flex items-center gap-2.5">
            <div>ASKIM</div>
            <div className="w-px h-2.5 bg-[#EDE6D9]" />
            <div>BACKAPLAN</div>
          </div>
          <div className="h-3 w-px bg-[#EDE6D9]/70" />
          <div className="font-mono text-[#B38B4D] text-sm tracking-widest tabular-nums">
            {liveClock.toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'})}
          </div>
          <div className="text-[10px] px-2.5 py-0.5 rounded bg-[#B38B4D]/10 text-[#B38B4D] tracking-[1.5px]">
            {t.screen?.prepared?.toUpperCase() || 'FRESHLY PREPARED'}
          </div>
        </div>
      </div>

      {/* Hero header with beautiful typography and live feel */}
      <div className="relative z-10 bg-[#101724] text-white flex-none py-5 px-9 border-b border-white/10">
        <div className="max-w-[1680px] mx-auto flex items-end justify-between">
          <div>
            <div className="inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-1 text-xs tracking-[3.5px] mb-2 border border-white/20">
              {t.screen?.orderBoard || 'LIVE ORDER BOARD'}
            </div>
            <h1 className="font-serif text-[42px] md:text-[52px] leading-[0.9] tracking-[-2.2px] text-white">
              {t.screen?.orderSubtitle || 'Delivery • Pickup • Restaurant — live for riders & guests'}
            </h1>
            <p className="mt-1.5 text-white/60 tracking-[0.5px] text-sm">
              Delivery Partners • Pickup (WhatsApp/Phone) • Restaurant Tables • Real-time kitchen progress
            </p>
          </div>

          <div className="text-right text-sm">
            <div className="text-[#B38B4D] tracking-[2px] text-xs mb-0.5">LAST SYNC</div>
            <div className="font-mono text-lg text-white/90">{formatTime(lastUpdate)}</div>
            <div className="text-[10px] text-white/50 mt-0.5">{t.screen?.liveUpdates || 'Live updates • Backend integration coming soon'}</div>
          </div>
        </div>
      </div>

      {/* Stats bar - beautiful metrics with motion - three sections */}
      <div className="relative z-10 bg-[#F8F5F0] border-b border-[#EDE6D9]/60 py-3 px-9 flex-none">
        <div className="max-w-[1680px] mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
          <div className="flex items-center gap-3">
            <div className="text-[#B38B4D]"><Users className="w-5 h-5" /></div>
            <div>
              <div className="font-medium text-lg leading-none">{restaurantOrders.length}</div>
              <div className="text-[#6B665F] text-xs tracking-[1px]">RESTAURANT ORDERS</div>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <div className="text-[#B38B4D]"><Bike className="w-5 h-5" /></div>
            <div>
              <div className="font-medium text-lg leading-none">{deliveryOrders.length}</div>
              <div className="text-[#6B665F] text-xs tracking-[1px]">DELIVERY PARTNERS</div>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <div className="text-[#B38B4D]"><Package className="w-5 h-5" /></div>
            <div>
              <div className="font-medium text-lg leading-none">{pickupOrders.length}</div>
              <div className="text-[#6B665F] text-xs tracking-[1px]">PICKUP ORDERS (WA/PHONE)</div>
            </div>
          </div>
          <div className="flex items-center gap-3 text-[#6B665F]">
            <Timer className="w-5 h-5 text-[#B38B4D]" />
            <div className="text-xs tracking-[1.5px] leading-tight">
              AVERAGE PREP TIME<br />
              <span className="text-[#2C2A26] font-medium">12-16 MIN</span>
            </div>
          </div>
        </div>
      </div>

      {/* Main beautiful content area - THREE COLUMNS with vertical reels filling entire remaining screen height */}
      {/* Reels use h-full after fixed headers; cards fixed px height => zoom in: fewer visible per column, zoom out: more visible. No white space, max top to bottom like screen2 max left to right. */}
      <div className="flex-1 min-h-0 overflow-hidden px-4 py-2 md:px-6 md:py-3 bg-[#F8F5F0]">
        <div className="max-w-[1680px] mx-auto h-full grid grid-cols-1 lg:grid-cols-3 gap-4" style={{ minHeight: 0 }}>
          {/* 1. DELIVERY PARTNERS - reel column */}
          <div className="flex flex-col h-full">
            {renderOrderReel(deliveryOrders, 'DELIVERY PARTNERS', <Bike className="w-5 h-5 text-[#B38B4D]" />)}
          </div>

          {/* 2. PICKUP ORDERS (WHATSAPP/PHONE) - reel column */}
          <div className="flex flex-col h-full">
            {renderOrderReel(pickupOrders, 'PICKUP ORDERS (WHATSAPP/PHONE)', <Package className="w-5 h-5 text-[#B38B4D]" />)}
          </div>

          {/* 3. RESTAURANT ORDERS - reel column */}
          <div className="flex flex-col h-full">
            {renderOrderReel(restaurantOrders, 'RESTAURANT ORDERS', <Users className="w-5 h-5 text-[#B38B4D]" />)}
          </div>
        </div>
      </div>

      {/* Bottom elegant bar / marquee for future rider messages */}
      <div className="relative z-10 py-2.5 text-center text-[11px] tracking-[3px] text-[#8A8478] border-t border-[#EDE6D9]/60 bg-[#F8F5F0] flex-none flex items-center justify-center gap-4">
        <div>SHAHI KITCHEN • GOTHENBURG • FRESH EVERY DAY</div>
        <div className="h-px w-6 bg-[#EDE6D9]" />
        <div className="text-[#B38B4D] font-medium">INTEGRATING WITH FOODORA • WOLT • UBER EATS</div>
        <div className="h-px w-6 bg-[#EDE6D9]" />
        <div>BACKEND API READY SOON — LIVE DATA FEED</div>
      </div>
    </div>
  );
}