// Plazify · Supply landing — DARK product showcase: "Прогноз спроса и расчёт поставок"
// Reuses the approved /reviews dark product-section quality (full-bleed black, violet glow,
// framed product mockup in a violet card), adapted to the demand-forecast story.
// Mockup: «Управление остатками и поставками» — Поставки view (real product screenshot from Figma).
const FORECAST_PARAMS = [
  { t: 'Days of Stock', ru: 'Дней запаса', d: 'Сколько дней хватит товара при текущей скорости продаж.' },
  { t: 'Reorder Point', ru: 'Точка перезаказа', d: 'Остаток, на котором нужно заказывать, чтобы не попасть в дефицит с учётом логистики.' },
  { t: 'Safety Stock', ru: 'Страховой запас', d: 'Остаток, ниже которого нельзя опускаться при любой ситуации.' },
  { t: '+20 параметров', ru: 'Velocity, оборачиваемость и др.', d: 'Дополнительные показатели, на основе которых модель строит прогноз.' },
];

function ParamCard({ p }) {
  return (
    <div className="forecast-card" style={{ background: 'rgba(255,255,255,.04)', border: '1px solid rgba(255,255,255,.08)', borderRadius: 18, padding: '24px 26px', display: 'flex', flexDirection: 'column', gap: 10, minHeight: 184 }}>
      <div className="forecast-card-t" style={{ fontFamily: 'var(--plz-font-head)', fontWeight: 700, fontSize: 18, color: '#fff' }}>{p.t}</div>
      <div className="forecast-card-ru" style={{ fontFamily: 'var(--plz-font-ui)', fontWeight: 600, fontSize: 12.5, color: '#B8BCFF', letterSpacing: '.01em' }}>{p.ru}</div>
      <p className="forecast-card-d" style={{ margin: 0, fontFamily: 'var(--plz-font-head)', fontSize: 14.5, lineHeight: 1.5, color: 'rgba(255,255,255,.62)' }}>{p.d}</p>
    </div>
  );
}

function ForecastShowcase() {
  return (
    <section className="forecast-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">
        <div className="forecast-head" style={{ position: 'relative', maxWidth: 820, margin: '0 auto', textAlign: 'center' }}>
          <Eyebrow dark><MIcon name="chart" size={15} color="#B8BCFF" />ML прогноз продаж</Eyebrow>
          <h2 className="plz-h2 sec-h2" style={{ color: '#fff', margin: '20px 0 16px' }}>Прогноз спроса<br />и расчёт поставок</h2>
          <p className="forecast-intro" style={{ margin: 0, fontFamily: 'var(--plz-font-head)', fontSize: 19, lineHeight: 1.5, color: 'rgba(255,255,255,.66)' }}>
            На основе предиктивной аналитики и машинного обучения модель прогнозирует спрос на товары
            и рассчитывает, сколько и куда везти — на склад или кластер.
          </p>
        </div>

        {/* framed product mockup inside a violet card (matches Figma) */}
        <div className="forecast-mock" style={{ maxWidth: 1040, margin: '64px auto 0' }}>
          <div style={{ background: '#7F85F7', borderRadius: 28, padding: 8 }}>
            <div style={{ borderRadius: 22, overflow: 'hidden', background: '#fff', boxShadow: '0 24px 60px rgba(94,62,229,.3)' }}>
              <img src={window.__resources.postavkiScreen} alt="Расчёт и сборка поставок по складам в интерфейсе Plazify" loading="lazy" decoding="async" style={{ display: 'block', width: '100%', height: 'auto', objectFit: 'contain' }} />
            </div>
          </div>
        </div>

        {/* key parameters */}
        <div className="forecast-params-head" style={{ maxWidth: 900, margin: '80px auto 0', textAlign: 'center' }}>
          <h3 style={{ margin: 0, fontFamily: 'var(--plz-font-head)', fontWeight: 700, fontSize: 28, lineHeight: 1.15, color: '#fff' }}>Ключевые параметры,<br />на основе которых строится прогноз</h3>
        </div>
        <div className="grid-4 forecast-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, marginTop: 40 }}>
          {FORECAST_PARAMS.map((p, i) => <ParamCard key={i} p={p} />)}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { ForecastShowcase });