// screens.jsx — Login, Hub, Settings drawer, Coming Soon, Notifications

const { useState, useEffect, useRef } = React;

// ────────────────────────────────────────────────────────────
// Login / Register
// ────────────────────────────────────────────────────────────
function LoginScreen({ onLoggedIn, lang, onLang }) {
  const [mode, setMode] = useState('login'); // 'login' | 'register'
  const [email, setEmail] = useState('');
  const [pwd, setPwd] = useState('');
  const [name, setName] = useState('');

  const doLogin = (e) => {
    e && e.preventDefault();
    onLoggedIn();
  };

  return (
    <div className="login">
      <div className="login-bar">
        <Wordmark size={20} sub />
        <div style={{ display:'flex', alignItems:'center', gap:6 }}>
          <LangChip lang={lang} onChange={onLang} />
          <ThemeToggle />
        </div>
      </div>

      <div className="hero-card">
        <div className="hero-blob b1"></div>
        <div className="hero-blob b2"></div>
        <div className="hero-car"><Tile3D kind="car" active /></div>
        <div className="eyebrow">{mode === 'login' ? t('welcomeBack') : t('fewSteps')}</div>
        <h1>
          {mode === 'login' ? t('heroLogin1') : t('heroReg1')}<br/>
          {mode === 'login' ? t('heroLogin2') : t('heroReg2')}<span className="dot">.</span>
        </h1>
      </div>

      <div className="login-sheet">
        <div className={`seg ${mode === 'register' ? 'right' : ''}`}>
          <div className="seg-thumb"></div>
          <button className={mode === 'login' ? 'active' : ''} onClick={() => setMode('login')}>{t('signin')}</button>
          <button className={mode === 'register' ? 'active' : ''} onClick={() => setMode('register')}>{t('register')}</button>
        </div>

        <form className="login-form" onSubmit={doLogin}>
          {mode === 'register' && (
            <div className="field">
              <label className="field-label">{t('fullName')}</label>
              <input className="field-input" placeholder={t('fullNamePh')} value={name} onChange={e => setName(e.target.value)} />
            </div>
          )}
          <div className="field">
            <label className="field-label">{t('email')}</label>
            <input className="field-input" type="email" placeholder="you@example.com" value={email} onChange={e => setEmail(e.target.value)} />
          </div>
          <div className="field">
            <label className="field-label">{t('password')}</label>
            <input className="field-input" type="password" placeholder="••••••••" value={pwd} onChange={e => setPwd(e.target.value)} />
          </div>

          {mode === 'login' && (
            <div style={{ textAlign:'right', marginTop:-2 }}>
              <a href="#" style={{ color:'var(--ink-3)', fontSize:12.5, fontWeight:600 }} onClick={e=>e.preventDefault()}>{t('forgot')}</a>
            </div>
          )}

          <button className="btn btn-primary btn-block" type="submit" style={{ marginTop:6 }}>
            {mode === 'login' ? t('signin') : t('createAccount')}
          </button>
        </form>

        <div className="login-divider">{t('orContinue')}</div>

        <div className="oauth-row">
          <button className="oauth-btn" onClick={doLogin} aria-label="Google">
            <OAuthGlyph provider="google" />
          </button>
          <button className="oauth-btn dark" onClick={doLogin} aria-label="Apple">
            <OAuthGlyph provider="apple" />
          </button>
          <button className="oauth-btn" onClick={doLogin} aria-label="Meta">
            <OAuthGlyph provider="meta" />
          </button>
        </div>

        {mode === 'register' && (
          <div className="login-legal">
            {t('legalPre')}<a href="#" onClick={e=>e.preventDefault()}>{t('terms')}</a>{t('legalMid')}<a href="#" onClick={e=>e.preventDefault()}>{t('privacy')}</a>{t('legalEnd')}
          </div>
        )}
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// Hub — category column
// ────────────────────────────────────────────────────────────
function HubScreen({ onPickCategory, onAvatar, onBell, onOrders, user, lang, onLang }) {
  return (
    <>
      <TopBar user={user} onAvatar={onAvatar} onBell={onBell} onOrders={onOrders} lang={lang} onLang={onLang} />
      <div className="scrollarea">
        <div className="hub">
          <div className="hub-greeting">
            <h1>{t('hi', { name: user.name.split(' ')[0] })}</h1>
            <p>{t('manageToday')}</p>
          </div>

          <div className="cat-list">
            <button className="cat-row cat-car" onClick={() => onPickCategory('car')}>
              <span className="cat-ico"><Tile3D kind="car" /></span>
              <span className="cat-txt">
                <span className="cat-t">{t('car')}</span>
                <span className="cat-s">{t('carSub')}</span>
              </span>
              <span className="cat-go">{I.arrowRight()}</span>
            </button>

            <button className="cat-row" onClick={() => onPickCategory('house')}>
              <span className="cat-ico"><Tile3D kind="house" /></span>
              <span className="cat-txt">
                <span className="cat-t">{t('home')}</span>
                <span className="cat-s">{t('homeSub')}</span>
              </span>
              <span className="cat-badge">{t('soon')}</span>
            </button>

            <button className="cat-row" onClick={() => onPickCategory('person')}>
              <span className="cat-ico"><Tile3D kind="person" /></span>
              <span className="cat-txt">
                <span className="cat-t">{t('person')}</span>
                <span className="cat-s">{t('personSub')}</span>
              </span>
              <span className="cat-badge">{t('soon')}</span>
            </button>
          </div>
        </div>
      </div>
    </>
  );
}

// ────────────────────────────────────────────────────────────
// Settings drawer (left)
// ────────────────────────────────────────────────────────────
function SettingsDrawer({ open, onClose, user, onLogout, onContact, onFaq, onProfile, onPassword, onNotifSettings }) {
  return (
    <aside className={`drawer drawer-left ${open ? 'open' : ''}`}>
      <div className="drawer-head">
        <h3>{t('settings')}</h3>
        <button className="icon-btn" onClick={onClose} aria-label="Затвори">{I.close()}</button>
      </div>
      <div className="drawer-body">
        <div className="profile-card">
          <div className="avatar">{user.initials}</div>
          <div style={{ minWidth:0 }}>
            <div className="name">{user.name}</div>
            <div className="email">{user.email}</div>
          </div>
        </div>

        <div className="menu-section-title">{t('account')}</div>
        <div className="menu-list">
          <button className="menu-item" onClick={onProfile}><div className="mi-ico">{I.user()}</div><span className="mi-label">{t('profile')}</span><span className="mi-arrow">›</span></button>
          <button className="menu-item" onClick={onNotifSettings}><div className="mi-ico">{I.bell()}</div><span className="mi-label">{t('notifSettings')}</span><span className="mi-arrow">›</span></button>
        </div>

        <div className="menu-section-title">{t('privacySec')}</div>
        <div className="menu-list">
          <button className="menu-item" onClick={onPassword}><div className="mi-ico">{I.lock()}</div><span className="mi-label">{t('password2fa')}</span><span className="mi-arrow">›</span></button>
          <button className="menu-item"><div className="mi-ico">{I.shield()}</div><span className="mi-label">{t('privacyPolicy')}</span><span className="mi-arrow">›</span></button>
          <button className="menu-item"><div className="mi-ico">{I.shieldCheck()}</div><span className="mi-label">{t('termsOfUse')}</span><span className="mi-arrow">›</span></button>
          <button className="menu-item"><div className="mi-ico">{I.help()}</div><span className="mi-label">{t('cookies')}</span><span className="mi-arrow">›</span></button>
          <button className="menu-item"><div className="mi-ico">{I.doc()}</div><span className="mi-label">{t('gdpr')}</span><span className="mi-arrow">›</span></button>
        </div>

        <div className="menu-section-title">{t('help')}</div>
        <div className="menu-list">
          <button className="menu-item" onClick={onFaq}><div className="mi-ico">{I.help()}</div><span className="mi-label">{t('faq')}</span><span className="mi-arrow">›</span></button>
          <button className="menu-item" onClick={onContact}><div className="mi-ico">{I.mail()}</div><span className="mi-label">{t('contact')}</span><span className="mi-arrow">›</span></button>
        </div>

        <div style={{ marginTop:22 }}>
          <button className="btn btn-ghost btn-block" onClick={onLogout}>
            {I.logout()} {t('logout')}
          </button>
        </div>

        <div style={{ marginTop:18, textAlign:'center', fontSize:11, color:'var(--ink-4)' }}>
          Kolhida v0.1.0 · build 2026.05.18
        </div>
      </div>
    </aside>
  );
}

// ────────────────────────────────────────────────────────────
// Notifications drawer (right)
// ────────────────────────────────────────────────────────────
function NotifDrawer({ open, onClose }) {
  const items = [
    { id:'n1', t:t('n1t'), s:t('n1s'), when:t('ago2h'), dot:true, ico:I.shieldCheck() },
    { id:'n2', t:t('n2t'), s:t('n2s'), when:t('ago5h'), dot:true, ico:I.truck() },
    { id:'n3', t:t('n3t'), s:t('n3s'), when:t('yesterday'), ico:I.spark() },
    { id:'n4', t:t('n4t'), s:t('n4s'), when:'14.05.2026', ico:I.euro() },
  ];
  return (
    <aside className={`drawer drawer-right ${open ? 'open' : ''}`}>
      <div className="drawer-head">
        <h3>{t('notifications')}</h3>
        <button className="icon-btn" onClick={onClose} aria-label="Затвори">{I.close()}</button>
      </div>
      <div className="drawer-body">
        {items.map(n => (
          <div key={n.id} className="row-item" style={{ borderRadius:14 }}>
            <div className={`ri-ico ${n.dot ? 'accent' : ''}`}>{n.ico}</div>
            <div className="ri-body">
              <div className="ri-title">{n.t}</div>
              <div className="ri-sub">{n.s}</div>
            </div>
            <div className="ri-trail">{n.when}</div>
          </div>
        ))}
      </div>
    </aside>
  );
}

// ────────────────────────────────────────────────────────────
// Orders drawer (right) — active orders
// ────────────────────────────────────────────────────────────
function OrdersDrawer({ open, onClose, onTrack }) {
  const go = (kind) => { onClose(); onTrack(kind); };
  return (
    <aside className={`drawer drawer-right ${open ? 'open' : ''}`}>
      <div className="drawer-head">
        <h3>{t('activeOrders')}</h3>
        <button className="icon-btn" onClick={onClose} aria-label="Затвори">{I.close()}</button>
      </div>
      <div className="drawer-body">
        <div className="row-item" style={{ borderRadius:14, cursor:'pointer' }} onClick={() => go('courier')}>
          <div className="ri-ico accent">{I.truck()}</div>
          <div className="ri-body">
            <div className="ri-title">Полица ГО · Лев Инс</div>
            <div className="ri-sub">{t('order1Sub')}</div>
          </div>
          <div className="ri-cta">{t('trackCta')} {I.chevron()}</div>
        </div>
        <div className="row-item" style={{ borderRadius:14, cursor:'pointer' }} onClick={() => go('office')}>
          <div className="ri-ico ok">{I.pin()}</div>
          <div className="ri-body">
            <div className="ri-title">Полица Каско · ДЗИ</div>
            <div className="ri-sub">{t('order2Sub')}</div>
          </div>
          <div className="ri-cta">{t('viewCta')} {I.chevron()}</div>
        </div>
      </div>
    </aside>
  );
}

// ────────────────────────────────────────────────────────────
// Notifications — full page
// ────────────────────────────────────────────────────────────
function NotifScreen({ user, onAvatar, lang, onLang }) {
  const items = [
    { id:'n1', t:t('n1t'), s:t('n1s'), when:t('ago2h'), dot:true, ico:I.shieldCheck() },
    { id:'n2', t:t('n2t'), s:t('n2s'), when:t('ago5h'), dot:true, ico:I.truck() },
    { id:'n3', t:t('n3t'), s:t('n3s'), when:t('yesterday'), ico:I.spark() },
    { id:'n4', t:t('n4t'), s:t('n4s'), when:'14.05.2026', ico:I.euro() },
  ];
  return (
    <>
      <TopBar user={user} onAvatar={onAvatar} lang={lang} onLang={onLang} />
      <div className="scrollarea">
        <div className="page-body">
          <h2 className="sect-title" style={{ marginTop:2 }}>{t('notifications')}</h2>
          <div style={{ display:'flex', flexDirection:'column', gap:8, marginTop:6 }}>
            {items.map(n => (
              <div key={n.id} className="row-item" style={{ borderRadius:14 }}>
                <div className={`ri-ico ${n.dot ? 'accent' : ''}`}>{n.ico}</div>
                <div className="ri-body">
                  <div className="ri-title">{n.t}</div>
                  <div className="ri-sub">{n.s}</div>
                </div>
                <div className="ri-trail">{n.when}</div>
              </div>
            ))}
          </div>
          <div style={{ height: 20 }}/>
        </div>
      </div>
    </>
  );
}

// ────────────────────────────────────────────────────────────
// Orders — full page (active orders)
// ────────────────────────────────────────────────────────────
function OrdersScreen({ user, onAvatar, onTrack, lang, onLang }) {
  return (
    <>
      <TopBar user={user} onAvatar={onAvatar} lang={lang} onLang={onLang} />
      <div className="scrollarea">
        <div className="page-body">
          <h2 className="sect-title" style={{ marginTop:2 }}>{t('activeOrders')}</h2>
          <div style={{ display:'flex', flexDirection:'column', gap:8, marginTop:6 }}>
            <div className="row-item" style={{ borderRadius:14, cursor:'pointer' }} onClick={() => onTrack('courier')}>
              <div className="ri-ico accent">{I.truck()}</div>
              <div className="ri-body">
                <div className="ri-title">Полица ГО · Лев Инс</div>
                <div className="ri-sub">{t('order1Sub')}</div>
              </div>
              <div className="ri-cta">{t('trackCta')} {I.chevron()}</div>
            </div>
            <div className="row-item" style={{ borderRadius:14, cursor:'pointer' }} onClick={() => onTrack('office')}>
              <div className="ri-ico ok">{I.pin()}</div>
              <div className="ri-body">
                <div className="ri-title">Полица Каско · ДЗИ</div>
                <div className="ri-sub">{t('order2Sub')}</div>
              </div>
              <div className="ri-cta">{t('viewCta')} {I.chevron()}</div>
            </div>
          </div>
          <div style={{ height: 20 }}/>
        </div>
      </div>
    </>
  );
}

// ────────────────────────────────────────────────────────────
// Coming soon screen (House / Person)
// ────────────────────────────────────────────────────────────
function ComingSoon({ kind, onBack, user, onAvatar, onBell, onOrders, lang, onLang }) {
  const map = {
    house:  { title:t('home'),   blurb:t('houseBlurb') },
    person: { title:t('person'), blurb:t('personBlurb') },
  }[kind];
  return (
    <>
      <TopBar user={user} onAvatar={onAvatar} onBell={onBell} onOrders={onOrders} lang={lang} onLang={onLang} />
      <PageHead title={map.title} onBack={onBack} />
      <div className="scrollarea">
        <div className="coming-soon">
          <div className="visual">
            <Tile3D kind={kind} />
          </div>
          <span className="badge-tag">{t('soon')}</span>
          <h2>{t('workingOn')}</h2>
          <p>{map.blurb}</p>
          <button className="btn btn-ghost" onClick={onBack}>{t('toCars')}</button>
        </div>
      </div>
    </>
  );
}

// ────────────────────────────────────────────────────────────
// Support / Contact screen
// ────────────────────────────────────────────────────────────
function SupportScreen({ user, onBack, onAvatar, onBell, onOrders, onFaq, lang, onLang }) {
  const channels = [
    { ico: I.phone(), tone: '', style: { background:'rgba(31,111,235,.12)', color:'#1F6FEB' }, title: t('spCall'),  sub: '0700 700 70',          val: t('spCallSub') },
    { ico: I.mail(),  tone: 'accent', title: t('spEmail'), sub: 'help@kolhida.bg',      val: t('spEmailSub') },
    { ico: I.chat(),  tone: 'accent', title: t('spChat'),  sub: t('spChatSub'),         val: t('spChatVal') },
  ];
  return (
    <>
      <TopBar user={user} onAvatar={onAvatar} onBell={onBell} onOrders={onOrders} lang={lang} onLang={onLang} />
      <PageHead title={t('contact')} onBack={onBack} />
      <div className="scrollarea">
        <div className="page-body">
          <h2 className="sect-title">{t('spHeadline')}</h2>
          <p className="sect-sub">{t('spIntro')}</p>

          <div style={{ display:'flex', flexDirection:'column', gap:10, marginTop:6 }}>
            {channels.map((c, i) => (
              <div key={i} className="row-item" style={{ cursor:'pointer' }}>
                <div className={`ri-ico ${c.tone}`} style={c.style}>{c.ico}</div>
                <div className="ri-body">
                  <div className="ri-title">{c.title}</div>
                  <div className="ri-sub">{c.sub}</div>
                </div>
                <div className="ri-cta">{c.val} {I.chevron()}</div>
              </div>
            ))}
          </div>

          <div className="rw-fields" style={{ marginTop:18 }}>
            <div className="rw-field"><span className="rw-fk">{t('spHours')}</span><span className="rw-fv">{t('spHoursVal')}</span></div>
            <div className="rw-field"><span className="rw-fk">{t('spWeekend')}</span><span className="rw-fv">10:00–16:00</span></div>
          </div>

          <button className="btn btn-ghost btn-block" style={{ marginTop:14 }} onClick={onFaq}>
            {I.help({ width:18, height:18 })} {t('faq')}
          </button>

          <div style={{ height: 30 }}/>
        </div>
      </div>
    </>
  );
}

// ────────────────────────────────────────────────────────────
// FAQ screen — collapsible Q&A
// ────────────────────────────────────────────────────────────
function FaqScreen({ user, onBack, onAvatar, onBell, onOrders, lang, onLang }) {
  const [open, setOpen] = useState(0);
  const items = [1,2,3,4,5,6].map(n => ({ q: t('faqQ' + n), a: t('faqA' + n) }));
  return (
    <>
      <TopBar user={user} onAvatar={onAvatar} onBell={onBell} onOrders={onOrders} lang={lang} onLang={onLang} />
      <PageHead title={t('faq')} onBack={onBack} />
      <div className="scrollarea">
        <div className="page-body">
          <p className="sect-sub" style={{ marginTop:2 }}>{t('faqIntro')}</p>
          <div className="faq-list">
            {items.map((it, i) => {
              const isOpen = open === i;
              return (
                <div key={i} className={`faq-item ${isOpen ? 'open' : ''}`}>
                  <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)}>
                    <span>{it.q}</span>
                    <span className="faq-chev">{I.chevron()}</span>
                  </button>
                  {isOpen && <div className="faq-a">{it.a}</div>}
                </div>
              );
            })}
          </div>
          <div style={{ height: 30 }}/>
        </div>
      </div>
    </>
  );
}

// ────────────────────────────────────────────────────────────
// Personal profile screen
// ────────────────────────────────────────────────────────────
function ProfileScreen({ user, onBack, onAvatar, onBell, onOrders, onChangePassword, lang, onLang }) {
  const [form, setForm] = useState({
    name: user.name, email: user.email,
  });
  const [saved, setSaved] = useState(false);
  const set = (k, v) => { setForm(f => ({ ...f, [k]: v })); setSaved(false); };
  return (
    <>
      <TopBar user={user} onAvatar={onAvatar} onBell={onBell} onOrders={onOrders} lang={lang} onLang={onLang} />
      <PageHead title={t('profile')} onBack={onBack} />
      <div className="scrollarea">
        <div className="page-body">
          <div className="profile-hero">
            <div className="profile-hero-av">{user.initials}</div>
            <div className="profile-hero-name">{user.name}</div>
            <div className="profile-hero-sub">{user.member}</div>
          </div>

          <div style={{ display:'flex', flexDirection:'column', gap:12, marginTop:4 }}>
            <div className="field">
              <label className="field-label">{t('pfName')}</label>
              <input className="field-input" value={form.name} onChange={e=>set('name',e.target.value)}/>
            </div>
            <div className="field">
              <label className="field-label">{t('pfEmail')}</label>
              <input className="field-input" type="email" value={form.email} onChange={e=>set('email',e.target.value)}/>
            </div>
          </div>

          <button className={`btn btn-primary btn-block`} style={{ marginTop:16 }} onClick={() => setSaved(true)}>
            {saved ? <>{I.check({ width:18, height:18 })} {t('pfSaved')}</> : t('pfSave')}
          </button>

          <button className="btn btn-ghost btn-block" style={{ marginTop:10 }} onClick={onChangePassword}>
            {I.lock({ width:18, height:18 })} {t('pfChangePass')}
          </button>

          <div style={{ height: 30 }}/>
        </div>
      </div>
    </>
  );
}

// ────────────────────────────────────────────────────────────
// Change password screen
// ────────────────────────────────────────────────────────────
function ChangePasswordScreen({ user, onBack, onAvatar, onBell, onOrders, lang, onLang }) {
  const [form, setForm] = useState({ current: '', next: '', confirm: '' });
  const [done, setDone] = useState(false);
  const set = (k, v) => { setForm(f => ({ ...f, [k]: v })); setDone(false); };
  const strong = form.next.length >= 8;
  const match = form.next.length > 0 && form.next === form.confirm;
  const canSave = form.current.length > 0 && strong && match;
  return (
    <>
      <TopBar user={user} onAvatar={onAvatar} onBell={onBell} onOrders={onOrders} lang={lang} onLang={onLang} />
      <PageHead title={t('cpTitle')} onBack={onBack} />
      <div className="scrollarea">
        <div className="page-body">
          <div className="profile-hero" style={{ paddingBottom: 12 }}>
            <div className="profile-hero-av" style={{ width:60, height:60, fontSize:22, background:'var(--accent-soft)', color:'var(--accent)', boxShadow:'none' }}>{I.lock({ width:24, height:24 })}</div>
          </div>
          <p className="sect-sub" style={{ textAlign:'center', marginTop:0 }}>{t('cpIntro')}</p>

          <div style={{ display:'flex', flexDirection:'column', gap:12, marginTop:14 }}>
            <div className="field">
              <label className="field-label">{t('cpCurrent')}</label>
              <input className="field-input" type="password" value={form.current} onChange={e=>set('current',e.target.value)} placeholder="••••••••"/>
            </div>
            <div className="field">
              <label className="field-label">{t('cpNew')}</label>
              <input className="field-input" type="password" value={form.next} onChange={e=>set('next',e.target.value)} placeholder="••••••••"/>
              <div className={`cp-hint ${form.next.length === 0 ? '' : (strong ? 'ok' : 'bad')}`}>{t('cpRule')}</div>
            </div>
            <div className="field">
              <label className="field-label">{t('cpConfirm')}</label>
              <input className="field-input" type="password" value={form.confirm} onChange={e=>set('confirm',e.target.value)} placeholder="••••••••"/>
              {form.confirm.length > 0 && !match && <div className="cp-hint bad">{t('cpMismatch')}</div>}
            </div>
          </div>

          <button className="btn btn-primary btn-block" style={{ marginTop:16, opacity: canSave ? 1 : .5 }} disabled={!canSave} onClick={() => setDone(true)}>
            {done ? <>{I.check({ width:18, height:18 })} {t('cpDone')}</> : t('cpSave')}
          </button>

          <button className="btn btn-ghost btn-block" style={{ marginTop:10 }} onClick={onBack}>{t('cpForgot')}</button>

          <div style={{ height: 30 }}/>
        </div>
      </div>
    </>
  );
}

// ────────────────────────────────────────────────────────────
// Notifications settings — email & push toggles
// ────────────────────────────────────────────────────────────
function NotifSettingsScreen({ user, onBack, onAvatar, onBell, onOrders, lang, onLang }) {
  const [s, setS] = useState({
    emPolicy: true, emPayment: true, emPromo: false,
    puPolicy: true, puDelivery: true, puPromo: false,
  });
  const toggle = (k) => setS(v => ({ ...v, [k]: !v[k] }));
  const Row = ({ k, title, sub }) => (
    <button className="toggle-row" onClick={() => toggle(k)}>
      <div style={{ flex:1, minWidth:0, textAlign:'left' }}>
        <div className="tr-title">{title}</div>
        <div className="tr-sub">{sub}</div>
      </div>
      <span className={`switch ${s[k] ? 'on' : ''}`}><span className="knob"/></span>
    </button>
  );
  return (
    <>
      <TopBar user={user} onAvatar={onAvatar} onBell={onBell} onOrders={onOrders} lang={lang} onLang={onLang} />
      <PageHead title={t('notifSettings')} onBack={onBack} />
      <div className="scrollarea">
        <div className="page-body">
          <p className="sect-sub" style={{ marginTop:2 }}>{t('nsIntro')}</p>

          <div className="ns-group">
            <div className="ns-head">{I.mail({ width:16, height:16 })}<span>{t('nsEmail')}</span></div>
            <div className="ns-list">
              <Row k="emPolicy" title={t('nsPolicy')} sub={t('nsPolicySub')} />
              <Row k="emPayment" title={t('nsPayment')} sub={t('nsPaymentSub')} />
              <Row k="emPromo" title={t('nsPromo')} sub={t('nsPromoSub')} />
            </div>
          </div>

          <div className="ns-group">
            <div className="ns-head">{I.bell({ width:16, height:16 })}<span>{t('nsPush')}</span></div>
            <div className="ns-list">
              <Row k="puPolicy" title={t('nsPolicy')} sub={t('nsPolicyPush')} />
              <Row k="puDelivery" title={t('nsDelivery')} sub={t('nsDeliverySub')} />
              <Row k="puPromo" title={t('nsPromo')} sub={t('nsPromoSub')} />
            </div>
          </div>

          <div style={{ height: 30 }}/>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { LoginScreen, HubScreen, SettingsDrawer, NotifDrawer, OrdersDrawer, NotifScreen, OrdersScreen, ComingSoon, SupportScreen, FaqScreen, ProfileScreen, ChangePasswordScreen, NotifSettingsScreen });