// Interactive payback calculator + Checkpoints

const { useState: useCalcState, useMemo } = React;

function Calculator() {
  const [load, setLoad] = useCalcState(100); // greenhouse load %
  const [price, setPrice] = useCalcState(145); // tomato/cucumber price grn/kg
  const [labor, setLabor] = useCalcState(100); // labor cost %
  const [fishPrice, setFishPrice] = useCalcState(200); // fish price grn/kg
  const [milkPrice, setMilkPrice] = useCalcState(14); // milk price grn/kg

  // Base figures (€ thousands)
  const BASE = {
    greenhouseRev: 2050, 
    fishRev: 707.4,
    milkRev: 148.5,
    restRev: 102.8,
    opex: 1075,
    laborOpex: 337,
  };

  const calc = useMemo(() => {
    const ghRevenue = BASE.greenhouseRev * (load / 100) * (price / 145);
    const fishRevenue = BASE.fishRev * (fishPrice / 200);
    const milkRevenue = BASE.milkRev * (milkPrice / 14);
    
    const totalRevenue = ghRevenue + fishRevenue + milkRevenue + BASE.restRev;
    const adjOpex = (BASE.opex - BASE.laborOpex) + BASE.laborOpex * (labor / 100);
    const ebitda = totalRevenue - adjOpex;
    const margin = ebitda > 0 ? (ebitda / totalRevenue) * 100 : 0;
    const paybackMin = ebitda > 0 ? (CAPEX_TOTAL_MIN / 1000) / (ebitda / 1000) : 999;
    const paybackMax = ebitda > 0 ? (CAPEX_TOTAL_MAX / 1000) / (ebitda / 1000) : 999;
    const breakEvenPct = totalRevenue > 0 ? (adjOpex / totalRevenue) * 100 : 100;
    
    return { totalRevenue, adjOpex, ebitda, margin, paybackMin, paybackMax, breakEvenPct };
  }, [load, price, labor, fishPrice, milkPrice]);

  const baseEbitda = 1935;
  const ebitdaDelta = calc.ebitda - baseEbitda;

  return (
    <section className="section" id="calc">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Interactive math model</div>
            <h2>Калькулятор окупності</h2>
            <p>Інтерактивна модель чутливості. Перетягніть повзунки, щоб побачити вплив на виручку, EBITDA та строк окупності.</p>
          </div>
          <span className="pill">Сценарне моделювання</span>
        </div>

        <div className="calc-block">
          <div className="calc-card">
            <h3>Вхідні параметри</h3>
            <div className="sub">Базові значення відповідають консервативному сценарію Pre-Feasibility (€3.01 млн виручки, €1.93 млн EBITDA).</div>

            <div className="slider-row">
              <div className="head">
                <div><span className="lab">Завантаження теплиці</span><span className="base">база 100%</span></div>
                <div className={`val ${load < 100 ? "warn" : load > 100 ? "boost" : ""}`}>{load}%</div>
              </div>
              <input type="range" min="50" max="100" step="1" value={load} onChange={e => setLoad(+e.target.value)} />
              <div className="ticks"><span>50%</span><span>75%</span><span>100%</span></div>
            </div>

            <div className="slider-row">
              <div className="head">
                <div><span className="lab">Ціна на томати/огірки</span><span className="base">база 145 грн/кг</span></div>
                <div className={`val ${price < 145 ? "warn" : price > 145 ? "boost" : ""}`}>{price} грн/кг</div>
              </div>
              <input type="range" min="100" max="200" step="1" value={price} onChange={e => setPrice(+e.target.value)} />
              <div className="ticks"><span>100</span><span>145</span><span>200</span></div>
            </div>

            <div className="slider-row">
              <div className="head">
                <div><span className="lab">Ціна на свіжу рибу</span><span className="base">база 200 грн/кг</span></div>
                <div className={`val ${fishPrice < 200 ? "warn" : fishPrice > 200 ? "boost" : ""}`}>{fishPrice} грн/кг</div>
              </div>
              <input type="range" min="120" max="300" step="5" value={fishPrice} onChange={e => setFishPrice(+e.target.value)} />
              <div className="ticks"><span>120</span><span>200</span><span>300</span></div>
            </div>

            <div className="slider-row">
              <div className="head">
                <div><span className="lab">Ціна на молоко (Raw gate)</span><span className="base">база 14 грн/кг</span></div>
                <div className={`val ${milkPrice < 14 ? "warn" : milkPrice > 14 ? "boost" : ""}`}>{milkPrice} грн/кг</div>
              </div>
              <input type="range" min="10" max="25" step="0.5" value={milkPrice} onChange={e => setMilkPrice(+e.target.value)} />
              <div className="ticks"><span>10</span><span>14</span><span>25</span></div>
            </div>

            <div className="slider-row">
              <div className="head">
                <div><span className="lab">Вартість робочої сили</span><span className="base">база 100%</span></div>
                <div className={`val ${labor > 100 ? "warn" : ""}`}>{labor}%</div>
              </div>
              <input type="range" min="100" max="150" step="1" value={labor} onChange={e => setLabor(+e.target.value)} />
              <div className="ticks"><span>100%</span><span>125%</span><span>150%</span></div>
            </div>

            <div style={{marginTop: 18, padding: "14px 16px", background: "var(--surface-2)", borderRadius: 10, fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.55}}>
              <div style={{display: "flex", justifyContent: "space-between", marginBottom: 4}}>
                <span>Точка беззбитковості (Break-Even)</span>
                <strong style={{color: "var(--ink)", fontVariantNumeric: "tabular-nums"}}>{calc.breakEvenPct.toFixed(1)}% від проектної потужності</strong>
              </div>
              <div style={{display: "flex", justifyContent: "space-between"}}>
                <span>EBITDA маржа в поточному сценарії</span>
                <strong style={{color: calc.margin > 50 ? "var(--emerald-2)" : "#b54708", fontVariantNumeric: "tabular-nums"}}>{calc.margin.toFixed(1)}%</strong>
              </div>
            </div>

            <div className="sources">
              <div className="head">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
                Джерела даних
              </div>
              Цінові та витратні припущення базуються на відкритих ринкових індикаторах (станом на 2026):
              <div className="chips">
                <span className="chip">UEEX · ціни на газ та зерно</span>
                <span className="chip">Tridge · оптові benchmark</span>
                <span className="chip">Work.ua · медіани зарплат</span>
                <span className="chip">European wholesale produce indicators</span>
                <span className="chip">Сільпо / Novus · ритейл</span>
              </div>
              <div style={{marginTop: 10, fontSize: 11.5, color: "var(--muted)"}}>Курс НБУ/Fexant: 1 EUR = 51.60 грн. Усі діапазони — попередні; підлягають уточненню в Bankable моделі.</div>
            </div>
            
            <div style={{marginTop: 14, padding: "12px", border: "1px dashed var(--slate-line)", borderRadius: 8, fontSize: 12, color: "var(--ink-2)"}}>
              <strong>Примітка:</strong> Для моделювання обрано продукти з найбільшим впливом на виручку (Теплиця ~68%, Риба ~23%, Молоко ~5%). Ціни на тофу, мед та трави зафіксовані на консервативному рівні.
            </div>
          </div>

          <div className="results">
            <div className="result-card">
              <div className="lab">Річна виручка</div>
              <div className="val">€{(calc.totalRevenue / 1000).toFixed(2)} <small>млн</small></div>
              <div className="sub">База: €3.01 млн · Δ {((calc.totalRevenue - 3008.7) / 3008.7 * 100 >= 0 ? "+" : "")}{((calc.totalRevenue - 3008.7) / 3008.7 * 100).toFixed(1)}%</div>
            </div>

            <div className="result-card" style={{background: calc.ebitda > 0 ? "linear-gradient(135deg, #064e3b 0%, #047857 100%)" : "linear-gradient(135deg, #7c2d12 0%, #c2410c 100%)"}}>
              <div className="lab">EBITDA (річна)</div>
              <div className="val">€{(calc.ebitda / 1000).toFixed(2)} <small>млн</small></div>
              <div className="sub">База: €1.93 млн · Δ {(ebitdaDelta >= 0 ? "+" : "")}€{(ebitdaDelta / 1000).toFixed(2)} млн</div>
            </div>

            <div className="payback-card">
              <div className="lab">Строк окупності (Payback Period)</div>
              {calc.ebitda > 0 ? (
                <>
                  <div className="range">{calc.paybackMin.toFixed(1)} – {calc.paybackMax.toFixed(1)} <small>років</small></div>
                  <div className="meter">
                    <div className="span" style={{
                      left: `${Math.min(calc.paybackMin / 10 * 100, 95)}%`,
                      width: `${Math.max(2, Math.min((calc.paybackMax - calc.paybackMin) / 10 * 100, 95))}%`,
                    }}></div>
                  </div>
                  <div className="meter-axis"><span>0 р.</span><span>2 р.</span><span>4 р.</span><span>6 р.</span><span>8 р.</span><span>10 р.</span></div>
                  <div style={{fontSize: 12, color: "var(--muted)", marginTop: 8, lineHeight: 1.5}}>
                    Діапазон відображає невизначеність CAPEX (€4.12M – €5.51M). Нижня межа — оптимістичний сценарій оснащення, верхня — консервативний.
                  </div>
                </>
              ) : (
                <>
                  <div className="range" style={{color: "#b54708"}}>Збитковий сценарій</div>
                  <div style={{fontSize: 12, color: "var(--muted)", marginTop: 8}}>OPEX перевищує виручку. Скоригуйте параметри.</div>
                </>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const CHECKPOINTS = [
  { stage: "tech", title: "Точна площа теплиці (1.5 – 2.0 га)", desc: "Затвердити фінальну площу та crop mix (огірок/томат) — модуль формує >68% виручки." },
  { stage: "tech", title: "Feed Conversion Ratio для риби", desc: "Уточнити рецептуру рибних кормів і відсоток риби, що йде на консервацію (модуль №2 ↔ №6)." },
  { stage: "tech", title: "Газовий баланс (зимове опалення)", desc: "Власні 140k м³ біогазу покривають ~0.3–0.4 га. Уточнити обсяги докупки газу для повних 1.5 га." },
  { stage: "tech", title: "Завантаження біореактора (Фаза 2)", desc: "Розширення стада до 300 голів (або добір зовнішньої сировини) для виходу на 100% потужність установки." },
  { stage: "legal", title: "Формат кооперативу та статут", desc: "Затвердити юридичну форму згідно ЗУ «Про кооперацію»: категорії членів, пайові внесків, механізм виплат." },
  { stage: "legal", title: "Сертифікація (Organic, EU)", desc: "План сертифікації для виходу на преміум-сегмент — критично для тофу, трав, меду." },
  { stage: "market", title: "Канали збуту: B2C / HoReCa / ритейл", desc: "Підтвердити покупців под лист обсягів. Тепличні овочі та переробка молока — пріоритет." },
  { stage: "fin", title: "Bankable фінансова модель (12-month rolling)", desc: "Місячний грошовий потік, OPEX по статтях, sensitivity на 3 драйвери (ціна, завантаження, FX)." },
  { stage: "fin", title: "RFQ на ключове обладнання (топ-5 модулів)", desc: "Звузити CAPEX-діапазон з ±34% до ±10% через комерційні пропозиції постачальників." },
];

function Checkpoints() {
  const [done, setDone] = useCalcState({ 0: false, 1: false, 2: false, 3: false, 4: false, 5: false, 6: false, 7: false, 8: false });
  const completed = Object.values(done).filter(Boolean).length;
  const pct = (completed / CHECKPOINTS.length) * 100;

  const stages = [
    { num: "01", lab: "Pre-Feasibility (поточний)", status: "active", state: "Поточний етап" },
    { num: "02", lab: "Feasibility & Bankable Model", status: "next", state: "Наступний" },
    { num: "03", lab: "Detailed Engineering & Permits", status: "future", state: "—" },
    { num: "04", lab: "Construction & Commissioning", status: "future", state: "—" },
    { num: "05", lab: "Pilot Operations (12 міс.)", status: "future", state: "—" },
  ];

  return (
    <section className="section" id="checkpoints">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Validation block</div>
            <h2>Наступні кроки для Bankable Model</h2>
            <p>Контрольні точки, які робоча група має закрити, щоб перейти від Pre-Feasibility до фінансованої моделі. Відмічайте, як прогресуєте.</p>
          </div>
          <span className="pill pill-warn">{completed} / {CHECKPOINTS.length} закрито</span>
        </div>

        <div className="checkpoint-block">
          <div className="cp-list">
            {CHECKPOINTS.map((cp, i) => (
              <div className="cp-row" key={i}>
                <div className={`check ${done[i] ? "checked" : ""}`} onClick={() => setDone({...done, [i]: !done[i]})}>
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <div className="body">
                  <div className="title" style={{textDecoration: done[i] ? "line-through" : "none", opacity: done[i] ? 0.55 : 1}}>{cp.title}</div>
                  <div className="desc">{cp.desc}</div>
                </div>
                <div className={`stage ${cp.stage}`}>
                  {cp.stage === "tech" && "Технологія"}
                  {cp.stage === "legal" && "Юридичне"}
                  {cp.stage === "market" && "Ринок"}
                  {cp.stage === "fin" && "Фінанси"}
                </div>
              </div>
            ))}
          </div>

          <div className="cp-side">
            <h4>Дорожня карта проєкту</h4>
            <div style={{fontSize: 13, color: "var(--muted)"}}>Прогрес валідації Pre-Feasibility</div>
            <div className="cp-progress"><div className="fill" style={{width: `${pct}%`}}></div></div>
            <div style={{display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--muted)"}}>
              <span>{pct.toFixed(0)}% закрито</span>
              <span>{CHECKPOINTS.length - completed} чекпоінтів залишилось</span>
            </div>

            <div className="cp-stages">
              {stages.map((s, i) => (
                <div className={`cp-stage-item ${s.status === "active" ? "active" : ""}`} key={i}>
                  <span className="num">{s.num}</span>
                  <span className="lab">{s.lab}</span>
                  <span className="status">{s.state}</span>
                </div>
              ))}
            </div>

            <div style={{marginTop: 18, padding: 14, background: "#fff8e1", border: "1px solid var(--warn-line)", borderRadius: 10, fontSize: 12.5, color: "var(--warn-ink)", lineHeight: 1.5}}>
              <strong>Нагадування для робочої групи:</strong> жодне рішення про funding ask не приймається до закриття всіх 9 чекпоінтів та переходу до Bankable моделі.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Foot() {
  return (
    <footer className="foot">
      <div className="container foot-inner">
        <div>
          <strong style={{color: "var(--ink)"}}>ЕкоДанилівка · Pre-Feasibility Dashboard</strong> &middot; Внутрішній документ робочої групи &middot; v0.3 · Травень 2026
        </div>
        <div>Кооперативна модель власності (на затвердженні) · Не для зовнішнього розповсюдження</div>
      </div>
    </footer>
  );
}

Object.assign(window, { Calculator, Checkpoints, Foot });