// Plazify · Supply landing — dark CTA band + 5 steps + FAQ (reuses the approved /reviews patterns)
function CtaDark() {
  return (
    <Section id="cta" style={{ paddingTop: 160 }}>
      <div style={{ background: '#0A0A0A', borderRadius: 40, padding: '72px 64px', position: 'relative', overflow: 'hidden', display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center' }} className="cta-dark">
        <div style={{ position: 'absolute', right: 120, top: -60, width: 360, height: 280, background: 'radial-gradient(circle, rgba(94,62,229,.45), transparent 70%)', filter: 'blur(30px)', pointerEvents: 'none' }} />
        <div style={{ position: 'relative' }}>
          <h2 className="plz-h2 sec-h2" style={{ color: '#fff', margin: '0 0 18px', fontSize: 38 }}>Автоматизируйте процессы логистики на Wildberries</h2>
          <p style={{ margin: '0 0 36px', fontFamily: 'var(--plz-font-head)', fontSize: 19, lineHeight: 1.5, color: 'rgba(255,255,255,.7)', maxWidth: 640 }}>
            Подключите прогноз спроса, контроль остатков и расчёт поставок по складам и кластерам.
            7 дней бесплатно, без привязки карты.
          </p>
          <div className="cta-actions" style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <MBtn variant="primary" icon="arrowRight" big onClick={() => goForm('cta_dark_try')}>Попробовать 7 дней бесплатно</MBtn>
            <MBtn variant="ghostDark" big onClick={() => goForm('cta_dark_demo')}>Запросить демо</MBtn>
          </div>
        </div>
        <img src={window.__resources.basket3d} width="190" height="190" alt="" loading="lazy" decoding="async" className="cta-3d" style={{ position: 'relative', filter: 'drop-shadow(0 24px 50px rgba(94,62,229,.5))' }} />
      </div>
    </Section>
  );
}

const STEPS_S = [
  { n: 1, t: 'Зарегистрируйтесь в Plazify', d: 'Создайте аккаунт и выберите модуль прогноза спроса и поставок.' },
  { n: 2, t: 'Подключите кабинет WB', d: 'Добавьте официальный API-ключ Wildberries — данные подтянутся автоматически.' },
  { n: 3, t: 'Проверьте данные и прогноз', d: 'Система построит прогноз спроса и покажет риски по остаткам.' },
  { n: 4, t: 'Сформируйте поставку', d: 'Получите расчёт, куда и сколько везти по складам и кластерам.' },
  { n: 5, t: 'Подтвердите и выгрузите', d: 'Проверьте расчёт, подтвердите поставку и выгрузите данные для работы.' },
];

function Steps() {
  return (
    <Section id="steps" style={{ paddingTop: 144 }}>
      <div className="steps-head" style={{ textAlign: 'center', marginBottom: 64 }}>
        <Eyebrow>Подключение</Eyebrow>
        <h2 className="plz-h2 sec-h2" style={{ margin: '18px 0 0' }}>Подключите модуль поставок<br />всего за 5 шагов</h2>
      </div>
      <div className="grid-5" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 234px)', justifyContent: 'center', gap: 24 }}>
        {STEPS_S.map(s => (
          <div key={s.n} className="step-card" style={{ background: '#7F85F7', borderRadius: 28, padding: 28, display: 'flex', flexDirection: 'column', minHeight: 250 }}>
            <span className="step-num" style={{ width: 42, height: 42, borderRadius: '50%', background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--plz-font-head)', fontWeight: 700, fontSize: 20, color: '#202023', flex: '0 0 auto', marginBottom: 24 }}>{s.n}</span>
            <h3 className="step-title" style={{ fontFamily: 'var(--plz-font-head)', fontWeight: 700, fontSize: 18, lineHeight: 1.25, color: '#fff', margin: 0, width: 180, minHeight: 'calc(2 * 1.25 * 18px)' }}>{s.t}</h3>
            <p className="step-body" style={{ fontFamily: 'var(--plz-font-head)', fontSize: 14, lineHeight: 1.45, color: 'rgba(255,255,255,.88)', margin: '12px 0 0' }}>{s.d}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}

const { useState: useStateFs } = React;
const QA_S = [
  { q: 'Насколько точен прогноз спроса?', a: 'Точность зависит от качества и объёма исторических данных. Модель учитывает продажи, остатки, сезонность, рекламную активность и другие доступные факторы.' },
  { q: 'Какие данные используются для прогноза?', a: 'История продаж, остатки, заказы, статусы поставок, склады и регионы, рекламные периоды и другие параметры карточек и товаров, доступные через подключение кабинета.' },
  { q: 'Помогает ли модуль избежать out-of-stock?', a: 'Да. Система заранее показывает товары и склады, где возникает риск частичного или полного OOS, количество дней запаса и позиции, которые требуют поставки.' },
  { q: 'Можно ли контролировать затоваривание?', a: 'Да. Модуль показывает избыточные остатки и помогает не замораживать лишние деньги в товаре — вовремя снизить цену, заказать рекламу и повысить оборачиваемость.' },
  { q: 'Система сама отправляет поставку в WB?', a: 'Нет. Система рассчитывает и предлагает поставку, а решение принимает и подтверждает пользователь. Это соответствует HITL-подходу Plazify: система считает — вы подтверждаете.' },
  { q: 'Безопасно ли подключать кабинет Wildberries?', a: 'Подключение выполняется через официальное API Wildberries. Данные используются для расчёта прогнозов и управления поставками. Оператор — ООО «Система Координат», резидент Сколково.' },
];

function FAQItemS({ item, open, onToggle }) {
  return (
    <div style={{ background: '#fff', borderRadius: 24, boxShadow: 'var(--plz-shadow-card)', overflow: 'hidden' }}>
      <button onClick={onToggle} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, background: 'none', border: 'none', cursor: 'pointer', padding: 24, textAlign: 'left' }}>
        <span className="plz-h4" style={{ fontSize: 19 }}>{item.q}</span>
        <span style={{ width: 40, height: 40, borderRadius: '50%', border: '1px solid #D5D7DB', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }}>
          <MIcon name="chevronDown" size={18} color="#202023" />
        </span>
      </button>
      {open && <p className="plz-body" style={{ margin: 0, padding: '0 24px 24px', fontSize: 16, maxWidth: 820 }}>{item.a}</p>}
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = useStateFs(0);
  return (
    <Section style={{ paddingTop: 128 }} max={920} id="faq">
      <div style={{ textAlign: 'center', marginBottom: 56 }}>
        <h2 className="plz-h2 sec-h2" style={{ margin: 0 }}>Вопросы и ответы</h2>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
        {QA_S.map((item, i) => (
          <FAQItemS key={i} item={item} open={open === i} onToggle={() => {
            const next = open === i ? -1 : i;
            setOpen(next);
            if (next === i) track('faq_open', { q: item.q });
          }} />
        ))}
      </div>
    </Section>
  );
}
Object.assign(window, { CtaDark, Steps, FAQ });
