// ScanOrderPay — Tenant-side dashboards (6 screens, dark theme)
// Manager → Kitchen → Owner. Matches guest flow palette.

const TOP = {
  bg:       '#0b0709',
  bg2:      '#140b0c',
  surface:  'rgba(31, 19, 18, 0.72)',
  surface2: 'rgba(22, 13, 12, 0.92)',
  border:   'rgba(251, 146, 60, 0.18)',
  border2:  'rgba(148, 115, 100, 0.18)',
  ink:      '#fdf4e3',
  body:     '#e5d5c0',
  muted:    '#a89684',
  dim:      '#7a6a5c',
  amber:    '#f59e0b',
  amber2:   '#fbbf24',
  amber3:   '#fcd34d',
  orange:   '#f97316',
  orange2:  '#fdba74',
  red:      '#ef4444',
  red2:     '#fca5a5',
  cyan:     '#22d3ee',
  cyan2:    '#67e8f9',
  mint:     '#6ee7b7',
  green:    '#10b981',
  plum:     '#c4b5fd',
  violet:   '#a78bfa',
  serif:    "'Instrument Serif', serif",
  mono:     "'JetBrains Mono', ui-monospace, monospace",
  sans:     "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
};

// ───────────── Window Chrome (custom, dark) ─────────────
function TenantWindow({ width = 1280, height = 820, app = 'ScanOrderPay Control', role = 'Manager · Maria K.', children, accent = 'amber', active = 'orders' }) {
  const accentColor = accent === 'amber' ? TOP.amber2 : accent === 'cyan' ? TOP.cyan2 : TOP.mint;
  const nav = [
    { id:'orders',    label:'Orders',    icon:'bi-receipt', badge: 4 },
    { id:'kitchen',   label:'Kitchen',   icon:'bi-fire' },
    { id:'tables',    label:'Tables',    icon:'bi-grid-3x3' },
    { id:'menu',      label:'Menu',      icon:'bi-journal-bookmark' },
    { id:'staff',     label:'Staff',     icon:'bi-people' },
    { id:'analytics', label:'Analytics', icon:'bi-graph-up-arrow' },
    { id:'finance',   label:'Finance',   icon:'bi-bank' },
    { id:'settings',  label:'Settings',  icon:'bi-sliders' },
  ];
  return (
    <div style={{
      width, height, borderRadius: 20, overflow: 'hidden',
      background: TOP.bg, color: TOP.ink, display: 'flex',
      border: `1px solid ${TOP.border2}`,
      boxShadow: '0 40px 120px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.03)',
      fontFamily: TOP.sans,
      position: 'relative',
    }}>
      {/* Sidebar */}
      <div style={{
        width: 230, flexShrink: 0,
        background: 'linear-gradient(180deg, rgba(20,11,12,0.9), rgba(11,7,9,0.85))',
        borderRight: `1px solid ${TOP.border2}`,
        display: 'flex', flexDirection: 'column',
        padding: '18px 0',
      }}>
        {/* Traffic lights + brand */}
        <div style={{ display:'flex', alignItems:'center', gap: 8, padding: '0 16px 20px', borderBottom: `1px solid ${TOP.border2}` }}>
          <div style={{ display:'flex', gap: 6 }}>
            <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#ff5f57', opacity: 0.9 }}/>
            <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#ffbd2e', opacity: 0.9 }}/>
            <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#28c940', opacity: 0.9 }}/>
          </div>
          <div style={{ marginLeft:'auto', display:'flex', alignItems:'center', gap:8 }}>
            <div style={{
              width: 26, height: 26, borderRadius: 8,
              background: `linear-gradient(135deg, ${TOP.amber}, ${TOP.orange})`,
              display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontSize:12,
              boxShadow: '0 4px 12px rgba(245,158,11,0.4)',
            }}><i className="bi bi-qr-code-scan"/></div>
            <div style={{ fontSize: 13, fontWeight: 700 }}>
              Scan<span style={{ fontFamily: TOP.serif, fontStyle:'italic', fontWeight:400, color: TOP.amber2 }}>Order</span>Pay
            </div>
          </div>
        </div>

        {/* tenant switcher */}
        <div style={{ padding: '14px 12px' }}>
          <div style={{
            padding: '10px 12px', borderRadius: 12,
            background: TOP.surface2, border: `1px solid ${TOP.border2}`,
            display:'flex', alignItems:'center', gap: 10,
          }}>
            <div style={{
              width: 34, height: 34, borderRadius: 10,
              background: `linear-gradient(135deg, oklch(0.62 0.17 30), oklch(0.42 0.15 25))`,
              display:'flex', alignItems:'center', justifyContent:'center',
              color:'#fff', fontWeight: 800, fontSize: 13, fontFamily: TOP.mono,
            }}>DB</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12, fontWeight: 700, color: TOP.ink, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>Different Beast</div>
              <div style={{ fontFamily: TOP.mono, fontSize: 9.5, color: TOP.dim, letterSpacing:'0.1em' }}>KIFISIÁ · TENANT #04</div>
            </div>
            <i className="bi bi-chevron-expand" style={{ color: TOP.muted, fontSize: 12 }}/>
          </div>
        </div>

        {/* nav */}
        <div style={{ padding: '4px 10px', display:'flex', flexDirection:'column', gap: 2 }}>
          <div style={{ fontFamily: TOP.mono, fontSize: 9, color: TOP.dim, letterSpacing:'0.22em', padding: '8px 10px 4px' }}>OPERATE</div>
          {nav.slice(0, 5).map(n => (
            <NavRow key={n.id} n={n} active={active === n.id} accentColor={accentColor}/>
          ))}
          <div style={{ fontFamily: TOP.mono, fontSize: 9, color: TOP.dim, letterSpacing:'0.22em', padding: '14px 10px 4px' }}>GROW</div>
          {nav.slice(5).map(n => (
            <NavRow key={n.id} n={n} active={active === n.id} accentColor={accentColor}/>
          ))}
        </div>

        <div style={{ flex: 1 }}/>

        {/* user */}
        <div style={{ padding: '12px', borderTop: `1px solid ${TOP.border2}`, display:'flex', alignItems:'center', gap: 10 }}>
          <div style={{
            width: 32, height: 32, borderRadius: '50%',
            background: `linear-gradient(135deg, ${TOP.amber2}, ${TOP.orange})`,
            display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontWeight: 800, fontSize: 12,
          }}>MK</div>
          <div style={{ flex:1, minWidth: 0 }}>
            <div style={{ fontSize: 12, color: TOP.ink, fontWeight: 600 }}>{role.split('·')[1]?.trim() || role}</div>
            <div style={{ fontSize: 10, color: TOP.dim, fontFamily: TOP.mono, letterSpacing:'0.08em' }}>{role.split('·')[0]?.trim().toUpperCase()}</div>
          </div>
          <i className="bi bi-box-arrow-right" style={{ color: TOP.muted, fontSize: 13 }}/>
        </div>
      </div>

      {/* Main */}
      <div style={{ flex: 1, display:'flex', flexDirection:'column', minWidth: 0, position:'relative' }}>
        {/* top bar */}
        <div style={{
          height: 52, flexShrink: 0, display:'flex', alignItems:'center', gap: 14,
          padding: '0 22px', borderBottom: `1px solid ${TOP.border2}`,
          background: 'linear-gradient(180deg, rgba(22,13,12,0.6), rgba(11,7,9,0.0))',
        }}>
          <div style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.dim, letterSpacing: '0.22em', fontWeight: 600 }}>
            {app.toUpperCase()}
          </div>
          <div style={{ width: 1, height: 16, background: TOP.border2 }}/>
          <div style={{ fontSize: 12, color: TOP.body }}>
            <span style={{ color: TOP.dim }}>Sun · Apr 18 ·</span> <b style={{ color: TOP.ink }}>20:14</b>
          </div>
          <div style={{ flex: 1 }}/>

          <div style={{
            display:'flex', alignItems:'center', gap: 8,
            padding: '5px 10px', borderRadius: 999,
            background: 'rgba(16,185,129,0.1)', border: '1px solid rgba(16,185,129,0.3)',
          }}>
            <div style={{ width: 6, height: 6, borderRadius:'50%', background: TOP.mint, boxShadow: `0 0 8px ${TOP.mint}` }}/>
            <span style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.mint, letterSpacing:'0.14em', fontWeight: 600 }}>LIVE · 18 OPEN TABLES</span>
          </div>

          <div style={{
            display:'flex', alignItems:'center', gap: 8,
            padding: '5px 12px', borderRadius: 999,
            background: TOP.surface2, border: `1px solid ${TOP.border2}`,
            color: TOP.muted, fontSize: 12,
          }}>
            <i className="bi bi-search" style={{ fontSize: 11 }}/>
            <span style={{ fontFamily: TOP.mono, fontSize: 10, letterSpacing:'0.1em' }}>⌘K</span>
          </div>

          <div style={{ width: 30, height: 30, borderRadius: 8, background: TOP.surface2, border: `1px solid ${TOP.border2}`, display:'flex', alignItems:'center', justifyContent:'center', color: TOP.muted, position:'relative' }}>
            <i className="bi bi-bell"/>
            <div style={{ position:'absolute', top: 4, right: 4, width: 7, height: 7, borderRadius:'50%', background: TOP.red, boxShadow: `0 0 6px ${TOP.red}` }}/>
          </div>
        </div>

        {/* Page content */}
        <div style={{ flex: 1, overflow: 'auto', position:'relative' }}>
          {children}
        </div>
      </div>
    </div>
  );
}

function NavRow({ n, active, accentColor }) {
  return (
    <div style={{
      display:'flex', alignItems:'center', gap: 10,
      padding: '9px 10px', borderRadius: 10,
      background: active ? 'rgba(245,158,11,0.1)' : 'transparent',
      border: `1px solid ${active ? 'rgba(251,191,36,0.28)' : 'transparent'}`,
      color: active ? TOP.amber2 : TOP.body,
      fontSize: 13, fontWeight: active ? 600 : 500,
      position: 'relative',
    }}>
      <i className={`bi ${n.icon}`} style={{ fontSize: 14, width: 16, color: active ? TOP.amber2 : TOP.muted }}/>
      <span>{n.label}</span>
      {n.badge && (
        <span style={{
          marginLeft:'auto', padding: '1px 7px', borderRadius: 999,
          background: active ? 'rgba(245,158,11,0.25)' : 'rgba(239,68,68,0.18)',
          color: active ? TOP.amber2 : TOP.red2,
          fontFamily: TOP.mono, fontSize: 9.5, fontWeight: 700, letterSpacing: '0.04em',
        }}>{n.badge}</span>
      )}
    </div>
  );
}

// ───────────── small atoms ─────────────
function TChip({ children, color = 'amber', solid = false, style = {} }) {
  const map = {
    amber:  { c: TOP.amber2, b: 'rgba(245,158,11,0.35)', bg: 'rgba(245,158,11,0.12)' },
    orange: { c: TOP.orange2, b: 'rgba(249,115,22,0.4)', bg: 'rgba(249,115,22,0.12)' },
    green:  { c: TOP.mint,   b: 'rgba(16,185,129,0.38)', bg: 'rgba(16,185,129,0.12)' },
    cyan:   { c: TOP.cyan2,  b: 'rgba(34,211,238,0.38)', bg: 'rgba(34,211,238,0.12)' },
    red:    { c: TOP.red2,   b: 'rgba(239,68,68,0.38)', bg: 'rgba(239,68,68,0.12)' },
    violet: { c: TOP.plum,   b: 'rgba(167,139,250,0.38)', bg: 'rgba(167,139,250,0.1)' },
    dim:    { c: TOP.muted,  b: TOP.border2, bg: 'rgba(22,13,12,0.6)' },
  };
  const s = map[color];
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', gap: 6,
      padding: '4px 9px', borderRadius: 999,
      background: solid ? s.c : s.bg,
      border: `1px solid ${s.b}`,
      color: solid ? '#0b0709' : s.c,
      fontFamily: TOP.mono, fontSize: 10, fontWeight: 600, letterSpacing:'0.04em',
      ...style,
    }}>{children}</span>
  );
}

function Card({ children, style = {}, glow = false }) {
  return (
    <div style={{
      background: TOP.surface, border: `1px solid ${TOP.border2}`,
      borderRadius: 16, padding: 18,
      boxShadow: glow ? '0 0 40px rgba(245,158,11,0.08)' : 'none',
      ...style,
    }}>{children}</div>
  );
}

// Sparkline
function Spark({ data, color = TOP.amber2, h = 36, w = 120 }) {
  const max = Math.max(...data), min = Math.min(...data);
  const pts = data.map((v, i) => {
    const x = (i / (data.length - 1)) * w;
    const y = h - ((v - min) / (max - min || 1)) * (h - 4) - 2;
    return `${x},${y}`;
  }).join(' ');
  return (
    <svg width={w} height={h} style={{ display:'block' }}>
      <defs>
        <linearGradient id={`sk-${color.replace('#','')}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.4"/>
          <stop offset="100%" stopColor={color} stopOpacity="0"/>
        </linearGradient>
      </defs>
      <polyline points={pts} fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
      <polygon points={`0,${h} ${pts} ${w},${h}`} fill={`url(#sk-${color.replace('#','')})`}/>
    </svg>
  );
}

// Table placeholder (floor-plan tile)
function FloorTile({ n, state, seats, ticket, highlight }) {
  const colorMap = {
    open:    { bg: 'rgba(148,115,100,0.06)', b: TOP.border2, c: TOP.muted, label:'OPEN' },
    seated:  { bg: 'rgba(34,211,238,0.1)', b: 'rgba(34,211,238,0.3)', c: TOP.cyan2, label:'SEATED' },
    ordered: { bg: 'rgba(245,158,11,0.12)', b: 'rgba(251,191,36,0.35)', c: TOP.amber2, label:'ORDERED' },
    cooking: { bg: 'rgba(249,115,22,0.18)', b: 'rgba(249,115,22,0.45)', c: TOP.orange2, label:'COOKING' },
    served:  { bg: 'rgba(16,185,129,0.1)', b: 'rgba(16,185,129,0.3)', c: TOP.mint, label:'SERVED' },
    paid:    { bg: 'rgba(167,139,250,0.1)', b: 'rgba(167,139,250,0.3)', c: TOP.plum, label:'PAID' },
  };
  const s = colorMap[state] || colorMap.open;
  return (
    <div style={{
      position:'relative', padding: '12px 10px', borderRadius: 12,
      background: s.bg, border: `1.5px solid ${highlight ? s.c : s.b}`,
      boxShadow: highlight ? `0 0 18px ${s.c}33` : 'none',
      display:'flex', flexDirection:'column', gap: 4, minHeight: 86,
    }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
        <div style={{ fontSize: 22, fontWeight: 800, color: TOP.ink, letterSpacing:'-0.02em', fontFamily: TOP.mono }}>{n}</div>
        <div style={{ fontFamily: TOP.mono, fontSize: 8.5, color: s.c, letterSpacing:'0.14em', fontWeight: 700 }}>{s.label}</div>
      </div>
      <div style={{ display:'flex', gap: 6, alignItems:'center' }}>
        <i className="bi bi-people" style={{ fontSize: 10, color: TOP.dim }}/>
        <span style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.muted }}>{seats}</span>
        {ticket && <span style={{ marginLeft:'auto', fontFamily: TOP.mono, fontSize: 10, color: s.c, fontWeight: 600 }}>€{ticket}</span>}
      </div>
    </div>
  );
}

// ═══════════════ SCREEN 01: ORDERS / TICKET STREAM ═══════════════
function TScreen01_Orders() {
  const tickets = [
    {
      id: 'DB-20260418-218', table: 7, guests: 2, time: '20:14',
      items: [
        { q:1, n:'Souvlaki Plate', m:'pork · +pita · +feta' },
        { q:1, n:'Saganaki',       m:'with honey' },
        { q:2, n:'Mythos draft',   m:'0.5L' },
      ],
      total: 46.90, paid: 23.45, split: '1 of 2', status: 'new', age: '0:42',
    },
    {
      id: 'DB-20260418-217', table: 12, guests: 4, time: '20:12',
      items: [
        { q:2, n:'Octopus', m:'charcoal' },
        { q:1, n:'Horiatiki', m:'extra feta' },
        { q:1, n:'Grilled bream', m:'lemon + oil' },
      ],
      total: 74.20, paid: 74.20, split: 'full', status: 'cooking', age: '12:08',
    },
    {
      id: 'DB-20260418-216', table: 3, guests: 2, time: '20:05',
      items: [
        { q:2, n:'Loukaniko',  m:'' },
        { q:1, n:'Tzatziki',   m:'' },
        { q:2, n:'House white', m:'250ml' },
      ],
      total: 32.00, paid: 32.00, split: 'full', status: 'ready', age: '19:44',
    },
    {
      id: 'DB-20260418-215', table: 9, guests: 3, time: '19:58',
      items: [
        { q:3, n:'Souvlaki Plate', m:'chicken ×2, pork ×1' },
        { q:1, n:'Greek salad',   m:'' },
      ],
      total: 52.50, paid: 52.50, split: '3 ways · equal', status: 'served', age: '34:22',
    },
  ];

  return (
    <div style={{ padding: '22px 24px 32px', position:'relative' }}>
      {/* ambient glow */}
      <div style={{ position:'absolute', top: -80, right: -80, width: 340, height: 340,
        background:'radial-gradient(circle, rgba(245,158,11,0.12), transparent 70%)', pointerEvents:'none' }}/>

      {/* Page header */}
      <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom: 20, position:'relative' }}>
        <div>
          <div style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.amber2, letterSpacing:'0.24em', fontWeight: 600 }}>FLOOR · LIVE</div>
          <h1 style={{ margin: '6px 0 0', fontSize: 34, fontWeight: 800, letterSpacing:'-0.025em', color: TOP.ink, lineHeight: 1 }}>
            Orders coming in,<br/>
            <span style={{ fontFamily: TOP.serif, fontStyle:'italic', fontWeight: 400, color: TOP.amber2 }}>
              real time.
            </span>
          </h1>
        </div>
        <div style={{ display:'flex', gap: 10 }}>
          <div style={{ padding: '9px 14px', borderRadius: 10, background: TOP.surface2, border: `1px solid ${TOP.border2}`, color: TOP.body, fontSize: 12, display:'flex', alignItems:'center', gap: 8, fontWeight: 500 }}>
            <i className="bi bi-funnel"/>All statuses
          </div>
          <div style={{ padding: '9px 14px', borderRadius: 10, background: `linear-gradient(135deg, ${TOP.amber}, ${TOP.orange})`, color:'#fff', fontSize: 12, fontWeight: 600, display:'flex', alignItems:'center', gap: 8, boxShadow:'0 6px 16px rgba(245,158,11,0.35)' }}>
            <i className="bi bi-plus-lg"/>New walk-in
          </div>
        </div>
      </div>

      {/* KPI row */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 12, marginBottom: 18 }}>
        {[
          { k:'Open tickets',  v:'11', d:'+3 last 15 min', c: TOP.amber2, i:'bi-receipt' },
          { k:'Cooking now',   v:'7',  d:'avg 12:40 wait', c: TOP.orange2, i:'bi-fire' },
          { k:'Revenue tonight', v:'€2,148', d:'+18% vs Sun avg', c: TOP.mint, i:'bi-graph-up-arrow' },
          { k:'Table turn',    v:'1:42', d:'target 1:35', c: TOP.cyan2, i:'bi-arrow-repeat' },
        ].map((k, i) => (
          <Card key={i} style={{ padding: 14 }}>
            <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
              <div style={{ fontFamily: TOP.mono, fontSize: 9.5, color: TOP.dim, letterSpacing:'0.2em', fontWeight: 600 }}>{k.k.toUpperCase()}</div>
              <i className={`bi ${k.i}`} style={{ color: k.c, fontSize: 14 }}/>
            </div>
            <div style={{ fontSize: 28, fontWeight: 800, letterSpacing:'-0.02em', color: TOP.ink, marginTop: 4, fontVariantNumeric:'tabular-nums' }}>{k.v}</div>
            <div style={{ fontFamily: TOP.mono, fontSize: 10, color: k.c, marginTop: 2 }}>{k.d}</div>
          </Card>
        ))}
      </div>

      {/* Ticket columns */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 12 }}>
        {[
          { t: 'NEW',       c: TOP.amber2,  count: 2, ico: 'bi-bell' },
          { t: 'COOKING',   c: TOP.orange2, count: 5, ico: 'bi-fire' },
          { t: 'READY',     c: TOP.mint,    count: 3, ico: 'bi-check-circle' },
          { t: 'SERVED',    c: TOP.plum,    count: 1, ico: 'bi-check-all' },
        ].map((col, i) => (
          <div key={i}>
            <div style={{
              display:'flex', alignItems:'center', gap: 8, marginBottom: 10,
              padding: '8px 12px', borderRadius: 10,
              background: `${col.c}15`, border: `1px solid ${col.c}40`,
            }}>
              <i className={`bi ${col.ico}`} style={{ color: col.c, fontSize: 13 }}/>
              <span style={{ fontFamily: TOP.mono, fontSize: 10.5, color: col.c, letterSpacing:'0.22em', fontWeight: 700 }}>{col.t}</span>
              <span style={{ marginLeft:'auto', fontFamily: TOP.mono, fontSize: 11, color: col.c, fontWeight: 700 }}>{col.count}</span>
            </div>

            {/* Show one ticket in this column */}
            {tickets[i] && <TicketCard t={tickets[i]}/>}
            {i === 1 && <TicketCard t={{
              id: 'DB-20260418-213', table: 5, guests: 2, time: '20:02',
              items: [{ q:1, n:'Grilled sardines', m:'' }, { q:1, n:'Fries', m:'' }],
              total: 24.00, paid: 24.00, split: 'full', status: 'cooking', age: '16:12',
            }}/>}
          </div>
        ))}
      </div>
    </div>
  );
}

function TicketCard({ t }) {
  const isNew = t.status === 'new';
  const colorMap = {
    new:     { c: TOP.amber2,  a: 'rgba(245,158,11,0.35)' },
    cooking: { c: TOP.orange2, a: 'rgba(249,115,22,0.35)' },
    ready:   { c: TOP.mint,    a: 'rgba(16,185,129,0.35)' },
    served:  { c: TOP.plum,    a: 'rgba(167,139,250,0.35)' },
  };
  const s = colorMap[t.status];
  return (
    <div style={{
      background: isNew ? 'linear-gradient(180deg, rgba(245,158,11,0.08), rgba(31,19,18,0.5))' : TOP.surface,
      border: `1px solid ${isNew ? s.a : TOP.border2}`,
      borderRadius: 14, padding: 12,
      boxShadow: isNew ? `0 0 24px rgba(245,158,11,0.12)` : 'none',
      position: 'relative',
    }}>
      {isNew && (
        <div style={{
          position:'absolute', top: -6, right: 10,
          padding: '2px 8px', borderRadius: 999,
          background: `linear-gradient(135deg, ${TOP.amber}, ${TOP.orange})`,
          color: '#fff', fontFamily: TOP.mono, fontSize: 9, fontWeight: 700, letterSpacing:'0.12em',
          boxShadow: '0 4px 10px rgba(245,158,11,0.5)',
        }}>NEW · {t.age}</div>
      )}

      {/* header */}
      <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap: 8 }}>
        <div>
          <div style={{ display:'flex', alignItems:'center', gap: 6 }}>
            <div style={{
              width: 30, height: 30, borderRadius: 8,
              background: `${s.c}18`, border: `1px solid ${s.a}`,
              color: s.c, display:'flex', alignItems:'center', justifyContent:'center',
              fontFamily: TOP.mono, fontSize: 12, fontWeight: 800,
            }}>{t.table}</div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, color: TOP.ink }}>Table {t.table}</div>
              <div style={{ fontFamily: TOP.mono, fontSize: 9, color: TOP.dim, letterSpacing:'0.06em' }}>{t.id}</div>
            </div>
          </div>
        </div>
        <div style={{ textAlign:'right' }}>
          <div style={{ fontFamily: TOP.mono, fontSize: 9.5, color: TOP.dim, letterSpacing:'0.1em' }}>{t.time}</div>
          <div style={{ fontFamily: TOP.mono, fontSize: 10, color: s.c, fontWeight: 700, marginTop: 2 }}><i className="bi bi-people" style={{ marginRight: 4 }}/>{t.guests}</div>
        </div>
      </div>

      {/* items */}
      <div style={{ marginTop: 10, paddingTop: 10, borderTop: `1px solid ${TOP.border2}` }}>
        {t.items.map((it, i) => (
          <div key={i} style={{ display:'flex', alignItems:'flex-start', gap: 8, marginBottom: 5 }}>
            <span style={{ fontFamily: TOP.mono, fontSize: 11, color: s.c, fontWeight: 700, minWidth: 16 }}>×{it.q}</span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12, color: TOP.ink, fontWeight: 500, lineHeight: 1.3 }}>{it.n}</div>
              {it.m && <div style={{ fontFamily: TOP.mono, fontSize: 9.5, color: TOP.dim, letterSpacing:'0.02em', marginTop: 1 }}>{it.m}</div>}
            </div>
          </div>
        ))}
      </div>

      {/* footer */}
      <div style={{ marginTop: 10, paddingTop: 10, borderTop: `1px solid ${TOP.border2}`, display:'flex', alignItems:'center', gap: 6 }}>
        <TChip color={t.status === 'new' ? 'amber' : t.status === 'cooking' ? 'orange' : t.status === 'ready' ? 'green' : 'violet'} style={{ padding:'3px 7px', fontSize: 9 }}>
          <i className="bi bi-credit-card" style={{ fontSize: 9 }}/>{t.split === 'full' ? 'PAID' : t.split.toUpperCase()}
        </TChip>
        <div style={{ marginLeft:'auto', fontFamily: TOP.mono, fontSize: 12, fontWeight: 700, color: TOP.ink }}>€{t.total.toFixed(2)}</div>
      </div>

      {/* action */}
      {t.status === 'new' && (
        <div style={{
          marginTop: 10, padding: '10px', borderRadius: 10, textAlign:'center',
          background: `linear-gradient(135deg, ${TOP.amber}, ${TOP.orange})`,
          color:'#fff', fontSize: 12, fontWeight: 700,
          boxShadow:'0 6px 14px rgba(245,158,11,0.35)',
          display:'flex', alignItems:'center', justifyContent:'center', gap: 6,
        }}>
          Accept & fire to kitchen <i className="bi bi-arrow-right"/>
        </div>
      )}
    </div>
  );
}

// ═══════════════ SCREEN 02: KITCHEN DISPLAY SYSTEM ═══════════════
function TScreen02_KDS() {
  const lanes = [
    {
      id: 'DB-214', table: 7, age: '02:14', gr: 'YANNIS · GRILL', col: 'orange',
      items: [
        { q:1, n:'Souvlaki · pork',   m:'+extra pita · +feta', station:'grill', done: false, started: true },
        { q:1, n:'Souvlaki · chicken', m:'no onion', station:'grill', done: false, started: true },
      ],
    },
    {
      id: 'DB-213', table: 12, age: '05:42', gr: 'PETROS · SEA', col: 'cyan',
      items: [
        { q:2, n:'Octopus',  m:'charcoal · well done', station:'grill', done: false, started: true },
        { q:1, n:'Bream',     m:'whole · lemon oil', station:'sea', done: false, started: true },
      ],
    },
    {
      id: 'DB-212', table: 3, age: '11:30', gr: 'ELENA · COLD', col: 'green',
      items: [
        { q:1, n:'Horiatiki', m:'extra feta', station:'cold', done: true, started: true },
        { q:2, n:'Tzatziki',  m:'', station:'cold', done: true, started: true },
      ],
    },
    {
      id: 'DB-211', table: 5, age: '14:08', gr: 'YANNIS · GRILL', col: 'orange',
      items: [
        { q:1, n:'Sardines', m:'×6 · grilled', station:'grill', done: true, started: true },
        { q:1, n:'Fries',    m:'sea salt', station:'grill', done: false, started: true },
      ],
    },
  ];

  return (
    <div style={{ padding: '22px 24px 32px', position:'relative' }}>
      <div style={{ position:'absolute', top: -80, left: '40%', width: 400, height: 400,
        background:'radial-gradient(circle, rgba(249,115,22,0.15), transparent 70%)', pointerEvents:'none' }}/>

      {/* Header */}
      <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom: 18, position:'relative' }}>
        <div>
          <div style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.orange2, letterSpacing:'0.24em', fontWeight: 600 }}>KITCHEN · PASS</div>
          <h1 style={{ margin: '6px 0 0', fontSize: 34, fontWeight: 800, letterSpacing:'-0.025em', color: TOP.ink, lineHeight: 1 }}>
            The pass, in <span style={{ fontFamily: TOP.serif, fontStyle:'italic', fontWeight: 400, color: TOP.orange2 }}>one glance.</span>
          </h1>
        </div>
        <div style={{ display:'flex', gap: 8, alignItems:'center' }}>
          <TChip color="orange"><i className="bi bi-fire"/>GRILL 3 · 4 orders</TChip>
          <TChip color="cyan"><i className="bi bi-water"/>SEA · 2 orders</TChip>
          <TChip color="green"><i className="bi bi-basket"/>COLD · 1 order</TChip>
        </div>
      </div>

      {/* Timing banner */}
      <div style={{
        display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap: 10, marginBottom: 18,
      }}>
        {[
          { k:'Fires next', v:'DB-214', sub:'Table 7 · ringing', c: TOP.amber2 },
          { k:'Oldest open', v:'14:08', sub:'DB-211 · T5', c: TOP.red2 },
          { k:'Avg prep', v:'12:40', sub:'target 11:00', c: TOP.ink },
          { k:'Grill load', v:'87%', sub:'4 on · cap 5', c: TOP.orange2 },
          { k:'Pass ready', v:'2', sub:'call runner', c: TOP.mint },
        ].map((k, i) => (
          <div key={i} style={{
            padding: '12px 14px', borderRadius: 12,
            background: TOP.surface2, border: `1px solid ${TOP.border2}`,
          }}>
            <div style={{ fontFamily: TOP.mono, fontSize: 9, color: TOP.dim, letterSpacing:'0.2em', fontWeight: 600 }}>{k.k.toUpperCase()}</div>
            <div style={{ fontSize: 20, fontWeight: 800, color: k.c, letterSpacing:'-0.02em', marginTop: 2, fontFamily: TOP.mono }}>{k.v}</div>
            <div style={{ fontFamily: TOP.mono, fontSize: 9.5, color: TOP.dim, marginTop: 2 }}>{k.sub}</div>
          </div>
        ))}
      </div>

      {/* Lanes */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 12 }}>
        {lanes.map((L, i) => <KDSLane key={i} L={L}/>)}
      </div>

      {/* Station queue footer */}
      <div style={{ marginTop: 20, padding: '14px 18px', borderRadius: 14, background: TOP.surface2, border: `1px solid ${TOP.border2}`, display:'flex', alignItems:'center', gap: 18 }}>
        <div style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.dim, letterSpacing:'0.22em', fontWeight: 700 }}>STATIONS</div>
        {[
          { n:'GRILL', load: 87, c: TOP.orange2 },
          { n:'SEA',   load: 42, c: TOP.cyan2 },
          { n:'COLD',  load: 28, c: TOP.mint },
          { n:'BAR',   load: 65, c: TOP.plum },
          { n:'DESSERT', load: 12, c: TOP.amber2 },
        ].map((st, i) => (
          <div key={i} style={{ flex: 1, display:'flex', flexDirection:'column', gap: 4 }}>
            <div style={{ display:'flex', justifyContent:'space-between' }}>
              <span style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.body, letterSpacing:'0.12em', fontWeight: 600 }}>{st.n}</span>
              <span style={{ fontFamily: TOP.mono, fontSize: 10, color: st.c, fontWeight: 700 }}>{st.load}%</span>
            </div>
            <div style={{ height: 5, borderRadius: 3, background: 'rgba(148,115,100,0.1)', overflow:'hidden' }}>
              <div style={{ width: `${st.load}%`, height: '100%', background: `linear-gradient(90deg, ${st.c}, ${st.c}aa)`, boxShadow: `0 0 8px ${st.c}66` }}/>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function KDSLane({ L }) {
  const colorMap = {
    orange: { c: TOP.orange2, bg: 'rgba(249,115,22,0.14)', br: 'rgba(249,115,22,0.35)' },
    cyan:   { c: TOP.cyan2,   bg: 'rgba(34,211,238,0.12)', br: 'rgba(34,211,238,0.32)' },
    green:  { c: TOP.mint,    bg: 'rgba(16,185,129,0.12)', br: 'rgba(16,185,129,0.32)' },
  };
  const s = colorMap[L.col];
  const urgent = parseInt(L.age.split(':')[0]) >= 10;
  return (
    <div style={{
      background: TOP.surface, border: `1.5px solid ${urgent ? 'rgba(239,68,68,0.45)' : s.br}`,
      borderRadius: 14, padding: 12,
      boxShadow: urgent ? '0 0 24px rgba(239,68,68,0.15)' : 'none',
    }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <div>
          <div style={{ fontSize: 22, fontWeight: 900, letterSpacing:'-0.02em', color: TOP.ink, fontFamily: TOP.mono }}>T{L.table}</div>
          <div style={{ fontFamily: TOP.mono, fontSize: 9, color: TOP.dim, letterSpacing:'0.08em' }}>{L.id}</div>
        </div>
        <div style={{
          padding: '4px 10px', borderRadius: 8,
          background: urgent ? 'rgba(239,68,68,0.18)' : s.bg,
          border: `1px solid ${urgent ? 'rgba(239,68,68,0.4)' : s.br}`,
          color: urgent ? TOP.red2 : s.c,
          fontFamily: TOP.mono, fontSize: 14, fontWeight: 800, letterSpacing: '0.02em',
        }}>{L.age}</div>
      </div>

      <div style={{ fontFamily: TOP.mono, fontSize: 9, color: s.c, letterSpacing:'0.2em', fontWeight: 700, marginTop: 8 }}>
        {L.gr}
      </div>

      <div style={{ marginTop: 8, display:'flex', flexDirection:'column', gap: 6 }}>
        {L.items.map((it, i) => (
          <div key={i} style={{
            padding: '9px 10px', borderRadius: 10,
            background: it.done ? 'rgba(16,185,129,0.08)' : 'rgba(11,7,9,0.5)',
            border: `1px solid ${it.done ? 'rgba(16,185,129,0.3)' : TOP.border2}`,
            display:'flex', alignItems:'flex-start', gap: 10,
          }}>
            <div style={{
              width: 18, height: 18, borderRadius: 5, flexShrink: 0, marginTop: 1,
              background: it.done ? TOP.mint : 'transparent',
              border: `1.5px solid ${it.done ? TOP.mint : TOP.dim}`,
              display:'flex', alignItems:'center', justifyContent:'center',
              color: '#0b0709', fontSize: 10, fontWeight: 900,
            }}>{it.done && <i className="bi bi-check"/>}</div>
            <div style={{ flex: 1 }}>
              <div style={{ display:'flex', alignItems:'baseline', gap: 6 }}>
                <span style={{ fontFamily: TOP.mono, fontSize: 12, color: s.c, fontWeight: 800 }}>×{it.q}</span>
                <span style={{ fontSize: 13, color: it.done ? TOP.muted : TOP.ink, fontWeight: 600, textDecoration: it.done ? 'line-through' : 'none' }}>{it.n}</span>
              </div>
              {it.m && <div style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.dim, marginTop: 2, letterSpacing:'0.02em' }}>{it.m}</div>}
            </div>
          </div>
        ))}
      </div>

      {/* Bump button */}
      <div style={{
        marginTop: 10, padding: '8px 10px', borderRadius: 10, textAlign:'center',
        background: `linear-gradient(135deg, ${TOP.amber}, ${TOP.orange})`,
        color:'#fff', fontSize: 11, fontWeight: 700, letterSpacing:'0.1em',
        fontFamily: TOP.mono, boxShadow: '0 6px 14px rgba(245,158,11,0.3)',
        display:'flex', alignItems:'center', justifyContent:'center', gap: 6,
      }}>
        BUMP TO PASS <i className="bi bi-arrow-up"/>
      </div>
    </div>
  );
}

// ═══════════════ SCREEN 03: FLOOR / TABLE MAP ═══════════════
function TScreen03_Floor() {
  // Floor layout
  const tables = [
    // inside
    { n: 1, state:'seated',  seats:'2/2', x: 1, y: 1 },
    { n: 2, state:'open',    seats:'0/4', x: 2, y: 1 },
    { n: 3, state:'paid',    seats:'2/2', ticket:'32', x: 3, y: 1 },
    { n: 4, state:'served',  seats:'4/4', ticket:'82', x: 4, y: 1 },
    { n: 5, state:'cooking', seats:'2/2', ticket:'24', x: 1, y: 2, highlight: true },
    { n: 6, state:'open',    seats:'0/2', x: 2, y: 2 },
    { n: 7, state:'ordered', seats:'2/4', ticket:'47', x: 3, y: 2, highlight: true },
    { n: 8, state:'cooking', seats:'3/4', ticket:'61', x: 4, y: 2 },
    // patio
    { n: 9, state:'served', seats:'3/4', ticket:'52', x: 1, y: 4 },
    { n:10, state:'open',   seats:'0/2', x: 2, y: 4 },
    { n:11, state:'seated', seats:'4/6', x: 3, y: 4 },
    { n:12, state:'cooking',seats:'4/4', ticket:'74', x: 4, y: 4 },
  ];

  return (
    <div style={{ padding: '22px 24px 32px', position:'relative', display:'grid', gridTemplateColumns:'1fr 320px', gap: 18 }}>
      <div style={{ position:'absolute', top: -80, right: -80, width: 340, height: 340,
        background:'radial-gradient(circle, rgba(34,211,238,0.1), transparent 70%)', pointerEvents:'none' }}/>

      <div style={{ position:'relative' }}>
        <div style={{ marginBottom: 18 }}>
          <div style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.cyan2, letterSpacing:'0.24em', fontWeight: 600 }}>FRONT OF HOUSE · LIVE MAP</div>
          <h1 style={{ margin: '6px 0 0', fontSize: 34, fontWeight: 800, letterSpacing:'-0.025em', color: TOP.ink, lineHeight: 1 }}>
            Every table,<br/>
            <span style={{ fontFamily: TOP.serif, fontStyle:'italic', fontWeight: 400, color: TOP.cyan2 }}>
              one truth.
            </span>
          </h1>
          <p style={{ marginTop: 12, color: TOP.body, fontSize: 13, maxWidth: 540, lineHeight: 1.5 }}>
            QR bindings are per table — so every ticket, every split, every waiter touch is pinned to a seat. No more "who ordered the octopus?"
          </p>
        </div>

        {/* Legend */}
        <div style={{ display:'flex', gap: 6, flexWrap:'wrap', marginBottom: 12 }}>
          {[
            { l:'Open', c: TOP.muted },
            { l:'Seated', c: TOP.cyan2 },
            { l:'Ordered', c: TOP.amber2 },
            { l:'Cooking', c: TOP.orange2 },
            { l:'Served', c: TOP.mint },
            { l:'Paid · clearing', c: TOP.plum },
          ].map((x, i) => (
            <div key={i} style={{ display:'flex', alignItems:'center', gap: 5, padding:'4px 9px', borderRadius: 999, background: TOP.surface2, border:`1px solid ${TOP.border2}` }}>
              <div style={{ width: 7, height: 7, borderRadius:'50%', background: x.c, boxShadow: `0 0 6px ${x.c}`}}/>
              <span style={{ fontFamily: TOP.mono, fontSize: 9.5, color: TOP.body, letterSpacing:'0.08em' }}>{x.l}</span>
            </div>
          ))}
        </div>

        {/* Floor map */}
        <div style={{
          position:'relative', padding: 20, borderRadius: 16,
          background: TOP.surface, border: `1px solid ${TOP.border2}`,
          minHeight: 420,
        }}>
          {/* room divider */}
          <div style={{ fontFamily: TOP.mono, fontSize: 9.5, color: TOP.dim, letterSpacing:'0.24em', fontWeight: 700, marginBottom: 10 }}>INSIDE</div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 10 }}>
            {tables.filter(t => t.y < 3).map(t => <FloorTile key={t.n} {...t}/>)}
          </div>

          <div style={{
            margin: '20px 0 14px', display:'flex', alignItems:'center', gap: 10,
          }}>
            <div style={{ flex: 1, height: 1, background: `repeating-linear-gradient(to right, ${TOP.dim} 0 6px, transparent 6px 12px)` }}/>
            <span style={{ fontFamily: TOP.mono, fontSize: 9.5, color: TOP.dim, letterSpacing:'0.24em', fontWeight: 700 }}>PATIO</span>
            <div style={{ flex: 1, height: 1, background: `repeating-linear-gradient(to right, ${TOP.dim} 0 6px, transparent 6px 12px)` }}/>
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 10 }}>
            {tables.filter(t => t.y >= 3).map(t => <FloorTile key={t.n} {...t}/>)}
          </div>

          {/* bar zone marker */}
          <div style={{
            position:'absolute', right: 20, top: 20,
            padding: '6px 10px', borderRadius: 8,
            background: 'rgba(167,139,250,0.1)', border: '1px solid rgba(167,139,250,0.3)',
            color: TOP.plum, fontFamily: TOP.mono, fontSize: 9.5, letterSpacing:'0.2em', fontWeight: 700,
          }}>BAR · 8 STOOLS · 5 OCCUPIED</div>
        </div>
      </div>

      {/* Right panel — selected table */}
      <div style={{ display:'flex', flexDirection:'column', gap: 14 }}>
        <Card style={{ padding: 16 }} glow>
          <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between' }}>
            <div>
              <div style={{ fontFamily: TOP.mono, fontSize: 9, color: TOP.amber2, letterSpacing:'0.22em', fontWeight: 700 }}>SELECTED · ORDERED</div>
              <div style={{ fontSize: 56, fontWeight: 900, color: TOP.ink, letterSpacing:'-0.04em', lineHeight: 1,
                background: 'linear-gradient(160deg,#fff,#fbbf24)', WebkitBackgroundClip:'text', backgroundClip:'text', color:'transparent', fontFamily: TOP.mono }}>
                07
              </div>
              <div style={{ color: TOP.muted, fontSize: 12, fontFamily: TOP.mono, letterSpacing:'0.1em', marginTop: 4 }}>patio · 2 of 4 seats</div>
            </div>
            <div style={{
              padding: 6, borderRadius: 8, background: 'rgba(245,158,11,0.1)', border: '1px solid rgba(251,191,36,0.3)',
            }}>
              <i className="bi bi-qr-code" style={{ color: TOP.amber2, fontSize: 28 }}/>
            </div>
          </div>

          <div style={{ marginTop: 14, paddingTop: 14, borderTop: `1px solid ${TOP.border2}` }}>
            <div style={{ fontFamily: TOP.mono, fontSize: 9, color: TOP.dim, letterSpacing:'0.2em' }}>GUESTS</div>
            <div style={{ display:'flex', gap: 8, marginTop: 8 }}>
              {[{ n:'Maria', k:'•• 4921', p: true }, { n:'Kostas', k:'pending', p: false }].map((g, i) => (
                <div key={i} style={{ flex: 1, padding: 10, borderRadius: 10, background: TOP.bg2, border: `1px solid ${TOP.border2}` }}>
                  <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
                    <div style={{ width: 26, height: 26, borderRadius:'50%', background: g.p ? `linear-gradient(135deg, ${TOP.amber2}, ${TOP.orange})` : TOP.dim, display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontSize: 10, fontWeight: 800 }}>
                      {g.n[0]}
                    </div>
                    <div>
                      <div style={{ fontSize: 11, color: TOP.ink, fontWeight: 600 }}>{g.n}</div>
                      <div style={{ fontFamily: TOP.mono, fontSize: 9, color: g.p ? TOP.mint : TOP.muted }}>{g.p ? 'paid · '+g.k : g.k.toUpperCase()}</div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Card>

        <Card style={{ padding: 16 }}>
          <div style={{ fontFamily: TOP.mono, fontSize: 9.5, color: TOP.dim, letterSpacing:'0.22em', fontWeight: 700 }}>TICKET DB-218</div>
          <div style={{ marginTop: 10, display:'flex', flexDirection:'column', gap: 8 }}>
            {[
              { n:'Souvlaki Plate', s:'pork', p:'17.50', done: false },
              { n:'Saganaki',       s:'honey', p:'8.50',  done: true },
              { n:'Mythos ×2',      s:'0.5L',  p:'9.00',  done: true },
            ].map((i, idx) => (
              <div key={idx} style={{ display:'flex', alignItems:'center', gap: 8 }}>
                <i className={`bi ${i.done ? 'bi-check-circle-fill' : 'bi-fire'}`} style={{ color: i.done ? TOP.mint : TOP.orange2, fontSize: 12 }}/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 12, color: TOP.ink }}>{i.n}</div>
                  <div style={{ fontFamily: TOP.mono, fontSize: 9.5, color: TOP.dim }}>{i.s}</div>
                </div>
                <div style={{ fontFamily: TOP.mono, fontSize: 11, color: TOP.body }}>€{i.p}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 12, paddingTop: 10, borderTop: `1px solid ${TOP.border2}`, display:'flex', justifyContent:'space-between' }}>
            <span style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.dim, letterSpacing:'0.2em' }}>TOTAL</span>
            <span style={{ fontSize: 18, fontWeight: 800, color: TOP.ink, letterSpacing:'-0.02em' }}>€46.90</span>
          </div>
        </Card>

        <div style={{ display:'flex', gap: 8 }}>
          <div style={{ flex: 1, padding: '10px', borderRadius: 10, background: TOP.surface2, border: `1px solid ${TOP.border2}`, color: TOP.body, fontSize: 12, textAlign:'center', fontWeight: 500 }}><i className="bi bi-chat-left-dots" style={{ marginRight: 6 }}/>Message</div>
          <div style={{ flex: 1, padding: '10px', borderRadius: 10, background: TOP.surface2, border: `1px solid ${TOP.border2}`, color: TOP.body, fontSize: 12, textAlign:'center', fontWeight: 500 }}><i className="bi bi-arrow-left-right" style={{ marginRight: 6 }}/>Move</div>
          <div style={{ flex: 1, padding: '10px', borderRadius: 10, background:`linear-gradient(135deg, ${TOP.amber}, ${TOP.orange})`, color:'#fff', fontSize: 12, textAlign:'center', fontWeight: 700, boxShadow:'0 6px 14px rgba(245,158,11,0.3)' }}>Close</div>
        </div>
      </div>
    </div>
  );
}

// ═══════════════ SCREEN 04: ANALYTICS (OWNER) ═══════════════
function TScreen04_Analytics() {
  // hourly revenue bars
  const hours = [
    { h:'12', v: 18 }, { h:'13', v: 42 }, { h:'14', v: 38 }, { h:'15', v: 14 },
    { h:'16', v: 10 }, { h:'17', v: 22 }, { h:'18', v: 48 }, { h:'19', v: 72 },
    { h:'20', v: 92 }, { h:'21', v: 85 }, { h:'22', v: 58 }, { h:'23', v: 28 },
  ];

  return (
    <div style={{ padding: '22px 24px 32px', position:'relative' }}>
      <div style={{ position:'absolute', top: -80, left: -80, width: 340, height: 340,
        background:'radial-gradient(circle, rgba(16,185,129,0.12), transparent 70%)', pointerEvents:'none' }}/>

      <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom: 20, position:'relative' }}>
        <div>
          <div style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.mint, letterSpacing:'0.24em', fontWeight: 600 }}>OWNER · ANALYTICS</div>
          <h1 style={{ margin: '6px 0 0', fontSize: 34, fontWeight: 800, letterSpacing:'-0.025em', color: TOP.ink, lineHeight: 1 }}>
            Your restaurant,<br/>
            <span style={{ fontFamily: TOP.serif, fontStyle:'italic', fontWeight: 400, color: TOP.mint }}>
              on the record.
            </span>
          </h1>
        </div>
        <div style={{ display:'flex', gap: 6 }}>
          {['Today','Week','Month','Year'].map((p, i) => (
            <div key={i} style={{
              padding: '7px 14px', borderRadius: 8,
              background: p === 'Week' ? TOP.surface : 'transparent',
              border: `1px solid ${p === 'Week' ? 'rgba(251,191,36,0.3)' : TOP.border2}`,
              color: p === 'Week' ? TOP.amber2 : TOP.muted,
              fontSize: 12, fontWeight: 600, fontFamily: TOP.mono, letterSpacing:'0.1em',
            }}>{p.toUpperCase()}</div>
          ))}
        </div>
      </div>

      {/* KPI tiles w/ sparklines */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 12, marginBottom: 18 }}>
        {[
          { k:'Revenue', v:'€14,820', d:'+22.4% WoW', c: TOP.mint, data:[48,52,60,58,72,80,92], sub:'vs €12,108 last' },
          { k:'Orders',  v:'684',     d:'+18.1% WoW', c: TOP.amber2, data:[40,52,50,58,62,68,72], sub:'avg €21.66 / order' },
          { k:'Avg ticket', v:'€38.40', d:'+3.2% WoW', c: TOP.cyan2, data:[34,35,36,37,37,38,38], sub:'split parties trending up' },
          { k:'Table turn', v:'1:38',   d:'−0:06 WoW', c: TOP.plum, data:[104,100,98,95,92,96,98], sub:'target 1:35' },
        ].map((k, i) => (
          <Card key={i} style={{ padding: 16 }}>
            <div style={{ fontFamily: TOP.mono, fontSize: 9.5, color: TOP.dim, letterSpacing:'0.2em', fontWeight: 600 }}>{k.k.toUpperCase()}</div>
            <div style={{ display:'flex', alignItems:'flex-end', gap: 10, marginTop: 4 }}>
              <div style={{ fontSize: 30, fontWeight: 800, color: TOP.ink, letterSpacing:'-0.025em', fontVariantNumeric:'tabular-nums' }}>{k.v}</div>
              <div style={{ marginLeft:'auto' }}>
                <Spark data={k.data} color={k.c} h={32} w={90}/>
              </div>
            </div>
            <div style={{ fontFamily: TOP.mono, fontSize: 10, color: k.c, marginTop: 2, fontWeight: 700, letterSpacing:'0.04em' }}>{k.d}</div>
            <div style={{ fontFamily: TOP.mono, fontSize: 9.5, color: TOP.dim, marginTop: 4 }}>{k.sub}</div>
          </Card>
        ))}
      </div>

      {/* Main chart + sidebar */}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 360px', gap: 12, marginBottom: 18 }}>
        {/* hourly chart */}
        <Card style={{ padding: 18 }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
            <div>
              <div style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.dim, letterSpacing:'0.2em', fontWeight: 600 }}>REVENUE BY HOUR · SUN APR 18</div>
              <div style={{ fontSize: 18, fontWeight: 700, color: TOP.ink, marginTop: 2 }}>Peak window <span style={{ color: TOP.amber2 }}>19:00 – 21:30</span></div>
            </div>
            <div style={{ display:'flex', gap: 6 }}>
              <TChip color="amber"><i className="bi bi-circle-fill" style={{ fontSize: 7 }}/>Revenue</TChip>
              <TChip color="dim"><i className="bi bi-circle-fill" style={{ fontSize: 7 }}/>Last week</TChip>
            </div>
          </div>

          <div style={{ marginTop: 20, display:'flex', alignItems:'flex-end', gap: 6, height: 180 }}>
            {hours.map((b, i) => {
              const pct = b.v;
              const active = b.h === '20' || b.h === '21';
              return (
                <div key={i} style={{ flex: 1, display:'flex', flexDirection:'column', alignItems:'center', gap: 6 }}>
                  <div style={{ width: '100%', height: '100%', display:'flex', alignItems:'flex-end', justifyContent:'center', position:'relative' }}>
                    {/* prev week ghost */}
                    <div style={{
                      position:'absolute', bottom: 0, left: '12%', right: '12%',
                      height: `${pct * 0.82}%`, borderRadius: '4px 4px 0 0',
                      background: 'rgba(148,115,100,0.18)', border: '1px dashed rgba(148,115,100,0.32)',
                    }}/>
                    <div style={{
                      width: '68%', height: `${pct}%`, borderRadius: '5px 5px 0 0',
                      background: active
                        ? `linear-gradient(180deg, ${TOP.amber2}, ${TOP.orange})`
                        : `linear-gradient(180deg, rgba(245,158,11,0.55), rgba(245,158,11,0.2))`,
                      boxShadow: active ? `0 -6px 16px ${TOP.amber2}66` : 'none',
                      position:'relative',
                    }}/>
                  </div>
                  <div style={{ fontFamily: TOP.mono, fontSize: 9.5, color: active ? TOP.amber2 : TOP.dim, fontWeight: active ? 700 : 500, letterSpacing:'0.04em' }}>{b.h}</div>
                </div>
              );
            })}
          </div>
        </Card>

        {/* Top items */}
        <Card style={{ padding: 18 }}>
          <div style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.dim, letterSpacing:'0.22em', fontWeight: 600 }}>TOP ITEMS · WEEK</div>
          <div style={{ marginTop: 14, display:'flex', flexDirection:'column', gap: 10 }}>
            {[
              { n:'Souvlaki Plate', q: 142, r: '€2,088', pct: 100, hue: 30 },
              { n:'Octopus',        q:  68, r: '€1,224', pct: 72,  hue: 15 },
              { n:'Horiatiki',      q:  94, r: '€846',   pct: 54,  hue: 130 },
              { n:'Saganaki',       q:  78, r: '€663',   pct: 42,  hue: 48 },
              { n:'Mythos draft',   q: 186, r: '€558',   pct: 35,  hue: 52 },
            ].map((it, i) => (
              <div key={i}>
                <div style={{ display:'flex', alignItems:'center', gap: 8, marginBottom: 4 }}>
                  <span style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.dim, width: 14 }}>#{i+1}</span>
                  <span style={{ flex: 1, fontSize: 12, color: TOP.ink, fontWeight: 600 }}>{it.n}</span>
                  <span style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.muted }}>×{it.q}</span>
                  <span style={{ fontFamily: TOP.mono, fontSize: 11, color: TOP.amber2, fontWeight: 700, minWidth: 50, textAlign:'right' }}>{it.r}</span>
                </div>
                <div style={{ height: 4, borderRadius: 2, background: 'rgba(148,115,100,0.1)', overflow:'hidden' }}>
                  <div style={{ width: `${it.pct}%`, height: '100%', background: `linear-gradient(90deg, oklch(0.72 0.16 ${it.hue}), oklch(0.58 0.18 ${it.hue + 20}))` }}/>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* Lower row */}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 12 }}>
        {/* payment mix */}
        <Card style={{ padding: 18 }}>
          <div style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.dim, letterSpacing:'0.22em', fontWeight: 600 }}>PAYMENT MIX · WEEK</div>
          <div style={{ display:'flex', gap: 14, marginTop: 14, alignItems:'center' }}>
            <svg width="100" height="100" viewBox="0 0 36 36">
              <circle cx="18" cy="18" r="15.9" fill="none" stroke={TOP.amber2} strokeWidth="5" strokeDasharray="58 100" strokeDashoffset="0" transform="rotate(-90 18 18)"/>
              <circle cx="18" cy="18" r="15.9" fill="none" stroke={TOP.cyan2} strokeWidth="5" strokeDasharray="26 100" strokeDashoffset="-58" transform="rotate(-90 18 18)"/>
              <circle cx="18" cy="18" r="15.9" fill="none" stroke={TOP.plum}  strokeWidth="5" strokeDasharray="12 100" strokeDashoffset="-84" transform="rotate(-90 18 18)"/>
              <circle cx="18" cy="18" r="15.9" fill="none" stroke={TOP.dim}  strokeWidth="5" strokeDasharray="4 100"  strokeDashoffset="-96" transform="rotate(-90 18 18)"/>
            </svg>
            <div style={{ flex: 1, display:'flex', flexDirection:'column', gap: 6 }}>
              {[
                { n:'Apple Pay', p: '58%', c: TOP.amber2 },
                { n:'Card',      p: '26%', c: TOP.cyan2 },
                { n:'Google Pay', p: '12%', c: TOP.plum },
                { n:'Cash',      p: '4%',  c: TOP.dim },
              ].map((r, i) => (
                <div key={i} style={{ display:'flex', alignItems:'center', gap: 6 }}>
                  <div style={{ width: 8, height: 8, borderRadius: 2, background: r.c }}/>
                  <span style={{ fontSize: 11, color: TOP.body, flex: 1 }}>{r.n}</span>
                  <span style={{ fontFamily: TOP.mono, fontSize: 11, color: TOP.ink, fontWeight: 700 }}>{r.p}</span>
                </div>
              ))}
            </div>
          </div>
        </Card>

        {/* bill split rate */}
        <Card style={{ padding: 18 }}>
          <div style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.dim, letterSpacing:'0.22em', fontWeight: 600 }}>SPLIT BEHAVIOR</div>
          <div style={{ fontSize: 30, fontWeight: 800, color: TOP.ink, letterSpacing:'-0.02em', marginTop: 6, fontFamily: TOP.mono }}>
            44<span style={{ fontSize: 18, color: TOP.dim }}>%</span>
          </div>
          <div style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.cyan2, marginTop: 2 }}>of bills split 2+ ways</div>

          <div style={{ marginTop: 14, display:'flex', flexDirection:'column', gap: 6 }}>
            {[{ n:'Single payer', p: 56, c: TOP.dim }, { n:'2-way', p: 28, c: TOP.cyan2 }, { n:'3-way', p: 11, c: TOP.amber2 }, { n:'4+', p: 5, c: TOP.plum }].map((r, i) => (
              <div key={i}>
                <div style={{ display:'flex', justifyContent:'space-between' }}>
                  <span style={{ fontSize: 11, color: TOP.body }}>{r.n}</span>
                  <span style={{ fontFamily: TOP.mono, fontSize: 10, color: r.c, fontWeight: 700 }}>{r.p}%</span>
                </div>
                <div style={{ height: 4, borderRadius: 2, background: 'rgba(148,115,100,0.1)', overflow:'hidden', marginTop: 3 }}>
                  <div style={{ width:`${r.p}%`, height:'100%', background: r.c }}/>
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 10, paddingTop: 10, borderTop: `1px solid ${TOP.border2}`, fontSize: 11, color: TOP.muted, lineHeight: 1.4 }}>
            Split orders close <b style={{ color: TOP.mint }}>4:20 min faster</b> than cash bills.
          </div>
        </Card>

        {/* ops / health */}
        <Card style={{ padding: 18 }}>
          <div style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.dim, letterSpacing:'0.22em', fontWeight: 600 }}>OPERATIONAL HEALTH</div>
          <div style={{ marginTop: 12, display:'flex', flexDirection:'column', gap: 10 }}>
            {[
              { k:'Abandoned carts', v:'2.1%', c: TOP.mint, d:'−0.8%' },
              { k:'Kitchen on-time', v:'94%',  c: TOP.mint, d:'+2%' },
              { k:'Comp / refund',   v:'€84',  c: TOP.amber2, d:'4 items' },
              { k:'Review score',    v:'4.7',  c: TOP.mint, d:'↑ 0.2 MoM' },
              { k:'Staff tips (wk)', v:'€648', c: TOP.cyan2, d:'via SOP' },
            ].map((x, i) => (
              <div key={i} style={{ display:'flex', alignItems:'center', gap: 10 }}>
                <div style={{ flex: 1, fontSize: 12, color: TOP.body }}>{x.k}</div>
                <div style={{ fontFamily: TOP.mono, fontSize: 13, color: TOP.ink, fontWeight: 700 }}>{x.v}</div>
                <div style={{ fontFamily: TOP.mono, fontSize: 10, color: x.c, fontWeight: 600, minWidth: 62, textAlign:'right' }}>{x.d}</div>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}

// ═══════════════ SCREEN 05: MENU STUDIO (86, PUSH LIVE) ═══════════════
function TScreen05_MenuStudio() {
  const items = [
    { n:'Souvlaki Plate', gr:'Σουβλάκι', cat:'Grill', price:'€14.50', state:'live', pop:true, hue:30 },
    { n:'Octopus',         gr:'Χταπόδι', cat:'Sea',   price:'€18.00', state:'live', hue:15 },
    { n:'Grilled Bream',   gr:'Τσιπούρα', cat:'Sea',  price:'€22.00', state:'live', hue:200 },
    { n:'Saganaki',        gr:'Σαγανάκι', cat:'Mezze', price:'€8.50',  state:'live', hue:48 },
    { n:'Horiatiki',       gr:'Χωριάτικη', cat:'Mezze', price:'€9.00', state:'live', hue:130 },
    { n:'Loukaniko',       gr:'Λουκάνικο', cat:'Grill', price:'€11.00', state:'86', hue:25 },
    { n:'Sardines',        gr:'Σαρδέλες', cat:'Sea',  price:'€10.00', state:'live', hue:220 },
    { n:'Tzatziki',        gr:'Τζατζίκι', cat:'Mezze', price:'€4.50',  state:'draft', hue:180 },
  ];

  return (
    <div style={{ padding: '22px 24px 32px', position:'relative' }}>
      <div style={{ position:'absolute', top: -80, right: -80, width: 340, height: 340,
        background:'radial-gradient(circle, rgba(167,139,250,0.12), transparent 70%)', pointerEvents:'none' }}/>

      <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom: 18, position:'relative' }}>
        <div>
          <div style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.plum, letterSpacing:'0.24em', fontWeight: 600 }}>MENU · STUDIO</div>
          <h1 style={{ margin: '6px 0 0', fontSize: 34, fontWeight: 800, letterSpacing:'-0.025em', color: TOP.ink, lineHeight: 1 }}>
            86 an item in <span style={{ fontFamily: TOP.serif, fontStyle:'italic', fontWeight: 400, color: TOP.plum }}>one tap.</span>
          </h1>
          <p style={{ marginTop: 12, color: TOP.body, fontSize: 13, maxWidth: 620, lineHeight: 1.5 }}>
            Out of octopus? Hide it in real time. Raise a price for service only. Translate the modifiers to Greek on the same row. Every edit pushes to every table's QR instantly.
          </p>
        </div>
        <div style={{ display:'flex', gap: 10 }}>
          <div style={{ padding: '9px 14px', borderRadius: 10, background: TOP.surface2, border: `1px solid ${TOP.border2}`, color: TOP.body, fontSize: 12, fontWeight: 500, display:'flex', alignItems:'center', gap: 8 }}>
            <i className="bi bi-translate"/>EL · EN
          </div>
          <div style={{ padding: '9px 14px', borderRadius: 10, background: 'rgba(16,185,129,0.14)', border: '1px solid rgba(16,185,129,0.35)', color: TOP.mint, fontSize: 12, fontWeight: 600, display:'flex', alignItems:'center', gap: 8 }}>
            <i className="bi bi-check-circle-fill"/>All changes synced
          </div>
        </div>
      </div>

      {/* two-col: item list + editor */}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 460px', gap: 14 }}>
        {/* Item list */}
        <Card style={{ padding: 0, overflow:'hidden' }}>
          {/* header */}
          <div style={{ display:'grid', gridTemplateColumns:'1fr 110px 90px 90px 90px', padding: '12px 16px', borderBottom: `1px solid ${TOP.border2}`, background: TOP.bg2 }}>
            {['Item','Category','Price','Status','Stock'].map((h, i) => (
              <div key={i} style={{ fontFamily: TOP.mono, fontSize: 9.5, color: TOP.dim, letterSpacing:'0.2em', fontWeight: 700 }}>{h.toUpperCase()}</div>
            ))}
          </div>
          {items.map((it, i) => (
            <div key={i} style={{
              display:'grid', gridTemplateColumns:'1fr 110px 90px 90px 90px',
              padding: '12px 16px', borderBottom: i < items.length - 1 ? `1px solid ${TOP.border2}` : 'none',
              alignItems:'center',
              background: i === 0 ? 'rgba(245,158,11,0.04)' : 'transparent',
            }}>
              <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 8,
                  background: `linear-gradient(135deg, oklch(0.72 0.16 ${it.hue}), oklch(0.52 0.14 ${it.hue + 20}))`,
                  opacity: it.state === 'live' ? 1 : 0.35,
                  position:'relative',
                }}>
                  <div style={{ position:'absolute', inset: 0, background:'repeating-linear-gradient(45deg, rgba(0,0,0,0) 0 6px, rgba(0,0,0,0.08) 6px 7px)', borderRadius: 8 }}/>
                </div>
                <div>
                  <div style={{ fontSize: 13, color: TOP.ink, fontWeight: 600 }}>{it.n} {it.pop && <i className="bi bi-fire" style={{ color: TOP.orange2, fontSize: 10, marginLeft: 4 }}/>}</div>
                  <div style={{ fontFamily: TOP.serif, fontStyle:'italic', fontSize: 12, color: TOP.muted, marginTop: 1 }}>{it.gr}</div>
                </div>
              </div>
              <div style={{ fontFamily: TOP.mono, fontSize: 11, color: TOP.body }}>{it.cat}</div>
              <div style={{ fontFamily: TOP.mono, fontSize: 12, color: TOP.amber2, fontWeight: 700 }}>{it.price}</div>
              <div>
                <TChip color={it.state === 'live' ? 'green' : it.state === '86' ? 'red' : 'dim'} style={{ padding: '3px 8px' }}>
                  {it.state === '86' ? '86 · OUT' : it.state === 'draft' ? 'DRAFT' : 'LIVE'}
                </TChip>
              </div>
              <div>
                <div style={{
                  width: 40, height: 22, borderRadius: 999,
                  background: it.state === '86' ? 'rgba(239,68,68,0.25)' : 'rgba(16,185,129,0.25)',
                  border: `1px solid ${it.state === '86' ? 'rgba(239,68,68,0.5)' : 'rgba(16,185,129,0.5)'}`,
                  position:'relative',
                }}>
                  <div style={{
                    position:'absolute',
                    top: 2, left: it.state === '86' ? 2 : 20,
                    width: 16, height: 16, borderRadius:'50%',
                    background: it.state === '86' ? TOP.red2 : TOP.mint,
                    boxShadow: `0 0 6px ${it.state === '86' ? TOP.red2 : TOP.mint}`,
                    transition: 'all 0.2s',
                  }}/>
                </div>
              </div>
            </div>
          ))}
        </Card>

        {/* Editor */}
        <Card style={{ padding: 18 }}>
          <div style={{ display:'flex', alignItems:'flex-start', gap: 14, marginBottom: 14 }}>
            <div style={{
              width: 72, height: 72, borderRadius: 12,
              background: `linear-gradient(135deg, oklch(0.72 0.16 30), oklch(0.52 0.14 50))`,
              position:'relative',
            }}>
              <div style={{ position:'absolute', inset: 0, background:'repeating-linear-gradient(45deg, rgba(0,0,0,0) 0 8px, rgba(0,0,0,0.1) 8px 9px)', borderRadius: 12 }}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: TOP.mono, fontSize: 9.5, color: TOP.amber2, letterSpacing:'0.22em', fontWeight: 700 }}>EDITING</div>
              <div style={{ fontSize: 20, fontWeight: 800, color: TOP.ink, letterSpacing:'-0.02em', marginTop: 2 }}>Souvlaki Plate</div>
              <div style={{ fontFamily: TOP.serif, fontStyle:'italic', fontSize: 13, color: TOP.muted }}>Σουβλάκι χοιρινό</div>
            </div>
          </div>

          {/* price + stock row */}
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10 }}>
            <div style={{ padding: '10px 12px', borderRadius: 10, background: TOP.bg2, border: `1px solid ${TOP.border2}` }}>
              <div style={{ fontFamily: TOP.mono, fontSize: 9, color: TOP.dim, letterSpacing:'0.18em' }}>PRICE · EUR</div>
              <div style={{ display:'flex', alignItems:'center', gap: 8, marginTop: 6 }}>
                <div style={{ fontSize: 22, fontWeight: 800, color: TOP.ink, letterSpacing:'-0.02em' }}>€14.50</div>
                <div style={{ marginLeft:'auto', fontFamily: TOP.mono, fontSize: 10, color: TOP.mint }}>+0.50 last edit</div>
              </div>
            </div>
            <div style={{ padding: '10px 12px', borderRadius: 10, background: TOP.bg2, border: `1px solid ${TOP.border2}` }}>
              <div style={{ fontFamily: TOP.mono, fontSize: 9, color: TOP.dim, letterSpacing:'0.18em' }}>COST · MARGIN</div>
              <div style={{ display:'flex', alignItems:'center', gap: 8, marginTop: 6 }}>
                <div style={{ fontSize: 22, fontWeight: 800, color: TOP.mint, letterSpacing:'-0.02em' }}>68%</div>
                <div style={{ marginLeft:'auto', fontFamily: TOP.mono, fontSize: 10, color: TOP.dim }}>cost €4.64</div>
              </div>
            </div>
          </div>

          {/* modifiers */}
          <div style={{ marginTop: 14 }}>
            <div style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.dim, letterSpacing:'0.2em', fontWeight: 600 }}>MODIFIER GROUPS</div>
            <div style={{ marginTop: 8, display:'flex', flexDirection:'column', gap: 6 }}>
              {[
                { n: 'Protein', t:'required · 1', v:'Pork / Chicken / Lamb (+€3)' },
                { n: 'Extras',  t:'any',          v:'Pita (€1) · Feta (€2) · Fries (€3)' },
                { n: 'Temp',    t:'required · 1', v:'Medium · Well done' },
              ].map((m, i) => (
                <div key={i} style={{
                  padding: '9px 11px', borderRadius: 10,
                  background: TOP.bg2, border: `1px solid ${TOP.border2}`,
                  display:'flex', alignItems:'center', gap: 10,
                }}>
                  <div style={{ fontFamily: TOP.mono, fontSize: 11, color: TOP.amber2, fontWeight: 700, minWidth: 56 }}>{m.n}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 11, color: TOP.body }}>{m.v}</div>
                    <div style={{ fontFamily: TOP.mono, fontSize: 9, color: TOP.dim, marginTop: 2 }}>{m.t}</div>
                  </div>
                  <i className="bi bi-pencil" style={{ color: TOP.muted, fontSize: 11 }}/>
                </div>
              ))}
            </div>
          </div>

          {/* 86 action */}
          <div style={{
            marginTop: 14, padding: '12px 14px', borderRadius: 12,
            background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.3)',
            display:'flex', alignItems:'center', gap: 10,
          }}>
            <i className="bi bi-slash-circle" style={{ color: TOP.red2, fontSize: 16 }}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, color: TOP.ink, fontWeight: 600 }}>Mark 86'd for tonight</div>
              <div style={{ fontFamily: TOP.mono, fontSize: 9.5, color: TOP.dim, marginTop: 1 }}>auto-restore tomorrow 11:00</div>
            </div>
            <div style={{
              width: 40, height: 22, borderRadius: 999,
              background: 'rgba(148,115,100,0.15)', border: `1px solid ${TOP.border2}`,
              position:'relative',
            }}>
              <div style={{ position:'absolute', top: 2, left: 2, width: 16, height: 16, borderRadius:'50%', background: TOP.dim }}/>
            </div>
          </div>

          {/* push */}
          <div style={{
            marginTop: 14, padding: '14px', borderRadius: 12,
            background: `linear-gradient(135deg, ${TOP.amber}, ${TOP.orange})`,
            color:'#fff', fontWeight: 700, fontSize: 13, textAlign:'center',
            boxShadow:'0 10px 24px rgba(245,158,11,0.4)',
            display:'flex', alignItems:'center', justifyContent:'center', gap: 10,
          }}>
            Publish to all tables <i className="bi bi-arrow-up-right-circle"/>
          </div>
          <div style={{ marginTop: 8, textAlign:'center', fontFamily: TOP.mono, fontSize: 9.5, color: TOP.dim, letterSpacing:'0.12em' }}>
            18 OPEN TABLES WILL SEE THE UPDATE IMMEDIATELY
          </div>
        </Card>
      </div>
    </div>
  );
}

// ═══════════════ SCREEN 06: OWNER CONTROL — MULTI-LOCATION, FINANCE ═══════════════
function TScreen06_OwnerControl() {
  return (
    <div style={{ padding: '22px 24px 32px', position:'relative' }}>
      <div style={{ position:'absolute', top: -100, right: -100, width: 440, height: 440,
        background:'radial-gradient(circle, rgba(245,158,11,0.14), transparent 70%)', pointerEvents:'none' }}/>

      <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom: 20, position:'relative' }}>
        <div>
          <div style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.amber2, letterSpacing:'0.24em', fontWeight: 600 }}>OWNER · COMMAND CENTER</div>
          <h1 style={{ margin: '6px 0 0', fontSize: 34, fontWeight: 800, letterSpacing:'-0.025em', color: TOP.ink, lineHeight: 1 }}>
            Every location,<br/>
            <span style={{ fontFamily: TOP.serif, fontStyle:'italic', fontWeight: 400, color: TOP.amber2 }}>
              one dashboard.
            </span>
          </h1>
        </div>
        <div style={{ display:'flex', gap: 10 }}>
          <div style={{ padding:'9px 14px', borderRadius: 10, background: TOP.surface2, border:`1px solid ${TOP.border2}`, fontSize: 12, color: TOP.body, display:'flex', alignItems:'center', gap: 8, fontWeight: 500 }}>
            <i className="bi bi-download"/>Export week
          </div>
          <div style={{ padding:'9px 14px', borderRadius: 10, background: `linear-gradient(135deg, ${TOP.amber}, ${TOP.orange})`, fontSize: 12, color:'#fff', fontWeight: 700, display:'flex', alignItems:'center', gap: 8, boxShadow:'0 6px 14px rgba(245,158,11,0.35)' }}>
            <i className="bi bi-bank"/>Payout to IBAN
          </div>
        </div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 14 }}>
        {/* Locations panel */}
        <Card style={{ padding: 0, overflow:'hidden' }}>
          <div style={{ padding:'14px 18px', borderBottom: `1px solid ${TOP.border2}`, display:'flex', alignItems:'center' }}>
            <div style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.dim, letterSpacing:'0.22em', fontWeight: 700 }}>LOCATIONS · 4</div>
            <div style={{ marginLeft:'auto', fontFamily: TOP.mono, fontSize: 10, color: TOP.mint, letterSpacing:'0.14em' }}>
              <i className="bi bi-circle-fill" style={{ fontSize: 6, marginRight: 4 }}/>ALL ONLINE
            </div>
          </div>

          {[
            { n:'Different Beast', city:'Kifisiá', r:'€2,148', trend:'+18%', c: TOP.amber2, live: 11, hot:true },
            { n:'Different Beast', city:'Glyfáda', r:'€1,840', trend:'+12%', c: TOP.mint, live: 8 },
            { n:'The Little Goat', city:'Plaka',    r:'€1,204', trend:'+6%',  c: TOP.cyan2, live: 6 },
            { n:'Iliopoulos Taverna', city:'Chaniá', r:'€980',  trend:'−3%',  c: TOP.red2, live: 4 },
          ].map((loc, i) => (
            <div key={i} style={{
              padding:'14px 18px',
              borderBottom: i < 3 ? `1px solid ${TOP.border2}` : 'none',
              display:'flex', alignItems:'center', gap: 14,
              background: loc.hot ? 'rgba(245,158,11,0.04)' : 'transparent',
            }}>
              <div style={{
                width: 42, height: 42, borderRadius: 10,
                background: `linear-gradient(135deg, oklch(0.62 0.17 ${20 + i*40}), oklch(0.42 0.15 ${20 + i*40 + 20}))`,
                display:'flex', alignItems:'center', justifyContent:'center',
                color:'#fff', fontWeight: 900, fontSize: 14, fontFamily: TOP.mono,
                position:'relative',
              }}>
                {loc.n.split(' ').map(w=>w[0]).join('').slice(0,2)}
                <div style={{ position:'absolute', bottom:-2, right:-2, width:10, height:10, borderRadius:'50%', background: TOP.mint, border: `2px solid ${TOP.bg}` }}/>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: TOP.ink }}>{loc.n}</div>
                <div style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.muted, letterSpacing:'0.08em' }}>
                  {loc.city.toUpperCase()} · {loc.live} tables open
                </div>
              </div>
              <div style={{ textAlign:'right' }}>
                <div style={{ fontFamily: TOP.mono, fontSize: 15, fontWeight: 800, color: TOP.ink }}>{loc.r}</div>
                <div style={{ fontFamily: TOP.mono, fontSize: 10, color: loc.c, fontWeight: 700 }}>{loc.trend} WoW</div>
              </div>
              <Spark data={i===3 ? [80,76,72,68,70,66,62] : [48,52,60,58,72,80,92]} color={loc.c} h={30} w={70}/>
            </div>
          ))}
        </Card>

        {/* Finance / payouts */}
        <Card style={{ padding: 18 }}>
          <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between' }}>
            <div>
              <div style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.dim, letterSpacing:'0.22em', fontWeight: 700 }}>NEXT PAYOUT · TUE APR 20</div>
              <div style={{ fontSize: 36, fontWeight: 900, letterSpacing:'-0.035em', marginTop: 4, lineHeight: 1,
                background: 'linear-gradient(160deg,#fff 0%,#fbbf24 50%,#f97316 100%)',
                WebkitBackgroundClip:'text', backgroundClip:'text', color:'transparent', fontFamily: TOP.mono,
              }}>€5,914.20</div>
              <div style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.mint, marginTop: 4, letterSpacing:'0.06em' }}>GR12 0110 · AGRICULTURAL BANK · ••••4821</div>
            </div>
            <div style={{ padding:'6px 10px', borderRadius: 8, background:'rgba(16,185,129,0.12)', border:'1px solid rgba(16,185,129,0.35)', color: TOP.mint, fontFamily: TOP.mono, fontSize: 10, fontWeight: 700, letterSpacing:'0.1em' }}>
              SCHEDULED
            </div>
          </div>

          <div style={{ marginTop: 18, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10 }}>
            <div style={{ padding: '10px 12px', borderRadius: 10, background: TOP.bg2, border: `1px solid ${TOP.border2}` }}>
              <div style={{ fontFamily: TOP.mono, fontSize: 9, color: TOP.dim, letterSpacing:'0.18em' }}>GROSS · WEEK</div>
              <div style={{ fontSize: 18, fontWeight: 800, color: TOP.ink, marginTop: 4, fontFamily: TOP.mono }}>€6,240.50</div>
            </div>
            <div style={{ padding: '10px 12px', borderRadius: 10, background: TOP.bg2, border: `1px solid ${TOP.border2}` }}>
              <div style={{ fontFamily: TOP.mono, fontSize: 9, color: TOP.dim, letterSpacing:'0.18em' }}>FEES · 1.5% + STRIPE</div>
              <div style={{ fontSize: 18, fontWeight: 800, color: TOP.red2, marginTop: 4, fontFamily: TOP.mono }}>−€326.30</div>
            </div>
          </div>

          <div style={{
            marginTop: 14, padding: '12px 14px', borderRadius: 12,
            background: 'linear-gradient(90deg, rgba(34,211,238,0.1), rgba(34,211,238,0))',
            border: '1px solid rgba(34,211,238,0.3)',
            display:'flex', alignItems:'center', gap: 10,
          }}>
            <i className="bi bi-receipt-cutoff" style={{ color: TOP.cyan2, fontSize: 16 }}/>
            <div style={{ flex: 1, fontSize: 12, color: TOP.body }}>
              Auto-invoice VAT &amp; <b style={{ color: TOP.cyan2 }}>myDATA</b> for this period
            </div>
            <i className="bi bi-check-circle-fill" style={{ color: TOP.mint, fontSize: 14 }}/>
          </div>

          <div style={{ marginTop: 14, paddingTop: 14, borderTop: `1px solid ${TOP.border2}` }}>
            <div style={{ fontFamily: TOP.mono, fontSize: 9.5, color: TOP.dim, letterSpacing:'0.22em', fontWeight: 700, marginBottom: 10 }}>RECENT PAYOUTS</div>
            {[
              { d:'Apr 14', a:'€5,640.80', s:'paid' },
              { d:'Apr 7',  a:'€4,890.00', s:'paid' },
              { d:'Mar 31', a:'€5,220.40', s:'paid' },
            ].map((p, i) => (
              <div key={i} style={{ display:'flex', alignItems:'center', gap: 10, padding: '7px 0', borderBottom: i < 2 ? `1px solid ${TOP.border2}` : 'none' }}>
                <i className="bi bi-check-circle-fill" style={{ color: TOP.mint, fontSize: 12 }}/>
                <span style={{ fontFamily: TOP.mono, fontSize: 11, color: TOP.muted, letterSpacing:'0.06em' }}>{p.d}</span>
                <span style={{ marginLeft:'auto', fontFamily: TOP.mono, fontSize: 12, color: TOP.ink, fontWeight: 700 }}>{p.a}</span>
              </div>
            ))}
          </div>
        </Card>

        {/* Staff leaderboard */}
        <Card style={{ padding: 18 }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
            <div style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.dim, letterSpacing:'0.22em', fontWeight: 700 }}>STAFF · TONIGHT'S SHIFT</div>
            <TChip color="cyan"><i className="bi bi-lightning-charge-fill"/>AUTO TIP-OUT</TChip>
          </div>
          <div style={{ marginTop: 14, display:'flex', flexDirection:'column', gap: 10 }}>
            {[
              { n:'Maria K.',    r:'Manager', t:'€84',  sales:'€1,120', c: TOP.amber2, mark:true },
              { n:'Yannis P.',   r:'Grill',   t:'€42',  sales:'€980',   c: TOP.orange2 },
              { n:'Elena D.',    r:'Floor',   t:'€72',  sales:'€890',   c: TOP.mint },
              { n:'Petros T.',   r:'Sea',     t:'€38',  sales:'€680',   c: TOP.cyan2 },
              { n:'Nikos V.',    r:'Bar',     t:'€58',  sales:'€520',   c: TOP.plum },
            ].map((s, i) => (
              <div key={i} style={{ display:'flex', alignItems:'center', gap: 10 }}>
                <div style={{
                  width: 30, height: 30, borderRadius:'50%',
                  background: `linear-gradient(135deg, ${s.c}, ${s.c}77)`,
                  display:'flex', alignItems:'center', justifyContent:'center',
                  color:'#0b0709', fontSize: 11, fontWeight: 800,
                }}>{s.n.split(' ').map(w=>w[0]).join('')}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12, color: TOP.ink, fontWeight: 600 }}>{s.n} {s.mark && <i className="bi bi-star-fill" style={{ color: TOP.amber2, fontSize: 9, marginLeft: 4 }}/>}</div>
                  <div style={{ fontFamily: TOP.mono, fontSize: 9.5, color: s.c, letterSpacing:'0.1em' }}>{s.r.toUpperCase()} · {s.sales}</div>
                </div>
                <div style={{
                  padding:'4px 8px', borderRadius: 6,
                  background:`${s.c}15`, border:`1px solid ${s.c}40`,
                  fontFamily: TOP.mono, fontSize: 12, color: s.c, fontWeight: 700,
                }}>+{s.t} tips</div>
              </div>
            ))}
          </div>
        </Card>

        {/* AI insights / alerts */}
        <Card style={{ padding: 18 }}>
          <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
            <div style={{
              width: 26, height: 26, borderRadius: 8,
              background: `linear-gradient(135deg, ${TOP.plum}, ${TOP.cyan2})`,
              display:'flex', alignItems:'center', justifyContent:'center', color:'#0b0709', fontSize: 12,
            }}>
              <i className="bi bi-stars"/>
            </div>
            <div style={{ fontFamily: TOP.mono, fontSize: 10, color: TOP.plum, letterSpacing:'0.22em', fontWeight: 700 }}>INSIGHTS · AUTO</div>
          </div>

          <div style={{ marginTop: 14, display:'flex', flexDirection:'column', gap: 8 }}>
            {[
              { i:'bi-arrow-up-right', c: TOP.mint, t:'Souvlaki moved +14%', s:'since you added the Greek-only tag. Keep the A/B running 5 more days.' },
              { i:'bi-clock-history',  c: TOP.amber2, t:'Grill bottleneck at 20:30', s:'Sun peaks exceed 4-cook capacity. Consider pre-fire on Friday orders.' },
              { i:'bi-cash-coin',      c: TOP.cyan2, t:'Tip-share opportunity', s:'Runners average €4/hr less than servers. Equal split would boost retention.' },
              { i:'bi-exclamation-triangle', c: TOP.red2, t:'Chaniá trailing −3%', s:'Tuesday dinner covers dropped 2 weeks in a row. Drill down?' },
            ].map((a, i) => (
              <div key={i} style={{ display:'flex', gap: 10, padding: '10px 12px', borderRadius: 10, background: TOP.bg2, border: `1px solid ${TOP.border2}` }}>
                <i className={`bi ${a.i}`} style={{ color: a.c, fontSize: 14, marginTop: 2 }}/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 12, color: TOP.ink, fontWeight: 600 }}>{a.t}</div>
                  <div style={{ fontSize: 11, color: TOP.muted, marginTop: 2, lineHeight: 1.4 }}>{a.s}</div>
                </div>
                <i className="bi bi-chevron-right" style={{ color: TOP.dim, fontSize: 11 }}/>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}

Object.assign(window, {
  TenantWindow,
  TScreen01_Orders, TScreen02_KDS, TScreen03_Floor,
  TScreen04_Analytics, TScreen05_MenuStudio, TScreen06_OwnerControl,
});