// Account screens: Profile info, Settings, Documents (Giấy tờ), Payment.
// Each is reachable from the main Profile screen.

const t5 = THEMES.c;

// Simple settings row with icon, label, optional sub, optional right slot.
function SettingsRow({ icon, label, sub, right, onClick, danger, last }) {
  const I = icon && Icons[icon];
  return (
    <div onClick={onClick}
         style={{ padding: '14px 12px', display: 'flex', alignItems: 'center', gap: 14,
                  borderBottom: last ? 'none' : '1px solid rgba(255,255,255,0.05)',
                  cursor: onClick ? 'pointer' : 'default',
                  color: danger ? '#E84848' : t5.text }}>
      {I && (
        <div style={{ width: 36, height: 36, borderRadius: 12,
                      background: danger ? 'rgba(232,72,72,0.12)' : 'rgba(255,255,255,0.05)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <I size={18}/>
        </div>
      )}
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 14, fontWeight: 500 }}>{label}</div>
        {sub && <div style={{ fontSize: 11, color: t5.textDim, marginTop: 2 }}>{sub}</div>}
      </div>
      {right !== undefined ? right : (onClick && <div style={{ color: t5.textMute }}><Icons.chev size={14}/></div>)}
    </div>
  );
}

function SectionHeading({ children }) {
  return (
    <div style={{ fontSize: 10, fontFamily: t5.mono, color: t5.textDim, letterSpacing: 1, padding: '14px 4px 8px' }}>
      {children}
    </div>
  );
}

function ToggleSwitch({ on, onChange }) {
  return (
    <div onClick={onChange} style={{ width: 44, height: 26, borderRadius: 13,
                                     background: on ? t5.accent : 'rgba(255,255,255,0.12)',
                                     position: 'relative', cursor: 'pointer', transition: 'background .2s', flexShrink: 0 }}>
      <div style={{ position: 'absolute', top: 3, left: on ? 21 : 3, width: 20, height: 20, borderRadius: 10,
                    background: '#fff', transition: 'left .2s', boxShadow: '0 1px 3px rgba(0,0,0,0.3)' }}/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// PROFILE INFO — name, contact, address, membership
// ─────────────────────────────────────────────────────────────
function ProfileInfoScreen() {
  const nav = useRouter();
  const { tw } = useApp();
  const L = STRINGS[tw.lang];

  return (
    <ScreenShell>
      <div style={{ padding: '6px 18px 20px' }} className="c-stagger">
        <BackHeader
          title={T(tw.lang, 'Personal info', 'Thông tin cá nhân')}
          subtitle={T(tw.lang, 'Account profile', 'Hồ sơ tài khoản')}
          action={<div onClick={() => nav.openSheet('editProfile')} style={{ fontSize: 12, color: t5.accent, cursor: 'pointer' }}>{T(tw.lang, 'Edit', 'Sửa')}</div>}/>

        {/* Avatar + name */}
        <GlassC padding={20} radius={26} intensity={tw.glass} style={{ marginBottom: 14, textAlign: 'center' }} accentLine>
          <div style={{ width: 80, height: 80, margin: '0 auto', borderRadius: 40,
                        background: 'conic-gradient(from 180deg, #D4A574, #7CB7FF, #D4A574)', padding: 2 }}>
            <div style={{ width: '100%', height: '100%', borderRadius: '50%', background: t5.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28, fontWeight: 500, color: t5.text }}>AN</div>
          </div>
          <div style={{ fontSize: 20, fontWeight: 500, marginTop: 14 }}>An Nguyễn</div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, marginTop: 8, padding: '4px 12px', borderRadius: 999,
                        background: 'rgba(212,165,116,0.14)', color: t5.accent, fontSize: 11, fontWeight: 600, letterSpacing: 0.5 }}>
            <div style={{ width: 5, height: 5, borderRadius: 3, background: t5.accent }}/>
            PREMIUM · {T(tw.lang, '2 years', '2 năm')}
          </div>
        </GlassC>

        <SectionHeading>{T(tw.lang, 'CONTACT', 'LIÊN HỆ')}</SectionHeading>
        <GlassC padding={0} radius={20} intensity={tw.glass}>
          <InfoRow label={T(tw.lang, 'Phone', 'Điện thoại')} value="+84 912 84 02 19"/>
          <InfoRow label="Email" value="an.nguyen@gmail.com"/>
          <InfoRow label={T(tw.lang, 'Address', 'Địa chỉ')} value={T(tw.lang, '12 Lò Đúc, Hoàn Kiếm, Hanoi', '12 Lò Đúc, Hoàn Kiếm, Hà Nội')} last/>
        </GlassC>

        <SectionHeading>{T(tw.lang, 'PERSONAL', 'CÁ NHÂN')}</SectionHeading>
        <GlassC padding={0} radius={20} intensity={tw.glass}>
          <InfoRow label={T(tw.lang, 'Date of birth', 'Ngày sinh')} value="14 / 08 / 1991"/>
          <InfoRow label={T(tw.lang, 'National ID', 'CCCD')} value="001 091 023 487"/>
          <InfoRow label={T(tw.lang, 'Driver\u2019s licence', 'GPLX')} value="B2 · 220 105 38291" last/>
        </GlassC>

        <SectionHeading>{T(tw.lang, 'MEMBERSHIP', 'THÀNH VIÊN')}</SectionHeading>
        <GlassC padding={0} radius={20} intensity={tw.glass}>
          <InfoRow label={T(tw.lang, 'Tier', 'Hạng')} value="Mazda Premium" valueColor={t5.accent}/>
          <InfoRow label={T(tw.lang, 'Member since', 'Từ ngày')} value={T(tw.lang, 'May 2024', 'Tháng 5/2024')}/>
          <InfoRow label={T(tw.lang, 'Reward points', 'Điểm thưởng')} value="14,820" last/>
        </GlassC>
      </div>
    </ScreenShell>
  );
}

function InfoRow({ label, value, valueColor, last }) {
  return (
    <div style={{ padding: '14px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  borderBottom: last ? 'none' : '1px solid rgba(255,255,255,0.05)' }}>
      <div style={{ fontSize: 12, color: t5.textDim }}>{label}</div>
      <div style={{ fontSize: 14, fontWeight: 500, color: valueColor || t5.text, fontVariantNumeric: 'tabular-nums' }}>{value}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SETTINGS — toggles, prefs, log out
// ─────────────────────────────────────────────────────────────
function SettingsScreen() {
  const nav = useRouter();
  const { tw, setTweak } = useApp();
  const L = STRINGS[tw.lang];
  const toast = useToast();

  const [notif, setNotif] = React.useState({ vehicle: true, service: true, trips: false, promo: false });
  const [biometric, setBiometric] = React.useState(true);
  const [hapticFb, setHapticFb] = React.useState(true);
  const [autoLock, setAutoLock] = React.useState(true);

  return (
    <ScreenShell>
      <div style={{ padding: '6px 18px 20px' }} className="c-stagger">
        <BackHeader title={L.settings}/>

        <SectionHeading>{T(tw.lang, 'NOTIFICATIONS', 'THÔNG BÁO')}</SectionHeading>
        <GlassC padding={0} radius={20} intensity={tw.glass}>
          <SettingsRow icon="signal" label={T(tw.lang, 'Vehicle alerts', 'Cảnh báo xe')}
            sub={T(tw.lang, 'Lock, unlock, alarm', 'Khóa, mở khóa, báo động')}
            right={<ToggleSwitch on={notif.vehicle} onChange={() => setNotif({...notif, vehicle: !notif.vehicle})}/>}/>
          <SettingsRow icon="wrench" label={T(tw.lang, 'Service reminders', 'Nhắc bảo dưỡng')}
            sub={T(tw.lang, 'Maintenance schedule', 'Lịch bảo dưỡng')}
            right={<ToggleSwitch on={notif.service} onChange={() => setNotif({...notif, service: !notif.service})}/>}/>
          <SettingsRow icon="pin" label={T(tw.lang, 'Trip summary', 'Tóm tắt chuyến đi')}
            sub={T(tw.lang, 'After each drive', 'Sau mỗi chuyến')}
            right={<ToggleSwitch on={notif.trips} onChange={() => setNotif({...notif, trips: !notif.trips})}/>}/>
          <SettingsRow icon="bell" label={T(tw.lang, 'Promotions & news', 'Khuyến mãi & tin tức')}
            sub={T(tw.lang, 'From Thaco', 'Từ Thaco')}
            right={<ToggleSwitch on={notif.promo} onChange={() => setNotif({...notif, promo: !notif.promo})}/>}
            last/>
        </GlassC>

        <SectionHeading>{T(tw.lang, 'SECURITY & PRIVACY', 'BẢO MẬT & QUYỀN RIÊNG TƯ')}</SectionHeading>
        <GlassC padding={0} radius={20} intensity={tw.glass}>
          <SettingsRow icon="lock" label={T(tw.lang, 'Face ID for unlock', 'Face ID cho mở khóa')}
            sub={T(tw.lang, 'Required to unlock vehicle', 'Bắt buộc khi mở khóa xe')}
            right={<ToggleSwitch on={biometric} onChange={() => setBiometric(!biometric)}/>}/>
          <SettingsRow icon="signal" label={T(tw.lang, 'Auto-lock after walk-away', 'Tự khóa khi rời xe')}
            sub={T(tw.lang, 'When key out of range', 'Khi chìa khóa ra khỏi tầm')}
            right={<ToggleSwitch on={autoLock} onChange={() => setAutoLock(!autoLock)}/>}/>
          <SettingsRow icon="gear" label={T(tw.lang, 'Haptic feedback', 'Phản hồi rung')}
            right={<ToggleSwitch on={hapticFb} onChange={() => setHapticFb(!hapticFb)}/>}
            last/>
        </GlassC>

        <SectionHeading>{T(tw.lang, 'APP', 'ỨNG DỤNG')}</SectionHeading>
        <GlassC padding={0} radius={20} intensity={tw.glass}>
          <SettingsRow icon="globe" label={L.language}
            sub={tw.lang === 'vi' ? 'Tiếng Việt' : 'English'}
            right={<LangSwitch lang={tw.lang} onChange={(v) => setTweak('lang', v)}/>}/>
          <SettingsRow icon="signal" label={T(tw.lang, 'Units', 'Đơn vị')}
            sub={T(tw.lang, 'km · litres · VND', 'km · lít · VND')}
            onClick={() => toast.push(T(tw.lang, 'Metric units are required by Vietnamese law', 'Đơn vị mét bắt buộc theo quy định VN'), { icon: 'qmark', kind: 'warn' })}/>
          <SettingsRow icon="qmark" label={T(tw.lang, 'About this app', 'Giới thiệu ứng dụng')}
            sub={T(tw.lang, 'M·Connect v3.2.1 (build 4128)', 'M·Connect v3.2.1 (bản dựng 4128)')} onClick={() => nav.openSheet('about')}/>
          <SettingsRow icon="doc" label={T(tw.lang, 'Terms & Privacy', 'Điều khoản & Riêng tư')} onClick={() => nav.openSheet('terms')} last/>
        </GlassC>

        {/* Log out */}
        <div style={{ marginTop: 22 }}>
          <GlassC padding={0} radius={20} intensity={tw.glass}>
            <SettingsRow icon="arrow" label={T(tw.lang, 'Log out', 'Đăng xuất')}
              sub={T(tw.lang, 'Sign out of this device', 'Đăng xuất khỏi thiết bị này')}
              onClick={() => nav.openSheet('logoutConfirm')}
              danger last/>
          </GlassC>
        </div>

        <div style={{ marginTop: 18, textAlign: 'center', fontSize: 10, color: t5.textMute, fontFamily: t5.mono, letterSpacing: 1.5 }}>
          MAZDA CONNECT · {T(tw.lang, 'VIETNAM', 'VIỆT NAM')} · 2026
        </div>
      </div>
    </ScreenShell>
  );
}

// ─────────────────────────────────────────────────────────────
// DOCUMENTS — Giấy tờ xe
// ─────────────────────────────────────────────────────────────
function DocumentsScreen() {
  const nav = useRouter();
  const { tw } = useApp();
  const L = STRINGS[tw.lang];
  const v = VEHICLES[tw.model];
  const toast = useToast();

  const docs = [
    { id: 'reg',   icon: 'doc',  l: T(tw.lang, 'Vehicle registration', 'Đăng ký xe'),
      sub: T(tw.lang, 'Issued 14 May 2024', 'Cấp 14/05/2024'),
      tag: T(tw.lang, 'Valid', 'Hợp lệ'), tagColor: t5.ok },
    { id: 'ins',   icon: 'doc',  l: T(tw.lang, 'Compulsory insurance', 'Bảo hiểm bắt buộc'),
      sub: T(tw.lang, 'PVI · expires 14 May 2026', 'PVI · hết hạn 14/05/2026'),
      tag: T(tw.lang, 'Active', 'Đang hoạt động'), tagColor: t5.ok },
    { id: 'phys',  icon: 'doc',  l: T(tw.lang, 'Physical damage cover', 'Bảo hiểm vật chất'),
      sub: T(tw.lang, 'Bảo Việt · expires 28 Nov 2025', 'Bảo Việt · hết hạn 28/11/2025'),
      tag: T(tw.lang, 'Renew soon', 'Sắp hết hạn'), tagColor: t5.warn },
    { id: 'insp',  icon: 'wrench', l: T(tw.lang, 'Periodic inspection', 'Đăng kiểm'),
      sub: T(tw.lang, 'Stamp 9908 · expires 14 Nov 2025', 'Tem 9908 · hết hạn 14/11/2025'),
      tag: T(tw.lang, '6 months left', 'Còn 6 tháng'), tagColor: t5.accent2 },
    { id: 'roadtax', icon: 'wallet', l: T(tw.lang, 'Road maintenance fee', 'Phí bảo trì đường bộ'),
      sub: T(tw.lang, 'Paid until Dec 2025', 'Đã đóng đến 12/2025'),
      tag: T(tw.lang, 'Paid', 'Đã đóng'), tagColor: t5.ok },
  ];

  return (
    <ScreenShell>
      <div style={{ padding: '6px 18px 20px' }} className="c-stagger">
        <BackHeader title={L.documents} subtitle={v.name + ' · ' + v.plate}
          action={<div onClick={() => toast.push(T(tw.lang, 'Scan document — tap camera in toolbar', 'Quét giấy tờ — chạm máy ảnh'), { icon: 'plus' })} style={{ fontSize: 12, color: t5.accent, cursor: 'pointer' }}>{T(tw.lang, 'Add', 'Thêm')}</div>}/>

        {/* VIN card */}
        <GlassC padding={16} radius={24} intensity={tw.glass} style={{ marginBottom: 14 }} accentLine>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontSize: 11, fontFamily: t5.mono, color: t5.textDim, letterSpacing: 1.5 }}>VIN</div>
              <div style={{ fontSize: 18, fontFamily: t5.mono, fontWeight: 600, marginTop: 4, letterSpacing: 1 }}>JM3KFB AC1 PO 491 28</div>
              <div style={{ fontSize: 11, color: t5.textDim, marginTop: 6 }}>{T(tw.lang, 'Engine no.', 'Số máy')} · PE-VPS 491 28</div>
            </div>
            <button onClick={() => toast.push(T(tw.lang, 'VIN copied to clipboard', 'Đã sao chép VIN'))}
                    style={{ padding: '8px 12px', borderRadius: 14, border: '1px solid rgba(255,255,255,0.1)', background: 'transparent', color: t5.text, fontSize: 11, fontWeight: 500, fontFamily: t5.font, cursor: 'pointer' }}>
              {T(tw.lang, 'Copy', 'Sao chép')}
            </button>
          </div>
        </GlassC>

        {docs.map((d) => {
          const I = Icons[d.icon];
          return (
            <GlassC key={d.id} padding={14} radius={20} intensity={tw.glass} style={{ marginBottom: 10, display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer' }}
                onClick={() => toast.push(T(tw.lang, `Opening ${d.l}`, `Đang mở ${d.l}`), { icon: 'doc' })}>
              <div style={{ width: 40, height: 40, borderRadius: 12, background: 'rgba(255,255,255,0.05)', color: t5.text, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <I size={20}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{d.l}</div>
                <div style={{ fontSize: 11, color: t5.textDim, marginTop: 2 }}>{d.sub}</div>
              </div>
              <div style={{ fontSize: 10, fontWeight: 600, padding: '4px 10px', borderRadius: 999,
                            background: `${d.tagColor}22`, color: d.tagColor, letterSpacing: 0.5 }}>
                {d.tag}
              </div>
            </GlassC>
          );
        })}

        <div style={{ marginTop: 10, padding: '0 4px',
                      display: 'flex', gap: 10, alignItems: 'flex-start' }}>
          <div style={{ fontSize: 10, fontFamily: t5.mono, color: t5.accent2, letterSpacing: 1.5, paddingTop: 1, flexShrink: 0 }}>
            {T(tw.lang, 'NOTE', 'LƯU Ý')}
          </div>
          <div style={{ flex: 1, fontSize: 11, color: t5.textDim, lineHeight: 1.55 }}>
            {T(tw.lang,
              'Tap any document to view a scanned copy or share it with police/insurance.',
              'Nhấn vào giấy tờ để xem bản scan hoặc chia sẻ với CSGT/bảo hiểm.')}
          </div>
        </div>
      </div>
    </ScreenShell>
  );
}

// ─────────────────────────────────────────────────────────────
// PAYMENT methods
// ─────────────────────────────────────────────────────────────
function PaymentScreen() {
  const nav = useRouter();
  const { tw } = useApp();
  const L = STRINGS[tw.lang];
  const toast = useToast();

  const cards = [
    { id: 'visa', kind: 'visa',  last4: '4029', name: 'AN NGUYEN', exp: '08/27', primary: true, color: '#1B2E5C' },
    { id: 'momo', kind: 'momo',  last4: '5219', name: 'Momo Wallet', exp: '\u00A0', color: '#A50064' },
  ];

  const txns = [
    { id: 't1', l: T(tw.lang, 'Service booking', 'Đặt lịch bảo dưỡng'), sub: 'Thaco Long Biên', date: '21/05', amount: -1850000 },
    { id: 't2', l: T(tw.lang, 'Fuel · Petrolimex',    'Đổ xăng · Petrolimex'),         sub: T(tw.lang, '36 L · RON95', '36 L · RON95'), date: '18/05', amount: -768240 },
    { id: 't3', l: T(tw.lang, 'Reward redemption',     'Đổi điểm thưởng'),               sub: T(tw.lang, '+2,400 pts', '+2.400 điểm'), date: '15/05', amount: 0 },
    { id: 't4', l: T(tw.lang, 'Roadside · Thaco',      'Cứu hộ · Thaco'),                sub: T(tw.lang, 'Tire replacement', 'Thay lốp'), date: '02/05', amount: -680000 },
  ];

  return (
    <ScreenShell>
      <div style={{ padding: '6px 18px 20px' }} className="c-stagger">
        <BackHeader title={L.payment}
          action={<div onClick={() => toast.push(T(tw.lang, 'Add card · enter card details', 'Thêm thẻ · nhập thông tin thẻ'), { icon: 'plus' })} style={{ fontSize: 12, color: t5.accent, cursor: 'pointer' }}>{T(tw.lang, 'Add', 'Thêm')}</div>}/>

        {/* Cards stack */}
        <div style={{ marginBottom: 18 }}>
          {cards.map((c, i) => (
            <CardTile key={c.id} c={c} idx={i} total={cards.length} lang={tw.lang}/>
          ))}
        </div>

        <SectionHeading>{T(tw.lang, 'PAYMENT OPTIONS', 'PHƯƠNG THỨC')}</SectionHeading>
        <GlassC padding={0} radius={20} intensity={tw.glass}>
          <SettingsRow icon="wallet" label="VietQR"
            sub={T(tw.lang, 'Scan to pay at any merchant', 'Quét mã để thanh toán')}
            onClick={() => toast.push(T(tw.lang, 'VietQR opening…', 'Đang mở VietQR…'), { icon: 'wallet' })}/>
          <SettingsRow icon="wallet" label="ZaloPay"
            sub={T(tw.lang, 'Not linked', 'Chưa liên kết')}
            right={<button onClick={() => toast.push(T(tw.lang, 'ZaloPay linked', 'Đã liên kết ZaloPay'))}
                style={{ padding: '6px 12px', borderRadius: 12, border: `1px solid ${t5.accent}`, background: 'transparent', color: t5.accent, fontSize: 11, fontWeight: 600, fontFamily: t5.font, cursor: 'pointer' }}>{T(tw.lang, 'Link', 'Liên kết')}</button>}
            last/>
        </GlassC>

        <SectionHeading>{T(tw.lang, 'RECENT', 'GẦN ĐÂY')}</SectionHeading>
        <GlassC padding={0} radius={20} intensity={tw.glass}>
          {txns.map((t, i) => (
            <div key={t.id} style={{ padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12,
                                     borderBottom: i < txns.length - 1 ? '1px solid rgba(255,255,255,0.05)' : 'none' }}>
              <div style={{ width: 36, height: 36, borderRadius: 12, background: 'rgba(255,255,255,0.05)', color: t5.textDim, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontFamily: t5.mono }}>{t.date.split('/')[0]}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{t.l}</div>
                <div style={{ fontSize: 11, color: t5.textDim, marginTop: 2 }}>{t.sub}</div>
              </div>
              <div style={{ fontSize: 14, fontWeight: 600, fontVariantNumeric: 'tabular-nums',
                            color: t.amount < 0 ? t5.text : t5.ok }}>
                {t.amount === 0 ? '—' : (t.amount > 0 ? '+' : '−') + fmtVND(Math.abs(t.amount)).replace('₫', '').trim() + ' ₫'}
              </div>
            </div>
          ))}
        </GlassC>
      </div>
    </ScreenShell>
  );
}

function CardTile({ c, idx, total, lang }) {
  const stackOffset = idx * 14;
  return (
    <div style={{ position: 'relative', marginTop: idx === 0 ? 0 : -90, zIndex: total - idx, transform: `translateY(${stackOffset}px) scale(${1 - idx * 0.04})`, transition: 'transform .2s' }}>
      <div style={{ borderRadius: 22, padding: 20, height: 170,
                    background: c.kind === 'visa'
                      ? `linear-gradient(135deg, ${c.color}, #0A1228)`
                      : `linear-gradient(135deg, ${c.color}, #5C0040)`,
                    color: '#fff', position: 'relative', overflow: 'hidden',
                    boxShadow: '0 12px 36px rgba(0,0,0,0.4)' }}>
        <div style={{ position: 'absolute', top: -40, right: -40, width: 160, height: 160, borderRadius: 80, background: 'rgba(255,255,255,0.08)' }}/>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', position: 'relative' }}>
          <div style={{ fontSize: 11, letterSpacing: 1, fontFamily: 'ui-monospace, monospace', opacity: 0.7 }}>
            {c.kind === 'visa' ? T(lang, 'DEBIT', 'GHI NỢ') : 'E-WALLET'}
          </div>
          {c.primary && (
            <div style={{ fontSize: 10, padding: '3px 8px', borderRadius: 999, background: 'rgba(255,255,255,0.2)', fontWeight: 600, letterSpacing: 0.5 }}>
              {T(lang, 'DEFAULT', 'MẶC ĐỊNH')}
            </div>
          )}
        </div>
        <div style={{ position: 'absolute', bottom: 20, left: 20, right: 20 }}>
          <div style={{ fontSize: 20, fontFamily: 'ui-monospace, monospace', letterSpacing: 4, marginBottom: 14 }}>
            •••• {c.last4}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
            <div>
              <div style={{ fontSize: 9, opacity: 0.6, letterSpacing: 1 }}>{T(lang, 'CARDHOLDER', 'CHỦ THẺ')}</div>
              <div style={{ fontSize: 12, fontWeight: 500, marginTop: 2 }}>{c.name}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 9, opacity: 0.6, letterSpacing: 1 }}>{c.kind === 'visa' ? T(lang, 'EXP', 'HẠN') : '\u00A0'}</div>
              <div style={{ fontSize: 12, fontWeight: 500, marginTop: 2, fontFamily: 'ui-monospace, monospace' }}>{c.exp}</div>
            </div>
            {c.kind === 'visa' ? (
              <div style={{ fontSize: 20, fontWeight: 700, fontStyle: 'italic', letterSpacing: -1 }}>VISA</div>
            ) : (
              <div style={{ fontSize: 16, fontWeight: 700 }}>momo</div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

window.ProfileInfoScreen = ProfileInfoScreen;
window.SettingsScreen = SettingsScreen;
window.DocumentsScreen = DocumentsScreen;
window.PaymentScreen = PaymentScreen;