/* ============================================================
   VLF 2026 · SHOP — Cửa hàng lưu niệm
   Lưới → chi tiết món → giỏ → nhận hàng → thanh toán (QR/thẻ) → kết quả
   Xuất: Shop, ProductDetail, ShopCheckout
   ============================================================ */
window.VLF.shop = [
{ id: 'cap', vi: 'Mũ VLF 2026 chính thức', en: 'Official VLF 2026 cap', price: 450000, cat: 'Mũ', catEn: 'Caps', tint: '#6B3486', sizes: null,
  blurb: 'Mũ lưỡi trai thêu logo VLF 2026, khoá sau điều chỉnh.', blurbEn: 'Embroidered VLF 2026 cap with adjustable strap.',
  detail: ['Vải cotton twill cao cấp', 'Thêu nổi logo chính thức', 'Một size · khoá kim loại'], detailEn: ['Premium cotton twill', 'Raised official embroidery', 'One size · metal buckle'] },
{ id: 'polo', vi: 'Áo polo huyền thoại', en: 'Legends polo shirt', price: 890000, cat: 'Áo', catEn: 'Apparel', tint: '#522367', sizes: ['S', 'M', 'L', 'XL'],
  blurb: 'Áo polo thi đấu vải thoáng khí, logo VLF bên ngực.', blurbEn: 'Breathable performance polo with chest VLF crest.',
  detail: ['Vải poly co giãn, hút ẩm', 'Logo thêu ngực trái', 'Form regular · unisex'], detailEn: ['Moisture-wicking stretch poly', 'Left-chest embroidery', 'Regular fit · unisex'] },
{ id: 'balls', vi: 'Bóng golf giới hạn · hộp 3', en: 'Limited golf balls · box of 3', price: 320000, cat: 'Bóng', catEn: 'Balls', tint: '#3E8E7E', sizes: null,
  blurb: 'Bộ 3 bóng phiên bản giới hạn in dấu VLF 2026.', blurbEn: 'Set of 3 limited-edition balls stamped VLF 2026.',
  detail: ['3 lớp · lõi mềm', 'In dấu VLF 2026', 'Hộp quà tặng'], detailEn: ['3-piece · soft core', 'VLF 2026 stamp', 'Gift box'] },
{ id: 'jacket', vi: 'Áo khoác gió VLF', en: 'VLF windbreaker', price: 1290000, cat: 'Áo', catEn: 'Apparel', tint: '#31153D', sizes: ['M', 'L', 'XL'],
  blurb: 'Áo khoác gió chống nước nhẹ, logo VLF sau lưng.', blurbEn: 'Lightweight water-resistant windbreaker, VLF logo on back.',
  detail: ['Chống nước · cản gió', 'Khoá kéo YKK', 'Logo in sau lưng'], detailEn: ['Water-resistant · windproof', 'YKK zip', 'Back-print logo'] },
{ id: 'towel', vi: 'Khăn lưu niệm Việt – Mỹ', en: 'Việt – Mỹ commemorative towel', price: 250000, cat: 'Phụ kiện', catEn: 'Accessories', tint: '#C25B7C', sizes: null,
  blurb: 'Khăn golf cotton dày, viền thêu Việt – Mỹ.', blurbEn: 'Thick cotton golf towel with Việt – Mỹ trim.',
  detail: ['Cotton 100% thấm hút', 'Móc treo gậy', 'Thêu viền kỷ niệm'], detailEn: ['100% absorbent cotton', 'Club clip', 'Commemorative trim'] },
{ id: 'bag', vi: 'Túi đựng gậy mini', en: 'Mini club carry bag', price: 690000, cat: 'Phụ kiện', catEn: 'Accessories', tint: '#4E6CB0', sizes: null,
  blurb: 'Túi đứng mini tiện mang, logo VLF dập nổi.', blurbEn: 'Compact stand carry bag with embossed VLF logo.',
  detail: ['Khung đứng nhẹ', 'Quai đeo đệm vai', 'Logo dập nổi'], detailEn: ['Lightweight stand', 'Padded strap', 'Embossed logo'] }];

const SHOP_FMT = (n) => n.toLocaleString('vi-VN') + '₫';
const SHOP_PICKUP = { booth: 'Quầy Merchandising · VLF Village', hours: '09:00 – 18:00', contact: 'Hotline cửa hàng · 0905 026 888' };

/* ---------- CỬA HÀNG (L2) ---------- */
function Shop({ nav, cart, setCart }) {
  const t = useT();const lang = t.lang;const T = (vi, en) => lang === 'en' ? en : vi;
  const [cat, setCat] = useState('all');
  const cats = ['all', 'Áo', 'Mũ', 'Bóng', 'Phụ kiện'];
  const catLabel = { all: t('all'), 'Áo': T('Áo', 'Apparel'), 'Mũ': T('Mũ', 'Caps'), 'Bóng': T('Bóng', 'Balls'), 'Phụ kiện': T('Phụ kiện', 'Accessories') };
  const list = window.VLF.shop.filter((p) => cat === 'all' || p.cat === cat);
  const count = Object.values(cart).reduce((a, b) => a + b, 0);
  const total = window.VLF.shop.reduce((s, p) => s + (cart[p.id] || 0) * p.price, 0);
  const add = (id) => setCart((c) => ({ ...c, [id]: (c[id] || 0) + 1 }));
  const sub = (id) => setCart((c) => {const n = { ...c };if (n[id] > 1) n[id]--;else delete n[id];return n;});

  return (
    <div className="v-screen" style={{ paddingBottom: count ? 92 : 24 }}>
      <div className="v-pad">
        <div className="v-chips" style={{ marginBottom: 10 }}>
          {cats.map((c) => <div key={c} className={'v-chip' + (cat === c ? ' on' : '')} onClick={() => setCat(c)}>{catLabel[c]}</div>)}
        </div>
        <div className="v-shop-grid">
          {list.map((p) => {
            const q = cart[p.id] || 0;
            return (
              <div className="v-prod" key={p.id}>
                <div className="v-prod-img" style={{ background: 'linear-gradient(150deg,' + p.tint + ',#1F0D26)' }} onClick={() => nav('product', { id: p.id })}>
                  <span className="v-prod-cat">{lang === 'en' ? p.catEn : p.cat}</span>
                </div>
                <div className="v-prod-bd">
                  <div className="v-prod-nm" onClick={() => nav('product', { id: p.id })}>{lang === 'en' ? p.en : p.vi}</div>
                  <div className="v-prod-foot">
                    <span className="v-num v-prod-price">{SHOP_FMT(p.price)}</span>
                    {q === 0 ?
                    <button className="v-prod-add" onClick={() => add(p.id)}>+</button> :
                    <div className="v-prod-qty"><button onClick={() => sub(p.id)}>−</button><b className="v-num">{q}</b><button onClick={() => add(p.id)}>+</button></div>}
                  </div>
                </div>
              </div>);

          })}
        </div>
        <p className="v-muted" style={{ fontSize: 11.5, lineHeight: 1.55, padding: '14px 2px 0' }}>{T('Quà chính hãng VLF 2026. Giao tận nơi toàn quốc hoặc nhận trực tiếp tại quầy Merchandising ở VLF Village.', 'Official VLF 2026 merchandise. Nationwide delivery or pick up at the Merchandising booth in VLF Village.')}</p>
      </div>

      {count > 0 &&
      <div className="v-cta">
          <button className="v-btn v-btn-primary v-cartbtn" onClick={() => nav('shopcheckout')}>
            <span className="l"><span className="v-cart-badge v-num">{count}</span>{T('Xem giỏ & đặt hàng', 'View cart & order')}</span>
            <span className="v-num">{SHOP_FMT(total)}</span>
          </button>
        </div>
      }
    </div>);

}

/* ---------- CHI TIẾT MÓN (L2) ---------- */
function ProductDetail({ id, nav, cart, setCart }) {
  const t = useT();const lang = t.lang;const T = (vi, en) => lang === 'en' ? en : vi;
  const p = window.VLF.shop.find((x) => x.id === id) || window.VLF.shop[0];
  const [size, setSize] = useState(p.sizes ? p.sizes[1] || p.sizes[0] : null);
  const [qty, setQty] = useState(1);
  const add = () => {setCart((c) => ({ ...c, [id]: (c[id] || 0) + qty }));nav('back');};

  return (
    <div className="v-screen" style={{ display: 'flex', flexDirection: 'column', minHeight: '100%' }}>
      <div className="v-prod-hero" style={{ background: 'linear-gradient(150deg,' + p.tint + ',#1F0D26)' }}>
        <span className="v-prod-cat" style={{ position: 'static' }}>{lang === 'en' ? p.catEn : p.cat}</span>
      </div>
      <div className="v-pad" style={{ flex: 1 }}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 800, margin: '4px 0 4px', lineHeight: 1.2 }}>{lang === 'en' ? p.en : p.vi}</h2>
        <div className="v-num" style={{ fontSize: 20, fontWeight: 800, color: 'var(--vlf-purple-700)' }}>{SHOP_FMT(p.price)}</div>
        <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--vlf-ink-700)', margin: '12px 0 0' }}>{window.VLF.L(lang, p, 'blurb')}</p>

        <div className="v-sect"><h3>{T('Chi tiết sản phẩm', 'Product details')}</h3></div>
        <div className="v-card" style={{ padding: '6px 14px' }}>
          {window.VLF.L(lang, p, 'detail').map((d, i) =>
          <div className="v-perk" key={i} style={{ padding: '8px 0' }}><Icon name="check" size={16} sw={2.4} />{d}</div>
          )}
        </div>

        {p.sizes &&
        <>
            <div className="v-sect"><h3>{T('Chọn size', 'Select size')}</h3></div>
            <div style={{ display: 'flex', gap: 9 }}>
              {p.sizes.map((s) =>
            <button key={s} className={'v-size' + (size === s ? ' on' : '')} onClick={() => setSize(s)}>{s}</button>
            )}
            </div>
          </>
        }

        <div className="v-sect"><h3>{T('Số lượng', 'Quantity')}</h3></div>
        <div className="v-step"><button onClick={() => setQty((q) => Math.max(1, q - 1))}>−</button><b className="v-num">{qty}</b><button onClick={() => setQty((q) => q + 1)}>+</button></div>
      </div>

      <div className="v-cta">
        <button className="v-btn v-btn-primary v-cartbtn" onClick={add}>
          <span className="l">{T('Thêm vào giỏ', 'Add to cart')}{p.sizes ? ' · ' + size : ''}</span>
          <span className="v-num">{SHOP_FMT(p.price * qty)}</span>
        </button>
      </div>
    </div>);

}

/* ---------- ĐẶT HÀNG (L3 · stepper) ---------- */
function ShopCheckout({ nav, cart, setCart, persona, addOrder, backRef }) {
  const t = useT();const lang = t.lang;const T = (vi, en) => lang === 'en' ? en : vi;
  const me = window.VLF.personas[persona] ? window.VLF.personas[persona].me : { name: 'Khách VLF' };
  const lines = window.VLF.shop.filter((p) => cart[p.id]).map((p) => ({ ...p, qty: cart[p.id] }));
  const total = lines.reduce((s, p) => s + p.qty * p.price, 0);
  const [deliv, setDeliv] = useState('pickup');
  const [addr, setAddr] = useState({ name: me.name || '', phone: '', detail: '' });
  const [method, setMethod] = useState('qr');
  const [step, setStep] = useState('form'); // form · pay · result
  /* header back pop step: pay → form → thoát */
  React.useEffect(() => {
    if (!backRef) return;
    backRef.current = () => { if (step === 'pay') { setStep('form'); return true; } return false; };
    return () => { backRef.current = null; };
  }, [step]);
  const [result, setResult] = useState(null); // 'ok' | 'fail'
  // card
  const [card, setCard] = useState('');const [exp, setExp] = useState('');const [cvc, setCvc] = useState('');
  const ship = deliv === 'ship' ? 30000 : 0;
  const grand = total + ship;
  const ref = React.useMemo(() => 'SHOP' + Math.floor(10000 + Math.random() * 89999), []);
  const addrOk = deliv === 'pickup' || addr.name.trim() && addr.phone.trim() && addr.detail.trim();
  const cardDigits = card.replace(/\s/g, '');
  const cardOk = cardDigits.length >= 12 && exp.length >= 4 && cvc.length >= 3;
  function onCard(v) {const d = v.replace(/\D/g, '').slice(0, 16);setCard(d.replace(/(.{4})/g, '$1 ').trim());}
  function onExp(v) {const d = v.replace(/\D/g, '').slice(0, 4);setExp(d.length > 2 ? d.slice(0, 2) + '/' + d.slice(2) : d);}

  function commit(ok) {
    if (ok) {
      addOrder({
        ref, items: lines.map((l) => ({ name: lang === 'en' ? l.en : l.vi, qty: l.qty, price: l.price, tint: l.tint })),
        total: grand, deliv, method, addr: deliv === 'ship' ? addr : null,
        date: '19/06/2026', status: deliv === 'pickup' ? 'ready' : 'shipping'
      });
    }
    setResult(ok ? 'ok' : 'fail');setStep('result');
  }

  /* ----- KẾT QUẢ ----- */
  if (step === 'result') {
    if (result === 'fail') {
      return (
        <div className="v-screen" style={{ display: 'flex', flexDirection: 'column', minHeight: '100%', paddingBottom: 96 }}>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '0 32px' }}>
            <div className="v-success-ic" style={{ background: 'rgba(192,57,43,.12)', color: 'var(--vlf-under)' }}><Icon name="info" size={42} sw={2} /></div>
            <h3 style={{ fontSize: 23, fontWeight: 800, margin: '16px 0 8px' }}>{T('Thanh toán thất bại', 'Payment failed')}</h3>
            <p className="v-muted" style={{ fontSize: 14, lineHeight: 1.55, maxWidth: '32ch' }}>{T('Giao dịch bị từ chối hoặc gián đoạn. Đơn hàng chưa được tạo — vui lòng thử lại hoặc đổi phương thức.', 'The transaction was declined or interrupted. No order was created — please try again or change method.')}</p>
          </div>
          <div className="v-cta"><button className="v-btn v-btn-primary" onClick={() => {setResult(null);setStep('pay');}}>{T('Thử lại', 'Try again')}</button></div>
        </div>);

    }
    return <SuccessScreen badge={deliv === 'pickup' ? T('Nhận tại sự kiện', 'Pickup') : T('Giao tận nơi', 'Delivery')}
    title={T('Đặt hàng thành công', 'Order confirmed')}
    sub={T('Mã đơn ', 'Order ') + ref + '. ' + (deliv === 'pickup' ?
    T('Xuất trình mã QR đơn hàng tại ' + SHOP_PICKUP.booth + ' để nhận. Đơn được lưu trong “Đơn hàng của tôi”.', 'Show your order QR at ' + SHOP_PICKUP.booth + ' to collect. Saved under “My orders”.') :
    T('Đơn sẽ giao trong 3–5 ngày, mã vận đơn gửi qua Zalo. Đơn được lưu trong “Đơn hàng của tôi”.', 'Ships in 3–5 days, tracking via Zalo. Saved under “My orders”.'))}
    cta={T('Xem đơn hàng của tôi', 'View my orders')} onCta={() => {setCart({});nav('orders');}} />;
  }

  /* ----- THANH TOÁN ----- */
  if (step === 'pay') {
    return (
      <div className="v-screen" style={{ display: 'flex', flexDirection: 'column', minHeight: '100%' }}>
        <div className="v-pad" style={{ flex: 1 }}>
          {method === 'qr' ?
          <>
              <div className="v-card v-pay-qr">
                <div className="v-pill v-pill-purple" style={{ marginBottom: 14 }}>VietQR</div>
                <QR seed={'PAY-' + ref + '-' + grand} size={176} />
                <div className="v-pay-amount v-num" style={{ marginTop: 14 }}>{SHOP_FMT(grand)}</div>
                <div className="v-muted" style={{ fontSize: 12, marginTop: 4 }}>{T('Quét bằng app ngân hàng hoặc Zalo Pay', 'Scan with your banking app or Zalo Pay')}</div>
              </div>
              <div className="v-card" style={{ padding: '4px 16px', marginTop: 12 }}>
                <div className="v-pay-row"><span>{T('Ngân hàng', 'Bank')}</span><b>BIDV</b></div>
                <div className="v-pay-row"><span>{T('Đơn vị hưởng', 'Beneficiary')}</span><b>CT CP Sự kiện VLF</b></div>
                <div className="v-pay-row" style={{ borderBottom: 'none' }}><span>{T('Nội dung', 'Reference')}</span><b className="v-mono">{ref}</b></div>
              </div>
              <div className="v-pay-wait"><span className="v-spin" />{T('Đang chờ thanh toán · tự động xác nhận', 'Awaiting payment · auto-confirm')}</div>
            </> :

          <>
              <div className="v-3p"><Icon name="shield" size={16} sw={1.9} />{T('Cổng thanh toán quốc tế bảo mật', 'Secure international gateway')}</div>
              <div className="v-pay-brands"><span>VISA</span><span>Mastercard</span><span>Amex</span><span>JCB</span></div>
              <div className="v-field"><label>{T('Số thẻ', 'Card number')}</label><input value={card} onChange={(e) => onCard(e.target.value)} inputMode="numeric" placeholder="0000 0000 0000 0000" /></div>
              <div className="v-2col">
                <div className="v-field"><label>{T('Hết hạn', 'Expiry')}</label><input value={exp} onChange={(e) => onExp(e.target.value)} inputMode="numeric" placeholder="MM/YY" /></div>
                <div className="v-field"><label>CVC</label><input value={cvc} onChange={(e) => setCvc(e.target.value.replace(/\D/g, '').slice(0, 4))} inputMode="numeric" placeholder="•••" /></div>
              </div>
              <p className="v-hint">{T('Demo: CVC “000” để mô phỏng giao dịch thất bại; số khác → thành công.', 'Demo: use CVC “000” to simulate a failed transaction; any other → success.')}</p>
            </>
          }
        </div>
        <div className="v-cta">
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10, padding: '0 2px' }}>
            <span className="v-muted" style={{ fontSize: 13 }}>{T('Tổng thanh toán', 'Total')}</span>
            <span className="v-num" style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 800, color: 'var(--vlf-purple-700)' }}>{SHOP_FMT(grand)}</span>
          </div>
          {method === 'qr' ?
          <button className="v-btn v-btn-primary" onClick={() => commit(true)}>{T('Tôi đã thanh toán', 'I have paid')}</button> :
          <button className="v-btn v-btn-primary" disabled={!cardOk} onClick={() => commit(cvc !== '000')}>{T('Thanh toán', 'Pay')} {SHOP_FMT(grand)}</button>}
        </div>
      </div>);

  }

  /* ----- FORM ----- */
  return (
    <div className="v-screen" style={{ display: 'flex', flexDirection: 'column', minHeight: '100%' }}>
      <div className="v-pad" style={{ flex: 1 }}>
        <div className="v-sect" style={{ marginTop: 6 }}><h3>{T('Đơn hàng', 'Your order')}</h3></div>
        <div className="v-card" style={{ padding: '2px 14px' }}>
          {lines.map((p) =>
          <div className="v-row" key={p.id} style={{ cursor: 'default', gap: 12 }}>
              <div style={{ width: 40, height: 40, borderRadius: 10, flex: '0 0 auto', background: 'linear-gradient(150deg,' + p.tint + ',#1F0D26)' }} />
              <div style={{ flex: 1, minWidth: 0 }}><div className="t" style={{ fontSize: 13.5 }}>{lang === 'en' ? p.en : p.vi}</div><div className="s">{SHOP_FMT(p.price)} × {p.qty}</div></div>
              <span className="v-num" style={{ fontWeight: 700, fontSize: 13.5 }}>{SHOP_FMT(p.price * p.qty)}</span>
            </div>
          )}
        </div>

        <div className="v-me-group" style={{ marginTop: 18 }}><div className="lbl">{T('Nhận hàng', 'Delivery')}</div>
          <div className={'v-opt' + (deliv === 'pickup' ? ' on' : '')} onClick={() => setDeliv('pickup')}>
            <div className="ic"><Icon name="pin" size={22} sw={1.6} /></div>
            <div style={{ flex: 1 }}><div className="t">{T('Nhận tại sự kiện', 'Pick up at event')}</div><div className="s">{T('Miễn phí · tại VLF Village', 'Free · at VLF Village')}</div></div>
            <div className="rad">{deliv === 'pickup' && <Icon name="check" size={14} sw={3} />}</div>
          </div>
          <div className={'v-opt' + (deliv === 'ship' ? ' on' : '')} onClick={() => setDeliv('ship')}>
            <div className="ic"><Icon name="arrowR" size={22} sw={1.6} /></div>
            <div style={{ flex: 1 }}><div className="t">{T('Giao tận nơi', 'Ship to address')}</div><div className="s">{T('Toàn quốc · 3–5 ngày · phí 30.000₫', 'Nationwide · 3–5 days · 30,000₫')}</div></div>
            <div className="rad">{deliv === 'ship' && <Icon name="check" size={14} sw={3} />}</div>
          </div>
        </div>

        {deliv === 'pickup' ?
        <div className="v-card" style={{ padding: 14, marginTop: 2 }}>
            <div className="v-pickup-row"><Icon name="pin" size={17} sw={1.8} style={{ color: 'var(--vlf-purple-700)' }} /><div><div className="t" style={{ fontSize: 13.5, fontWeight: 600 }}>{SHOP_PICKUP.booth}</div><div className="s">{T('Giờ nhận', 'Pickup hours')}: {SHOP_PICKUP.hours}</div></div></div>
            <div className="v-pickup-row"><Icon name="bell" size={17} sw={1.8} style={{ color: 'var(--vlf-purple-700)' }} /><div><div className="t" style={{ fontSize: 13.5, fontWeight: 600 }}>{SHOP_PICKUP.contact}</div><div className="s">{T('Xuất trình QR đơn hàng · nhân viên xác nhận đã nhận', 'Show order QR · staff confirms collection')}</div></div></div>
          </div> :

        <div className="v-me-group" style={{ marginTop: 2 }}>
            <div className="v-field"><label>{T('Họ và tên người nhận', 'Recipient name')}</label><input value={addr.name} onChange={(e) => setAddr({ ...addr, name: e.target.value })} placeholder={T('Nhập họ tên', 'Full name')} /></div>
            <div className="v-field"><label>{T('Số điện thoại', 'Phone')}</label><input value={addr.phone} onChange={(e) => setAddr({ ...addr, phone: e.target.value })} inputMode="tel" placeholder="09xx xxx xxx" /></div>
            <div className="v-field"><label>{T('Địa chỉ giao hàng', 'Delivery address')}</label><input value={addr.detail} onChange={(e) => setAddr({ ...addr, detail: e.target.value })} placeholder={T('Số nhà, đường, phường/xã, quận/huyện, tỉnh/thành', 'Street, ward, district, province/city')} /></div>
          </div>
        }

        <div className="v-me-group"><div className="lbl">{T('Phương thức thanh toán', 'Payment method')}</div>
          <Segmented value={method} onChange={setMethod} items={[{ id: 'qr', label: T('QR · Chuyển khoản', 'QR · transfer') }, { id: 'card', label: T('Thẻ quốc tế', 'Card') }]} />
        </div>
      </div>

      <div className="v-cta">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4, fontSize: 12.5, color: 'var(--vlf-ink-500)', padding: '0 2px' }}>
          <span>{T('Tạm tính · phí ship', 'Subtotal · shipping')}</span><span className="v-num">{SHOP_FMT(total)} · {ship ? SHOP_FMT(ship) : T('miễn phí', 'free')}</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10, padding: '0 2px' }}>
          <span className="v-muted" style={{ fontSize: 13 }}>{T('Tổng thanh toán', 'Total')}</span>
          <span className="v-num" style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 800, color: 'var(--vlf-purple-700)' }}>{SHOP_FMT(grand)}</span>
        </div>
        <button className="v-btn v-btn-primary" disabled={!addrOk} onClick={() => setStep('pay')}>{T('Tiếp tục thanh toán', 'Continue to payment')}</button>
      </div>
    </div>);

}

/* ---------- ĐƠN HÀNG CỦA TÔI (L2) ---------- */
function Orders({ nav, orders }) {
  const t = useT();const lang = t.lang;const T = (vi, en) => lang === 'en' ? en : vi;
  if (!orders.length) {
    return (
      <div className="v-screen" style={{ paddingBottom: 24 }}>
        <div className="v-empty" style={{ paddingTop: 56 }}>
          <div className="ic"><Icon name="ticket" size={28} sw={1.6} /></div>
          <div className="t">{T('Chưa có đơn hàng', 'No orders yet')}</div>
          <div className="s">{T('Đặt quà lưu niệm tại cửa hàng VLF Village.', 'Order souvenirs from the VLF Village store.')}</div>
        </div>
        <div className="v-pad"><button className="v-btn v-btn-primary" onClick={() => nav('shop')}>{T('Đến cửa hàng', 'Go to store')}</button></div>
      </div>);

  }
  const statusChip = { ready: { c: '#3E8E7E', bg: 'rgba(62,142,126,.14)', vi: 'Sẵn sàng nhận', en: 'Ready for pickup' }, shipping: { c: 'var(--vlf-gold-700)', bg: 'rgba(201,162,75,.16)', vi: 'Đang giao', en: 'Shipping' } };
  return (
    <div className="v-screen" style={{ paddingBottom: 24 }}>
      <div className="v-pad" style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
        {orders.map((o, i) => {
          const sc = statusChip[o.status] || statusChip.ready;
          return (
            <div className="v-card" key={i} style={{ overflow: 'hidden' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '13px 15px', borderBottom: '1px solid var(--vlf-line)' }}>
                <div><div className="v-mono" style={{ fontSize: 13, fontWeight: 700 }}>{o.ref}</div><div className="v-muted" style={{ fontSize: 11.5, marginTop: 2 }}>{o.date} · {o.deliv === 'pickup' ? T('Nhận tại sự kiện', 'Pickup') : T('Giao tận nơi', 'Delivery')}</div></div>
                <span className="v-tag" style={{ color: sc.c, background: sc.bg }}>{lang === 'en' ? sc.en : sc.vi}</span>
              </div>
              <div style={{ padding: '4px 15px' }}>
                {o.items.map((it, j) =>
                <div key={j} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '9px 0' }}>
                    <div style={{ width: 34, height: 34, borderRadius: 9, flex: '0 0 auto', background: 'linear-gradient(150deg,' + (it.tint || '#6B3486') + ',#1F0D26)' }} />
                    <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontSize: 13, fontWeight: 500 }}>{it.name}</div><div className="v-muted" style={{ fontSize: 11.5 }}>{SHOP_FMT(it.price)} × {it.qty}</div></div>
                  </div>
                )}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '11px 15px', borderTop: '1px solid var(--vlf-line)' }}>
                <span className="v-muted" style={{ fontSize: 12 }}>{o.deliv === 'pickup' ? SHOP_PICKUP.booth : o.addr ? o.addr.detail : ''}</span>
                <span className="v-num" style={{ fontWeight: 800, color: 'var(--vlf-purple-700)' }}>{SHOP_FMT(o.total)}</span>
              </div>
            </div>);

        })}
      </div>
    </div>);

}

Object.assign(window, { Shop, ProductDetail, ShopCheckout, Orders });