// QReward Customer — Notifications, Profile + subpages
const { useState: uS5, useEffect: uE5 } = React;

/* ============ NOTIFICATIONS ============ */
const NotificationsScreen = ({ lang, onBack, onNav }) => {
  const [tab, setTab] = uS5('All');
  const [items, setItems] = uS5(DATA.notifications);
  const tabs = ['All', 'Promotions', 'Orders', 'Account'];
  const tabsJp = { All: 'すべて', Promotions: 'プロモ', Orders: '注文', Account: 'アカウント' };
  const filtered = items.filter(n => tab === 'All' || n.cat === tab);
  const iconColor = { promo: 'var(--amber-600)', points: 'var(--green-600)', wishlist: 'var(--red-500)', order: 'var(--info-600)', cart: 'var(--brand-600)', legal: 'var(--purple-600)' };
  const iconBg = { promo: 'var(--amber-100)', points: 'var(--green-100)', wishlist: 'var(--red-100)', order: 'var(--info-100)', cart: 'var(--brand-100)', legal: 'var(--purple-100)' };

  return (
    <div className="scr scr-pad-status">
      <TopBar title={lang === 'jp' ? '通知' : 'Notifications'} onBack={onBack} lang={lang}
        right={<button className="tbar-action" onClick={() => setItems(items.map(n => ({ ...n, unread: false })))}>{lang === 'jp' ? 'すべて既読' : 'Mark all read'}</button>} />
      <div className="cat-strip" style={{ paddingTop: 4 }}>
        {tabs.map(t => <button key={t} className={`cat-chip ${tab === t ? 'active' : ''}`} onClick={() => setTab(t)}>{lang === 'jp' ? tabsJp[t] : t}</button>)}
      </div>
      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 30 }}>
        {filtered.length === 0
          ? <div className="empty-state"><div className="empty-state-icon"><Icon n="bell" s={24} /></div><div className="empty-state-title">{lang === 'jp' ? '通知はありません' : 'No notifications'}</div></div>
          : <div style={{ padding: '4px 0' }}>
              {filtered.map(n => (
                <button key={n.id} className="notif-row" onClick={() => { setItems(items.map(x => x.id === n.id ? { ...x, unread: false } : x)); if (n.type === 'order') onNav('push', 'orderStatus'); else if (n.type === 'promo' || n.type === 'wishlist') onNav('tab', 'redeem'); }}>
                  <div className="notif-row-icon" style={{ background: iconBg[n.type], color: iconColor[n.type] }}><Icon n={n.icon} s={18} /></div>
                  <div className="notif-row-body">
                    <div className="notif-row-title">{n.title}</div>
                    <div className="notif-row-sub">{n.body}</div>
                    <div className="notif-row-time">{n.time}</div>
                  </div>
                  {n.unread && <div className="notif-row-dot"></div>}
                </button>
              ))}
            </div>}
      </div>
      <style>{`
        .notif-row { display: flex; gap: 12px; padding: 14px 20px; width: 100%; text-align: left; align-items: flex-start; border-bottom: 0.5px solid var(--border); transition: background 120ms; }
        .notif-row:active { background: var(--surface-2); }
        .notif-row-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }
        .notif-row-body { flex: 1; min-width: 0; }
        .notif-row-title { font-size: 14px; font-weight: 600; line-height: 1.35; }
        .notif-row-sub { font-size: 13px; color: var(--fg-muted); margin-top: 2px; line-height: 1.4; }
        .notif-row-time { font-size: 11px; color: var(--fg-subtle); margin-top: 4px; }
        .notif-row-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-600); flex-shrink: 0; margin-top: 6px; }
      `}</style>
    </div>
  );
};

/* ============ PROFILE ============ */
const ProfileScreen = ({ lang, onNav, onSignOut, setLang, cardStatus }) => {
  const [signOutOpen, setSignOut] = uS5(false);
  const Row = ({ icon, title, sub, onClick, danger, trailing }) => (
    <button className="list-row list-row-press" style={{ width: '100%', textAlign: 'left' }} onClick={onClick}>
      {icon && <div className="list-row-icon" style={danger ? { background: 'var(--red-50)', color: 'var(--red-600)' } : null}><Icon n={icon} s={16} /></div>}
      <div className="list-row-body"><div className="list-row-title" style={danger ? { color: 'var(--red-600)' } : null}>{title}</div>{sub && <div className="list-row-sub">{sub}</div>}</div>
      <div className="list-row-trail">{trailing}<Icon n="chevR" s={16} c="var(--ink-300)" /></div>
    </button>
  );
  return (
    <div className="scr scr-pad-status">
      <TopBar title={lang === 'jp' ? 'プロフィール' : 'Profile'} lang={lang} />
      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 110 }}>
        {/* User tile */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '12px 20px 20px' }}>
          <div className="avatar-circle">{DATA.user.initials}</div>
          <div>
            <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.01em' }}>{lang === 'jp' ? `${DATA.user.nameJp} さん` : 'Giri Tanaka'}</div>
            <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>{lang === 'jp' ? '登録日' : 'Joined'} {DATA.user.joined}</div>
          </div>
        </div>

        <div className="group">
          <div className="group-title">{lang === 'jp' ? 'アカウント' : 'Account'}</div>
          <div className="group-list">
            <Row icon="user" title={lang === 'jp' ? '個人情報' : 'Personal information'} onClick={() => onNav('push', 'personalInfo')} />
            <Row icon="link" title={lang === 'jp' ? '連携アカウント' : 'Linked accounts'} sub="LifeCard · QUALIA" onClick={() => onNav('push', 'linked')} />
          </div>
        </div>

        <div className="group">
          <div className="group-title">{lang === 'jp' ? '設定' : 'Preferences'}</div>
          <div className="group-list">
            <Row icon="globe" title={lang === 'jp' ? '言語' : 'Language'} trailing={<span style={{ fontSize: 13, color: 'var(--fg-muted)', marginRight: 4 }}>{lang === 'jp' ? '日本語' : 'English'}</span>} onClick={() => onNav('push', 'language')} />
            <Row icon="bell" title={lang === 'jp' ? '通知' : 'Notifications'} onClick={() => onNav('push', 'notifSettings')} />
          </div>
        </div>

        <div className="group">
          <div className="group-title">{lang === 'jp' ? 'セキュリティ' : 'Security'}</div>
          <div className="group-list">
            <Row icon="key" title={lang === 'jp' ? 'パスワード変更' : 'Change password'} onClick={() => onNav('push', 'changePw')} />
            <Row icon="faceId" title="Face ID" trailing={<span className="toggle on" style={{ width: 44, height: 26, marginRight: 4 }}></span>} onClick={() => {}} />
            <Row icon="lock" title={lang === 'jp' ? 'PIN変更' : 'Change PIN'} onClick={() => onNav('push', 'changePin')} />
            <Row icon="device" title={lang === 'jp' ? 'アクティブなセッション' : 'Active sessions'} onClick={() => onNav('push', 'sessions')} />
          </div>
        </div>

        <div className="group">
          <div className="group-title">{lang === 'jp' ? '法的事項・アカウント' : 'Legal & Account'}</div>
          <div className="group-list">
            <Row icon="doc" title={lang === 'jp' ? '利用規約' : 'Terms of Service'} onClick={() => onNav('push', 'legal', { doc: 'Terms of Service' })} />
            <Row icon="shield" title={lang === 'jp' ? 'プライバシーポリシー' : 'Privacy Policy'} onClick={() => onNav('push', 'legal', { doc: 'Privacy Policy' })} />
            <Row icon="trash" title={lang === 'jp' ? 'アカウント削除' : 'Delete account'} danger onClick={() => onNav('push', 'deleteAccount')} />
          </div>
        </div>

        <div style={{ padding: '4px 16px 20px' }}>
          <button className="signout-btn" onClick={() => setSignOut(true)}>{lang === 'jp' ? 'サインアウト' : 'Sign out'}</button>
        </div>
      </div>

      <Sheet open={signOutOpen} onClose={() => setSignOut(false)} title={lang === 'jp' ? 'サインアウトしますか？' : 'Sign out of QReward?'}>
        <Btn block variant="secondary" onClick={onSignOut} style={{ marginTop: 8 }}>{lang === 'jp' ? 'サインアウト' : 'Sign out'}</Btn>
        <button style={{ width: '100%', padding: 14, color: 'var(--fg-muted)', fontWeight: 600, marginTop: 4 }} onClick={() => setSignOut(false)}>{lang === 'jp' ? 'キャンセル' : 'Cancel'}</button>
      </Sheet>
      <style>{`.signout-btn { width: 100%; padding: 15px; background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-md); font-weight: 600; font-size: 15px; color: var(--fg); }`}</style>
    </div>
  );
};

/* ============ PROFILE SUBPAGES ============ */
const SubPage = ({ title, onBack, lang, children, footer }) => (
  <div className="scr scr-pad-status" style={{ paddingBottom: 0 }}>
    <TopBar title={title} onBack={onBack} lang={lang} />
    <div style={{ flex: 1, overflowY: 'auto', paddingBottom: footer ? 100 : 30 }}>{children}</div>
    {footer && <div className="cta-pinned">{footer}</div>}
  </div>
);

const PersonalInfoScreen = ({ lang, onBack, toast }) => {
  const [edited, setEdited] = uS5(false);
  return (
    <SubPage title={lang === 'jp' ? '個人情報' : 'Personal information'} onBack={onBack} lang={lang}
      footer={edited && <Btn block onClick={() => { toast(lang === 'jp' ? '保存しました' : 'Saved'); setEdited(false); }}>{lang === 'jp' ? '変更を保存' : 'Save changes'}</Btn>}>
      <div style={{ paddingTop: 8 }}>
        {[
          { label: lang === 'jp' ? '氏名' : 'Name', val: 'Giri Tanaka', icon: 'user' },
          { label: lang === 'jp' ? 'メール' : 'Email', val: DATA.user.email, icon: 'mail' },
          { label: lang === 'jp' ? '電話番号' : 'Phone', val: '+81 90-1234-5678', icon: 'phone' },
        ].map((f, i) => (
          <div key={i} className="field">
            <label className="field-label">{f.label}</label>
            <input className="input" defaultValue={f.val} onChange={() => setEdited(true)} />
          </div>
        ))}
        <div className="section-title">{lang === 'jp' ? '保存済みの住所' : 'Saved addresses'}</div>
        {DATA.addresses.map(a => (
          <div key={a.id} className="addr-tile" style={{ borderColor: 'var(--border)' }}>
            <div className="list-row-icon" style={{ width: 36, height: 36 }}><Icon n="mapPin" s={16} /></div>
            <div className="addr-tile-body">
              <div className="addr-tile-name">{a.name}</div>
              <div className="addr-tile-text">{a.zip} {a.line}</div>
            </div>
            <div className="addr-tile-actions"><button><Icon n="edit" s={16} /></button><button><Icon n="trash" s={16} /></button></div>
          </div>
        ))}
      </div>
    </SubPage>
  );
};

const LanguageScreen = ({ lang, setLang, onBack, toast }) => (
  <SubPage title={lang === 'jp' ? '言語' : 'Language'} onBack={onBack} lang={lang}>
    <div className="list" style={{ marginTop: 12 }}>
      {[{ id: 'en', label: 'English' }, { id: 'jp', label: '日本語' }].map(o => (
        <button key={o.id} className="list-row list-row-press" style={{ width: '100%' }} onClick={() => { setLang(o.id); toast(o.id === 'jp' ? '言語を変更しました' : 'Language updated'); }}>
          <div className="list-row-body"><div className="list-row-title">{o.label}</div></div>
          {lang === o.id && <Icon n="check" s={20} c="var(--brand-600)" sw={2.4} />}
        </button>
      ))}
    </div>
  </SubPage>
);

const NotifSettingsScreen = ({ lang, onBack }) => {
  const [master, setMaster] = uS5(true);
  const cats = [lang === 'jp' ? 'プロモーション' : 'Promotions', lang === 'jp' ? '注文' : 'Orders', lang === 'jp' ? 'アカウント' : 'Account', lang === 'jp' ? 'ウィッシュリスト' : 'Wishlist', lang === 'jp' ? 'カート' : 'Cart'];
  const [toggles, setToggles] = uS5(cats.map(() => true));
  return (
    <SubPage title={lang === 'jp' ? '通知' : 'Notifications'} onBack={onBack} lang={lang}>
      <div className="list" style={{ marginTop: 12 }}>
        <div className="list-row"><div className="list-row-body"><div className="list-row-title">{lang === 'jp' ? 'QReward通知' : 'QReward notifications'}</div></div><button className={`toggle ${master ? 'on' : ''}`} onClick={() => setMaster(!master)}></button></div>
      </div>
      {master && <>
        <div className="section-title">{lang === 'jp' ? 'カテゴリ' : 'Categories'}</div>
        <div className="list">
          {cats.map((c, i) => (
            <div key={c} className="list-row"><div className="list-row-body"><div className="list-row-title">{c}</div></div><button className={`toggle ${toggles[i] ? 'on' : ''}`} onClick={() => setToggles(toggles.map((t, k) => k === i ? !t : t))}></button></div>
          ))}
        </div>
      </>}
    </SubPage>
  );
};

const ChangePwScreen = ({ lang, onBack, toast }) => {
  const [old, setOld] = uS5(''); const [nw, setNw] = uS5(''); const [cf, setCf] = uS5('');
  const score = [nw.length >= 8, /[A-Z]/.test(nw) && /[a-z]/.test(nw), /\d/.test(nw), /[^A-Za-z0-9]/.test(nw)].filter(Boolean).length;
  const valid = old.length >= 4 && score >= 3 && nw === cf && nw !== old;
  return (
    <SubPage title={lang === 'jp' ? 'パスワード変更' : 'Change password'} onBack={onBack} lang={lang}
      footer={<Btn block disabled={!valid} onClick={() => { toast(lang === 'jp' ? 'パスワードを変更しました' : 'Password changed'); onBack(); }}>{lang === 'jp' ? '保存' : 'Save'}</Btn>}>
      <div style={{ paddingTop: 12 }}>
        <div className="field"><label className="field-label">{lang === 'jp' ? '現在のパスワード' : 'Old password'}</label><input className="input" type="password" value={old} onChange={e => setOld(e.target.value)} /></div>
        <div className="field"><label className="field-label">{lang === 'jp' ? '新しいパスワード' : 'New password'}</label><input className="input" type="password" value={nw} onChange={e => setNw(e.target.value)} />
          <div className="pw-meter">{[1, 2, 3, 4].map(k => <div key={k} className={`pw-meter-bar ${score >= k ? 'on ' + ['', 'weak', 'fair', 'good', 'strong'][score] : ''}`}></div>)}</div>
        </div>
        <div className="field"><label className="field-label">{lang === 'jp' ? '新しいパスワード（確認）' : 'Confirm new password'}</label><input className="input" type="password" value={cf} onChange={e => setCf(e.target.value)} style={cf && cf !== nw ? { borderColor: 'var(--red-500)' } : null} /></div>
      </div>
    </SubPage>
  );
};

const ChangePinScreen = ({ lang, onBack, toast }) => {
  const [phase, setPhase] = uS5('current'); // current | new | confirm
  const [pin, setPin] = uS5([]); const [newPin, setNewPin] = uS5([]);
  const titles = { current: lang === 'jp' ? '現在のPIN' : 'Enter current PIN', new: lang === 'jp' ? '新しいPIN' : 'Enter new PIN', confirm: lang === 'jp' ? '新しいPINを確認' : 'Confirm new PIN' };
  const cur = phase === 'new' ? newPin : pin;
  const press = (n) => {
    if (cur.length >= 6) return;
    const nc = [...cur, n];
    if (phase === 'new') setNewPin(nc); else setPin(nc);
    if (nc.length === 6) setTimeout(() => {
      if (phase === 'current') { setPin([]); setPhase('new'); }
      else if (phase === 'new') { setPhase('confirm'); setPin([]); }
      else { toast(lang === 'jp' ? 'PINを変更しました' : 'PIN changed'); onBack(); }
    }, 150);
  };
  const del = () => phase === 'new' ? setNewPin(newPin.slice(0, -1)) : setPin(pin.slice(0, -1));
  return (
    <div className="scr scr-pad-status" style={{ paddingBottom: 0 }}>
      <TopBar title={lang === 'jp' ? 'PIN変更' : 'Change PIN'} onBack={onBack} lang={lang} />
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <div style={{ textAlign: 'center', padding: '24px 20px 0' }}><div className="h3">{titles[phase]}</div></div>
        <div style={{ padding: '40px 0' }}><div className="pin">{[0, 1, 2, 3, 4, 5].map(i => <div key={i} className={`pin-dot ${cur.length > i ? 'filled' : ''}`}></div>)}</div></div>
        <div style={{ flex: 1 }}></div>
        <Numpad onPress={press} onDel={del} />
      </div>
    </div>
  );
};

const SessionsScreen = ({ lang, onBack, toast }) => {
  const sessions = [
    { device: 'iPhone 15 Pro', loc: 'Tokyo, JP', platform: 'iOS', active: lang === 'jp' ? '現在' : 'Now', current: true },
    { device: 'iPad Air', loc: 'Tokyo, JP', platform: 'iOS', active: lang === 'jp' ? '2時間前' : '2h ago' },
    { device: 'Chrome · MacBook', loc: 'Osaka, JP', platform: 'Web', active: lang === 'jp' ? '昨日' : 'Yesterday' },
  ];
  return (
    <SubPage title={lang === 'jp' ? 'アクティブなセッション' : 'Active sessions'} onBack={onBack} lang={lang}>
      <div className="list" style={{ marginTop: 12 }}>
        {sessions.map((s, i) => (
          <div key={i} className="list-row">
            <div className="list-row-icon"><Icon n="device" s={16} /></div>
            <div className="list-row-body">
              <div className="list-row-title">{s.device} {s.current && <span className="pill pill-green" style={{ marginLeft: 6 }}>{lang === 'jp' ? 'このデバイス' : 'This device'}</span>}</div>
              <div className="list-row-sub">{s.loc} · {s.platform} · {s.active}</div>
            </div>
            {!s.current && <button style={{ color: 'var(--red-600)', fontWeight: 600, fontSize: 13 }} onClick={() => toast(lang === 'jp' ? 'サインアウトしました' : 'Signed out')}>{lang === 'jp' ? 'ログアウト' : 'Sign out'}</button>}
          </div>
        ))}
      </div>
      <div style={{ padding: 16 }}>
        <Btn block variant="secondary" onClick={() => toast(lang === 'jp' ? '他のデバイスからサインアウトしました' : 'Signed out other devices')}>{lang === 'jp' ? '他のすべてのデバイスからサインアウト' : 'Sign out all other devices'}</Btn>
      </div>
    </SubPage>
  );
};

const LegalScreen = ({ lang, onBack, doc }) => (
  <SubPage title={doc} onBack={onBack} lang={lang}>
    <div className="banner banner-amber" style={{ marginTop: 12 }}>
      <Icon n="info" s={18} />
      <div>{lang === 'jp' ? '新しいバージョンがあります — 確認して同意してください。' : 'A new version is available — review and accept.'}</div>
    </div>
    <div style={{ padding: '8px 20px', fontSize: 14, lineHeight: 1.7, color: 'var(--fg-muted)' }}>
      <div style={{ fontWeight: 600, color: 'var(--fg)', marginBottom: 8 }}>{doc} · v3.2 · 2026/02/14</div>
      <p>{lang === 'jp' ? '本規約は、QRewardサービスの利用条件を定めるものです。本サービスを利用することにより、利用者は本規約に同意したものとみなされます。' : 'These terms govern your use of the QReward service. By using the service, you agree to be bound by these terms and our handling of your data as described in the Privacy Policy.'}</p>
      <p>{lang === 'jp' ? 'ポイントは提携先からのデータに基づいて付与され、マーケットプレイスでの交換に利用できます。ポイントに現金的価値はありません。' : 'Points are credited based on partner data and may be redeemed in the marketplace. Points hold no cash value and are subject to partner conversion ratios in effect at the time of import.'}</p>
      <p>{lang === 'jp' ? '当社は、適用法令に従い、利用者の個人情報を保護します。' : 'We protect your personal information in accordance with applicable law, including Japan\'s Act on Protection of Personal Information.'}</p>
    </div>
  </SubPage>
);

const DeleteAccountScreen = ({ lang, onBack, onConfirm }) => {
  const [step, setStep] = uS5(1);
  const [understand, setUnderstand] = uS5(false);
  const [reason, setReason] = uS5('');
  const [email, setEmail] = uS5(''); const [pw, setPw] = uS5('');
  const [finalSheet, setFinalSheet] = uS5(false);
  const reasons = lang === 'jp' ? ['使わなくなった', 'プライバシーの懸念', '別のアプリを使用', 'その他'] : ['No longer using it', 'Privacy concerns', 'Using another app', 'Other'];
  return (
    <div className="scr scr-pad-status" style={{ paddingBottom: 0 }}>
      <TopBar title={lang === 'jp' ? 'アカウント削除' : 'Delete account'} onBack={() => step === 1 ? onBack() : setStep(step - 1)} lang={lang} />
      <div className="checkout-steps"><div className={`checkout-step active`}></div><div className={`checkout-step ${step >= 2 ? 'active' : ''}`}></div><div className={`checkout-step ${step >= 3 ? 'active' : ''}`}></div></div>
      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 100, padding: '12px 20px 100px' }}>
        {step === 1 && <>
          <div className="h3" style={{ marginBottom: 10 }}>{lang === 'jp' ? '削除する前に' : 'Before you delete'}</div>
          <div className="banner banner-red" style={{ margin: '0 0 16px' }}><Icon n="alert" s={18} /><div>{lang === 'jp' ? '2週間以内にポイントを使い切ってください。期限を過ぎるとポイントとアカウントは削除されます。' : 'Your account and remaining points will be deleted after 2 weeks. Use your points before then to keep them.'}</div></div>
          <button style={{ display: 'flex', gap: 12, alignItems: 'flex-start', textAlign: 'left' }} onClick={() => setUnderstand(!understand)}>
            <span className={`checkbox ${understand ? 'checked' : ''}`}></span>
            <span style={{ fontSize: 14, lineHeight: 1.5 }}>{lang === 'jp' ? '理解しました' : 'I understand'}</span>
          </button>
        </>}
        {step === 2 && <>
          <div className="h3" style={{ marginBottom: 14 }}>{lang === 'jp' ? '理由をお聞かせください' : 'Tell us why'}</div>
          <div className="list" style={{ margin: 0 }}>
            {reasons.map(r => <button key={r} className="list-row list-row-press" style={{ width: '100%' }} onClick={() => setReason(r)}><div className="list-row-body"><div className="list-row-title">{r}</div></div>{reason === r && <Icon n="check" s={20} c="var(--brand-600)" sw={2.4} />}</button>)}
          </div>
        </>}
        {step === 3 && <>
          <div className="h3" style={{ marginBottom: 14 }}>{lang === 'jp' ? '本人確認' : 'Verify your identity'}</div>
          <div className="field" style={{ padding: 0, marginBottom: 14 }}><label className="field-label">{lang === 'jp' ? 'メールアドレス' : 'Email'}</label><input className="input" value={email} onChange={e => setEmail(e.target.value)} /></div>
          <div className="field" style={{ padding: 0 }}><label className="field-label">{lang === 'jp' ? 'パスワード' : 'Password'}</label><input className="input" type="password" value={pw} onChange={e => setPw(e.target.value)} /></div>
        </>}
      </div>
      <div className="cta-pinned">
        {step < 3
          ? <Btn block disabled={(step === 1 && !understand) || (step === 2 && !reason)} onClick={() => setStep(step + 1)}>{L(lang, 'continue')}</Btn>
          : <Btn block variant="danger" disabled={email.length < 5 || pw.length < 4} onClick={() => setFinalSheet(true)}>{lang === 'jp' ? 'アカウントを削除' : 'Delete account'}</Btn>}
      </div>
      <Sheet open={finalSheet} onClose={() => setFinalSheet(false)} title={lang === 'jp' ? 'この操作は取り消せません' : 'This action cannot be undone'}>
        <div className="muted" style={{ fontSize: 14, lineHeight: 1.5, marginBottom: 18 }}>{lang === 'jp' ? '本当にアカウントを削除しますか？' : 'Are you sure you want to delete your account?'}</div>
        <Btn block variant="danger" onClick={onConfirm}>{lang === 'jp' ? '削除する' : 'Delete account'}</Btn>
        <button style={{ width: '100%', padding: 14, color: 'var(--fg-muted)', fontWeight: 600, marginTop: 4 }} onClick={() => setFinalSheet(false)}>{lang === 'jp' ? 'キャンセル' : 'Cancel'}</button>
      </Sheet>
    </div>
  );
};

Object.assign(window, {
  NotificationsScreen, ProfileScreen, PersonalInfoScreen, LanguageScreen,
  NotifSettingsScreen, ChangePwScreen, ChangePinScreen, SessionsScreen, LegalScreen, DeleteAccountScreen,
});