// Plazify · Reviews landing — KEY block: гибкие настройки AI-ассистента + HITL control
const SETTINGS = [
  { icon: 'sliders', t: 'Стиль общения (Tone of voice)', d: 'Стандартный, премиальный, неформальный или разговорный — выбираете тон, в котором ассистент говорит от лица бренда.' },
  { icon: 'message', t: 'Персонализация', d: 'От лица коллектива или менеджера, обращение на «Вы», шкала эмпатии — от сочувственного до сдержанного.' },
  { icon: 'shield', t: 'Поведение и правила', d: 'Что упоминать, чего избегать, как реагировать на конкретные ситуации и оценки — задаёте правила поведения агента.' },
  { icon: 'tag', t: 'CTA и продающий элемент в ответах', d: 'Рекомендация товара в позитивных ответах и мягкий призыв к новой покупке. Глубины настройки CTA не даёт бесплатный нативный AI.', star: true },
  { icon: 'check', t: 'Школа ответов', d: 'Обучаете ассистента на своих эталонных ответах — он перенимает формулировки и манеру вашей команды.' },
];

function SettingItem({ s }) {
  return (
    <div className="key-setting-card" style={{
      background: s.star ? 'rgba(127,133,247,.14)' : 'rgba(255,255,255,.04)',
      border: s.star ? '1.5px solid rgba(127,133,247,.5)' : '1px solid rgba(255,255,255,.08)',
      borderRadius: 18, padding: '24px 26px', display: 'flex', gap: 18,
    }}>
      <span className="key-setting-ico" style={{ width: 42, height: 42, borderRadius: 12, flex: '0 0 auto', background: s.star ? 'var(--plz-gradient)' : 'rgba(255,255,255,.08)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
        <MIcon name={s.icon} size={20} color="#fff" stroke={2} />
      </span>
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6, flexWrap: 'wrap' }}>
          <h3 style={{ margin: 0, fontFamily: 'var(--plz-font-head)', fontWeight: 700, fontSize: 18, color: '#fff' }}>{s.t}</h3>
          {s.star && <span style={{ background: '#E0E4FF', color: '#5E3EE5', borderRadius: 100, padding: '3px 10px', fontFamily: 'var(--plz-font-head)', fontWeight: 600, fontSize: 12 }}>Уникальность рынка</span>}
        </div>
        <p style={{ margin: 0, fontFamily: 'var(--plz-font-head)', fontSize: 15, lineHeight: 1.5, color: 'rgba(255,255,255,.66)' }}>{s.d}</p>
      </div>
    </div>
  );
}

const HITL_MODES = [
  { t: 'Автоматически', d: 'Все ответы ассистента публикуются автоматически — для потока, которому вы доверяете.' },
  { t: 'Полуавтоматически', d: 'Безопасные ответы публикуются автоматически, а спорные случаи отправляются на проверку.' },
  { t: 'Вручную', d: 'Ассистент готовит ответ, но публикация происходит только после подтверждения человеком.' },
];

// Two product stories merged into one full-bleed dark section:
// (1) assistant configuration → (2) publication control (HITL)
function KeyConfigHITL() {
  return (
    <section className="key-section" style={{ background: '#0A0A0A', position: 'relative', overflow: 'hidden', marginTop: 160 }}>
      {/* top violet glow */}
      <div style={{ position: 'absolute', top: -80, left: '50%', transform: 'translateX(-50%)', width: 520, height: 320, background: 'radial-gradient(circle, rgba(94,62,229,.4), transparent 70%)', filter: 'blur(40px)', pointerEvents: 'none' }} />
      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', padding: '128px 40px' }} className="darkprod-inner">
        {/* ===== PART 1 — AI assistant settings (main key block) ===== */}
        <div className="key-head" style={{ position: 'relative', maxWidth: 820, margin: '0 auto', textAlign: 'center' }}>
          <Eyebrow dark><MIcon name="sliders" size={15} color="#B8BCFF" />Ключевой блок · уникальность</Eyebrow>
          <h2 className="plz-h2 sec-h2" style={{ color: '#fff', margin: '20px 0 16px' }}>Гибкие настройки AI-ассистента<br />для персональных ответов покупателям</h2>
          <p className="key-intro" style={{ margin: 0, fontFamily: 'var(--plz-font-head)', fontSize: 19, lineHeight: 1.5, color: 'rgba(255,255,255,.66)' }}>
            Настраивается сам агент: тон общения, поведение, персонализация, продающий CTA в ответах
            и собственная логика ответов под бренд. Это ядро отстройки от бесплатного нативного AI Wildberries.
          </p>
        </div>

        <div className="key-grid" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center', marginTop: 64 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            {SETTINGS.map((s, i) => <SettingItem key={i} s={s} />)}
          </div>
          <div style={{ position: 'sticky', top: 24 }}>
            <div style={{ borderRadius: 16, overflow: 'hidden', border: '1px solid #2a2a2a', boxShadow: '0 24px 60px rgba(94,62,229,.3)', background: '#fff' }}>
              <img src={window.__resources.assistantBuilder} alt="Создание нового ассистента — настройки тона, поведения и CTA" loading="lazy" decoding="async" style={{ width: '100%', display: 'block' }} />
            </div>
            <p style={{ textAlign: 'center', margin: '16px 0 0', fontFamily: 'var(--plz-font-ui)', fontSize: 13.5, color: 'rgba(255,255,255,.5)' }}>Шаг 3 — настройки ассистента: тон, персонализация, поведение, CTA</p>
          </div>
        </div>

        {/* ===== BRIDGE — transition between the two parts ===== */}
        <div className="key-bridge" style={{ maxWidth: 760, margin: '96px auto 0', textAlign: 'center' }}>
          <div style={{ height: 1, background: 'linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent)', marginBottom: 28 }} />
          <p style={{ margin: 0, fontFamily: 'var(--plz-font-head)', fontSize: 16.5, lineHeight: 1.5, color: 'rgba(255,255,255,.52)' }}>
            После настройки ассистента вы выбираете, как его ответы попадают в публичное поле.
          </p>
        </div>

        {/* ===== PART 2 — publication control / HITL (continuation) ===== */}
        <div className="key-hitl-head" style={{ maxWidth: 760, margin: '56px auto 64px', textAlign: 'center' }}>
          <Eyebrow dark>Human-in-the-Loop</Eyebrow>
          <h2 className="plz-h2 sec-h2" style={{ color: '#fff', margin: '20px 0 16px', fontSize: 36 }}>Полный контроль над публикацией</h2>
          <p className="key-intro" style={{ margin: 0, fontFamily: 'var(--plz-font-head)', fontSize: 18, lineHeight: 1.5, color: 'rgba(255,255,255,.66)' }}>
            AI готовит — вы решаете. Выбирайте режим публикации: от полного авто до ручного подтверждения каждого ответа.
          </p>
        </div>
        <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }}>
          {HITL_MODES.map((m, i) => (
            <div key={i} className="hitl-card" style={{ background: 'rgba(255,255,255,.04)', border: '1px solid rgba(255,255,255,.08)', borderRadius: 24, padding: 28, display: 'flex', flexDirection: 'column', gap: 14, minHeight: 240 }}>
              <div className="hitl-head" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span className="hitl-num" style={{ width: 34, height: 34, borderRadius: '50%', background: 'rgba(127,133,247,.16)', color: '#B8BCFF', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--plz-font-head)', fontWeight: 700, fontSize: 16, flex: '0 0 auto' }}>{i + 1}</span>
                <h3 style={{ margin: 0, fontFamily: 'var(--plz-font-head)', fontWeight: 700, fontSize: 20, color: '#fff' }}>{m.t}</h3>
              </div>
              <p style={{ margin: 0, fontFamily: 'var(--plz-font-head)', fontSize: 15.5, lineHeight: 1.5, color: 'rgba(255,255,255,.62)' }}>{m.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { KeyConfigHITL });