// Hero, Synergy, Modules grid, CAPEX overview

const { useState } = React;

function Topbar() {
  return (
    <div className="topbar">
      <div className="container topbar-inner">
        <div className="brand">
          <div className="brand-mark">Е</div>
          <div>ЕкоДанилівка <span style={{color: "var(--muted)", fontWeight: 400, marginLeft: 6}}>· робоча група</span></div>
        </div>
        <div className="nav">
          <a href="#synergy">Синергія</a>
          <a href="#capex">CAPEX</a>
          <a href="#calc">Калькулятор</a>
          <a href="#checkpoints">Checkpoints</a>
        </div>
        <div style={{marginLeft: "auto", display: "flex", gap: 8}}>
          <span className="pill pill-warn">Pre-Feasibility</span>
          <span className="pill pill-slate">v0.3 · 2026</span>
        </div>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="container">
        <div className="eyebrow">Спільна оцінка життєздатності</div>
        <h1>ЕкоДанилівка: <span className="accent">Спільна Оцінка Життєздатності</span> <span style={{color: "var(--muted)", fontWeight: 400}}>(Pre-Feasibility)</span></h1>
        <p className="hero-sub">
          Замкнена агро-екосистема з 14 міні-проєктів, що працюють за принципом циркулярної синергії &mdash; де відходи одного цеху стають сировиною для іншого. Цей дашборд створено для робочої групи для прийняття поетапних інвестиційних та операційних рішень.
        </p>

        <div className="disclaimer">
          <svg className="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
          <div>
            <strong>Увага:</strong> це попередня модель (Pre-Feasibility). Потребує юридичного та технологічного затвердження (Bankable Model). Юридична форма кооперативу, статут і пайові механізми &mdash; підлягають затвердженню робочою групою.
          </div>
        </div>

        <div className="hero-meta">
          <div className="item"><span className="k">Етап</span><span className="v">Pre-Feasibility</span></div>
          <div className="item"><span className="k">Модель власності</span><span className="v">Кооперативна (на затвердженні)</span></div>
          <div className="item"><span className="k">Модулів</span><span className="v">14 інтегрованих</span></div>
          <div className="item"><span className="k">Принцип</span><span className="v">Zero Waste · Циркулярна економіка</span></div>
        </div>

        <div className="kpi-row">
          <div className="kpi">
            <div className="label">Загальний CAPEX</div>
            <div className="value">€4.12 – 5.51 млн</div>
            <div className="delta muted">Діапазон попередніх оцінок</div>
          </div>
          <div className="kpi">
            <div className="label">Річна виручка (база)</div>
            <div className="value">€3.01 млн</div>
            <div className="delta muted">Консервативний сценарій</div>
          </div>
          <div className="kpi">
            <div className="label">EBITDA (база)</div>
            <div className="value">€1.93 млн</div>
            <div className="delta">~64% маржа</div>
          </div>
          <div className="kpi">
            <div className="label">Окупність (база)</div>
            <div className="value">2.1 – 2.8 років</div>
            <div className="delta muted">Залежно від CAPEX</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function SynergySection() {
  return (
    <section className="section" id="synergy">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Циркулярна модель</div>
            <h2>Синергія 14 модулів</h2>
            <p>Зелені стрілки &mdash; потоки ресурсів (молоко, гній, біогаз, дигестат). Сині пунктирні &mdash; сервісні зв'язки (логістика, пакування, реалізація).</p>
          </div>
          <div style={{display: "flex", gap: 8}}>
            <span className="pill pill-slate">Робоча схема</span>
          </div>
        </div>

        <div className="synergy-frame">
          <img src="assets/synergy-infographic.png" alt="Інфографіка взаємозв'язків 14 міні-проєктів ЕкоДанилівка" />
          <div className="synergy-caption">
            <div className="legend">
              <span className="dot">Потоки ресурсів</span>
              <span className="dot dashed">Сервісні зв'язки</span>
            </div>
            <div>Циркулярна економія: <strong style={{color: "var(--ink)"}}>~€120–123 тис./рік</strong> на власному біогазі, кормах та добривах</div>
          </div>
        </div>

        <ModulesGrid />
      </div>
    </section>
  );
}

function ModulesGrid() {
  const [hover, setHover] = useState(null);
  return (
    <div className="module-grid">
      {MODULES.map(m => {
        const isFree = m.capex[0] === 0 && m.capex[1] === 0;
        return (
          <div className="module" key={m.n} onMouseEnter={() => setHover(m.n)} onMouseLeave={() => setHover(null)}>
            <div style={{display: "flex", justifyContent: "space-between", alignItems: "baseline"}}>
              <div className="num">№{String(m.n).padStart(2, "0")}</div>
              <span className={`tag ${m.cat}`}>{CAT_LABELS[m.cat]}</span>
            </div>
            <div className="name">{m.name}</div>
            <div className="meta">{m.note}</div>
            <div className={`capex ${isFree ? "zero" : ""}`}>
              {isFree ? "CAPEX: наявне обладнання" : `CAPEX: €${m.capex[0]}k – €${m.capex[1]}k`}
            </div>
          </div>
        );
      })}
    </div>
  );
}

function CapexSection() {
  const top = [
    { name: "АгроТехСервіс (№13)", min: 1048, max: 1453 },
    { name: "Біореактор (№11)", min: 755, max: 1105 },
    { name: "Пакування (№9)", min: 810, max: 830 },
    { name: "Теплиця (№5)", min: 590, max: 680 },
    { name: "Коров'яча ферма (№4)", min: 460, max: 630 },
    { name: "Лікарські рослини (№7)", min: 245, max: 465 },
    { name: "Консервний цех (№6)", min: 92, max: 143.5 },
    { name: "Сушка (№10)", min: 53, max: 102 },
    { name: "Бджільництво (№12)", min: 50.2, max: 75.8 },
    { name: "Корми (№8)", min: 18.5, max: 27.5 },
  ];
  const scaleMax = 1500;
  const topFiveSum = top.slice(0, 5).reduce((s, r) => [s[0] + r.min, s[1] + r.max], [0, 0]);
  const topFivePct = ((topFiveSum[0] + topFiveSum[1]) / 2 / ((CAPEX_TOTAL_MIN + CAPEX_TOTAL_MAX) / 2)) * 100;

  return (
    <section className="section" id="capex" style={{background: "linear-gradient(180deg, transparent 0%, #f4f8f5 50%, transparent 100%)"}}>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Капітальні інвестиції</div>
            <h2>Фінансовий огляд (CAPEX)</h2>
            <p>Розподіл інвестицій по модулях. Топ-5 модулів формують ~{topFivePct.toFixed(0)}% від загального CAPEX.</p>
          </div>
          <span className="pill">Діапазон €4.12 – 5.51 млн</span>
        </div>

        <div className="capex-block">
          <div className="capex-bar-list">
            {top.map((row, i) => {
              const minPct = (row.min / scaleMax) * 100;
              const maxPct = (row.max / scaleMax) * 100;
              return (
                <div className="capex-bar" key={i}>
                  <div className="lab">{row.name}</div>
                  <div className="track">
                    <div className="range-fill" style={{left: `${minPct}%`, width: `${maxPct - minPct}%`}}></div>
                    <div className="fill" style={{left: 0, width: `${minPct}%`}}></div>
                  </div>
                  <div className="num">€{row.min}k – €{row.max}k</div>
                </div>
              );
            })}
          </div>

          <div className="capex-side">
            <div>
              <div style={{fontSize: 12, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 4}}>Загальний CAPEX</div>
              <div className="total">€4.12 – 5.51 <small>млн</small></div>
            </div>
            <div className="row"><span>Найбільший модуль</span><span>АгроТехСервіс</span></div>
            <div className="row"><span>Енергетичне ядро</span><span>Біореактор €755k–1.1M</span></div>
            <div className="row"><span>Без CAPEX (наявне обл.)</span><span>№1, 2, 3, 14</span></div>
            <div className="row"><span>Кількість модулів</span><span>14</span></div>
            <div className="row"><span>Середня EBITDA маржа</span><span>~64%</span></div>
            <div style={{marginTop: 6, padding: 14, background: "var(--surface-2)", borderRadius: 10, fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.5}}>
              <strong style={{color: "var(--ink)"}}>Примітка робочій групі:</strong> розкид ±34% між min/max відображає ринкову невизначеність на обладнання та потребу в детальних RFQ для Bankable моделі.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Topbar, Hero, SynergySection, CapexSection });