/* ===== BrewOS Landing — Proof of story (динамически от калькулятора) ===== */

const PROOF_MECH = [
{
  ic: 'idle', tag: 'Простой танков',
  before: 'Что танк освободился, узнавали через 1–2 дня. Варки планировали в Excel и по памяти — ЦКТ стоял пустым «между делом».',
  system: 'Статус «Готов к розливу» загорается в день готовности партии. Освободившийся танк сразу виден — следующую варку ставят без паузы.',
  metricUnit: 'с танка в год'
},
{
  ic: 'waste', tag: 'Брак и списания',
  before: 'Замеры плотности и температуры вели в блокноте. Иногда пропускали — и о проблеме партии узнавали, когда спасать было поздно.',
  system: 'График замеров с напоминаниями и алертами. Партия в зоне риска подсвечивается заранее — вмешиваются вовремя, а не постфактум.',
  metricFrom: '4,0%', metricTo: '1,5%', metricUnit: 'брака от объёма'
},
{
  ic: 'cost', tag: 'Цена и маржа',
  before: 'Себестоимость партии считали в конце месяца в таблицах. Топовые сорта продавали дешевле, чем могли — просто не видели реальную маржу.',
  system: 'Себестоимость и маржа каждой варки видны ещё до розлива. Цену на ходовые сорта выставляют осознанно, а не «как в прошлый раз».',
  metricFrom: 'наугад', metricTo: '+8%', metricUnit: 'к марже на топ-сортах'
}];


function ProofStory() {
  const m = React.useContext(window.CalcCtx);
  const r = m ? m.r : null;
  const ru = (n) => Math.round(n).toLocaleString('ru-RU');
  const mln = (n) => {
    if (n >= 1e6) return (n / 1e6).toLocaleString('ru-RU', { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + ' млн';
    return Math.round(n / 1000) + ' тыс';
  };

  const MECH = [
  { ...PROOF_MECH[0], metricFrom: (r ? r.varkiBase : 9) + ' варок', metricTo: (r ? r.varkiNew : 12) + ' варок' },
  { ...PROOF_MECH[1] },
  { ...PROOF_MECH[2] }];


  return (
    <section className="sec proof" id="proof">
      <div className="wrap">
        <div className="sec-head reveal">
          <div className="sec-tag">КАК ИМЕННО ЭТО РАБОТАЕТ</div>
          <h2 className="sec-h">Не обещания, а <span className="hl">механика результата</span></h2>
          <p className="sec-sub">Цифры считаются от тех же вводных, что и в калькуляторе выше. Для каждой —
            цепочка: что было, что конкретно поменяла система и что из этого вышло.</p>
        </div>

        <div className="proof-card reveal">
          <div className="proof-profile">
            <span className="pp-chip"><b>{m ? m.tanks : 8}</b> ЦКТ</span>
            <span className="pp-chip">~{m ? ru(m.vol) : '1000'} л партия</span>
            <span className="pp-chip">{m ? ru(m.margin) : '120'} ₽/л маржа</span>
            <span className="pp-chip">цикл {m ? m.cycle : 24} дн</span>
          </div>

          <div className="proof-mech">
            {MECH.map((mm, i) =>
            <div className="pm-col" key={i}>
                <div className="pm-ic"><LIcon n={mm.ic} s={20} /></div>
                <div className="pm-tag">{mm.tag}</div>

                <div className="pm-step before">
                  <span className="pm-k">Было</span>
                  <p>{mm.before}</p>
                </div>
                <div className="pm-arrow">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14" /><path d="m6 13 6 6 6-6" /></svg>
                </div>
                <div className="pm-step system">
                  <span className="pm-k brand-c">Что сделала BrewOS</span>
                  <p>{mm.system}</p>
                </div>

                <div className="pm-result">
                  <span className="rfrom">{mm.metricFrom}</span>
                  <svg width="22" height="14" viewBox="0 0 24 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 8h18" /><path d="m15 3 5 5-5 5" /></svg>
                  <span className="rto">{mm.metricTo}</span>
                  <span className="runit">{mm.metricUnit}</span>
                </div>
              </div>
            )}
          </div>

          <div className="proof-bottom">
            <div className="pb-result">
              <div className="pb-l">Итог за год при тех же мощностях</div>
              <div className="pb-n"><span className="cur">+</span>{r ? mln(r.total) : '3,7 млн'}<span className="cur"> ₽</span></div>
              <div className="pb-break">
                <span><b>+{r ? ru(r.extraLiters) : '27 000'} л</b> доп. выпуска ≈ {r ? mln(r.gainUtil) : '3,2 млн'} ₽</span>
                <span><b>−брак</b> ≈ {r ? mln(r.gainBrak) : '0,3 млн'} ₽</span>
                <span><b>время команды</b> ≈ {r ? mln(r.gainTime) : '0,2 млн'} ₽</span>
              </div>
              <a href="#calc" className="pb-link">Изменить вводные в калькуляторе →</a>
            </div>
            <blockquote className="pb-quote">
              <p>«Мы не стали варить по-другому — мы просто перестали терять. Танки больше не стоят пустыми,
                а к каждой партии теперь видно цену. Это и есть та прибыль, которой раньше не хватало».</p>
              <footer><span className="qa">Совладелец пивоварни</span><span className="qr">крафтовое производство</span></footer>
            </blockquote>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { ProofStory });