/* ============================================================
   VLF 2026 · TICKETS — Vé QR/Wallet · Mua vé · Kích hoạt HCO
   props: nav, tickets[], addTicket(t), persona
   ============================================================ */

/* ---------- VÉ CỦA TÔI (L1 tab) ---------- */
function MyTickets({ nav, tickets, persona, orders, cart }) {
  const t = useT();const lang = t.lang;
  const T = (vi, en) => lang === 'en' ? en : vi;
  const ordersCount = orders && orders.length || 0;
  const cartCount = cart ? Object.values(cart).reduce((a, b) => a + b, 0) : 0;

  const StoreCard =
  <div className="v-store-entry" onClick={() => nav('shop')}>
      <div className="v-store-row">
        <div className="ic"><Icon name="village" size={20} sw={1.8} /></div>
        <div className="tx"><div className="t">{T('Cửa hàng lưu niệm VLF', 'VLF official store')}</div><div className="s">{T('Áo · mũ · bóng giới hạn · phụ kiện', 'Apparel · caps · limited balls · gear')}</div></div>
        {cartCount > 0 && <span className="v-pill v-pill-gold" style={{ marginRight: 4 }}>{cartCount}</span>}
        <Icon name="chev" size={20} className="chev" />
      </div>
      <div className="v-store-prev">
        {window.VLF.shop.slice(0, 3).map((p) =>
      <div className="cell" key={p.id} style={{ background: 'linear-gradient(150deg,' + p.tint + ',#1F0D26)' }} />
      )}
      </div>
    </div>;


  const OrdersRow =
  <div className="v-mt-buy" style={{ marginTop: 11 }} onClick={() => nav('orders')}>
      <div className="ic" style={{ background: 'var(--vlf-ink-700)' }}><Icon name="wallet" size={20} sw={1.7} /></div>
      <div className="tx">
        <div className="t">{T('Đơn hàng của tôi', 'My orders')}</div>
        <div className="s">{ordersCount > 0 ? ordersCount + T(' đơn · xem trạng thái nhận/giao', ' order(s) · track pickup/delivery') : T('Chưa có đơn quà lưu niệm', 'No souvenir orders yet')}</div>
      </div>
      {ordersCount > 0 && <span className="v-pill v-pill-purple" style={{ marginRight: 4 }}>{ordersCount}</span>}
      <Icon name="chev" size={20} className="chev" />
    </div>;


  if (!tickets.length) {
    return (
      <div className="v-screen" style={{ paddingBottom: 'calc(60px + var(--zalo-safe-bottom))' }}>
        <div className="v-empty" style={{ paddingTop: 48 }}>
          <div className="ic"><Icon name="ticket" size={28} sw={1.6} /></div>
          <div className="t">{T('Bạn chưa có vé', 'No tickets yet')}</div>
          <div className="s">{T('Mua vé khán giả hoặc kích hoạt vé mời từ nhà tài trợ để nhận vé QR ngay.', 'Buy a spectator ticket or activate a sponsor invite to get your QR ticket.')}</div>
        </div>
        <div className="v-pad" style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
          <button className="v-btn v-btn-primary" onClick={() => nav('buy')}>{t('buy')}</button>
          <button className="v-btn v-btn-ghost" onClick={() => nav('activate')}>{t('activate')}</button>
        </div>
        <div className="v-pad">
          <div className="v-sect"><h3>{T('Cửa hàng & đơn hàng', 'Store & orders')}</h3></div>
          {StoreCard}
          {OrdersRow}
        </div>
      </div>);

  }
  return (
    <div className="v-screen" style={{ paddingBottom: 'calc(60px + var(--zalo-safe-bottom))' }}>
      <div className="v-pad">
        {tickets.map((tk, i) => <TicketQR key={i} tk={tk} nav={nav} />)}

        <div className="v-sect"><h3>{T('Mua thêm · Tặng vé', 'Buy more · Gift')}</h3></div>
        <div className="v-mt-buy" onClick={() => nav('buy')}>
          <div className="ic"><Icon name="ticket" size={20} sw={1.8} /></div>
          <div className="tx">
            <div className="t">{T('Mua thêm hoặc tặng vé', 'Buy more or gift tickets')}</div>
            <div className="s">{T('Thêm ngày · nâng cấp · dịch vụ kèm · hoặc mua tặng người thân, đối tác (gửi qua Zalo)', 'Extra days · upgrades · add-ons · or gift to family & partners via Zalo')}</div>
          </div>
          <Icon name="chev" size={20} className="chev" />
        </div>
        <button className="v-btn v-btn-ghost" style={{ marginTop: 11 }} onClick={() => nav('activate')}>{t('activate')}</button>

        <div className="v-sect"><h3>{T('Cửa hàng & đơn hàng', 'Store & orders')}</h3></div>
        {StoreCard}
        {OrdersRow}
      </div>
    </div>);

}

function TicketQR({ tk, nav }) {
  const t = useT();const lang = t.lang;
  const nm = lang === 'en' && tk.nameEn ? tk.nameEn : tk.name;
  const sp = lang === 'en' && tk.spanEn ? tk.spanEn : tk.span;
  return (
    <div className="v-qr-card" style={{ marginBottom: 16 }}>
      <div className="v-qr-head">
        <div><div className="t">{nm}</div><div className="s">{sp}</div></div>
        <span className="v-pill" style={{ background: 'rgba(201,162,75,.2)', color: 'var(--vlf-gold-300)' }}>{tk.tag}</span>
      </div>
      <div className="v-qr-body">
        <QR seed={'VLF-' + tk.tag + '-' + tk.attendee} />
        <div className="v-mono v-muted" style={{ fontSize: 11, marginTop: 12, letterSpacing: '.08em' }}>VLF26 · {tk.code || 'A7K2-9QX4'}</div>
      </div>
      <div className="v-qr-perf" />
      <div className="v-qr-meta">
        <div><div className="l">{lang === 'en' ? 'Attendee' : 'Người tham dự'}</div><div className="vv">{tk.attendee}</div></div>
        <div style={{ textAlign: 'right' }}><div className="l">{lang === 'en' ? 'Gate' : 'Cổng'}</div><div className="vv">{tk.tag === 'VIP' || tk.tag === 'Hospitality' ? lang === 'en' ? 'Fast lane' : 'Làn riêng' : lang === 'en' ? 'General' : 'Khán giả'}</div></div>
      </div>
      <div style={{ padding: '0 18px 18px' }}>
        <div className="v-wallet">
          <button><Icon name="apple" size={18} fill sw={0} />Apple Wallet</button>
          <button><Icon name="wallet" size={18} sw={1.7} />Google Wallet</button>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 18, marginTop: 14 }}>
          <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--vlf-purple-700)', display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }} onClick={() => nav('transfer')}><Icon name="share" size={16} sw={1.8} />{t('transfer')}</span>
          <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--vlf-ink-500)', display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }} onClick={() => nav('attendees')}><Icon name="user" size={16} sw={1.8} />{t('attendees')}</span>
        </div>
      </div>
    </div>);

}

/* ---------- MUA VÉ (L2) ---------- */
function BuyTickets({ nav }) {
  const t = useT();const lang = t.lang;const E = (o, k) => window.VLF.L(lang, o, k);
  const T = (vi, en) => lang === 'en' ? en : vi;
  return (
    <div className="v-screen" style={{ paddingBottom: 20 }}>
      <div className="v-pad">
        {/* giai đoạn mở bán */}
        <div className="v-card" style={{ padding: '13px 14px', marginTop: 6 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 11 }}>
            <span style={{ fontWeight: 700, fontSize: 13.5 }}>{T('Giai đoạn mở bán', 'Sales phase')}</span>
            <span className="v-pill v-pill-gold">{T('Đang mở: Early Bird', 'Now: Early Bird')}</span>
          </div>
          <div className="v-phases">
            {window.VLF.salePhases.map((p, i) =>
            <div className={'v-phase' + (p.active ? ' on' : '') + (p.done ? ' done' : '')} key={p.id}>
                <div className="dot">{p.done ? <Icon name="check" size={11} sw={3} /> : i + 1}</div>
                <div className="nm">{E(p, 'name')}</div>
                <div className="sb">{E(p, 'sub')}</div>
              </div>
            )}
          </div>
          <p className="v-muted" style={{ fontSize: 11, lineHeight: 1.5, marginTop: 11 }}>{window.VLF.salePhaseNote[lang] || window.VLF.salePhaseNote.vi}</p>
        </div>

        <div className="v-sect"><h3>{T('Vé khán giả', 'Spectator tickets')}</h3></div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
          {window.VLF.tickets.map((tk) =>
          <div className={'v-card v-tk'} key={tk.id} style={tk.featured ? { borderColor: 'var(--vlf-gold-500)', borderWidth: 2 } : null}>
              <div className="v-tk-head">
                <div style={{ flex: 1, minWidth: 0 }}>
                  {tk.featured && <span className="v-pill v-pill-gold" style={{ marginBottom: 7 }}>{T('Trọn quyền lợi', 'All perks')}</span>}
                  <div className="v-tk-name">{E(tk, 'name')}</div>
                  <div className="v-tk-zone">{E(tk, 'zone')}</div>
                </div>
                <div className="v-tk-price">
                  <b className="v-num">{tk.perDay}</b>
                  <span className="v-muted" style={{ fontSize: 11 }}>{t('perDay')}</span>
                  {tk.full && <div className="v-muted v-num" style={{ fontSize: 11.5, marginTop: 4 }}>{T('combo', 'pass')} {tk.full}</div>}
                </div>
              </div>
              <div className="v-tk-perks">
                {E(tk, 'perks').map((pk, j) => <div className="v-perk" key={j}><Icon name="check" size={16} sw={2.4} />{pk}</div>)}
              </div>
              <div className="v-tk-foot">
                <span className="v-muted" style={{ fontSize: 12 }}>{E(tk, 'note')}</span>
                <button className="v-btn v-btn-primary" style={{ width: 'auto', height: 42, padding: '0 22px', fontSize: 14 }} onClick={() => nav('checkout', { id: tk.id })}>{T('Chọn', 'Select')}</button>
              </div>
            </div>
          )}
        </div>

        {/* add-on lẻ */}
        <div className="v-sect"><h3>{T('Nâng cấp & dịch vụ thêm', 'Add-ons & services')}</h3></div>
        <div className="v-card">
          {window.VLF.addons.map((a, i) =>
          <div className="v-row" key={a.id} style={{ cursor: 'default' }}>
              <div style={{ width: 40, height: 40, borderRadius: 11, flex: '0 0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--vlf-purple-50)', color: 'var(--vlf-purple-700)' }}><Icon name={a.ic} size={19} sw={1.7} /></div>
              <div style={{ flex: 1, minWidth: 0 }}><div className="t" style={{ fontSize: 14 }}>{E(a, 'name')}</div><div className="s">{E(a, 'unit')}</div></div>
              <div style={{ textAlign: 'right', flex: '0 0 auto' }}><div className="v-num" style={{ fontWeight: 700, color: 'var(--vlf-purple-700)' }}>{a.price}</div></div>
            </div>
          )}
        </div>
        <p className="v-muted" style={{ fontSize: 11.5, lineHeight: 1.5, padding: '8px 2px 0' }}>{T('Khán giả vé phổ thông có thể mua thêm lẻ: VIP Lounge, hội nghị, Gala Dinner và các dịch vụ.', 'General-ticket holders can add VIP Lounge, forum, Gala Dinner and services à la carte.')}</p>

        {/* vé thi đấu bảng phụ */}
        <div className="v-sect"><h3>{T('Suất thi đấu bảng phụ', 'Side-division entries')}</h3></div>
        <div className="v-hint" style={{ marginBottom: 12 }}>{T('Giải chính gần như không bán suất ra ngoài. Bảng phụ (người mới) bán 60% suất, 40% giữ làm vé mời nhà tài trợ.', 'The main event is essentially not sold publicly. Side divisions (beginners) sell 60% of slots; 40% are held as sponsor invites.')}</div>
        <div className="v-card">
          {window.VLF.sideEntries.map((s, i) =>
          <div className="v-row" key={s.id} style={{ cursor: 'default', alignItems: 'flex-start' }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="t" style={{ fontSize: 14 }}>{E(s, 'name')}</div>
                <div className="s">{E(s, 'who')}</div>
                <div style={{ marginTop: 7 }}>
                  <div className="v-cap-bar"><span style={{ width: s.sell / s.cap * 100 + '%' }} /></div>
                  <div className="v-muted" style={{ fontSize: 10.5, marginTop: 4 }}>{T('Bán', 'Sell')} {s.sell} · {T('vé mời', 'invite')} {s.invite} / {s.cap} {T('suất', 'slots')}</div>
                </div>
              </div>
              <div style={{ textAlign: 'right', flex: '0 0 auto' }}><div className="v-num" style={{ fontWeight: 700, color: 'var(--vlf-purple-700)' }}>{s.price}</div></div>
            </div>
          )}
        </div>

        {/* gói đào tạo */}
        <div className="v-sect"><h3>{T('Gói đào tạo theo nhóm', 'Group training packages')}</h3></div>
        <div className="v-card">
          {window.VLF.training.map((tr, i) =>
          <div className="v-row" key={i} style={{ cursor: 'default' }}>
              <div style={{ flex: 1 }}><div className="t" style={{ fontSize: 14 }}>{tr.sessions} {T('buổi tập', 'sessions')}</div><div className="s">{E(tr, 'd')}</div></div>
              <div className="v-num" style={{ fontWeight: 700, color: 'var(--vlf-purple-700)' }}>{tr.price}</div>
            </div>
          )}
        </div>
        {/* combo & lưu trú */}
        <div className="v-sect"><h3>{T('Combo & lưu trú', 'Bundles & stay')}</h3></div>
        <div className="v-card">
          {window.VLF.combos.map((c, i) =>
          <div className="v-row" key={i} style={{ cursor: 'default' }}>
              <div style={{ flex: 1, minWidth: 0 }}><div className="t" style={{ fontSize: 14 }}>{E(c, 'name')}</div><div className="s">{E(c, 'd')}</div></div>
              <div className="v-num" style={{ fontWeight: 700, color: 'var(--vlf-purple-700)', flex: '0 0 auto', textAlign: 'right' }}>{c.price}</div>
            </div>
          )}
        </div>
        <p className="v-muted" style={{ fontSize: 11.5, lineHeight: 1.5, padding: '8px 2px 0' }}>{T('VĐV bảng phụ có thể mua thêm VIP Lounge, Gala Dinner hoặc gói Play & Stay đánh golf tại sân khác.', 'Side-division players may also add VIP Lounge, Gala Dinner or a Play & Stay package at other courses.')}</p>
      </div>
    </div>);

}

/* ---------- CHECKOUT (L3 task · stepper) ---------- */
function Checkout({ id, nav, addTicket, persona, backRef }) {
  const t = useT();const lang = t.lang;const E = (o, k) => window.VLF.L(lang, o, k);
  const tk = window.VLF.tickets.find((x) => x.id === id);
  const me = window.VLF.personas[persona].me;
  const hasFull = !!tk.full;
  const [span, setSpan] = useState(hasFull ? 'full' : 'day');
  const [step, setStep] = useState('config'); // config · method · qr · card · done
  const [method, setMethod] = useState(persona === 'golfer' || persona === 'vip' ? 'card' : 'qr');
  const amount = span === 'full' && hasFull ? tk.full : tk.perDay;
  const ref = React.useMemo(() => 'VLF' + String(id).slice(0, 3).toUpperCase() + Math.floor(1000 + Math.random() * 8999), [id]);

  // card form
  const [card, setCard] = useState('');const [exp, setExp] = useState('');const [cvc, setCvc] = useState('');const [holder, setHolder] = useState('');
  const [ownCar, setOwnCar] = useState('no');
  const cardDigits = card.replace(/\s/g, '');
  const cardOk = cardDigits.length >= 12 && exp.length >= 4 && cvc.length >= 3 && holder.trim().length > 1;
  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);}

  const T = (vi, en) => lang === 'en' ? en : vi;
  /* header back pop step: qr/card → method → config → thoát */
  React.useEffect(() => {
    if (!backRef) return;
    backRef.current = () => {
      if (step === 'qr' || step === 'card') { setStep('method'); return true; }
      if (step === 'method') { setStep('config'); return true; }
      return false;
    };
    return () => { backRef.current = null; };
  }, [step]);
  function finish() {
    addTicket({ name: E(tk, 'name'), tag: tk.tag, span: span === 'full' && hasFull ? T('Trọn giải', 'Full pass') : T('Theo ngày', 'By day'), attendee: me.name, code: ref });
    setStep('done');
  }

  if (step === 'done') {
    return <SuccessScreen badge={method === 'card' ? 'Visa · Mastercard' : T('Chuyển khoản QR', 'QR transfer')}
    title={T('Thanh toán thành công', 'Payment successful')}
    sub={T('Vé QR ', 'QR ticket ') + E(tk, 'name') + T(' đã sẵn sàng. Đã gửi qua Zalo & lưu vào Apple/Google Wallet.', ' is ready. Sent via Zalo & saved to Apple/Google Wallet.')}
    cta={T('Mở vé QR', 'Open QR ticket')} onCta={() => nav('ticket')} />;
  }

  const stepNo = step === 'config' ? 1 : 2;

  return (
    <div className="v-screen" style={{ paddingBottom: 160 }}>
      <div className="v-pad">
        <div className="v-pay-steps">
          <span className={stepNo >= 1 ? 'on' : ''}>1 · {T('Vé', 'Ticket')}</span>
          <span className="div" />
          <span className={stepNo >= 2 ? 'on' : ''}>2 · {T('Thanh toán', 'Payment')}</span>
        </div>

        {step === 'config' &&
        <>
            <div className="v-card v-tk">
              <div className="v-tk-head">
                <div><span className="v-pill v-pill-purple" style={{ marginBottom: 7 }}>{tk.tag}</span><div className="v-tk-name">{E(tk, 'name')}</div></div>
              </div>
              <div className="v-tk-perks">{E(tk, 'perks').map((pk, j) => <div className="v-perk" key={j}><Icon name="check" size={16} sw={2.4} />{pk}</div>)}</div>
            </div>
            {hasFull &&
          <>
                <div className="v-me-group" style={{ margin: '18px 0 0' }}><div className="lbl">{T('Phạm vi vé', 'Ticket scope')}</div></div>
                <Segmented value={span} onChange={setSpan} items={[{ id: 'day', label: T('Theo ngày', 'By day') + ' · ' + tk.perDay }, { id: 'full', label: T('Trọn giải', 'Full pass') + ' · ' + tk.full }]} />
              </>
          }
            <div className="v-me-group"><div className="lbl">{T('Người tham dự', 'Attendee')}</div>
              <div className="v-card" style={{ padding: '2px 14px' }}>
                <div className="v-field" style={{ margin: 0, padding: '13px 0', borderBottom: '1px solid var(--vlf-line)' }}>
                  <label>{T('Họ và tên', 'Full name')}</label><div style={{ fontSize: 15 }}>{me.name}</div>
                </div>
                <div className="v-field" style={{ margin: 0, padding: '13px 0' }}>
                  <label>{T('Kênh nhận vé', 'Delivery channel')}</label><div style={{ fontSize: 15 }}>Zalo · {me.name === 'Trần Quốc Bảo' ? '090 ••• ••12' : '098 ••• ••34'}</div>
                </div>
              </div>
            </div>
            {(tk.tag === 'VIP' || tk.tag === 'Hospitality') &&
          <div className="v-me-group"><div className="lbl">{T('Đỗ xe', 'Parking')}</div>
                <div className="v-card" style={{ padding: 14 }}>
                  <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 10 }}>{T('Quý khách đi xe riêng?', 'Will you drive your own car?')}</div>
                  <Segmented value={ownCar} onChange={setOwnCar} items={[{ id: 'yes', label: T('Có', 'Yes') }, { id: 'no', label: T('Không · đi shuttle', 'No · shuttle') }]} />
                  <p className="v-muted" style={{ fontSize: 11.5, lineHeight: 1.5, marginTop: 10 }}>{ownCar === 'yes' ? T('Sẽ bố trí làn đậu xe VIP + thẻ đậu xe gửi kèm vé QR.', 'A VIP parking lane + parking pass will be issued with your QR ticket.') : T('Xe buýt trung chuyển đón tại sảnh khách sạn, mỗi 15 phút.', 'Shuttle bus from the hotel lobby, every 15 minutes.')}</p>
                </div>
              </div>
          }
          </>
        }

        {step === 'method' &&
        <>
            <div className="v-me-group" style={{ marginTop: 8 }}><div className="lbl">{T('Chọn phương thức thanh toán', 'Choose payment method')}</div>
              <div className={'v-opt' + (method === 'qr' ? ' on' : '')} onClick={() => setMethod('qr')}>
                <div className="ic"><Icon name="qr" size={22} sw={1.6} /></div>
                <div style={{ flex: 1 }}><div className="t">{T('Quét QR · Chuyển khoản', 'QR · bank transfer')}</div><div className="s">VietQR · Zalo Pay · {T('ngân hàng nội địa', 'domestic banks')}</div></div>
                <div className="rad">{method === 'qr' && <Icon name="check" size={14} sw={3} />}</div>
              </div>
              <div className={'v-opt' + (method === 'card' ? ' on' : '')} onClick={() => setMethod('card')}>
                <div className="ic"><Icon name="wallet" size={22} sw={1.6} /></div>
                <div style={{ flex: 1 }}><div className="t">{T('Thẻ quốc tế', 'International card')}</div><div className="s">Visa · Mastercard · Amex · JCB</div></div>
                <div className="rad">{method === 'card' && <Icon name="check" size={14} sw={3} />}</div>
              </div>
            </div>
            <p className="v-hint">{method === 'qr' ?
            T('Phù hợp khách trong nước — quét bằng app ngân hàng hoặc Zalo Pay, hệ thống tự xác nhận khi nhận tiền.', 'Best for domestic guests — scan with your banking app or Zalo Pay; auto-confirmed on receipt.') :
            T('Phù hợp khách quốc tế — thanh toán an toàn bằng thẻ Visa, Mastercard, Amex hoặc JCB.', 'Best for international guests — secure payment by Visa, Mastercard, Amex or JCB.')}</p>
          </>
        }

        {step === 'qr' &&
        <>
            <div className="v-card v-pay-qr">
              <div className="v-pill v-pill-purple" style={{ marginBottom: 14 }}>VietQR</div>
              <QR seed={'PAY-' + ref + '-' + amount} size={176} />
              <div className="v-pay-amount v-num" style={{ marginTop: 14 }}>{amount}</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"><span>{T('Số tài khoản', 'Account')}</span><b className="v-num">2026 8888 8888</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>
          </>
        }

        {step === 'card' &&
        <>
            <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>
            <div className="v-field"><label>{T('Tên trên thẻ', 'Name on card')}</label><input value={holder} onChange={(e) => setHolder(e.target.value.toUpperCase())} placeholder={T('NGUYEN VAN A', 'CARDHOLDER NAME')} /></div>
            <p className="v-hint">{T('Giao dịch được mã hoá & xử lý qua cổng thanh toán quốc tế. Không lưu thông tin thẻ.', 'Encrypted and processed via an international gateway. Card details are not stored.')}</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)' }}>{amount}</span>
        </div>
        {step === 'config' && <button className="v-btn v-btn-primary" onClick={() => setStep('method')}>{T('Tiếp tục', 'Continue')}</button>}
        {step === 'method' && <button className="v-btn v-btn-primary" onClick={() => setStep(method)}>{T('Tiếp tục', 'Continue')}</button>}
        {step === 'qr' && <button className="v-btn v-btn-primary" onClick={finish}>{T('Tôi đã thanh toán', 'I have paid')}</button>}
        {step === 'card' && <button className="v-btn v-btn-primary" disabled={!cardOk} onClick={finish}>{T('Thanh toán', 'Pay')} {amount}</button>}
      </div>
    </div>);

}

/* ---------- KÍCH HOẠT VÉ MỜI HCO (L3 task) ---------- */
function Activate({ nav, addTicket, persona }) {
  const t = useT();const lang = t.lang;const T = (vi, en) => lang === 'en' ? en : vi;
  const me = window.VLF.personas[persona].me;
  const MAX = 5;
  const [code, setCode] = useState(['', '', '', '', '']);
  const [matched, setMatched] = useState(null); // {kind,sponsor,name,tag,span}
  const [step, setStep] = useState('code'); // code · form · done
  const [attempts, setAttempts] = useState(0);
  const [shake, setShake] = useState(false);
  const [name, setName] = useState(me.name);
  const [phone, setPhone] = useState('');
  const [email, setEmail] = useState('');
  const refs = [React.useRef(), React.useRef(), React.useRef(), React.useRef(), React.useRef()];

  const codeStr = code.join('').toUpperCase();
  const codeOk = !!window.VLF.inviteCodes[codeStr];
  const locked = attempts >= MAX;
  const remaining = MAX - attempts;
  const formOk = name.trim() || phone.trim() || email.trim(); // không bắt buộc cả email lẫn SĐT

  function setChar(i, v) {
    if (locked) return;
    const c = [...code];c[i] = v.slice(-1).toUpperCase();setCode(c);
    if (v && i < 4) refs[i + 1].current && refs[i + 1].current.focus();
  }
  function onKey(i, e) {
    if (e.key === 'Backspace' && !code[i] && i > 0) refs[i - 1].current && refs[i - 1].current.focus();
  }
  function confirm() {
    if (locked) return;
    if (codeOk) {setMatched(window.VLF.inviteCodes[codeStr]);setStep('form');return;}
    const n = attempts + 1;setAttempts(n);
    setShake(true);setTimeout(() => setShake(false), 460);
    setCode(['', '', '', '', '']);
    if (!(n >= MAX) && refs[0].current) refs[0].current.focus();
  }

  if (step === 'done') {
    return <SuccessScreen
      title={T('Đã gửi vé thành công', 'Ticket sent successfully')}
      sub={T('Vé mời đã được khoá slot và gửi tới ', 'Your invite slot is locked and sent to ') + (phone ? 'Zalo/WhatsApp' : T('kênh đã chọn', 'your channel')) + T('. Bạn có thể mở vé QR và lưu vào Apple/Google Wallet ngay.', '. Open the QR ticket and save it to Apple/Google Wallet.')}
      badge={T('Đã gửi', 'Sent')}
      cta={T('Mở vé QR', 'Open QR ticket')} onCta={() => nav('ticket')} />;
  }

  return (
    <div className="v-screen" style={{ paddingBottom: 96 }}>
      <div className="v-pad">
        {step === 'code' &&
        <>
            <div style={{ textAlign: 'center', padding: '14px 8px 0' }}>
              <div className="v-success-ic" style={locked ? { background: 'rgba(192,57,43,.1)', color: 'var(--vlf-under)' } : { background: 'var(--vlf-purple-50)', color: 'var(--vlf-purple-700)' }}>
                <Icon name={locked ? 'shield' : 'ticket'} size={36} sw={1.6} />
              </div>
              <h3 style={{ fontSize: 22, fontWeight: 700, margin: '16px 0 6px' }}>{locked ? T('Đã tạm khoá', 'Temporarily locked') : T('Nhập mã kích hoạt', 'Enter activation code')}</h3>
              <p className="v-muted" style={{ fontSize: 13.5, lineHeight: 1.5, maxWidth: '32ch', margin: '0 auto' }}>
                {locked ?
              T('Bạn đã nhập sai 5 lần. Vui lòng liên hệ nhà tài trợ để nhận mã mới, hoặc thử lại sau 30 phút.', 'You entered the wrong code 5 times. Please contact your sponsor for a new code, or try again in 30 minutes.') :
              T('Nhập mã 5 ký tự do nhà tài trợ cung cấp để nhận vé mời của bạn.', 'Enter the 5-character code from your sponsor to claim your invitation.')}
              </p>
            </div>

            {!locked &&
          <>
                <div className={'v-code' + (shake ? ' shake' : '') + (attempts > 0 ? ' err' : '')}>
                  {code.map((c, i) =>
              <input key={i} ref={refs[i]} value={c} inputMode="text" maxLength={1} placeholder="·"
              onChange={(e) => setChar(i, e.target.value)} onKeyDown={(e) => onKey(i, e)} />
              )}
                </div>
                {attempts > 0 ?
            <p className="v-code-msg bad">{T('Mã không đúng · còn ', 'Wrong code · ')}{remaining}{T(' lần thử', ' tries left')}</p> :
            <p className="v-muted" style={{ textAlign: 'center', fontSize: 12, lineHeight: 1.6 }}>{T('Gợi ý demo: ', 'Demo: ')}<b style={{ color: 'var(--vlf-purple-700)' }}>HCO26</b> {T('(khán giả) · ', '(spectator) · ')}<b style={{ color: 'var(--vlf-purple-700)' }}>VIP07</b> {T('(chính quyền) · ', '(government) · ')}<b style={{ color: 'var(--vlf-purple-700)' }}>PLAY8</b> {T('(thi đấu)', '(playing)')}</p>}
              </>
          }
          </>
        }

        {step === 'form' &&
        <>
            {matched &&
          <div className="v-card" style={{ padding: 14, display: 'flex', gap: 12, marginTop: 6, alignItems: 'center' }}>
                <div style={{ width: 42, height: 42, borderRadius: 12, flex: '0 0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--vlf-purple-50)', color: 'var(--vlf-purple-700)' }}><Icon name={(window.VLF.inviteKinds[matched.kind] || {}).ic || 'ticket'} size={20} sw={1.7} /></div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 700, fontSize: 14 }}>{lang === 'en' ? matched.nameEn : matched.name}</div>
                  <div className="v-muted" style={{ fontSize: 12, marginTop: 2 }}>{T('Ngân sách', 'Budget')}: {matched.sponsor}</div>
                </div>
                <span className="v-pill v-pill-gold">{matched.tag}</span>
              </div>
          }
            <div className="v-sect"><h3>{T('Thông tin nhận vé', 'Delivery details')}</h3></div>
            <div className="v-hint" style={{ marginBottom: 16 }}>{T('Chỉ cần điền tối thiểu — không bắt buộc cả email lẫn số điện thoại. Để trống phần nào bạn không quen.', 'Minimal info only — email and phone are not both required. Leave blank what you don’t use.')}</div>
            <div className="v-field"><label>{T('Họ và tên', 'Full name')}</label><input value={name} onChange={(e) => setName(e.target.value)} placeholder={T('Nhập họ và tên', 'Enter full name')} /></div>
            <div className="v-field"><label>{T('Số điện thoại (Zalo / WhatsApp)', 'Phone (Zalo / WhatsApp)')}</label><input value={phone} onChange={(e) => setPhone(e.target.value)} inputMode="tel" placeholder={t('optional')} /></div>
            <div className="v-field"><label>Email</label><input value={email} onChange={(e) => setEmail(e.target.value)} inputMode="email" placeholder={t('optional')} /></div>
          </>
        }
      </div>

      <div className="v-cta">
        {step === 'code' ?
        locked ?
        <button className="v-btn v-btn-primary" onClick={() => nav('messages')}>{T('Liên hệ hỗ trợ', 'Contact support')}</button> :
        <button className="v-btn v-btn-primary" disabled={codeStr.length < 5} onClick={confirm}>{T('Xác nhận mã', 'Verify code')}</button> :
        <button className="v-btn v-btn-primary" disabled={!formOk} onClick={() => {addTicket({ name: matched ? lang === 'en' ? matched.nameEn : matched.name : 'Vé mời', tag: matched ? matched.tag : 'VIP', span: matched ? lang === 'en' ? matched.spanEn : matched.span : 'Trọn giải', attendee: name.trim() || 'Khách mời VLF', code: codeStr + '-' + Math.floor(1000 + Math.random() * 8999) });setStep('done');}}>{T('Nhận vé', 'Claim ticket')}</button>}
      </div>
    </div>);

}

/* ---------- màn thành công dùng chung ---------- */
function SuccessScreen({ title, sub, cta, onCta, badge }) {
  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"><Icon name="check" size={42} sw={2.2} /></div>
        {badge && <span className="v-pill v-pill-purple" style={{ marginTop: 16 }}>{badge}</span>}
        <h3 className="v-serif" style={{ fontSize: 24, margin: '16px 0 8px' }}>{title}</h3>
        <p className="v-muted" style={{ fontSize: 14, lineHeight: 1.55, maxWidth: '32ch' }}>{sub}</p>
      </div>
      <div className="v-cta"><button className="v-btn v-btn-primary" onClick={onCta}>{cta}</button></div>
    </div>);

}

Object.assign(window, { MyTickets, BuyTickets, Checkout, Activate, SuccessScreen });