// Plazify · Reviews landing — dark product showcase (custom reviews UI) + multi-cabinet
function ProductThumb({ hue }) {
  return (
    <div style={{ width: 72, height: 72, borderRadius: 12, flex: '0 0 auto', overflow: 'hidden',
      background: `linear-gradient(135deg, hsl(${hue} 40% 90%), hsl(${hue} 45% 78%))`,
      display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke={`hsl(${hue} 40% 45%)`} strokeWidth="1.6">
        <rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="8.5" cy="8.5" r="1.5" /><path d="M21 15l-5-5L5 21" />
      </svg>
    </div>
  );
}

function StatusPill({ kind }) {
  const map = {
    sent: { bg: '#E4F7F0', fg: '#40856C', label: 'Ответ отправлен', dot: true },
    wait: { bg: '#FCF1DE', fg: '#AE7331', label: 'Ждёт отправки', dot: true },
  }[kind];
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, background: map.bg, color: map.fg,
      borderRadius: 100, padding: '6px 12px', fontFamily: 'var(--plz-font-ui)', fontWeight: 600, fontSize: 13 }}>
      <span style={{ width: 7, height: 7, borderRadius: '50%', background: map.fg }}></span>{map.label}
    </span>
  );
}

function ReviewRow({ hue, name, art, rating, color, review, reply, status, actions }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: 28, padding: '24px 0', borderTop: '1px solid #EEF0F5' }}>
      <div style={{ display: 'flex', gap: 14 }}>
        <ProductThumb hue={hue} />
        <div>
          <div style={{ fontFamily: 'var(--plz-font-ui)', fontWeight: 600, fontSize: 14, color: '#202023', lineHeight: 1.35 }}>{name}</div>
          <div style={{ fontFamily: 'var(--plz-font-ui)', fontSize: 12.5, color: '#95959E', marginTop: 6 }}>Арт. WB: {art}</div>
          <div style={{ marginTop: 10 }}><Stars n={rating} size={14} /></div>
        </div>
      </div>
      <div>
        <div style={{ fontFamily: 'var(--plz-font-ui)', fontSize: 13, color: '#95959E', marginBottom: 6 }}>Цвет: {color}</div>
        <p style={{ margin: '0 0 14px', fontFamily: 'var(--plz-font-ui)', fontSize: 14.5, lineHeight: 1.55, color: '#5C5C62' }}>{review}</p>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'var(--plz-gradient)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
            <MIcon name="message" size={12} color="#fff" stroke={2.4} />
          </span>
          <span style={{ fontFamily: 'var(--plz-font-ui)', fontWeight: 600, fontSize: 13.5, color: '#5E3EE5' }}>Ответ ассистента</span>
        </div>
        <div style={{ background: '#E0E4FF', borderRadius: 16, padding: '14px 16px' }}>
          <p style={{ margin: 0, fontFamily: 'var(--plz-font-ui)', fontSize: 14.5, lineHeight: 1.55, color: '#202023' }}>{reply}</p>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 14, flexWrap: 'wrap' }}>
          {actions ? (
            <React.Fragment>
              <span style={{ background: '#5E3EE5', color: '#fff', borderRadius: 10, padding: '9px 16px', fontFamily: 'var(--plz-font-ui)', fontWeight: 600, fontSize: 13.5 }}>Подтвердить и отправить</span>
              <span style={{ background: '#fff', color: '#202023', border: '1px solid #D5D7DB', borderRadius: 10, padding: '9px 16px', fontFamily: 'var(--plz-font-ui)', fontWeight: 600, fontSize: 13.5 }}>Редактировать</span>
              <span style={{ background: '#fff', color: '#5C5C62', border: '1px solid #D5D7DB', borderRadius: 10, padding: '9px 16px', fontFamily: 'var(--plz-font-ui)', fontWeight: 600, fontSize: 13.5 }}>Не отвечать</span>
            </React.Fragment>
          ) : <StatusPill kind={status} />}
        </div>
      </div>
    </div>
  );
}

function ReviewsShowcase() {
  return (
    <Section id="reviews-showcase" style={{ paddingTop: 160 }}>
      <div className="rs-dark" style={{ background: '#0A0A0A', borderRadius: 40, padding: '72px 64px', overflow: 'hidden' }}>
        <div className="rs-head" style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center', paddingBottom: 56 }}>
          <Eyebrow dark>Ответы на отзывы</Eyebrow>
          <h2 className="plz-h2 sec-h2" style={{ color: '#fff', margin: '20px 0 16px' }}>Все отзывы и вопросы — в одном рабочем экране</h2>
          <p className="rs-intro" style={{ margin: 0, fontFamily: 'var(--plz-font-head)', fontSize: 19, lineHeight: 1.5, color: 'rgba(255,255,255,.66)' }}>
            Ассистент готовит ответ, помечает статусы и ждёт вашего решения. Очереди: ждут ответа, ждут отправки, отправленные.
          </p>
        </div>
        {/* static product screenshot (uploaded PNG) */}
        <div className="rs-mock" style={{ maxWidth: 1080, margin: '0 auto' }}>
          <img src={window.__resources.reviewsInboxStatic} alt="Экран «Ответы на отзывы» в интерфейсе Plazify" loading="lazy" decoding="async" style={{ display: 'block', width: '100%', height: 'auto', objectFit: 'contain', borderRadius: 16 }} />
        </div>
      </div>
    </Section>
  );
}
Object.assign(window, { ReviewsShowcase });