/* ============================================================
   employer.jsx — работодатель: карточка в вакансии и
   полноэкранный экран отзывов.
   Вместо стоимости оформления человек видит, кто его нанимает
   и что говорят те, кто уже там работает.
   ============================================================ */

/* ---------- звёзды ---------- */
function Stars({ value, size = 13, gap = 1.5 }) {
  return (
    <span style={{ display: 'inline-flex', gap }}>
      {[0, 1, 2, 3, 4].map(i => (
        <Icon key={i} name="star" size={size} stroke={2}
          fill={i < Math.round(value) ? 'currentColor' : 'none'}
          style={{ color: i < Math.round(value) ? 'var(--amber)' : 'var(--surface-3)' }} />
      ))}
    </span>
  );
}

/* ---------- логотип компании ---------- */
function EmployerLogo({ emp, size = 46, radius = 13 }) {
  return (
    <span style={{
      width: size, height: size, borderRadius: radius, flexShrink: 0, overflow: 'hidden',
      background: 'var(--indigo-900)', display: 'block',
      boxShadow: 'inset 0 0 0 1px rgba(255,255,255,.08)',
    }}>
      <img src={emp.logo} alt="" loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
    </span>
  );
}

/* ---------- один отзыв ---------- */
function ReviewCard({ q, lang, delay = 0 }) {
  return (
    <div style={{
      padding: '13px 14px', borderRadius: 'var(--r-lg)', background: 'var(--surface)',
      border: '1px solid var(--border)', boxShadow: 'var(--shadow-1)',
      animation: `fadeUp .45s var(--ease-out) ${delay}s both`,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <img src={q.avatar} alt="" loading="lazy"
          style={{ width: 38, height: 38, borderRadius: '50%', objectFit: 'cover', flexShrink: 0 }} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 14.5, fontWeight: 800, letterSpacing: '-.2px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {tr(q.who, lang)}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 3 }}>
            <Stars value={q.stars} size={12} />
            <span style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 600 }}>{tr(q.ago, lang)}</span>
          </div>
        </div>
      </div>
      <div style={{ fontSize: 14, lineHeight: 1.45, color: 'var(--text-2)', marginTop: 9 }}>{tr(q.text, lang)}</div>
    </div>
  );
}

/* ---------- карточка работодателя внутри вакансии ----------
   Компактная: кто нанимает и какой у него рейтинг. Всё остальное
   (плюсы, отзывы, распределение) — на экране отзывов.            */
function EmployerCard({ emp, lang, t, onOpen }) {
  return (
    <button onClick={onOpen} style={{
      display: 'flex', alignItems: 'center', gap: 11, width: 'calc(100% - 32px)',
      margin: '13px 16px 0', padding: '11px 13px', borderRadius: 'var(--r-lg)',
      background: 'var(--surface-2)', border: '1px solid var(--border)', textAlign: 'left',
    }}>
      <EmployerLogo emp={emp} size={44} />
      <span style={{ flex: 1, minWidth: 0 }}>
        <span style={{ display: 'block', fontSize: 15, fontWeight: 800, letterSpacing: '-.2px', lineHeight: 1.2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {tr(emp.name, lang)}
        </span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4 }}>
          <span style={{ fontSize: 14, fontWeight: 800 }}>{emp.rating.toFixed(1)}</span>
          <Stars value={emp.rating} size={13} />
          <span style={{ fontSize: 12.5, color: 'var(--text-3)', fontWeight: 600, whiteSpace: 'nowrap' }}>· {nReviews(emp.reviews, lang)}</span>
        </span>
      </span>
      <Icon name="chevron" size={18} stroke={2.4} style={{ color: 'var(--text-3)', flexShrink: 0 }} />
    </button>
  );
}

/* ---------- полноэкранные отзывы ---------- */
function EmployerSheet({ emp, job, lang, t, onClose }) {
  const total = emp.reviews;
  return (
    <PhoneOverlay>
    <div style={{
      position: 'absolute', inset: 0, zIndex: 50, display: 'flex', flexDirection: 'column',
      background: 'var(--bg)', animation: 'scaleIn .25s var(--ease-out) both',
    }}>
      {/* шапка */}
      <div style={{
        flexShrink: 0, padding: '46px 16px 14px', display: 'flex', alignItems: 'center', gap: 11,
        background: 'linear-gradient(160deg,var(--indigo-700),var(--indigo-900))',
      }}>
        <button onClick={onClose} style={{
          width: 38, height: 38, borderRadius: '50%', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: 'rgba(255,255,255,.12)', color: '#fff',
        }}><Icon name="chevDown" size={20} stroke={2.4} /></button>
        <EmployerLogo emp={emp} size={40} radius={11} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 15, fontWeight: 800, color: '#fff', letterSpacing: '-.3px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {tr(emp.name, lang)}
          </div>
          <div style={{ fontSize: 11.5, color: 'rgba(255,255,255,.55)', fontWeight: 600, marginTop: 1 }}>
            {tr(COUNTRIES[job.country].name, lang)} · {tr(job.title, lang)}
          </div>
        </div>
      </div>

      <div className="noscroll" style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '14px 16px 22px' }}>
        {/* сводка: оценка и распределение */}
        <div style={{ display: 'flex', gap: 16, alignItems: 'center', padding: '15px 16px', borderRadius: 'var(--r-xl)', background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-1)' }}>
          <div style={{ textAlign: 'center', flexShrink: 0 }}>
            <div style={{ fontSize: 34, fontWeight: 800, letterSpacing: '-1.2px', lineHeight: 1 }}>{emp.rating.toFixed(1)}</div>
            <div style={{ marginTop: 6 }}><Stars value={emp.rating} size={14} /></div>
            <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 600, marginTop: 5 }}>{total} {t.empOfWhich}</div>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            {[5, 4, 3, 2, 1].map((star, i) => (
              <div key={star} style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: i ? 5 : 0 }}>
                <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-3)', width: 8 }}>{star}</span>
                <span style={{ flex: 1, height: 6, borderRadius: 99, background: 'var(--surface-3)', overflow: 'hidden' }}>
                  <span style={{
                    display: 'block', height: '100%', borderRadius: 99, background: 'var(--amber)',
                    width: `${Math.round(emp.dist[i] * 100)}%`,
                    animation: `barGrow .7s var(--ease-out) ${i * 0.06}s both`, transformOrigin: 'left',
                  }} />
                </span>
                <span style={{ fontSize: 10.5, color: 'var(--text-3)', fontWeight: 600, width: 26, textAlign: 'right' }}>
                  {Math.round(emp.dist[i] * total)}
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* факты о работодателе */}
        <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
          {[
            { v: emp.hired, l: t.empHiredShort, icon: 'plane' },
            { v: emp.since, l: t.empSinceShort, icon: 'calendar' },
          ].map((x, i) => (
            <div key={i} style={{ flex: 1, minWidth: 0, padding: '12px 13px', borderRadius: 'var(--r-lg)', background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-1)' }}>
              <Icon name={x.icon} size={17} stroke={2.2} style={{ color: 'var(--amber-deep)' }} />
              <div style={{ fontSize: 19, fontWeight: 800, letterSpacing: '-.5px', marginTop: 6 }}>{x.v}</div>
              <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-3)', lineHeight: 1.3, marginTop: 2 }}>{x.l}</div>
            </div>
          ))}
        </div>

        {/* за что хвалят */}
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 12 }}>
          {emp.pluses.map((p, i) => (
            <span key={i} style={{
              display: 'inline-flex', alignItems: 'center', gap: 5, padding: '7px 12px', borderRadius: 99,
              background: 'color-mix(in srgb,var(--good) 12%,transparent)', color: 'var(--good)', fontSize: 12, fontWeight: 700,
            }}>
              <Icon name="check" size={12} stroke={3} />{tr(p, lang)}
            </span>
          ))}
        </div>

        {/* отзывы */}
        <div style={{ fontSize: 16, fontWeight: 800, letterSpacing: '-.3px', marginTop: 20, marginBottom: 10 }}>{t.empAll}</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
          {emp.quotes.map((q, i) => <ReviewCard key={i} q={q} lang={lang} delay={i * 0.05} />)}
        </div>

        <div style={{
          display: 'flex', gap: 9, marginTop: 14, padding: '12px 13px', borderRadius: 'var(--r-lg)',
          background: 'var(--surface-2)', border: '1px solid var(--border)',
        }}>
          <Icon name="shield" size={16} stroke={2.2} style={{ color: 'var(--brand)', flexShrink: 0, marginTop: 1 }} />
          <span style={{ fontSize: 12, lineHeight: 1.42, color: 'var(--text-3)', fontWeight: 500 }}>{t.empReviewNote}</span>
        </div>
      </div>
    </div>
    </PhoneOverlay>
  );
}

Object.assign(window, { Stars, EmployerLogo, EmployerCard, EmployerSheet, ReviewCard });