/* ============================================================
   screen_consult.jsx — платная консультация карьерного специалиста
   100 000 сум. Оплата: кнопка → шторка выбора Click / Payme →
   имитация перехода в приложение банка → экран «Оплачено».
   ============================================================ */

/* ---------- логотип платёжной системы ---------- */
function PayLogo({ method, size = 34 }) {
  return (
    <span style={{
      width: size, height: size, borderRadius: Math.round(size * 0.28), flexShrink: 0,
      background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden',
      boxShadow: 'inset 0 0 0 1px rgba(20,29,58,.1), 0 2px 6px rgba(20,29,58,.12)',
    }}>
      <img src={method.logo} alt={method.name} loading="lazy"
        style={{ width: '78%', height: '78%', objectFit: 'contain', display: 'block' }} />
    </span>
  );
}

/* ---------- шторка выбора способа оплаты ---------- */
function PaySheet({ t, onPick, onClose, priceText }) {
  const price = priceText || t.cons_price;
  return (
    <PhoneOverlay>
    <div style={{ position: 'absolute', inset: 0, zIndex: 50, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(9,13,30,.55)', backdropFilter: 'blur(3px)', animation: 'fadeIn .2s ease both' }} />
      <div style={{
        position: 'relative', borderRadius: '26px 26px 0 0', background: 'var(--surface)',
        padding: '10px 18px 20px', boxShadow: '0 -18px 50px rgba(9,13,30,.35)',
        animation: 'sheetUp .28s var(--ease-out) both',
      }}>
        <div style={{ width: 44, height: 4.5, borderRadius: 99, background: 'var(--surface-3)', margin: '0 auto 16px' }} />

        <div style={{ fontSize: 19, fontWeight: 800, letterSpacing: '-.4px' }}>{t.cons_paySheet}</div>
        <div style={{ fontSize: 13, color: 'var(--text-3)', fontWeight: 600, marginTop: 4 }}>{t.cons_paySheetSub}</div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 16 }}>
          {CONSULT.methods.map((m, i) => (
            <button key={m.id} onClick={() => onPick(m)} style={{
              height: 68, borderRadius: 'var(--r-lg)', padding: '0 16px', display: 'flex', alignItems: 'center', gap: 13,
              background: 'var(--surface-2)', border: '1.5px solid var(--border)', textAlign: 'left',
              animation: `fadeUp .35s var(--ease-out) ${0.05 + i * 0.06}s both`,
            }}>
              <PayLogo method={m} size={42} />
              <span style={{ flex: 1, minWidth: 0 }}>
                <span style={{ display: 'block', fontSize: 16.5, fontWeight: 800, letterSpacing: '-.2px' }}>{m.name}</span>
                <span style={{ display: 'block', fontSize: 12.5, color: 'var(--text-3)', fontWeight: 600, marginTop: 1 }}>{price}</span>
              </span>
              <Icon name="chevron" size={20} stroke={2.4} style={{ color: 'var(--text-3)', flexShrink: 0 }} />
            </button>
          ))}
        </div>

        <button onClick={onClose} style={{
          width: '100%', height: 48, marginTop: 12, borderRadius: 'var(--r-md)',
          color: 'var(--text-3)', fontSize: 15, fontWeight: 700, background: 'transparent',
        }}>{t.cons_cancel}</button>
      </div>
    </div>
    </PhoneOverlay>
  );
}

/* ---------- переход в приложение банка ---------- */
function PayProcessing({ t, method, priceText }) {
  return (
    <PhoneOverlay>
    <div style={{
      position: 'absolute', inset: 0, zIndex: 55, display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center', gap: 20,
      background: 'color-mix(in srgb, var(--bg) 82%, transparent)', backdropFilter: 'blur(8px)',
      animation: 'fadeIn .25s ease both',
    }}>
      <div style={{ position: 'relative', width: 108, height: 108, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <span style={{ position: 'absolute', inset: 0, borderRadius: '50%', border: '2.5px solid var(--surface-3)', borderTopColor: 'var(--amber)', animation: 'ringRotate .9s linear infinite' }} />
        <PayLogo method={method} size={64} />
      </div>
      <div style={{ textAlign: 'center' }}>
        <div style={{ fontSize: 17, fontWeight: 800 }}>{t.cons_processing}…</div>
        <div style={{ fontSize: 13.5, color: 'var(--text-2)', marginTop: 5 }}>{method.name} · {priceText || t.cons_price}</div>
      </div>
    </div>
    </PhoneOverlay>
  );
}

/* ---------- экран «оплачено» ---------- */
function ConsultPaid({ t, onClose, onAgain }) {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '0 22px 24px' }}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center', gap: 15 }}>
        <div style={{
          width: 92, height: 92, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: 'color-mix(in srgb,var(--good) 16%,transparent)', color: 'var(--good)',
          animation: 'popIn .6s var(--spring) both',
        }}>
          <Icon name="check" size={46} stroke={3} />
        </div>
        <div style={{ fontSize: 25, fontWeight: 800, letterSpacing: '-.6px', animation: 'fadeUp .5s .1s both' }}>{t.cons_paidTitle}</div>
        <div style={{ fontSize: 15.5, color: 'var(--text-2)', fontWeight: 500, lineHeight: 1.45, animation: 'fadeUp .5s .16s both' }}>{t.cons_paidSub}</div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, flexShrink: 0 }}>
        <button onClick={onClose} style={{
          height: 56, borderRadius: 'var(--r-lg)', background: 'linear-gradient(150deg,var(--amber-soft),var(--amber))',
          color: 'var(--indigo-900)', fontSize: 17, fontWeight: 800, boxShadow: '0 12px 28px var(--amber-glow)',
        }}>{t.cons_paidBtn}</button>
        {onAgain && (
          <button onClick={onAgain} style={{ height: 44, borderRadius: 'var(--r-md)', color: 'var(--text-3)', fontSize: 14, fontWeight: 700 }}>
            {t.cons_bookAnother}
          </button>
        )}
      </div>
    </div>
  );
}

/* ---------- статус после оплаты: повторная оплата закрыта ---------- */
function ConsultStatus({ t, lang, go, onDone }) {
  const steps = [
    { label: t.cons_stStep1, state: 'done' },
    { label: t.cons_stStep2, state: 'now' },
    { label: t.cons_stStep3, state: 'next' },
  ];
  return (
    <div className="noscroll" style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '0 16px 20px', display: 'flex', flexDirection: 'column', gap: 14 }}>
      {/* карточка статуса */}
      <div style={{ borderRadius: 'var(--r-xl)', background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-1)', padding: '18px 16px', animation: 'fadeUp .5s both' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{
            width: 46, height: 46, borderRadius: '50%', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
            background: 'color-mix(in srgb,var(--good) 15%,transparent)', color: 'var(--good)',
          }}><Icon name="check" size={24} stroke={2.8} /></span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 17, fontWeight: 800, letterSpacing: '-.4px' }}>{t.cons_stTitle}</div>
            <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.4, marginTop: 3 }}>{t.cons_stSub}</div>
          </div>
        </div>

        {/* три шага */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 0, marginTop: 18 }}>
          {steps.map((st, i) => (
            <React.Fragment key={i}>
              {i > 0 && <span style={{ flex: 1, height: 2.5, borderRadius: 99, background: st.state === 'next' ? 'var(--surface-3)' : 'var(--good)', margin: '0 6px', marginBottom: 22 }} />}
              <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, width: 86 }}>
                <span style={{
                  width: 30, height: 30, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
                  background: st.state === 'done' ? 'var(--good)' : st.state === 'now' ? 'var(--amber)' : 'var(--surface-2)',
                  color: st.state === 'next' ? 'var(--text-3)' : 'var(--indigo-900)',
                  boxShadow: st.state === 'now' ? '0 0 0 5px color-mix(in srgb,var(--amber) 22%,transparent)' : 'none',
                  fontSize: 13, fontWeight: 800,
                }}>{st.state === 'done' ? <Icon name="check" size={15} stroke={3} /> : i + 1}</span>
                <span style={{ fontSize: 11, fontWeight: 700, color: st.state === 'next' ? 'var(--text-3)' : 'var(--text)', textAlign: 'center', lineHeight: 1.2 }}>{st.label}</span>
              </span>
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* специалист */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 15px', borderRadius: 'var(--r-xl)', background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-1)', animation: 'fadeUp .5s .06s both' }}>
        <img src="img/cv_photo_f.jpg" alt="" style={{ width: 44, height: 44, borderRadius: '50%', objectFit: 'cover', flexShrink: 0 }} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 14.5, fontWeight: 800 }}>{tr(APPLICATION.manager, lang)}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 12, color: 'var(--good)', fontWeight: 600, marginTop: 2 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--good)' }} />{t.online || ''}
          </div>
        </div>
        <button onClick={() => go('advisor', 'manager')} style={{
          height: 40, padding: '0 15px', borderRadius: 'var(--r-full)', flexShrink: 0,
          background: 'var(--brand-tint)', color: 'var(--brand)', fontSize: 13, fontWeight: 800,
        }}>{t.cons_stWrite}</button>
      </div>

      {/* демо-кнопка: клиент отмечает, что консультация прошла */}
      <button onClick={onDone} style={{
        height: 52, borderRadius: 'var(--r-lg)', marginTop: 'auto',
        background: 'linear-gradient(150deg,var(--amber-soft),var(--amber))', color: 'var(--indigo-900)',
        fontSize: 15.5, fontWeight: 800, boxShadow: '0 10px 24px var(--amber-glow)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
        animation: 'fadeUp .5s .12s both',
      }}>
        <Icon name="check" size={19} stroke={2.6} />{t.cons_stDemo}
      </button>
    </div>
  );
}

/* ---------- развёрнутый NPS после консультации ---------- */
function npsColor(n) {
  return n <= 6 ? 'var(--hot)' : n <= 8 ? 'var(--amber)' : 'var(--good)';
}

function ConsultNps({ t, lang, onSubmit }) {
  const [score, setScore] = useState(null);
  const [aspects, setAspects] = useState([]);
  const [comment, setComment] = useState('');

  const list = score == null ? [] : score >= 9 ? t.nps_aspects_good : t.nps_aspects_bad;
  const toggle = (a) => setAspects(p => p.includes(a) ? p.filter(x => x !== a) : [...p, a]);

  return (
    <div className="noscroll" style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '0 16px 20px' }}>
      <div style={{ borderRadius: 'var(--r-xl)', background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-1)', padding: '18px 16px', animation: 'fadeUp .5s both' }}>
        <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: '-.4px' }}>{t.nps_title}</div>
        <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.45, marginTop: 5 }}>{t.nps_sub}</div>

        {/* шкала 0–10 */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(11, 1fr)', gap: 4, marginTop: 16 }}>
          {Array.from({ length: 11 }, (_, n) => {
            const on = score === n;
            return (
              <button key={n} onClick={() => setScore(n)} style={{
                height: 40, borderRadius: 9, fontSize: 13.5, fontWeight: 800,
                background: on ? npsColor(n) : 'var(--surface-2)',
                color: on ? '#fff' : 'var(--text-2)',
                border: on ? '1px solid transparent' : '1px solid var(--border)',
                transform: on ? 'scale(1.12)' : 'none', transition: 'all .15s var(--ease)',
              }}>{n}</button>
            );
          })}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 7 }}>
          <span style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--hot)' }}>{t.nps_low}</span>
          <span style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--good)' }}>{t.nps_high}</span>
        </div>
      </div>

      {/* аспекты: зависят от оценки */}
      {score != null && (
        <div key={score >= 9 ? 'g' : 'b'} style={{ borderRadius: 'var(--r-xl)', background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-1)', padding: '16px', marginTop: 12, animation: 'fadeUp .4s both' }}>
          <div style={{ fontSize: 15.5, fontWeight: 800, letterSpacing: '-.3px' }}>{score >= 9 ? t.nps_whyGood : t.nps_whyBad}</div>
          <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap', marginTop: 11 }}>
            {list.map((a, i) => {
              const on = aspects.includes(a);
              return (
                <button key={a} onClick={() => toggle(a)} style={{
                  padding: '9px 14px', borderRadius: 'var(--r-full)', fontSize: 13.5, fontWeight: 700,
                  background: on ? 'var(--brand-tint)' : 'var(--surface-2)',
                  border: on ? '1.5px solid var(--amber)' : '1.5px solid var(--border)',
                  color: 'var(--text)', animation: `chipFly .35s var(--spring) ${i * 0.04}s both`,
                }}>{a}</button>
              );
            })}
          </div>

          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-3)', marginTop: 15, marginBottom: 7 }}>{t.nps_comment}</div>
          <textarea value={comment} onChange={e => setComment(e.target.value)} placeholder={t.nps_commentPh}
            rows={3} style={{
              width: '100%', borderRadius: 'var(--r-md)', background: 'var(--surface-2)',
              border: '1px solid var(--border)', padding: '11px 13px', fontSize: 14.5,
              color: 'var(--text)', outline: 'none', resize: 'none', fontFamily: 'inherit', lineHeight: 1.45,
            }} />

          <button onClick={() => onSubmit({ score, aspects, comment })} style={{
            width: '100%', height: 52, marginTop: 12, borderRadius: 'var(--r-lg)',
            background: 'linear-gradient(150deg,var(--amber-soft),var(--amber))', color: 'var(--indigo-900)',
            fontSize: 15.5, fontWeight: 800, boxShadow: '0 10px 24px var(--amber-glow)',
          }}>{t.nps_send}</button>
        </div>
      )}
    </div>
  );
}

/* ---------- спасибо за оценку ---------- */
function ConsultRated({ t, lang, go }) {
  let nps = null;
  try { nps = JSON.parse(localStorage.getItem('chaz_nps')); } catch {}
  const score = nps ? nps.score : 10;
  const followUp = score >= 9 ? t.nps_thanksPromoter : score >= 7 ? t.nps_thanksPassive : t.nps_thanksDetractor;
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '0 22px 24px' }}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center', gap: 14 }}>
        <span style={{
          width: 88, height: 88, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: `color-mix(in srgb,${npsColor(score)} 16%,transparent)`, color: npsColor(score),
          animation: 'popIn .6s var(--spring) both',
        }}>
          <span style={{ fontSize: 34, fontWeight: 800, letterSpacing: '-1px' }}>{score}</span>
        </span>
        <div style={{ fontSize: 12, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '.5px', color: 'var(--text-3)', animation: 'fadeUp .5s .08s both' }}>{t.nps_yourScore}</div>
        <div style={{ fontSize: 23, fontWeight: 800, letterSpacing: '-.6px', animation: 'fadeUp .5s .12s both' }}>{t.nps_thanksTitle}</div>
        <div style={{ fontSize: 15, color: 'var(--text-2)', fontWeight: 500, lineHeight: 1.5, animation: 'fadeUp .5s .18s both' }}>{followUp}</div>
      </div>
      <button onClick={() => go(score >= 9 ? 'services' : 'stories')} style={{
        height: 54, borderRadius: 'var(--r-lg)', flexShrink: 0,
        background: 'linear-gradient(150deg,var(--amber-soft),var(--amber))', color: 'var(--indigo-900)',
        fontSize: 16, fontWeight: 800, boxShadow: '0 10px 24px var(--amber-glow)', animation: 'fadeUp .5s .24s both',
      }}>{t.cons_paidBtn}</button>
    </div>
  );
}

function ConsultScreen({ lang, theme, setLang, setTheme, t, go, consultState, setConsultState }) {
  const [stage, setStage] = useState('idle'); // idle | sheet | processing | paid
  const [method, setMethod] = useState(CONSULT.methods[0]);

  const pick = (m) => {
    setMethod(m);
    setStage('processing');
    setTimeout(() => { setStage('paid'); setConsultState('paid'); }, 1900);
  };

  const head = <Header sub={t.cons_sub} title={t.cons_navTitle} right={<QuickToggles lang={lang} setLang={setLang} theme={theme} setTheme={setTheme} />} t={t} />;

  // оплачено — повторная оплата закрыта, показываем статус
  if (consultState === 'paid' && stage !== 'paid') return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
      {head}
      <ConsultStatus t={t} lang={lang} go={go} onDone={() => setConsultState('done')} />
    </div>
  );
  // прошла — просим оценку
  if (consultState === 'done') return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
      {head}
      <ConsultNps t={t} lang={lang} onSubmit={(r) => {
        try { localStorage.setItem('chaz_nps', JSON.stringify(r)); } catch {}
        setConsultState('rated');
      }} />
    </div>
  );
  // оценка отправлена
  if (consultState === 'rated') return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
      {head}
      <ConsultRated t={t} lang={lang} go={go} />
    </div>
  );

  if (stage === 'paid') return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
      <Header sub={t.cons_sub} title={t.cons_navTitle} right={<QuickToggles lang={lang} setLang={setLang} theme={theme} setTheme={setTheme} />} t={t} />
      <ConsultPaid t={t} onClose={() => setStage('status')} onAgain={null} />
    </div>
  );

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, position: 'relative' }}>
      <Header sub={t.cons_sub} title={t.cons_navTitle} right={<QuickToggles lang={lang} setLang={setLang} theme={theme} setTheme={setTheme} />} t={t} />

      <div className="noscroll" style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '0 16px 20px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {/* price hero */}
        <div style={{
          borderRadius: 'var(--r-xl)', padding: '20px', color: '#fff', position: 'relative', overflow: 'hidden',
          background: 'radial-gradient(130% 100% at 80% 0%, #2a3a6e, #16203f 70%)', boxShadow: 'var(--shadow-2)',
          animation: 'fadeUp .5s both', flexShrink: 0,
        }}>
          <div style={{ position: 'absolute', top: -40, right: -30, width: 160, height: 160, borderRadius: '50%', background: 'radial-gradient(circle,var(--amber-glow),transparent 70%)' }} />
          <div style={{ position: 'relative' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, fontWeight: 800, letterSpacing: '.5px', textTransform: 'uppercase', color: 'var(--amber-soft)' }}>
              <Icon name="star" size={15} stroke={2.4} /> {t.cons_navTitle}
            </div>
            <div style={{ fontSize: 32, fontWeight: 800, letterSpacing: '-1px', marginTop: 12 }}>{t.cons_price}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 13.5, color: 'rgba(255,255,255,.65)', fontWeight: 600, marginTop: 6 }}>
              <Icon name="clock" size={15} stroke={2.2} /> {t.cons_duration}
            </div>
          </div>
        </div>

        {/* what you get */}
        <div style={{ borderRadius: 'var(--r-xl)', background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-1)', padding: '16px', animation: 'fadeUp .5s .06s both', flexShrink: 0 }}>
          <div style={{ fontSize: 15.5, fontWeight: 800, letterSpacing: '-.3px', marginBottom: 11 }}>{t.cons_whatTitle}</div>
          {t.cons_what.map((line, i) => (
            <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', padding: '8px 0', borderTop: i ? '1px solid var(--border)' : 'none' }}>
              <span style={{
                width: 22, height: 22, borderRadius: '50%', flexShrink: 0, marginTop: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: 'color-mix(in srgb,var(--good) 16%,transparent)', color: 'var(--good)',
              }}><Icon name="check" size={13} stroke={3} /></span>
              <span style={{ fontSize: 13.5, lineHeight: 1.42, color: 'var(--text-2)', fontWeight: 500 }}>{line}</span>
            </div>
          ))}
        </div>

        {/* who needs it */}
        <div style={{ display: 'flex', gap: 11, padding: '14px 15px', borderRadius: 'var(--r-xl)', background: 'var(--brand-tint)', animation: 'fadeUp .5s .12s both', flexShrink: 0 }}>
          <Icon name="users" size={19} stroke={2.2} style={{ color: 'var(--brand)', flexShrink: 0, marginTop: 1 }} />
          <div>
            <div style={{ fontSize: 13.5, fontWeight: 800 }}>{t.cons_whyTitle}</div>
            <div style={{ fontSize: 13, color: 'var(--text-2)', marginTop: 3, lineHeight: 1.42 }}>{t.cons_why}</div>
          </div>
        </div>

        {/* accepted payments — просто информация, выбор идёт в шторке */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 15px', borderRadius: 'var(--r-xl)', background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-1)', animation: 'fadeUp .5s .18s both', flexShrink: 0 }}>
          <span style={{ flex: 1, fontSize: 13, fontWeight: 700, color: 'var(--text-2)' }}>{t.cons_payTitle}</span>
          <div style={{ display: 'flex', gap: 8 }}>
            {CONSULT.methods.map(m => <PayLogo key={m.id} method={m} size={34} />)}
          </div>
        </div>
      </div>

      {/* sticky pay button */}
      <div style={{ flexShrink: 0, padding: '10px 16px 14px', borderTop: '1px solid var(--border)', background: 'color-mix(in srgb, var(--surface) 88%, transparent)', backdropFilter: 'blur(14px)' }}>
        <button onClick={() => setStage('sheet')} style={{
          width: '100%', height: 56, borderRadius: 'var(--r-lg)',
          background: 'linear-gradient(150deg,var(--amber-soft),var(--amber))', color: 'var(--indigo-900)',
          fontSize: 17, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
          boxShadow: '0 10px 24px var(--amber-glow)',
        }}>
          {t.cons_payBtn} · {t.cons_price}
        </button>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 9, color: 'var(--text-3)' }}>
          <Icon name="lock" size={13} stroke={2.2} style={{ flexShrink: 0 }} />
          <span style={{ fontSize: 11.5, fontWeight: 600, lineHeight: 1.35 }}>{t.cons_payNote}</span>
        </div>
      </div>

      {stage === 'sheet' && <PaySheet t={t} onPick={pick} onClose={() => setStage('idle')} />}
      {stage === 'processing' && <PayProcessing t={t} method={method} />}
    </div>
  );
}

/* ---------- крупный баннер оффера (главный экран) ---------- */
function ConsultBanner({ t, go, delay = 0 }) {
  return (
    <div style={{
      borderRadius: 'var(--r-xl)', overflow: 'hidden', position: 'relative', flexShrink: 0,
      background: 'linear-gradient(155deg, #ffc75a, #f5a524 55%, #e8890b)',
      boxShadow: '0 14px 34px var(--amber-glow)', color: 'var(--indigo-900)',
      animation: `fadeUp .5s var(--ease-out) ${delay}s both`,
    }}>
      <span style={{ position: 'absolute', top: -50, right: -34, width: 170, height: 170, borderRadius: '50%', background: 'rgba(255,255,255,.22)' }} />
      <span style={{ position: 'absolute', bottom: -60, left: -30, width: 140, height: 140, borderRadius: '50%', background: 'rgba(255,255,255,.12)' }} />

      <div style={{ position: 'relative', padding: '18px 18px 16px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <span style={{
            width: 34, height: 34, borderRadius: 11, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
            background: 'rgba(22,32,63,.14)',
          }}><Icon name="star" size={19} stroke={2.4} /></span>
          <span style={{ fontSize: 12, fontWeight: 800, letterSpacing: '.5px', textTransform: 'uppercase' }}>{t.cons_navTitle}</span>
        </div>

        <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-.6px', lineHeight: 1.15, marginTop: 12 }}>{t.cons_bannerTitle}</div>

        <div style={{ marginTop: 12 }}>
          {t.cons_bannerBullets.map((b, i) => (
            <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start', marginTop: i ? 7 : 0 }}>
              <Icon name="check" size={15} stroke={3} style={{ flexShrink: 0, marginTop: 1 }} />
              <span style={{ fontSize: 13.5, fontWeight: 600, lineHeight: 1.3 }}>{b}</span>
            </div>
          ))}
        </div>

        <button onClick={() => go('consult')} style={{
          width: '100%', height: 52, marginTop: 16, borderRadius: 'var(--r-md)',
          background: 'var(--indigo-900)', color: '#fff', fontSize: 15.5, fontWeight: 800,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
          boxShadow: '0 8px 20px rgba(11,16,38,.3)',
        }}>
          {t.cons_bannerBtn} <Icon name="arrow" size={19} stroke={2.6} />
        </button>

        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 9, opacity: .78 }}>
          <Icon name="shield" size={13} stroke={2.4} style={{ flexShrink: 0 }} />
          <span style={{ fontSize: 11.5, fontWeight: 700 }}>{t.cons_bannerNote}</span>
        </div>
      </div>
    </div>
  );
}

/* ---------- компактная промо-строка (вакансии, заявка) ---------- */
function ConsultPromo({ t, go, delay = 0 }) {
  return (
    <button onClick={() => go('consult')} style={{
      width: '100%', textAlign: 'left', display: 'flex', alignItems: 'center', gap: 13, padding: '15px',
      borderRadius: 'var(--r-xl)', border: '1.5px solid color-mix(in srgb,var(--amber) 45%,transparent)',
      background: 'color-mix(in srgb,var(--amber) 10%,var(--surface))', boxShadow: 'var(--shadow-1)',
      animation: `fadeUp .5s var(--ease-out) ${delay}s both`, flexShrink: 0,
    }}>
      <span style={{
        width: 46, height: 46, borderRadius: 14, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: 'linear-gradient(150deg,var(--amber-soft),var(--amber))', color: 'var(--indigo-900)',
      }}><Icon name="star" size={22} stroke={2.2} /></span>
      <span style={{ flex: 1, minWidth: 0 }}>
        <span style={{ display: 'block', fontSize: 14.5, fontWeight: 800, letterSpacing: '-.2px' }}>{t.cons_cardTitle}</span>
        <span style={{ display: 'block', fontSize: 12.5, color: 'var(--text-2)', marginTop: 3, lineHeight: 1.35 }}>{t.cons_cardSub}</span>
      </span>
      <Icon name="chevron" size={18} stroke={2.2} style={{ color: 'var(--amber-deep)', flexShrink: 0 }} />
    </button>
  );
}

Object.assign(window, { ConsultScreen, ConsultPromo, ConsultBanner, PaySheet, PayProcessing });