// Plazify · Supply landing — "Контроль остатков по складам и регионам"
// Light section: framed product mockup (Склад view) inside a violet card with floating
// warehouse status pills (matches the Figma StatusSKU overlay) + two soft-shadow support cards.
const STOCK_STATUSES = [
  { label: 'Запас достаточен', kind: 'ok' },
  { label: 'Низкий запас', kind: 'warn' },
  { label: 'Критичный запас', kind: 'danger' },
  { label: 'Риск затоваривания', kind: 'warn' },
  { label: 'Поставка запланирована', kind: 'ok' },
  { label: 'Поставка в пути', kind: 'info' },
];
const STATUS_C = {
  ok:     { bg: '#E4F7F0', fg: '#40856C' },
  warn:   { bg: '#FCF1DE', fg: '#AE7331' },
  danger: { bg: '#FFEBEB', fg: '#D65151' },
  info:   { bg: '#EEF0F5', fg: '#5C5C62' },
};

function StatusChip({ label, kind }) {
  const c = STATUS_C[kind];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 8, background: '#fff',
      borderRadius: 100, padding: '9px 15px', boxShadow: '0 6px 16px -8px rgba(32,32,35,.22)',
      fontFamily: 'var(--plz-font-ui)', fontWeight: 600, fontSize: 13.5, color: c.fg, whiteSpace: 'nowrap',
    }}>
      <span style={{ width: 8, height: 8, borderRadius: '50%', background: c.fg, flex: '0 0 auto' }}></span>{label}
    </span>
  );
}

function SupportCard({ icon, title, body }) {
  return (
    <div className="feat-card stock-support-card" style={{ background: '#fff', borderRadius: 24, padding: 32, display: 'flex', alignItems: 'flex-start', gap: 22, position: 'relative', overflow: 'hidden', minHeight: 172 }}>
      <img src={icon} width="56" height="56" alt="" loading="lazy" decoding="async" style={{ flex: '0 0 auto' }} />
      <div>
        <h3 className="plz-h4" style={{ margin: '2px 0 8px', fontSize: 20 }}>{title}</h3>
        <p className="plz-body-tight" style={{ margin: 0, fontSize: 15 }}>{body}</p>
      </div>
    </div>
  );
}

function StockControl() {
  return (
    <Section id="stock" style={{ paddingTop: 144 }}>
      <div className="stock-head" style={{ textAlign: 'center', marginBottom: 64 }}>
        <h2 className="plz-h2 sec-h2" style={{ margin: '0 0 16px' }}>Контроль остатков<br />по складам и регионам</h2>
        <p className="plz-lead" style={{ margin: '0 auto', maxWidth: 760, fontSize: 19 }}>
          Модуль контролирует весь процесс подсортировки товара с учётом срока доставки
          от вашего региона до склада (СБВ, ДЛ, СДЭК).
        </p>
      </div>

      {/* violet card: floating status pills (left) + framed screenshot (right) */}
      <div className="stock-card" style={{ background: '#E0E4FF', borderRadius: 40, padding: 48, display: 'grid', gridTemplateColumns: '256px 1fr', gap: 40, alignItems: 'center' }}>
        <div className="stock-pills" style={{ display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'flex-start' }}>
          {STOCK_STATUSES.map((s, i) => <StatusChip key={i} {...s} />)}
        </div>
        <div style={{ borderRadius: 20, overflow: 'hidden', background: '#fff', boxShadow: 'var(--plz-shadow-card)' }}>
          <img src={window.__resources.skladScreen} alt="Контроль остатков по складам и регионам со статусами по каждой SKU" loading="lazy" decoding="async" style={{ display: 'block', width: '100%', height: 'auto', objectFit: 'contain' }} />
        </div>
      </div>

      <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, marginTop: 32 }}>
        <SupportCard icon={window.__resources.shield3d} title="Частичный и полный OOS"
          body="Платформа заранее показывает риск дефицита по товарам и складам и помогает сформировать поставку до того, как позиция выпадет из наличия." />
        <SupportCard icon={window.__resources.box3d} title="Контроль затоваривания"
          body="Видно, где остатки избыточны и где деньги заморожены в складе. Можно вовремя снизить цену, заказать рекламу и повысить оборачиваемость." />
      </div>
    </Section>
  );
}
Object.assign(window, { StockControl });