// ScanOrderPay iOS screens — 6 phones, dark theme
// Palette: amber/orange primary (Greek sun, hospitality) + cyan digital accent

const SOP = {
  bg:       '#0b0709',
  bg2:      '#140b0c',
  surface:  'rgba(31, 19, 18, 0.62)',
  surface2: 'rgba(22, 13, 12, 0.88)',
  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',
  cyan:     '#22d3ee',
  cyan2:    '#67e8f9',
  mint:     '#6ee7b7',
  green:    '#10b981',
  plum:     '#c4b5fd',

  serif:    "'Instrument Serif', serif",
  mono:     "'JetBrains Mono', ui-monospace, monospace",
  sans:     "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
};

// ───────────── shared ─────────────
function TopBar({ title, kicker, right, back = true, kickerColor }) {
  return (
    <div style={{ padding: '60px 20px 14px', display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{
          width: 40, height: 40, borderRadius: 12,
          background: 'rgba(148,115,100,0.08)',
          border: `1px solid ${SOP.border2}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: SOP.muted, fontSize: 16,
        }}>
          {back ? <i className="bi bi-chevron-left" /> : <i className="bi bi-list" />}
        </div>
        <div style={{ fontFamily: SOP.mono, fontSize: 10, letterSpacing: '0.22em', color: kickerColor || SOP.amber2, fontWeight: 600 }}>
          {kicker}
        </div>
        <div style={{
          width: 40, height: 40, borderRadius: 12,
          background: 'rgba(148,115,100,0.08)',
          border: `1px solid ${SOP.border2}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: SOP.muted, fontSize: 16,
        }}>
          {right || <i className="bi bi-three-dots" />}
        </div>
      </div>
      <div style={{
        fontFamily: SOP.sans, fontSize: 30, fontWeight: 800, color: SOP.ink,
        letterSpacing: '-0.025em', lineHeight: 1.05,
      }}>{title}</div>
    </div>
  );
}

function Chip({ children, color = 'amber', style }) {
  const map = {
    amber:  { c: SOP.amber2,  b: 'rgba(245,158,11,0.4)', bg: 'rgba(245,158,11,0.12)' },
    orange: { c: SOP.orange2, b: 'rgba(249,115,22,0.4)', bg: 'rgba(249,115,22,0.12)' },
    green:  { c: SOP.mint,    b: 'rgba(16,185,129,0.38)', bg: 'rgba(16,185,129,0.1)' },
    cyan:   { c: SOP.cyan2,   b: 'rgba(34,211,238,0.38)', bg: 'rgba(34,211,238,0.1)' },
    plum:   { c: SOP.plum,    b: 'rgba(139,92,246,0.38)', bg: 'rgba(139,92,246,0.1)' },
    dim:    { c: SOP.muted,   b: SOP.border2, bg: 'rgba(22,13,12,0.65)' },
  };
  const s = map[color];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '5px 10px', borderRadius: 999, fontSize: 11, fontWeight: 500,
      border: `1px solid ${s.b}`, color: s.c, background: s.bg,
      fontFamily: SOP.mono, letterSpacing: '0.02em',
      ...style,
    }}>{children}</span>
  );
}

function QRPattern({ size = 160, fg = SOP.amber2, bg = SOP.bg, border = true }) {
  return (
    <svg width={size} height={size} viewBox="0 0 29 29" style={{
      background: bg, padding: 6, borderRadius: 10,
      border: border ? `1px solid ${SOP.border}` : 'none',
    }}>
      <g fill={fg}>
        <rect x="0" y="0" width="7" height="7"/><rect x="1" y="1" width="5" height="5" fill={bg}/><rect x="2" y="2" width="3" height="3"/>
        <rect x="22" y="0" width="7" height="7"/><rect x="23" y="1" width="5" height="5" fill={bg}/><rect x="24" y="2" width="3" height="3"/>
        <rect x="0" y="22" width="7" height="7"/><rect x="1" y="23" width="5" height="5" fill={bg}/><rect x="2" y="24" width="3" height="3"/>
        <rect x="9" y="1" width="1" height="1"/><rect x="11" y="2" width="1" height="1"/><rect x="13" y="1" width="1" height="1"/><rect x="15" y="3" width="1" height="1"/><rect x="17" y="1" width="1" height="1"/><rect x="19" y="4" width="1" height="1"/>
        <rect x="1" y="9" width="1" height="1"/><rect x="3" y="11" width="1" height="1"/><rect x="5" y="13" width="1" height="1"/><rect x="2" y="15" width="1" height="1"/><rect x="4" y="17" width="1" height="1"/>
        <rect x="9" y="9" width="2" height="2"/><rect x="12" y="10" width="1" height="1"/><rect x="14" y="12" width="2" height="2"/><rect x="17" y="10" width="1" height="1"/><rect x="19" y="12" width="1" height="1"/>
        <rect x="10" y="14" width="1" height="1"/><rect x="13" y="16" width="1" height="1"/><rect x="15" y="18" width="2" height="2"/><rect x="18" y="15" width="1" height="1"/>
        <rect x="9" y="22" width="1" height="1"/><rect x="11" y="24" width="1" height="1"/><rect x="13" y="22" width="1" height="1"/><rect x="15" y="25" width="1" height="1"/><rect x="17" y="23" width="1" height="1"/>
        <rect x="22" y="9" width="1" height="1"/><rect x="24" y="11" width="1" height="1"/><rect x="26" y="14" width="1" height="1"/><rect x="23" y="16" width="1" height="1"/><rect x="25" y="18" width="1" height="1"/>
        <rect x="22" y="22" width="1" height="1"/><rect x="25" y="23" width="1" height="1"/><rect x="23" y="25" width="1" height="1"/><rect x="26" y="26" width="1" height="1"/>
        <rect x="8" y="8" width="1" height="1"/><rect x="20" y="8" width="1" height="1"/><rect x="8" y="20" width="1" height="1"/>
      </g>
    </svg>
  );
}

// A placeholder "food photo" — striped gradient with emoji-free label
function FoodTile({ label, hue = 30, h = 92 }) {
  return (
    <div style={{
      height: h, borderRadius: 14, position: 'relative', overflow: 'hidden',
      background: `linear-gradient(135deg, oklch(0.72 0.16 ${hue}) 0%, oklch(0.52 0.14 ${hue + 20}) 100%)`,
      boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 10px rgba(0,0,0,0.35)',
    }}>
      {/* subtle stripe */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'repeating-linear-gradient(45deg, rgba(0,0,0,0) 0 10px, rgba(0,0,0,0.08) 10px 11px)',
      }}/>
      <div style={{
        position: 'absolute', left: 8, bottom: 6,
        fontFamily: SOP.mono, fontSize: 9, letterSpacing: '0.14em',
        color: 'rgba(255,255,255,0.85)', textTransform: 'uppercase',
      }}>{label}</div>
    </div>
  );
}

// ═══════════════ SCREEN 01: SCAN / TABLE LANDING ═══════════════
function Screen01_Scan() {
  return (
    <div style={{ height: '100%', background: SOP.bg, color: SOP.ink, position: 'relative', overflow: 'hidden', fontFamily: SOP.sans }}>
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.9, pointerEvents: 'none',
        background: `
          radial-gradient(55% 45% at 25% 15%, rgba(245,158,11,0.35), transparent 60%),
          radial-gradient(50% 40% at 80% 85%, rgba(249,115,22,0.25), transparent 60%)
        `,
      }}/>
      <div style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', padding: '70px 24px 40px' }}>

        {/* small brand */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 10 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{
              width: 28, height: 28, borderRadius: 8,
              background: `linear-gradient(135deg, ${SOP.amber}, ${SOP.orange})`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 6px 18px rgba(245,158,11,0.45)',
            }}>
              <i className="bi bi-qr-code-scan" style={{ color: '#fff', fontSize: 14 }}/>
            </div>
            <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em' }}>
              Scan<span style={{ fontFamily: SOP.serif, fontWeight: 400, fontStyle: 'italic', color: SOP.amber2 }}>Order</span>Pay
            </div>
          </div>
          <div style={{ fontFamily: SOP.mono, fontSize: 10, color: SOP.dim, letterSpacing: '0.12em' }}>EN · EL</div>
        </div>

        {/* welcome */}
        <div style={{ marginTop: 44, textAlign: 'center' }}>
          <div style={{ fontFamily: SOP.mono, fontSize: 10, color: SOP.amber2, letterSpacing: '0.26em', fontWeight: 600 }}>
            KALÓS IRTHATE
          </div>
          <div style={{
            marginTop: 12, fontSize: 36, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1,
          }}>
            Different<br/>
            <span style={{ fontFamily: SOP.serif, fontWeight: 400, fontStyle: 'italic', color: SOP.amber2 }}>
              Beast.
            </span>
          </div>
          <div style={{ marginTop: 10, color: SOP.muted, fontSize: 13, fontFamily: SOP.mono, letterSpacing: '0.08em' }}>
            KIFISIÁ · ATHENS
          </div>
        </div>

        {/* scanned QR card */}
        <div style={{
          marginTop: 28, padding: '22px 22px', borderRadius: 20,
          background: SOP.surface, border: `1px solid ${SOP.border}`,
          backdropFilter: 'blur(12px)',
          display: 'flex', alignItems: 'center', gap: 18,
        }}>
          <div style={{
            padding: 6, borderRadius: 14,
            background: `linear-gradient(135deg, rgba(245,158,11,0.2), rgba(249,115,22,0.05))`,
            border: `1px solid ${SOP.border}`,
            position: 'relative',
          }}>
            <QRPattern size={72} fg={SOP.amber2} bg={SOP.bg2} border={false}/>
            <i className="bi bi-check-circle-fill" style={{
              position: 'absolute', right: -6, bottom: -6,
              color: SOP.mint, fontSize: 22, background: SOP.bg, borderRadius: '50%',
            }}/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: SOP.mono, fontSize: 10, color: SOP.dim, letterSpacing: '0.18em', fontWeight: 600 }}>
              TABLE
            </div>
            <div style={{ fontSize: 40, fontWeight: 900, letterSpacing: '-0.04em', marginTop: -2,
              background: 'linear-gradient(160deg, #fff 10%, #fbbf24 100%)',
              WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
            }}>
              07
            </div>
            <div style={{ color: SOP.muted, fontSize: 12, fontFamily: SOP.mono, letterSpacing: '0.06em', marginTop: 2 }}>
              patio · 4 seats
            </div>
          </div>
        </div>

        {/* party size */}
        <div style={{ marginTop: 18, padding: '14px 18px', borderRadius: 14,
          background: SOP.surface2, border: `1px solid ${SOP.border2}` }}>
          <div style={{ fontFamily: SOP.mono, fontSize: 10, color: SOP.dim, letterSpacing: '0.2em', fontWeight: 600 }}>
            HOW MANY ARE YOU?
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
            {[1,2,3,4,'+'].map((n, i) => (
              <div key={i} style={{
                flex: 1, padding: '12px 0', borderRadius: 10, textAlign: 'center',
                background: n === 2 ? `linear-gradient(135deg, ${SOP.amber}, ${SOP.orange})` : 'rgba(148,115,100,0.08)',
                border: `1px solid ${n === 2 ? 'transparent' : SOP.border2}`,
                color: n === 2 ? '#fff' : SOP.body,
                fontSize: 17, fontWeight: 700, fontFamily: SOP.mono,
                boxShadow: n === 2 ? '0 8px 20px rgba(245,158,11,0.35)' : 'none',
              }}>{n}</div>
            ))}
          </div>
        </div>

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

        <div style={{
          padding: '18px', borderRadius: 16,
          background: `linear-gradient(135deg, ${SOP.amber} 0%, ${SOP.orange} 100%)`,
          color: '#fff', fontWeight: 700, fontSize: 17, textAlign: 'center',
          boxShadow: '0 12px 32px rgba(245,158,11,0.45), inset 0 1px 0 rgba(255,255,255,0.25)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        }}>
          See the menu
          <i className="bi bi-arrow-right"/>
        </div>
        <div style={{ marginTop: 14, textAlign: 'center', color: SOP.dim, fontSize: 11, fontFamily: SOP.mono, letterSpacing: '0.1em' }}>
          NO APP · NO SIGNUP · GUEST CHECKOUT
        </div>
      </div>
    </div>
  );
}

// ═══════════════ SCREEN 02: MENU ═══════════════
function Screen02_Menu() {
  const cats = [
    { n: 'Mezze', active: true },
    { n: 'Grill' },
    { n: 'Sea' },
    { n: 'Wine' },
  ];
  const items = [
    { name: 'Saganaki',      gr: 'Σαγανάκι φέτα',     price: '€8.50',  tags: ['V'], hue: 48,  pop: true },
    { name: 'Octopus',       gr: 'Χταπόδι στα κάρβουνα', price: '€18.00', tags: [], hue: 15 },
    { name: 'Souvlaki Plate', gr: 'Σουβλάκι χοιρινό',  price: '€14.50', tags: [], hue: 30 },
    { name: 'Horiatiki',     gr: 'Χωριάτικη σαλάτα',   price: '€9.00',  tags: ['V','GF'], hue: 130 },
  ];
  return (
    <div style={{ height: '100%', background: SOP.bg, color: SOP.ink, position: 'relative', overflow: 'hidden', fontFamily: SOP.sans, display: 'flex', flexDirection: 'column' }}>
      <div style={{ position: 'absolute', top: -60, right: -60, width: 260, height: 260,
        background: 'radial-gradient(circle, rgba(245,158,11,0.25), transparent 70%)', pointerEvents: 'none' }}/>
      <TopBar
        title={<>What's good<br/><span style={{ fontFamily: SOP.serif, fontStyle: 'italic', fontWeight: 400, color: SOP.amber2 }}>tonight.</span></>}
        kicker="STEP 02 · BROWSE"
        right={<i className="bi bi-search"/>}
      />

      {/* table pill */}
      <div style={{ padding: '0 20px 14px', display: 'flex', gap: 8 }}>
        <Chip color="amber"><i className="bi bi-geo-alt-fill"/>Table 07 · patio</Chip>
        <Chip color="dim"><i className="bi bi-people"/>2</Chip>
        <Chip color="dim"><i className="bi bi-translate"/>EN</Chip>
      </div>

      {/* category tabs */}
      <div style={{ padding: '0 20px 14px', display: 'flex', gap: 8, overflow: 'hidden' }}>
        {cats.map((c, i) => (
          <div key={i} style={{
            padding: '9px 16px', borderRadius: 999,
            background: c.active
              ? `linear-gradient(135deg, ${SOP.amber}, ${SOP.orange})`
              : 'rgba(148,115,100,0.08)',
            border: c.active ? 'none' : `1px solid ${SOP.border2}`,
            color: c.active ? '#fff' : SOP.body,
            fontSize: 14, fontWeight: 600, whiteSpace: 'nowrap',
            boxShadow: c.active ? '0 6px 14px rgba(245,158,11,0.35)' : 'none',
          }}>{c.n}</div>
        ))}
      </div>

      {/* menu list */}
      <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 12, flex: 1, overflow: 'auto' }}>
        {items.map((it, i) => (
          <div key={i} style={{
            display: 'flex', gap: 14, padding: 12,
            background: i === 0
              ? 'linear-gradient(90deg, rgba(245,158,11,0.12), rgba(245,158,11,0.02))'
              : 'rgba(31,19,18,0.5)',
            border: `1px solid ${i === 0 ? 'rgba(251,191,36,0.32)' : SOP.border2}`,
            borderRadius: 16,
          }}>
            <div style={{ width: 84, flexShrink: 0 }}>
              <FoodTile label={it.name} hue={it.hue} h={84}/>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8 }}>
                <div style={{ color: SOP.ink, fontSize: 16, fontWeight: 700, letterSpacing: '-0.01em' }}>{it.name}</div>
                <div style={{ fontFamily: SOP.mono, color: SOP.amber2, fontWeight: 700, fontSize: 14 }}>{it.price}</div>
              </div>
              <div style={{ color: SOP.muted, fontSize: 12, marginTop: 2, fontStyle: 'italic', fontFamily: SOP.serif }}>
                {it.gr}
              </div>
              <div style={{ display: 'flex', gap: 6, marginTop: 8, alignItems: 'center' }}>
                {it.pop && <Chip color="orange" style={{ padding: '3px 8px', fontSize: 9 }}><i className="bi bi-fire"/>popular</Chip>}
                {it.tags.map((t, j) => (
                  <span key={j} style={{
                    fontFamily: SOP.mono, fontSize: 9, letterSpacing: '0.08em',
                    padding: '3px 6px', borderRadius: 5,
                    border: `1px solid ${SOP.border2}`, color: SOP.muted,
                  }}>{t}</span>
                ))}
                <div style={{ flex: 1 }}/>
                <div style={{
                  width: 28, height: 28, borderRadius: 8,
                  background: i === 0 ? `linear-gradient(135deg, ${SOP.amber}, ${SOP.orange})` : 'rgba(148,115,100,0.12)',
                  border: i === 0 ? 'none' : `1px solid ${SOP.border2}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: i === 0 ? '#fff' : SOP.muted, fontSize: 15, fontWeight: 700,
                  boxShadow: i === 0 ? '0 4px 10px rgba(245,158,11,0.35)' : 'none',
                }}>+</div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* sticky cart bar */}
      <div style={{ padding: '14px 20px 40px' }}>
        <div style={{
          padding: '14px 18px', borderRadius: 16,
          background: `linear-gradient(135deg, ${SOP.amber} 0%, ${SOP.orange} 100%)`,
          color: '#fff', display: 'flex', alignItems: 'center', gap: 12,
          boxShadow: '0 12px 32px rgba(245,158,11,0.4), inset 0 1px 0 rgba(255,255,255,0.25)',
        }}>
          <div style={{
            width: 32, height: 32, borderRadius: 10,
            background: 'rgba(0,0,0,0.25)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: SOP.mono, fontSize: 13, fontWeight: 700,
          }}>2</div>
          <div style={{ flex: 1, fontWeight: 700, fontSize: 15 }}>View cart</div>
          <div style={{ fontFamily: SOP.mono, fontWeight: 700, fontSize: 16 }}>€26.50</div>
          <i className="bi bi-arrow-right"/>
        </div>
      </div>
    </div>
  );
}

// ═══════════════ SCREEN 03: ITEM CUSTOMIZE ═══════════════
function Screen03_Customize() {
  return (
    <div style={{ height: '100%', background: SOP.bg, color: SOP.ink, position: 'relative', overflow: 'hidden', fontFamily: SOP.sans, display: 'flex', flexDirection: 'column' }}>
      {/* hero photo */}
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 300, overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(135deg, oklch(0.62 0.17 30) 0%, oklch(0.42 0.15 25) 100%)',
        }}/>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'repeating-linear-gradient(45deg, rgba(0,0,0,0) 0 14px, rgba(0,0,0,0.1) 14px 15px)',
        }}/>
        <div style={{
          position: 'absolute', inset: 0,
          background: `linear-gradient(180deg, transparent 40%, ${SOP.bg} 100%)`,
        }}/>
        {/* label */}
        <div style={{
          position: 'absolute', left: 24, bottom: 58,
          fontFamily: SOP.mono, fontSize: 10, color: 'rgba(255,255,255,0.6)',
          letterSpacing: '0.22em', textTransform: 'uppercase',
        }}>grill · chef's pick</div>
      </div>

      {/* floating back */}
      <div style={{ padding: '60px 20px 0', position: 'relative', zIndex: 2, display: 'flex', justifyContent: 'space-between' }}>
        <div style={{ width: 40, height: 40, borderRadius: 12, background: 'rgba(11,7,9,0.55)', backdropFilter: 'blur(10px)',
          border: `1px solid rgba(255,255,255,0.1)`, display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff', fontSize: 16 }}>
          <i className="bi bi-chevron-left"/>
        </div>
        <div style={{ width: 40, height: 40, borderRadius: 12, background: 'rgba(11,7,9,0.55)', backdropFilter: 'blur(10px)',
          border: `1px solid rgba(255,255,255,0.1)`, display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff', fontSize: 16 }}>
          <i className="bi bi-heart"/>
        </div>
      </div>

      <div style={{ flex: 1, position: 'relative', zIndex: 2, padding: '180px 20px 0', display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div>
          <div style={{ fontSize: 32, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1 }}>
            Souvlaki<br/>
            <span style={{ fontFamily: SOP.serif, fontWeight: 400, fontStyle: 'italic', color: SOP.amber2 }}>Plate.</span>
          </div>
          <div style={{ marginTop: 8, color: SOP.muted, fontSize: 14, lineHeight: 1.45, textWrap: 'pretty' }}>
            Two skewers, pita, tzatziki, chips. Grilled over charcoal — the way Yiayiá would.
          </div>
          <div style={{ marginTop: 10, display: 'flex', gap: 6, alignItems: 'center' }}>
            <Chip color="orange"><i className="bi bi-fire"/>popular</Chip>
            <span style={{ fontFamily: SOP.mono, fontSize: 10, color: SOP.muted, letterSpacing: '0.08em' }}>· ~14 min</span>
          </div>
        </div>

        {/* modifier group */}
        <div style={{ padding: 14, borderRadius: 16, background: SOP.surface2, border: `1px solid ${SOP.border2}` }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div style={{ fontFamily: SOP.mono, fontSize: 10, color: SOP.amber2, letterSpacing: '0.22em', fontWeight: 600 }}>PROTEIN · CHOOSE 1</div>
            <div style={{ fontFamily: SOP.mono, fontSize: 10, color: SOP.dim }}>required</div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 10 }}>
            {[
              { n: 'Pork',    p: '',       chk: true  },
              { n: 'Chicken', p: '',       chk: false },
              { n: 'Lamb',    p: '+€3.00', chk: false },
            ].map((r, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '10px 12px', borderRadius: 10,
                background: r.chk ? 'rgba(245,158,11,0.1)' : 'transparent',
                border: `1px solid ${r.chk ? 'rgba(251,191,36,0.35)' : 'transparent'}`,
              }}>
                <div style={{
                  width: 20, height: 20, borderRadius: '50%',
                  border: `2px solid ${r.chk ? SOP.amber2 : SOP.dim}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  {r.chk && <div style={{ width: 10, height: 10, borderRadius: '50%', background: SOP.amber2, boxShadow: `0 0 10px ${SOP.amber2}` }}/>}
                </div>
                <div style={{ flex: 1, color: SOP.ink, fontSize: 15 }}>{r.n}</div>
                {r.p && <div style={{ fontFamily: SOP.mono, color: SOP.muted, fontSize: 12 }}>{r.p}</div>}
              </div>
            ))}
          </div>
        </div>

        {/* add-ons */}
        <div style={{ padding: 14, borderRadius: 16, background: SOP.surface2, border: `1px solid ${SOP.border2}` }}>
          <div style={{ fontFamily: SOP.mono, fontSize: 10, color: SOP.amber2, letterSpacing: '0.22em', fontWeight: 600 }}>EXTRAS · ANY</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10 }}>
            {[
              { n: 'Extra pita', p: '€1', on: true  },
              { n: 'Feta',       p: '€2', on: true  },
              { n: 'Fries',      p: '€3', on: false },
              { n: 'Olives',     p: '€2', on: false },
            ].map((r, i) => (
              <div key={i} style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: '8px 12px', borderRadius: 999,
                background: r.on ? 'rgba(245,158,11,0.12)' : 'rgba(148,115,100,0.06)',
                border: `1px solid ${r.on ? 'rgba(251,191,36,0.4)' : SOP.border2}`,
                color: r.on ? SOP.amber2 : SOP.body, fontSize: 13, fontWeight: 500,
              }}>
                {r.on && <i className="bi bi-check-circle-fill" style={{ fontSize: 12 }}/>}
                {r.n}
                <span style={{ fontFamily: SOP.mono, fontSize: 10, color: r.on ? SOP.amber3 : SOP.dim }}>{r.p}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* qty + CTA */}
      <div style={{ padding: '14px 20px 40px', display: 'flex', gap: 10, alignItems: 'center' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6,
          padding: '8px 10px', borderRadius: 14,
          background: SOP.surface2, border: `1px solid ${SOP.border2}`,
        }}>
          <div style={{ width: 34, height: 34, borderRadius: 10, background: 'rgba(148,115,100,0.1)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', color: SOP.muted, fontSize: 18 }}>−</div>
          <div style={{ fontFamily: SOP.mono, fontSize: 17, fontWeight: 700, minWidth: 22, textAlign: 'center' }}>1</div>
          <div style={{ width: 34, height: 34, borderRadius: 10,
            background: `linear-gradient(135deg, ${SOP.amber}, ${SOP.orange})`,
            display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 18, fontWeight: 700 }}>+</div>
        </div>
        <div style={{
          flex: 1, padding: '15px', borderRadius: 14,
          background: `linear-gradient(135deg, ${SOP.amber} 0%, ${SOP.orange} 100%)`,
          color: '#fff', fontWeight: 700, fontSize: 15, textAlign: 'center',
          boxShadow: '0 12px 32px rgba(245,158,11,0.45)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        }}>
          Add to order · €17.50
        </div>
      </div>
    </div>
  );
}

// ═══════════════ SCREEN 04: CART / SPLIT ═══════════════
function Screen04_Cart() {
  const items = [
    { qty: 1, n: 'Souvlaki Plate', mods: 'pork · +extra pita · +feta', p: '€17.50' },
    { qty: 1, n: 'Saganaki',       mods: 'with honey',                 p: '€8.50'  },
    { qty: 2, n: 'Mythos draft',   mods: '0.5L',                        p: '€9.00'  },
  ];
  return (
    <div style={{ height: '100%', background: SOP.bg, color: SOP.ink, position: 'relative', overflow: 'hidden', fontFamily: SOP.sans, display: 'flex', flexDirection: 'column' }}>
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(55% 40% at 50% 20%, rgba(34,211,238,0.15), transparent 60%)' }}/>
      <TopBar
        title={<>Your order<br/><span style={{ fontFamily: SOP.serif, fontStyle: 'italic', fontWeight: 400, color: SOP.amber2 }}>so far.</span></>}
        kicker="STEP 03 · REVIEW"
        right={<i className="bi bi-pencil"/>}
      />

      <div style={{ padding: '0 20px', flex: 1, display: 'flex', flexDirection: 'column', gap: 12, overflow: 'auto' }}>
        {/* items */}
        <div style={{ padding: 6, borderRadius: 18, background: SOP.surface2, border: `1px solid ${SOP.border2}` }}>
          {items.map((it, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'flex-start', gap: 12, padding: '12px 14px',
              borderBottom: i < items.length - 1 ? `1px solid ${SOP.border2}` : 'none',
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: 8, flexShrink: 0,
                background: 'rgba(245,158,11,0.14)', border: '1px solid rgba(251,191,36,0.28)',
                color: SOP.amber2, display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: SOP.mono, fontSize: 13, fontWeight: 700,
              }}>×{it.qty}</div>
              <div style={{ flex: 1 }}>
                <div style={{ color: SOP.ink, fontSize: 15, fontWeight: 600 }}>{it.n}</div>
                <div style={{ color: SOP.dim, fontSize: 11, fontFamily: SOP.mono, letterSpacing: '0.02em', marginTop: 2 }}>{it.mods}</div>
              </div>
              <div style={{ fontFamily: SOP.mono, color: SOP.body, fontWeight: 600, fontSize: 14 }}>{it.p}</div>
            </div>
          ))}
        </div>

        {/* split bill */}
        <div style={{
          padding: '14px 16px', borderRadius: 16,
          background: 'linear-gradient(135deg, rgba(34,211,238,0.1), rgba(34,211,238,0.02))',
          border: '1px solid rgba(34,211,238,0.3)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{
              width: 34, height: 34, borderRadius: 10,
              background: 'rgba(34,211,238,0.15)', border: `1px solid rgba(34,211,238,0.35)`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: SOP.cyan2, fontSize: 16,
            }}>
              <i className="bi bi-pie-chart-fill"/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ color: SOP.ink, fontSize: 14, fontWeight: 600 }}>Split the bill</div>
              <div style={{ color: SOP.dim, fontSize: 12, fontFamily: SOP.mono }}>2 ways · equal</div>
            </div>
            <div style={{
              padding: '6px 12px', borderRadius: 10,
              background: 'rgba(34,211,238,0.15)', border: `1px solid rgba(34,211,238,0.35)`,
              color: SOP.cyan2, fontFamily: SOP.mono, fontSize: 11, fontWeight: 700,
            }}>ON</div>
          </div>
        </div>

        {/* totals */}
        <div style={{ padding: '16px 18px', borderRadius: 16, background: SOP.surface, border: `1px solid ${SOP.border}` }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontFamily: SOP.mono, fontSize: 13 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', color: SOP.muted }}>
              <span>subtotal</span><span>€35.00</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', color: SOP.muted }}>
              <span>VAT (24%)</span><span>€8.40</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', color: SOP.muted }}>
              <span>service · 10%</span><span>€3.50</span>
            </div>
            <div style={{ height: 1, background: SOP.border2, margin: '4px 0' }}/>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <span style={{ fontSize: 11, color: SOP.dim, letterSpacing: '0.2em' }}>TOTAL</span>
              <span style={{ fontSize: 26, fontWeight: 800, color: SOP.ink, letterSpacing: '-0.02em' }}>
                €46<span style={{ opacity: 0.6, fontSize: 18 }}>.90</span>
              </span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: SOP.cyan2, letterSpacing: '0.06em' }}>
              <span>your share</span><span>€23.45</span>
            </div>
          </div>
        </div>

        {/* promo */}
        <div style={{
          padding: '12px 14px', borderRadius: 12,
          background: 'rgba(148,115,100,0.06)',
          border: `1px dashed ${SOP.border2}`,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <i className="bi bi-ticket-perforated" style={{ color: SOP.muted, fontSize: 16 }}/>
          <div style={{ flex: 1, color: SOP.muted, fontSize: 13, fontFamily: SOP.mono, letterSpacing: '0.04em' }}>
            Add promo code
          </div>
          <i className="bi bi-plus" style={{ color: SOP.muted, fontSize: 16 }}/>
        </div>
      </div>

      <div style={{ padding: '14px 20px 40px' }}>
        <div style={{
          padding: '18px', borderRadius: 16,
          background: `linear-gradient(135deg, ${SOP.amber} 0%, ${SOP.orange} 100%)`,
          color: '#fff', fontWeight: 700, fontSize: 17, textAlign: 'center',
          boxShadow: '0 12px 32px rgba(245,158,11,0.45), inset 0 1px 0 rgba(255,255,255,0.25)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        }}>
          Pay €23.45
          <i className="bi bi-arrow-right"/>
        </div>
      </div>
    </div>
  );
}

// ═══════════════ SCREEN 05: PAY ═══════════════
function Screen05_Pay() {
  return (
    <div style={{ height: '100%', background: SOP.bg, color: SOP.ink, position: 'relative', overflow: 'hidden', fontFamily: SOP.sans, display: 'flex', flexDirection: 'column' }}>
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `
          radial-gradient(55% 40% at 50% 25%, rgba(34,211,238,0.2), transparent 60%),
          radial-gradient(40% 30% at 50% 80%, rgba(245,158,11,0.12), transparent 60%)
        `,
      }}/>
      <TopBar
        title={<>Tap to pay.<br/><span style={{ fontFamily: SOP.serif, fontStyle: 'italic', fontWeight: 400, color: SOP.cyan2 }}>Stripe secured.</span></>}
        kicker="STEP 04 · PAY"
        kickerColor={SOP.cyan2}
        right={<i className="bi bi-shield-lock"/>}
      />

      <div style={{ padding: '0 20px', flex: 1, display: 'flex', flexDirection: 'column', gap: 14 }}>
        {/* total card */}
        <div style={{
          padding: '22px 22px', borderRadius: 20,
          background: SOP.surface, border: `1px solid ${SOP.border}`,
          backdropFilter: 'blur(12px)',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div>
              <div style={{ fontFamily: SOP.mono, fontSize: 10, color: SOP.amber2, letterSpacing: '0.22em', fontWeight: 600 }}>YOUR SHARE · 1 OF 2</div>
              <div style={{
                fontSize: 52, fontWeight: 900, letterSpacing: '-0.035em', marginTop: 4,
                background: 'linear-gradient(160deg,#fff 0%,#fbbf24 45%,#f97316 100%)',
                WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
                fontVariantNumeric: 'tabular-nums',
              }}>€23.45</div>
              <div style={{ fontFamily: SOP.mono, fontSize: 11, color: SOP.dim, letterSpacing: '0.08em', marginTop: 4 }}>
                ORDER #DB-20260418-214 · TABLE 07
              </div>
            </div>
          </div>
        </div>

        {/* payment methods */}
        <div style={{ fontFamily: SOP.mono, fontSize: 10, color: SOP.dim, letterSpacing: '0.22em', fontWeight: 600, marginTop: 4 }}>
          PAY WITH
        </div>

        {/* Apple Pay primary */}
        <div style={{
          padding: '16px 20px', borderRadius: 14,
          background: '#000', border: `1px solid rgba(255,255,255,0.1)`,
          display: 'flex', alignItems: 'center', gap: 12,
          boxShadow: '0 10px 24px rgba(0,0,0,0.5)',
        }}>
          <div style={{
            width: 32, height: 32, borderRadius: '50%',
            background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#000', fontSize: 16, fontWeight: 900,
          }}>
            <i className="bi bi-apple"/>
          </div>
          <div style={{ flex: 1, color: '#fff', fontSize: 17, fontWeight: 600 }}>Apple Pay</div>
          <div style={{ color: 'rgba(255,255,255,0.6)', fontFamily: SOP.mono, fontSize: 12 }}>•• 4921</div>
          <i className="bi bi-check-circle-fill" style={{ color: SOP.mint, fontSize: 18 }}/>
        </div>

        {/* card */}
        <div style={{
          padding: '14px 16px', borderRadius: 14,
          background: SOP.surface2, border: `1px solid ${SOP.border2}`,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{
            width: 40, height: 28, borderRadius: 5,
            background: 'linear-gradient(135deg, #1a365d, #2d3748)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#fff', fontSize: 10, fontWeight: 800, letterSpacing: '0.04em',
          }}>VISA</div>
          <div style={{ flex: 1, color: SOP.body, fontSize: 15 }}>Card ending 3847</div>
          <i className="bi bi-chevron-right" style={{ color: SOP.dim }}/>
        </div>

        {/* google pay */}
        <div style={{
          padding: '14px 16px', borderRadius: 14,
          background: SOP.surface2, border: `1px solid ${SOP.border2}`,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{
            width: 32, height: 32, borderRadius: '50%',
            background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#4285f4', fontSize: 16, fontWeight: 900,
          }}>G</div>
          <div style={{ flex: 1, color: SOP.body, fontSize: 15 }}>Google Pay</div>
          <i className="bi bi-chevron-right" style={{ color: SOP.dim }}/>
        </div>

        {/* cash at counter */}
        <div style={{
          padding: '14px 16px', borderRadius: 14,
          background: SOP.surface2, border: `1px solid ${SOP.border2}`,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{
            width: 32, height: 32, borderRadius: 10,
            background: 'rgba(148,115,100,0.12)', border: `1px solid ${SOP.border2}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: SOP.muted, fontSize: 14,
          }}>
            <i className="bi bi-cash-stack"/>
          </div>
          <div style={{ flex: 1, color: SOP.body, fontSize: 15 }}>Pay cash at the counter</div>
          <i className="bi bi-chevron-right" style={{ color: SOP.dim }}/>
        </div>

        {/* receipt opts */}
        <div style={{
          padding: '12px 14px', borderRadius: 12,
          background: 'rgba(148,115,100,0.06)',
          border: `1px solid ${SOP.border2}`,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <i className="bi bi-receipt" style={{ color: SOP.muted, fontSize: 15 }}/>
          <div style={{ flex: 1, color: SOP.body, fontSize: 13 }}>Email receipt to you</div>
          <div style={{ fontFamily: SOP.mono, color: SOP.muted, fontSize: 12 }}>maria@…</div>
        </div>
      </div>

      <div style={{ padding: '14px 20px 40px' }}>
        <div style={{
          padding: '18px', borderRadius: 16,
          background: '#000', color: '#fff',
          fontWeight: 700, fontSize: 17, textAlign: 'center',
          border: `1px solid rgba(255,255,255,0.1)`,
          boxShadow: '0 12px 32px rgba(0,0,0,0.5)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        }}>
          <i className="bi bi-apple" style={{ fontSize: 22 }}/>
          <span>Pay</span>
          <span style={{ marginLeft: 6 }}>€23.45</span>
        </div>
        <div style={{ marginTop: 12, textAlign: 'center', color: SOP.dim, fontSize: 11, fontFamily: SOP.mono, letterSpacing: '0.1em', display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 8 }}>
          <i className="bi bi-shield-lock-fill" style={{ color: SOP.cyan2 }}/> SECURED BY STRIPE · PCI DSS
        </div>
      </div>
    </div>
  );
}

// ═══════════════ SCREEN 06: TRACK / KITCHEN LIVE ═══════════════
function Screen06_Track() {
  const stages = [
    { t: 'Received',  s: '20:14', d: 'done', icon: 'bi-check-circle-fill' },
    { t: 'Confirmed', s: '20:14', d: 'done', icon: 'bi-check-circle-fill' },
    { t: 'Preparing', s: 'now',   d: 'now',  icon: 'bi-fire' },
    { t: 'Ready',     s: '~20:28', d: 'next', icon: 'bi-bell' },
    { t: 'Served',    s: '',      d: 'next', icon: 'bi-check-all' },
  ];
  return (
    <div style={{ height: '100%', background: SOP.bg, color: SOP.ink, position: 'relative', overflow: 'hidden', fontFamily: SOP.sans, display: 'flex', flexDirection: 'column' }}>
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `
          radial-gradient(55% 40% at 50% 25%, rgba(245,158,11,0.3), transparent 60%),
          radial-gradient(40% 30% at 50% 80%, rgba(16,185,129,0.15), transparent 60%)
        `,
      }}/>
      <TopBar
        title={<>On the grill<br/><span style={{ fontFamily: SOP.serif, fontStyle: 'italic', fontWeight: 400, color: SOP.amber2 }}>right now.</span></>}
        kicker="STEP 05 · TRACK"
      />

      <div style={{ padding: '0 20px', flex: 1, display: 'flex', flexDirection: 'column', gap: 14, overflow: 'auto' }}>
        {/* hero status ring */}
        <div style={{
          padding: '24px 22px', borderRadius: 20,
          background: SOP.surface, border: `1px solid ${SOP.border}`,
          display: 'flex', alignItems: 'center', gap: 18,
        }}>
          <div style={{ position: 'relative', width: 88, height: 88, flexShrink: 0 }}>
            {/* animated-looking flame */}
            <svg width="88" height="88" viewBox="0 0 88 88">
              <circle cx="44" cy="44" r="38" fill="none" stroke="rgba(148,115,100,0.15)" strokeWidth="5"/>
              <circle cx="44" cy="44" r="38" fill="none" stroke="url(#grad6)" strokeWidth="5"
                strokeDasharray="238.76" strokeDashoffset="71" strokeLinecap="round"
                transform="rotate(-90 44 44)"/>
              <defs>
                <linearGradient id="grad6" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0%" stopColor={SOP.amber2}/>
                  <stop offset="100%" stopColor={SOP.orange}/>
                </linearGradient>
              </defs>
            </svg>
            <div style={{
              position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: SOP.amber2, fontSize: 30,
              filter: 'drop-shadow(0 0 12px rgba(245,158,11,0.6))',
            }}>
              <i className="bi bi-fire"/>
            </div>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: SOP.mono, fontSize: 10, color: SOP.amber2, letterSpacing: '0.22em', fontWeight: 600 }}>PREPARING</div>
            <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', marginTop: 2 }}>
              Yannis is on it.
            </div>
            <div style={{ marginTop: 6, color: SOP.muted, fontSize: 13 }}>
              Est. ready in <b style={{ color: SOP.ink, fontFamily: SOP.mono }}>~ 14 min</b>
            </div>
          </div>
        </div>

        {/* stage timeline */}
        <div style={{ padding: '18px 20px', borderRadius: 18, background: SOP.surface2, border: `1px solid ${SOP.border2}` }}>
          <div style={{ fontFamily: SOP.mono, fontSize: 10, color: SOP.dim, letterSpacing: '0.22em', fontWeight: 600, marginBottom: 12 }}>
            STATUS
          </div>
          {stages.map((r, i) => {
            const col = r.d === 'done' ? SOP.mint : r.d === 'now' ? SOP.amber2 : SOP.dim;
            return (
              <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', paddingBottom: i < stages.length - 1 ? 12 : 0 }}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <div style={{
                    width: 26, height: 26, borderRadius: '50%',
                    background: r.d === 'now' ? 'rgba(245,158,11,0.18)' : r.d === 'done' ? 'rgba(16,185,129,0.18)' : 'rgba(148,115,100,0.08)',
                    border: `1.5px solid ${col}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: col, fontSize: 13,
                    boxShadow: r.d === 'now' ? `0 0 16px ${SOP.amber2}` : 'none',
                  }}>
                    <i className={`bi ${r.icon}`}/>
                  </div>
                  {i < stages.length - 1 && (
                    <div style={{
                      width: 1.5, flex: 1, minHeight: 14,
                      background: r.d === 'done' ? 'rgba(16,185,129,0.35)' : r.d === 'now' ? 'linear-gradient(180deg, rgba(245,158,11,0.5), rgba(148,115,100,0.2))' : 'rgba(148,115,100,0.2)',
                    }}/>
                  )}
                </div>
                <div style={{ flex: 1, paddingTop: 2 }}>
                  <div style={{ color: r.d === 'next' ? SOP.muted : SOP.ink, fontSize: 15, fontWeight: 600 }}>{r.t}</div>
                  <div style={{ color: r.d === 'now' ? SOP.amber2 : SOP.dim, fontSize: 12, fontFamily: SOP.mono, letterSpacing: '0.04em', marginTop: 1, fontWeight: r.d === 'now' ? 700 : 400 }}>
                    {r.s}
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* live chips */}
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          <Chip color="amber"><i className="bi bi-geo-alt-fill"/>Table 07</Chip>
          <Chip color="green"><i className="bi bi-circle-fill" style={{ fontSize: 7 }}/>live · websocket</Chip>
          <Chip color="dim"><i className="bi bi-people"/>1 of 2 paid</Chip>
        </div>
      </div>

      <div style={{ padding: '14px 20px 40px', display: 'flex', gap: 10 }}>
        <div style={{
          flex: 1, padding: '16px', borderRadius: 14,
          background: 'rgba(148,115,100,0.08)', border: `1px solid ${SOP.border2}`,
          color: SOP.body, fontWeight: 600, fontSize: 14, textAlign: 'center',
        }}>
          <i className="bi bi-hand-index" style={{ marginRight: 8 }}/>Call waiter
        </div>
        <div style={{
          flex: 1, padding: '16px', borderRadius: 14,
          background: `linear-gradient(135deg, ${SOP.amber} 0%, ${SOP.orange} 100%)`,
          color: '#fff', fontWeight: 700, fontSize: 14, textAlign: 'center',
          boxShadow: '0 10px 22px rgba(245,158,11,0.4)',
        }}>
          Order more<i className="bi bi-plus-lg" style={{ marginLeft: 8 }}/>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  Screen01_Scan, Screen02_Menu, Screen03_Customize,
  Screen04_Cart, Screen05_Pay, Screen06_Track,
});