// Plazify · MAIN hub page (/) — HITL philosophy (dark) + unified platform + trust
// Reuses the approved dark product-section quality and the lilac-panel / trust styling.

/* ===== 1) Human-in-the-Loop philosophy (dark, platform-level) ============== */
const HITL_STEPS = [
  { icon: 'message', t: 'AI готовит ответы', d: 'Ассистент анализирует отзывы и вопросы покупателей и формирует персональные ответы под ваш бренд.' },
  { icon: 'chart', t: 'ML считает спрос и поставки', d: 'Модель прогнозирует спрос, оценивает риск OOS и затоваривания и предлагает план поставки по складам.' },
  { icon: 'check', t: 'Вы подтверждаете', d: 'Команда выбирает режим публикации ответов и подтверждает ключевые операционные действия — контроль остаётся за человеком.' },
];

function HITL() {
  return (
    <section className="hitl-section" style={{ background: '#0A0A0A', position: 'relative', overflow: 'hidden', marginTop: 160 }}>
      <div style={{ position: 'absolute', top: -80, left: '50%', transform: 'translateX(-50%)', width: 540, 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">
        <div className="hitl-head" style={{ position: 'relative', maxWidth: 820, margin: '0 auto', textAlign: 'center' }}>
          <Eyebrow dark>Human-in-the-Loop</Eyebrow>
          <h2 className="plz-h2 sec-h2" style={{ color: '#fff', margin: '20px 0 16px' }}>AI готовит — вы подтверждаете</h2>
          <p className="hitl-intro" style={{ margin: 0, fontFamily: 'var(--plz-font-head)', fontSize: 19, lineHeight: 1.5, color: 'rgba(255,255,255,.66)' }}>
            Plazify не действует за вас в одиночку. Система готовит ответы, прогнозы и рекомендации —
            а публичные ответы и операционные решения остаются под контролем команды.
          </p>
        </div>
        <div className="grid-3 hitl-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28, marginTop: 64 }}>
          {HITL_STEPS.map((s, 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: 256 }}>
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <span className="hitl-card-icon" style={{ width: 44, height: 44, borderRadius: 12, flex: '0 0 auto', background: 'var(--plz-gradient)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <MIcon name={s.icon} size={20} color="#fff" stroke={2} />
                </span>
              </div>
              <h3 className="hitl-card-title" style={{ margin: 0, minHeight: 56, display: 'flex', alignItems: 'flex-start', fontFamily: 'var(--plz-font-head)', fontWeight: 700, fontSize: 21, lineHeight: 1.3, color: '#fff' }}>{s.t}</h3>
              <p className="hitl-card-body" style={{ margin: 0, fontFamily: 'var(--plz-font-head)', fontSize: 15.5, lineHeight: 1.5, color: 'rgba(255,255,255,.64)' }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== 2) Unified platform (lilac panel) =================================== */
const UNIFIED = [
  { icon: 'layers', t: 'Несколько кабинетов и брендов', d: 'Подключайте кабинеты WB и бренды и работайте с ними в одном окне.' },
  { icon: 'message', t: 'Отзывы и поставки вместе', d: 'Оба модуля живут в одной системе — без разрозненных таблиц и сервисов.' },
  { icon: 'sliders', t: 'Разные сценарии работы', d: 'Свои настройки и режимы под товары, бренды и операционные процессы.' },
  { icon: 'shield', t: 'Единая логика контроля', d: 'Общие правила доступа и подтверждения действий для всей команды.' },
];

function Unified() {
  return (
    <Section style={{ paddingTop: 144 }} id="unified">
      <div className="unified-head" style={{ textAlign: 'center', marginBottom: 64 }}>
        <h2 className="plz-h2 sec-h2" style={{ margin: 0 }}>Единая платформа для разных брендов, <br />кабинетов и операционных сценариев.</h2>
      </div>
      <div className="unified-panel" style={{ background: '#E0E4FF', borderRadius: 40, padding: 'clamp(48px, 5vw, 72px)' }}>
        <div className="grid-4 unified-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
          {UNIFIED.map((u, i) => (
            <div key={i} className="unified-card" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <span className="unified-card-icon" style={{ width: 48, height: 48, borderRadius: 14, background: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 6px 14px -6px rgba(77,42,223,.35)' }}>
                <MIcon name={u.icon} size={22} color="#5E3EE5" stroke={2} />
              </span>
              <h3 className="unified-card-title" style={{ margin: 0, minHeight: 48, fontFamily: 'var(--plz-font-head)', fontWeight: 700, fontSize: 19, lineHeight: 1.25, color: '#1A1043' }}>{u.t}</h3>
              <p className="unified-card-body" style={{ margin: 0, fontFamily: 'var(--plz-font-head)', fontSize: 15.5, lineHeight: 1.5, color: '#4a4470' }}>{u.d}</p>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

/* ===== 3) Trust block (compact) ============================================ */
const TRUST = [
  { icon: 'shield', t: 'Резидент Сколково', d: 'Аккредитованный участник ИЦ «Сколково».' },
  { icon: 'lock', t: 'Официальное API Wildberries', d: 'Подключение через официальное API WB.' },
  { icon: 'layers', t: 'ООО «Система Координат»', d: 'Оператор платформы и разработчик Plazify.' },
  { icon: 'check', t: '7 дней без привязки карты', d: 'Тестовый период без платёжных данных.' },
];

function Trust() {
  return (
    <Section style={{ paddingTop: 128, paddingBottom: 0 }} id="trust">
      <div className="grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 28 }}>
        {TRUST.map((t, i) => (
          <div key={i} style={{ background: '#FBFBFE', border: '1px solid #E7E7EF', borderRadius: 20, padding: 32, display: 'flex', flexDirection: 'column', gap: 12, minHeight: 208, boxShadow: '0 6px 18px -12px rgba(32,32,35,.12), 0 1px 3px -2px rgba(32,32,35,.08)' }}>
            <span style={{ width: 40, height: 40, borderRadius: 12, background: '#F4F5FE', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
              <MIcon name={t.icon} size={20} color="#5E3EE5" stroke={2} />
            </span>
            <h3 style={{ margin: 0, minHeight: 44, fontFamily: 'var(--plz-font-head)', fontWeight: 700, fontSize: 16.5, lineHeight: 1.3, color: '#202023' }}>{t.t}</h3>
            <p style={{ margin: 0, fontFamily: 'var(--plz-font-head)', fontSize: 14, lineHeight: 1.45, color: '#5C5C62' }}>{t.d}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}
Object.assign(window, { HITL, Unified, Trust });