// Plazify · Supply landing — "Набор решений для управления и расчёта логистики wb" (4 cards)
// Reuses the approved /reviews feature-card pattern (glow blob + 3D icon + title + body, soft shadow + subtle hover via .feat-card).
const FEATURES_S = [
  { icon: window.__resources.blocks3d, glow: '#C992FF', title: 'Прогнозирование спроса', body: 'ML-модель прогнозирует спрос по товарам, складам и периодам на основе истории продаж, сезонности и дополнительных факторов.' },
  { icon: window.__resources.shield3d, glow: '#F19B6A', title: 'Риск OOS и контроль остатков', body: 'Показывает, где товар закончится, сколько дней запаса осталось и какие позиции требуют поставки в первую очередь.' },
  { icon: window.__resources.cart3d, glow: '#7177F6', title: 'Планирование поставок', body: 'Рассчитывает, что, куда и в каком объёме везти — по складам, регионам и кластерам, с учётом сроков доставки.' },
  { icon: window.__resources.box3d, glow: '#F096D7', title: 'Контроль затоваривания', body: 'Помогает не замораживать деньги в избыточных остатках и снижать расходы на хранение по каждому складу.' },
];

function FeatureCardS({ f }) {
  return (
    <div className="feat-card" style={{
      background: '#fff', borderRadius: 24, padding: 32,
      display: 'flex', flexDirection: 'column', gap: 16, position: 'relative', overflow: 'hidden', minHeight: 260,
    }}>
      <div style={{ position: 'absolute', top: -30, left: -10, width: 120, height: 120, borderRadius: '50%', background: f.glow, filter: 'blur(48px)', opacity: .36, pointerEvents: 'none' }} />
      <img src={f.icon} width="48" height="48" alt="" loading="lazy" decoding="async" style={{ position: 'relative' }} />
      <h3 className="plz-h4" style={{ margin: '8px 0 0', fontSize: 20, lineHeight: '24px' }}>{f.title}</h3>
      <p className="plz-body-tight" style={{ margin: 0, fontSize: 15 }}>{f.body}</p>
    </div>
  );
}

function Features() {
  return (
    <Section id="features" style={{ paddingTop: 128 }}>
      <div className="features-head" style={{ textAlign: 'center', marginBottom: 64 }}>
        <h2 className="plz-h2 sec-h2" style={{ margin: 0 }}>Набор решений для управления<br />и расчёта логистики wb</h2>
      </div>
      <div className="grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 28 }}>
        {FEATURES_S.map((f, i) => <FeatureCardS key={i} f={f} />)}
      </div>
    </Section>
  );
}
Object.assign(window, { Features });