/* ============================================================
   screen_services.jsx — вкладка «Услуги».
   Четыре продукта: резюме (главный), консультация, курсы
   профессий, помощь с документами.
   Оплата резюме происходит ЗДЕСЬ, до интервью; после оплаты
   человека отправляем в Помощник — интервью идёт там.
   ============================================================ */

/* ---------- общая карточка услуги ---------- */
function ServiceCard({ icon, iconBg, title, sub, price, cta, onClick, delay = 0, badge, img, children }) {
  return (
    <div style={{
      borderRadius: 'var(--r-xl)', background: 'var(--surface)', border: '1px solid var(--border)',
      boxShadow: 'var(--shadow-1)', overflow: 'hidden', flexShrink: 0,
      animation: `fadeUp .5s var(--ease-out) ${delay}s both`,
    }}>
      {img && (
        <div style={{ position: 'relative', height: 118, overflow: 'hidden' }}>
          <img src={img} alt="" loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          {price && (
            <span style={{
              position: 'absolute', left: 14, bottom: 12, padding: '5px 11px', borderRadius: 99,
              background: 'var(--amber)', color: 'var(--indigo-900)', fontSize: 12, fontWeight: 800,
              boxShadow: '0 6px 16px rgba(9,13,30,.3)',
            }}>{price}</span>
          )}
        </div>
      )}
      <div style={{ padding: '16px 16px 14px' }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
        <span style={{
          width: 44, height: 44, borderRadius: 13, flexShrink: 0,
          background: iconBg || 'var(--brand-tint)', color: 'var(--amber-deep)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}><Icon name={icon} size={22} stroke={2.1} /></span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ fontSize: 16.5, fontWeight: 800, letterSpacing: '-.3px', lineHeight: 1.2 }}>{title}</div>
            {badge}
          </div>
          <div style={{ fontSize: 14, color: 'var(--text-2)', lineHeight: 1.4, marginTop: 3 }}>{sub}</div>
        </div>
      </div>
      {children}
      {cta && (
        <button onClick={onClick} style={{
          width: '100%', height: 48, marginTop: 13, borderRadius: 'var(--r-md)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
          background: 'linear-gradient(150deg,var(--amber-soft),var(--amber))',
          color: 'var(--indigo-900)', fontSize: 15, fontWeight: 800,
          boxShadow: '0 8px 20px var(--amber-glow)',
        }}>
          {cta}{price && !img && <span style={{ fontWeight: 700, opacity: .75 }}>· {price}</span>}
        </button>
      )}
      </div>
    </div>
  );
}

function CheckLine({ text, i }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 9, animation: `fadeUp .4s var(--ease-out) ${0.05 + i * 0.04}s both` }}>
      <span style={{
        width: 20, height: 20, borderRadius: '50%', flexShrink: 0, marginTop: 1,
        background: 'color-mix(in srgb,var(--good) 15%,transparent)', color: 'var(--good)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}><Icon name="check" size={12} stroke={3} /></span>
      <span style={{ fontSize: 14, lineHeight: 1.4, color: 'var(--text-2)', fontWeight: 500 }}>{text}</span>
    </div>
  );
}

/* ---------- карточка курса ---------- */
function CourseCard({ course, lang, sv, enrolled, onEnroll, delay }) {
  const [open, setOpen] = useState(false);
  return (
    <div style={{
      minWidth: 236, maxWidth: 236, flexShrink: 0, borderRadius: 'var(--r-lg)',
      background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-1)',
      padding: '14px 14px 12px', display: 'flex', flexDirection: 'column', gap: 9,
      animation: `chipFly .5s var(--spring) ${delay}s both`,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ width: 38, height: 38, borderRadius: 11, flexShrink: 0, background: 'var(--indigo-700)', color: 'var(--amber)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name={course.icon} size={19} stroke={2.1} />
        </span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 15, fontWeight: 800, letterSpacing: '-.2px' }}>{tr(course.title, lang)}</div>
          <div style={{ fontSize: 12.5, color: 'var(--text-3)', fontWeight: 600 }}>{tr(course.term, lang)} · {fmtMln(course.price, lang)}</div>
        </div>
      </div>
      <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.4 }}>{tr(course.sub, lang)}</div>
      <div style={{
        padding: '8px 10px', borderRadius: 'var(--r-md)', background: 'var(--brand-tint)',
        display: 'flex', flexDirection: 'column', gap: 1,
      }}>
        <span style={{ fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '.4px', color: 'var(--amber-deep)' }}>{sv.courseSalary}</span>
        <span style={{ fontSize: 16, fontWeight: 800, color: 'var(--text)' }}>{tr(course.salary, lang)}</span>
      </div>
      {open && (
        <div style={{ animation: 'fadeUp .3s both' }}>
          <div style={{ fontSize: 10.5, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '.4px', color: 'var(--text-3)', marginBottom: 5 }}>{sv.courseOpens}</div>
          {course.opens.map((o, i) => (
            <div key={i} style={{ display: 'flex', gap: 7, alignItems: 'flex-start', marginTop: 4 }}>
              <Icon name="briefcase" size={13} stroke={2.2} style={{ color: 'var(--brand)', flexShrink: 0, marginTop: 2 }} />
              <span style={{ fontSize: 12, color: 'var(--text-2)', lineHeight: 1.35 }}>{tr(o, lang)}</span>
            </div>
          ))}
        </div>
      )}
      {enrolled ? (
        <div style={{
          display: 'flex', alignItems: 'center', gap: 7, padding: '10px 11px', borderRadius: 'var(--r-md)',
          background: 'color-mix(in srgb,var(--good) 13%,transparent)', color: 'var(--good)',
          fontSize: 12, fontWeight: 700, lineHeight: 1.3,
        }}>
          <Icon name="check" size={15} stroke={2.6} style={{ flexShrink: 0 }} />
          {sv.courseEnrolled}
        </div>
      ) : (
        <div style={{ display: 'flex', gap: 7 }}>
          <button onClick={() => setOpen(o => !o)} style={{
            flex: 1, height: 40, borderRadius: 'var(--r-md)', background: 'var(--surface-2)',
            border: '1px solid var(--border)', fontSize: 12.5, fontWeight: 700, color: 'var(--text-2)',
          }}>{sv.learnMore}</button>
          <button onClick={onEnroll} style={{
            flex: 1.3, height: 40, borderRadius: 'var(--r-md)',
            background: 'linear-gradient(150deg,var(--amber-soft),var(--amber))',
            color: 'var(--indigo-900)', fontSize: 12.5, fontWeight: 800,
          }}>{sv.book}</button>
        </div>
      )}
    </div>
  );
}

/* ---------- экран ---------- */
function ServicesScreen({ lang, theme, setLang, setTheme, t, go,
  resumeState, setResumeState, consultPaid, courseId, setCourseId }) {
  const sv = SVC_UI[lang];
  const [pay, setPay] = useState(null);       // null | 'sheet' | 'processing'
  const [docsSent, setDocsSent] = useState(false);

  // оплата резюме: шторка → «переходим в банк» → оплачено → в Помощник
  const startResume = () => {
    if (resumeState === 'done') { go('profile'); return; }
    if (resumeState === 'paid') { go('advisor', 'resume'); return; }
    setPay('sheet');
  };
  const pickMethod = () => {
    setPay('processing');
    setTimeout(() => {
      setPay(null);
      setResumeState('paid');
      go('advisor', 'resume');
    }, 2200);
  };

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

      <div className="noscroll" style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '2px 16px 20px', display: 'flex', flexDirection: 'column', gap: 14 }}>

        {/* 1. резюме — главный продукт */}
        <ServiceCard icon="n_resume" img="img/creative_resume.jpg" title={sv.resumeTitle} sub={sv.resumeSub}
          price={resumeState === 'no' ? sv.resumePrice : null}
          cta={resumeState === 'done' ? sv.resumeDone : resumeState === 'paid' ? sv.resumeContinue : sv.resumeGo}
          onClick={startResume} delay={0}
          badge={resumeState !== 'no' && (
            <span style={{ padding: '3px 8px', borderRadius: 99, background: 'color-mix(in srgb,var(--good) 14%,transparent)', color: 'var(--good)', fontSize: 10.5, fontWeight: 800 }}>{sv.paid}</span>
          )}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }}>
            {sv.resumeBullets.map((b, i) => <CheckLine key={i} text={b} i={i} />)}
          </div>
          {resumeState === 'no' && (
            <div style={{ fontSize: 11.5, color: 'var(--text-3)', fontWeight: 600, marginTop: 11, lineHeight: 1.4 }}>{sv.resumePayNote}</div>
          )}
        </ServiceCard>

        {/* 2. консультация */}
        <ServiceCard icon="n_advisor" img="img/creative_consult.jpg" title={sv.consTitle} sub={sv.consSub}
          price={consultPaid ? null : sv.consPrice}
          cta={consultPaid ? t.cons_stTitle : sv.learnMore}
          onClick={() => go('consult')} delay={0.06}
          badge={consultPaid && (
            <span style={{ padding: '3px 8px', borderRadius: 99, background: 'color-mix(in srgb,var(--good) 14%,transparent)', color: 'var(--good)', fontSize: 11, fontWeight: 800 }}>{sv.paid}</span>
          )} />

        {/* 3. курсы */}
        <div style={{ animation: 'fadeUp .5s var(--ease-out) .12s both' }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', borderRadius: 'var(--r-lg)',
            background: 'linear-gradient(150deg,var(--indigo-700),var(--indigo-900))', overflow: 'hidden',
          }}>
            <img src="img/creative_courses.jpg" alt="" loading="lazy"
              style={{ width: 66, height: 66, borderRadius: 12, objectFit: 'cover', flexShrink: 0 }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 16, fontWeight: 800, letterSpacing: '-.4px', color: '#fff' }}>{sv.coursesTitle}</div>
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,.66)', lineHeight: 1.35, marginTop: 3 }}>{sv.coursesSub}</div>
            </div>
          </div>
          <div className="noscroll" style={{ display: 'flex', gap: 11, overflowX: 'auto', padding: '12px 2px 4px', margin: '0 -2px' }}>
            {COURSES.map((c, i) => (
              <CourseCard key={c.id} course={c} lang={lang} sv={sv}
                enrolled={courseId === c.id}
                onEnroll={() => setCourseId(c.id)} delay={0.05 * i} />
            ))}
          </div>
        </div>

        {/* 4. документы */}
        <ServiceCard icon="passport" img="img/creative_docs.jpg" title={sv.docsTitle} sub={sv.docsSub}
          cta={docsSent ? null : sv.docsCta}
          onClick={() => setDocsSent(true)} delay={0.18}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }}>
            {sv.docsBullets.map((b, i) => <CheckLine key={i} text={b} i={i} />)}
          </div>
          {docsSent && (
            <div style={{
              display: 'flex', alignItems: 'center', gap: 8, marginTop: 13, padding: '11px 13px',
              borderRadius: 'var(--r-md)', background: 'color-mix(in srgb,var(--good) 13%,transparent)',
              color: 'var(--good)', fontSize: 13, fontWeight: 700, lineHeight: 1.35,
            }}>
              <Icon name="check" size={16} stroke={2.6} style={{ flexShrink: 0 }} />
              {sv.docsDone}
            </div>
          )}
        </ServiceCard>
      </div>

      {pay === 'sheet' && <PaySheet t={t} priceText={sv.resumePrice} onPick={pickMethod} onClose={() => setPay(null)} />}
      {pay === 'processing' && <PayProcessing t={t} method={CONSULT.methods[0]} priceText={sv.resumePrice} />}
    </div>
  );
}

Object.assign(window, { ServicesScreen });