/* screens-flow.jsx — Standby, Catalog, AgeCheck, Payment, PickUp. → window */
const { useState: useS, useEffect: useE, useRef: useR } = React;

/* ============================ STANDBY (ad carousel) ============================ */
function StandbyScreen({ ctx, onWake, onLang }) {
  const { t, lang, orientation } = ctx;
  const portrait = orientation === 'portrait';
  const ads = [0, 1, 2];
  const [idx, setIdx] = useS(0);
  useE(() => {
    const id = setInterval(() => setIdx((p) => (p + 1) % ads.length), 5000);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="standby" onClick={onWake}>
      <div className="stage">
        {ads.map((n) => (
          <div key={n} className="ad-slide" style={{ opacity: idx === n ? 1 : 0 }}>
            <div className="hero-fallback">
              <div className="hero-orb" />
              <span className="mono hero-cap">AD {String(n + 1).padStart(2, '0')} / {String(ads.length).padStart(2, '0')} · IMAGE OR VIDEO LOOP</span>
            </div>
            <image-slot id={'standby-ad-' + orientation + '-' + n} className="hero-img" shape="rect" src={'ads/ad' + (n + 1) + (portrait ? '-p' : '') + '.png?v=3'} placeholder={'Ad ' + (n + 1) + ' — drop image / video poster'}
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}></image-slot>
          </div>
        ))}
        <div className="scrim" />
      </div>

      <div className="age-badge">
        <span className="age-ring">18</span>
        <span>{t('age_warn')}</span>
      </div>

      <div className="carousel-dots" onClick={(e) => e.stopPropagation()}>
        {ads.map((n) => (
          <button key={n} className={'cdot ' + (idx === n ? 'on' : '')} onClick={() => setIdx(n)} aria-label={'ad ' + (n + 1)} />
        ))}
      </div>

      <div className="content">
        <div className="row between" style={{ alignItems: 'flex-end' }}>
          <div className="tap"><span className="ring" />{t('tap_to_start')}</div>
          <div className="lang-row" onClick={(e) => e.stopPropagation()}>
            {LANGS.map((l) => (
              <button key={l.code} className="lang-pill" onClick={() => onLang(l.code)}>
                <span style={{ fontSize: 16 }}>{l.flag}</span>{l.label}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================ CATALOG ============================ */
function CatalogScreen({ ctx, lanes, cols, selected, onSelect, onClear, onCheckout, onLogo, onHelp, onLang, sessionLeft }) {
  const { t, lang, cur } = ctx;
  const [atBottom, setAtBottom] = useS(true);
  const gridRef = useR(null);
  const list = lanes || PRODUCTS;
  const ncols = cols || 4;
  const avail = list.filter((p) => p.stock > 0 && !p.locked).length;
  const laneUnit = lang === 'zh' ? '货道' : lang === 'es' ? 'canales' : 'lanes';
  const availWord = lang === 'zh' ? '可购' : lang === 'es' ? 'disp.' : 'available';
  const moreWord = lang === 'zh' ? '下滑查看更多' : lang === 'es' ? 'Deslice para ver más' : 'Scroll for more';

  useE(() => {
    const g = gridRef.current;
    if (!g) return;
    const update = () => setAtBottom(g.scrollTop + g.clientHeight >= g.scrollHeight - 12);
    update();
    g.addEventListener('scroll', update, { passive: true });
    // scroll-reveal cards
    let io;
    if ('IntersectionObserver' in window) {
      io = new IntersectionObserver((es) => es.forEach((e) => { if (e.isIntersecting) e.target.classList.add('reveal-in'); }), { root: g, threshold: 0.12 });
      g.querySelectorAll('.prod').forEach((el) => io.observe(el));
    } else {
      g.querySelectorAll('.prod').forEach((el) => el.classList.add('reveal-in'));
    }
    return () => { g.removeEventListener('scroll', update); if (io) io.disconnect(); };
  }, [list, ncols]);

  const scrollMore = () => { const g = gridRef.current; if (g) g.scrollBy({ top: Math.round(g.clientHeight * 0.82), behavior: 'smooth' }); };

  return (
    <div className="screen">
      <TopBar ctx={ctx} onLogo={onLogo} onHelp={onHelp} onLang={onLang} showSession sessionLeft={sessionLeft} />
      <div className="body">
        <div className="grid" ref={gridRef} style={{ gridTemplateColumns: `repeat(${ncols}, 1fr)`, paddingTop: 'var(--pad)' }}>
          {list.map((p) => {
            const out = p.stock === 0;
            return (
              <button key={p.id} className={'prod reveal ' + (out ? 'out' : '') + (selected && selected.id === p.id ? ' sel' : '')}
                onClick={() => !out && onSelect(p)} disabled={out}>
                <div className="pic"><div className="shot"><img className="shot-img" src={'products/' + (p.pid || p.id) + '.png'} alt={p.name} /></div></div>
                <span className="lanetag mono">{p.lane}</span>
                {out && <span className="badge-out">{t('sold_out')}</span>}
                {selected && selected.id === p.id && <span className="badge-sel"><Icon name="check" size={14} stroke={2.5} /></span>}
                <div className="meta">
                  <div className="pname">{p.name}</div>
                  <div className="prow">
                    <div className="prices">
                      {p.priceOrig > p.price && <span className="price-orig">{fmtPrice(p.priceOrig, cur)}</span>}
                      <span className="price">{fmtPrice(p.price, cur)}</span>
                    </div>
                    <span className={'stock' + (p.stock <= 2 ? ' low' : '')}><Icon name="grid" size={12} /> {p.stock}</span>
                  </div>
                </div>
              </button>
            );
          })}
        </div>
        <div className={'grid-fade' + (atBottom || selected ? ' hide' : '')} />
        {!atBottom && !selected && (
          <button className="scroll-cue" onClick={scrollMore}>
            {moreWord} <Icon name="chevDown" size={16} />
          </button>
        )}
        {selected && (
          <div className="cartbar">
            <div className="thumb"><img src={'products/' + (selected.pid || selected.id) + '.png'} alt="" /></div>
            <div className="col" style={{ flex: 1 }}>
              <span className="ci-name">{selected.name}</span>
              <span className="ci-sub">{t('lane')} {selected.lane} · {fmtPrice(selected.price, cur)}</span>
            </div>
            <button className="btn ghost" onClick={onClear}>{t('remove')}</button>
            <button className="btn primary lg" onClick={onCheckout}>{t('checkout')} <Icon name="arrowR" size={20} /></button>
          </div>
        )}
      </div>
    </div>
  );
}

function ProductSheet({ ctx, product, onClose, onSelect }) {
  const { t, cur, lang } = ctx;
  return (
    <div className="sheet">
      <div className="sscrim" onClick={onClose} />
      <div className="spanel">
        <div className="topbar" style={{ borderBottom: '1px solid var(--border)' }}>
          <button className="iconbtn" onClick={onClose}><Icon name="chevL" /></button>
          <div className="topbar-spacer" />
          <span className="mono muted" style={{ fontSize: 13 }}>{t('lane')} {product.lane}</span>
        </div>
        <div className="scrolly" style={{ flex: 1, padding: 'var(--pad)', display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div style={{ display: 'grid', placeItems: 'center', padding: 20, borderRadius: 'var(--radius-lg)', background: 'var(--bg-2)' }}>
            <div style={{ height: 420, aspectRatio: '400/800', maxWidth: '100%', borderRadius: 14, overflow: 'hidden' }}>
              <image-slot id={'detail-' + (product.pid || product.id)} shape="rect" fit="contain" src={'products/' + (product.pid || product.id) + '.png'} placeholder="400 × 800"
                style={{ display: 'block', width: '100%', height: '100%' }}></image-slot>
            </div>
          </div>
          <div>
            <div className="eyebrow">{t('lane')} {product.lane}</div>
            <h2 style={{ fontSize: 32, marginTop: 8 }}>{product.name}</h2>
          </div>
          <div className="row" style={{ gap: 12, flexWrap: 'wrap' }}>
            <div className="statchip" style={{ height: 40 }}>{lang === 'zh' ? '库存' : 'Stock'}: <b style={{ color: 'var(--text)' }}>{product.stock}</b></div>
            <div className="statchip" style={{ height: 40 }}><span className="dot" /> {lang === 'zh' ? '在售' : lang === 'es' ? 'Activo' : 'Active'}</div>
          </div>
          <div className="divider" />
          <div className="row between" style={{ alignItems: 'flex-end' }}>
            <span className="muted">{t('total')}</span>
            <div className="prices" style={{ alignItems: 'flex-end' }}>
              {product.priceOrig > product.price && <span className="price-orig" style={{ fontSize: 18 }}>{fmtPrice(product.priceOrig, cur)}</span>}
              <span className="price" style={{ fontSize: 40 }}>{fmtPrice(product.price, cur)}</span>
            </div>
          </div>
        </div>
        <div style={{ padding: 'var(--pad)', borderTop: '1px solid var(--border)' }}>
          <button className="btn primary block lg" onClick={onSelect}><Icon name="plus" size={20} /> {t('add')}</button>
        </div>
      </div>
    </div>
  );
}

/* ============================ AGE CHECK ============================ */
function AgeCheckScreen({ ctx, onComplete, onCancel, forceFail, initialStep = 1, frozen = false }) {
  const { t, lang } = ctx;
  const [step, setStep] = useS(initialStep); // 1 country, 2 idtype, 3 camera, 4 verify, 5 result
  const [country, setCountry] = useS(COUNTRIES[0]);
  const [idType, setIdType] = useS(ID_TYPES[0]);
  const [pass, setPass] = useS(true);
  const [side, setSide] = useS(0); // 0 = front, 1 = back
  const sides = idType ? idType.sides || 1 : 1;

  useE(() => {
    if (step === 4 && !frozen) {
      const id = setTimeout(() => { const ok = !forceFail; setPass(ok); setStep(5); }, 2400);
      return () => clearTimeout(id);
    }
  }, [step, forceFail]);

  // auto-advance to payment on success
  useE(() => {
    if (step === 5 && pass && !frozen) {
      const id = setTimeout(() => onComplete(), 1400);
      return () => clearTimeout(id);
    }
  }, [step, pass, frozen]);

  const stepIndex = Math.min(Math.max(step - 1, 0), 2);

  return (
    <div className="screen">
      <div className="topbar">
        <button className="iconbtn" onClick={() => step <= 1 ? onCancel() : setStep(step - 1)} disabled={step === 4 || step === 5}><Icon name="chevL" /></button>
        <div className="brand"><div className="brand-mark" style={{ width: 30, height: 30, fontSize: 16 }}>V</div></div>
        <div className="topbar-spacer" />
        {step >= 1 && step <= 4 && <StepDots total={3} current={stepIndex} />}
        <div className="topbar-spacer" />
        <button className="btn ghost" style={{ height: 44 }} onClick={onCancel} disabled={step === 4 || step === 5}>{t('cancel')}</button>
      </div>

      {step === 1 && (
        <div className="center-wrap anim-in" style={{ gap: 14 }}>
          <div className="big-icon" style={{ width: 72, height: 72, fontSize: 34 }}>🪪</div>
          <h2 style={{ fontSize: 26 }}>{t('age_title')}</h2>
          <p style={{ maxWidth: '40ch', marginBottom: 4 }}>{t('select_country')}</p>
          <div className="country-list">
            {COUNTRIES.map((c) => (
              <button key={c.code} className="country" onClick={() => { setCountry(c); setStep(2); }}>
                <span className="flag">{c.flag}</span>
                <span className="cn">{c.name}</span>
                <span className="ca">{t('legal_age')} {c.age}+</span>
              </button>
            ))}
          </div>
        </div>
      )}

      {step === 2 && (
        <div className="center-wrap anim-in" style={{ gap: 14 }}>
          <div className="row" style={{ gap: 8, color: 'var(--text-dim)' }}><span style={{ fontSize: 22 }}>{country.flag}</span><span style={{ fontWeight: 600 }}>{country.name} · {country.age}+</span></div>
          <h2 style={{ fontSize: 26 }}>{t('select_id')}</h2>
          <div className="choice-grid">
            {ID_TYPES.map((d) => (
              <button key={d.id} className="choice" onClick={() => { setIdType(d); setSide(0); setStep(3); }}>
                <span className="ci">{d.icon}</span>
                <div className="col"><span className="ct">{t(d.key)}</span><span className="cs">{d.sides === 2 ? (lang === 'zh' ? '正面 + 反面' : lang === 'es' ? 'Anverso + reverso' : 'Front + back') : (lang === 'zh' ? '仅正面' : lang === 'es' ? 'Solo anverso' : 'Front only')}</span></div>
                <span className="chev"><Icon name="chev" size={22} /></span>
              </button>
            ))}
          </div>
        </div>
      )}

      {step === 3 && (() => {
        const W = { front: { zh: '正面', es: 'Anverso', en: 'Front' }, back: { zh: '反面', es: 'Reverso', en: 'Back' } };
        const sw = (k) => W[k][lang] || W[k].en;
        const cur = side === 0 ? 'front' : 'back';
        const camLabel = lang === 'zh' ? `请将证件${sw(cur)}对准下方摄像头`
          : lang === 'es' ? `Acerque el ${sw(cur).toLowerCase()} de su documento a la cámara`
          : `Hold the ${sw(cur).toLowerCase()} of your ID up to the camera below`;
        return (
        <div className="body camera-body">
          {sides === 2 && (
            <div className="row" style={{ gap: 10, paddingTop: 14 }}>
              {['front', 'back'].map((k, i) => (
                <div key={k} className={'side-chip' + (i === side ? ' active' : '') + (i < side ? ' done' : '')}>
                  {i < side ? <Icon name="check" size={14} stroke={2.5} /> : <span className="mono">{i + 1}</span>}
                  {sw(k)}
                </div>
              ))}
            </div>
          )}
          <div className="camera">
            <div className="viewfinder">
              <div className="vbg" />
              <div className="doc">
                <image-slot id={'id-doc-' + side} shape="rounded" radius="12" placeholder={sw(cur) + ' · hold steady'}
                  style={{ display: 'block', width: '100%', height: '100%' }}></image-slot>
              </div>
              <div className="frameguide" />
              <div className="corner tl" /><div className="corner tr" /><div className="corner bl" /><div className="corner br" />
              <div className="scan" />
            </div>
          </div>
          <div className="col" style={{ alignItems: 'center', gap: 14, paddingBottom: 'var(--pad)' }}>
            <HardwareGuide active="camera" label={camLabel} />
            <div className="capture-steps">
              <span><b>1</b>{lang === 'zh' ? '对准取景框' : lang === 'es' ? 'Encuadre el documento' : 'Line up your ID'}</span>
              <span className="capture-arrow"><Icon name="arrowR" size={15} /></span>
              <span><b>2</b>{lang === 'zh' ? '点击下方按钮拍照' : lang === 'es' ? 'Pulse el botón para capturar' : 'Tap the button to capture'}</span>
            </div>
            <button className="btn primary lg capture-btn" onClick={() => { if (side < sides - 1) setSide(side + 1); else setStep(4); }}>
              <Icon name="camera" size={24} /> {lang === 'zh' ? `拍摄${sw(cur)}` : lang === 'es' ? `Capturar ${sw(cur).toLowerCase()}` : `Capture ${sw(cur).toLowerCase()}`}
            </button>
          </div>
        </div>
        );
      })()}

      {step === 4 && (
        <div className="center-wrap anim-in">
          <div className="spinner" />
          <h2 style={{ fontSize: 26, marginTop: 18, whiteSpace: 'nowrap' }}>{t('verifying')}</h2>
          <p className="mono" style={{ fontSize: 14 }}>{t('reading_ocr')}</p>
        </div>
      )}

      {step === 5 && (
        <div className="center-wrap anim-in">
          <div className={'result-icon ' + (pass ? 'ok' : 'no')}>
            <Icon name={pass ? 'check' : 'close'} size={56} stroke={2.5} />
          </div>
          <h2>{pass ? t('age_pass') : t('age_fail')}</h2>
          <p>{pass ? t('age_pass_b') : t('age_fail_b')}</p>
          {pass
            ? <div className="countback" style={{ marginTop: 8 }}><div className="spinner" style={{ width: 22, height: 22, borderWidth: 3 }} /> {t('pay_method')}…</div>
            : <div className="row" style={{ gap: 12, marginTop: 12 }}>
                <button className="btn ghost lg" onClick={onCancel}>{t('cancel')}</button>
                <button className="btn primary lg" onClick={() => { setSide(0); setStep(3); }}><Icon name="refresh" size={20} /> {t('retry')}</button>
              </div>}
        </div>
      )}
    </div>
  );
}

/* ============================ PAYMENT ============================ */
function PaymentScreen({ ctx, item, onSuccess, onCancel, forceFail, initialPhase = 'select', initialMethod = 'card', frozen = false }) {
  const { t, cur, lang } = ctx;
  const [method, setMethod] = useS(initialMethod);
  const [phase, setPhase] = useS(initialPhase); // select, qr, viva, processing, ok, fail
  const price = item ? item.price : 0;
  const vat = price - price / 1.21;

  useE(() => {
    if (frozen) return;
    let id;
    if (phase === 'viva') id = setTimeout(() => setPhase('processing'), 2400);
    if (phase === 'processing') id = setTimeout(() => setPhase(forceFail ? 'fail' : 'ok'), 2200);
    if (phase === 'ok') id = setTimeout(() => onSuccess(), 1500);
    return () => clearTimeout(id);
  }, [phase, forceFail]);

  const methods = [
    { id: 'card', icon: 'card', t: 'pay_card', s: 'pay_card_s' },
    { id: 'qr', icon: 'qr', t: 'pay_qr', s: 'pay_qr_s' },
    { id: 'other', icon: 'info', t: 'pay_other', s: 'pay_other_s' },
  ];

  const startPay = () => {
    if (method === 'qr') setPhase('qr');
    else if (method === 'card') setPhase('viva');
    else setPhase('viva');
  };

  return (
    <div className="screen">
      <div className="topbar">
        <button className="iconbtn" onClick={() => phase === 'select' ? onCancel() : setPhase('select')} disabled={phase === 'processing' || phase === 'ok'}><Icon name="chevL" /></button>
        <div className="brand"><div className="brand-mark" style={{ width: 30, height: 30, fontSize: 16 }}>V</div><div className="brand-name" style={{ fontSize: 17 }}>{t('your_order')}</div></div>
        <div className="topbar-spacer" />
        <button className="btn ghost" style={{ height: 44 }} onClick={onCancel} disabled={phase === 'processing' || phase === 'ok'}>{t('cancel')}</button>
      </div>

      <div className="pay-wrap">
        {/* order summary always visible */}
        <div className="pay-summary">
          <div className="card order-card">
            <div className="eyebrow">{t('your_order')}</div>
            <div className="order-line">
              <div className="thumb"><img src={'products/' + (item?.pid || item?.id) + '.png'} alt="" /></div>
              <div className="col" style={{ flex: 1 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 19 }}>{item?.name}</span>
                <span className="mono muted" style={{ fontSize: 12, marginTop: 4 }}>{t('lane')} {item?.lane}</span>
              </div>
              <span className="price" style={{ fontSize: 22 }}>{fmtPrice(price, cur)}</span>
            </div>
            <div className="order-tot">
              <div className="tl"><span>{t('subtotal')}</span><span>{fmtPrice(price - vat, cur)}</span></div>
              <div className="tl"><span>{t('vat')}</span><span>{fmtPrice(vat, cur)}</span></div>
              <div className="tl grand row between" style={{ alignItems: 'flex-end' }}>
                <span className="lbl" style={{ fontSize: 16, color: 'var(--text)', fontWeight: 600 }}>{t('total')}</span>
                <span className="price">{fmtPrice(price, cur)}</span>
              </div>
            </div>
          </div>
        </div>

        {/* right pane changes by phase */}
        {phase === 'select' && (
          <div className="pay-methods">
            <div className="eyebrow" style={{ marginBottom: 4 }}>{t('pay_method')}</div>
            {methods.map((m) => (
              <button key={m.id} className={'method ' + (method === m.id ? 'sel' : '')} onClick={() => setMethod(m.id)}>
                <span className="mi"><Icon name={m.icon} size={22} /></span>
                <div className="col"><span className="mt">{t(m.t)}</span><span className="ms">{t(m.s)}</span></div>
                <span className="radio" />
              </button>
            ))}
            <button className="btn primary block lg" style={{ marginTop: 'auto' }} onClick={startPay}>{t('pay_now')} · {fmtPrice(price, cur)}</button>
          </div>
        )}

        {phase === 'qr' && (
          <div className="pay-methods qr-stage card" style={{ padding: 'var(--pad)' }}>
            <div className="qr-box"><QR cells={29} /></div>
            <div className="col" style={{ alignItems: 'center', gap: 6 }}>
              <h3 style={{ fontSize: 22 }}>{t('scan_qr')}</h3>
              <p className="muted" style={{ fontSize: 14 }}>{t('awaiting')}…</p>
            </div>
            <button className="btn primary" onClick={() => setPhase('processing')}>{t('continue')}</button>
          </div>
        )}

        {phase === 'viva' && (
          <div className="pay-methods viva-stage card" style={{ padding: 'var(--pad)' }}>
            <div className="viva-card">
              <div className="viva-logo"><span className="vmark">V</span> Viva.com</div>
              <HardwareGuide active="card" label={lang === 'zh' ? '请在下方读卡区刷卡 / 感应' : lang === 'es' ? 'Acerque su tarjeta al lector de abajo' : 'Tap your card on the reader below'} />
              <p className="muted" style={{ fontSize: 14 }}>{t('viva_open')}</p>
            </div>
          </div>
        )}

        {phase === 'processing' && (
          <div className="pay-methods qr-stage card" style={{ padding: 'var(--pad)' }}>
            <div className="spinner" />
            <h3 style={{ fontSize: 22 }}>{t('processing')}</h3>
          </div>
        )}

        {phase === 'ok' && (
          <div className="pay-methods qr-stage card" style={{ padding: 'var(--pad)' }}>
            <div className="result-icon ok"><Icon name="check" size={56} stroke={2.5} /></div>
            <h3 style={{ fontSize: 24 }}>{t('pay_ok')}</h3>
          </div>
        )}

        {phase === 'fail' && (
          <div className="pay-methods qr-stage card" style={{ padding: 'var(--pad)' }}>
            <div className="result-icon no"><Icon name="close" size={56} stroke={2.5} /></div>
            <h3 style={{ fontSize: 22 }}>{t('pay_fail')}</h3>
            <p className="muted" style={{ fontSize: 14, textAlign: 'center' }}>{t('pay_fail_b')}</p>
            <button className="btn primary block" onClick={() => setPhase('select')}><Icon name="refresh" size={18} /> {t('retry')}</button>
          </div>
        )}
      </div>
    </div>
  );
}

/* ============================ PICKUP / DISPENSE ============================ */
function PickupScreen({ ctx, item, lanes, cols, onDone, forceFail, initialPhase = 'dispensing', frozen = false }) {
  const { t, lang } = ctx;
  const [phase, setPhase] = useS(initialPhase); // dispensing, collect, fail
  const [count, setCount] = useS(5);
  const grid = lanes || PRODUCTS;
  const ncols = cols || 5;
  const activeLane = item ? item.lane : (grid[0] && grid[0].lane);

  useE(() => {
    if (frozen) return;
    const id = setTimeout(() => setPhase(forceFail ? 'fail' : 'collect'), 2600);
    return () => clearTimeout(id);
  }, [forceFail]);

  useE(() => {
    if (frozen) return;
    if (phase === 'collect' || phase === 'fail') {
      if (count <= 0) { onDone(); return; }
      const id = setTimeout(() => setCount((c) => c - 1), 1000);
      return () => clearTimeout(id);
    }
  }, [phase, count]);

  return (
    <div className="screen">
      <div className="pickup">
        {phase === 'dispensing' && (
          <>
            <div className="dispense-vis">
              <div className="coil spin" />
              <div className="coil" style={{ inset: 24, animationDirection: 'reverse', borderStyle: 'dotted' }} />
              <span style={{ fontSize: 56 }}>📦</span>
            </div>
            <h2 style={{ fontSize: 32 }}>{t('dispensing')}</h2>
            <p className="muted">{t('dispensing_b')}</p>
            <div className="lane-grid-vis" style={{ gridTemplateColumns: `repeat(${ncols}, 1fr)` }}>
              {grid.map((p) => (
                <div key={p.id} className={'lane-cell-vis' + (p.lane === activeLane ? ' on' : '') + (p.stock === 0 ? ' empty' : '')}>
                  {p.lane}
                </div>
              ))}
            </div>
            <span className="mono muted" style={{ fontSize: 13 }}>{t('lane')} {activeLane}</span>
          </>
        )}

        {phase === 'collect' && (
          <>
            <div className="result-icon ok anim-in"><Icon name="check" size={56} stroke={2.5} /></div>
            <h2 style={{ fontSize: 34 }}>{t('collect')}</h2>
            <HardwareGuide active="push" opening label={lang === 'zh' ? '请推开下方取货口取货' : lang === 'es' ? 'Empuje la tapa de abajo para recoger' : 'Push the flap below to collect'} />
            <div className="countback">{t('return_home')} <b>{count}s</b></div>
          </>
        )}

        {phase === 'fail' && (
          <>
            <div className="result-icon no anim-in"><Icon name="close" size={56} stroke={2.5} /></div>
            <h2 style={{ fontSize: 30 }}>{t('dispense_fail')}</h2>
            <p className="muted">{t('dispense_fail_b')}</p>
            <div className="countback">{t('return_home')} <b>{count}s</b></div>
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { StandbyScreen, CatalogScreen, ProductSheet, AgeCheckScreen, PaymentScreen, PickupScreen });