// SITUATIES — Probleem-gedreven overzichtspagina (single longform sales page)
// Composed from the user's selection: 1-V1 / 2-V4 / 3-V3 / 4-V5 / 5-V2 / 6-V3 / 7-V3 / 8-V2 / 9-V2

const SITUATIES_HTML = `
  <!-- 01 HERO · V1 Editorial Split -->
  <section class="opl-shell opl-shell--hero opl-sec-01-v1">
    <div class="opl-wrap">
      <div class="v1-grid">
        <div class="v1-left">
          <div class="eyebrow"><span class="bar"></span>SITUATIE-OVERZICHT · 4 SCENARIO'S</div>
          <h1>Elke locatie loopt vast<br/>op een ander <em>energie&shy;probleem</em>.</h1>
        </div>
        <div class="v1-right">
          <p class="lead">WattIQ levert modulaire energiesystemen voor bouwplaatsen, tijdelijke projecten, laadpleinen en locaties zonder betrouwbare netcapaciteit. Vier veelvoorkomende situaties — vier configuraties.</p>
          <div class="actions">
            <a href="#" class="btn primary" data-route="contact">Plan een gesprek <span class="arr">→</span></a>
            <a href="#" class="btn ghost" data-route="producten">Bekijk producten</a>
          </div>
        </div>
      </div>
      <div class="v1-sits">
        <a href="#sit-01" class="it"><div class="ix">SIT · 01</div><b>Geen netaansluiting</b><span>Bouw · greenfield · events</span></a>
        <a href="#sit-02" class="it"><div class="ix">SIT · 02</div><b>Tijdelijk projectvenster</b><span>2–18 maanden</span></a>
        <a href="#sit-03" class="it"><div class="ix">SIT · 03</div><b>Diesel vervangen</b><span>Kosten · CO₂ · geluid</span></a>
        <a href="#sit-04" class="it"><div class="ix">SIT · 04</div><b>EV laden, geen netcap.</b><span>Logistiek · fleet</span></a>
      </div>
    </div>
  </section>

  <!-- 02 REFRAME · V4 Decision Tree -->
  <section class="opl-shell opl-sec-02-v4">
    <div class="opl-wrap">
      <div class="top">
        <div class="ix">02 — Reframe</div>
        <h2>Wat speelt er<br/>op jouw locatie?</h2>
      </div>
      <div class="tree">
        <div class="q">
          <div class="lab">START · VRAAG</div>
          <h4>"Wat is het grootste<br/>energie-probleem<br/>op de locatie?"</h4>
        </div>
        <div class="branches">
          <a class="br" href="#sit-01"><div class="ix">SIT 01 →</div><div class="ans">Geen netaansluiting<em>Bouw · greenfield · evenement</em></div><div class="cfg">Core (+Ray/Bridge)<br/>+ Control</div></a>
          <a class="br" href="#sit-02"><div class="ix">SIT 02 →</div><div class="ans">Tijdelijk vermogen nodig<em>2–18 maanden, mobiel</em></div><div class="cfg">Core Flex (rental)<br/>+ Control</div></a>
          <a class="br" href="#sit-03"><div class="ix">SIT 03 →</div><div class="ans">Diesel kost te veel<em>Brandstof · CO₂ · geluid</em></div><div class="cfg">Core + Fusion (backup)<br/>+ Control</div></a>
          <a class="br" href="#sit-04"><div class="ix">SIT 04 →</div><div class="ans">EV laden lukt niet<em>Aansluiting trekt het niet</em></div><div class="cfg">Grid (+Ray)<br/>+ Control</div></a>
        </div>
      </div>
    </div>
  </section>

    <!-- 03 SITUATIE 01 · V4 + telemetry -->
  <section class="sit-v4" id="sit-01">
    <div class="frame">
      <div class="left">
        <div class="haze"></div>
        <div class="floor l"></div>
        <div class="floor r"></div>
        <div class="ed-title">— Situatie 01 · Rotterdam</div>
        <p class="ed-sub">Battery + solar.<br/><em>Een dag op locatie.</em></p>
        <div class="prod-img" style="left:2%; top:18%; width:48%; bottom:18%;">
          <img src="assets/products/core-flex-100-5.png" alt="Core Flex 100-5" style="object-position:center 100%; transform:scale(1.0); transform-origin:center 90%;"/>
        </div>
        <div class="prod-img" style="left:50%; top:18%; width:48%; bottom:18%;">
          <img src="assets/products/ray-flex-1.png" alt="Ray Flex 1" style="object-position:center 80%; transform:scale(1.0); transform-origin:center 90%;"/>
        </div>
        <div class="ed-cap">CORE FLEX 100<br/>RAY FLEX 1<br/><b>WIQ-CASE-001</b></div>
      </div>
      <div class="right">
        <div class="tlm-head"><span class="pill">Live telemetry · &lt; 50 ms</span><span class="stamp">EMS v3.4 · CONTROL</span></div>
        <div class="kpis">
          <div class="kpi"><div class="k">SoC battery</div><div class="v">82<small>%</small></div><div class="d">Geladen via solar — 06:00 tot nu</div></div>
          <div class="kpi"><div class="k">Solar harvest</div><div class="v">21.4<small>kWh</small></div><div class="d">Dagopbrengst tot 14:00</div></div>
          <div class="kpi"><div class="k">Site load</div><div class="v">38<small>kW</small></div><div class="d">Kraan + boormachine + keet</div></div>
          <div class="kpi"><div class="k">Genset uren</div><div class="v">0.0<small>u</small></div><div class="d">Niet gestart deze week</div></div>
        </div>
        <div class="flow-list">
          <div class="flow-row"><span class="dot"></span><span class="lab">Solar → battery<small>direct-DC</small></span><span class="val">21 kW</span></div>
          <div class="flow-row"><span class="dot"></span><span class="lab">Battery → site<small>kraan + keet</small></span><span class="val">38 kW</span></div>
          <div class="flow-row"><span class="dot idle"></span><span class="lab">Genset<small>standby</small></span><span class="val muted">— —</span></div>
        </div>
        <div class="runner-bot"><span>WIQ-CASE-001 · ROTTERDAM</span><span class="ix">SYNCED 14:02:18</span></div>
      </div>
    </div>
  </section>

    <!-- 04 SITUATIE 02 · V4 + telemetry -->
  <section class="sit-v4" id="sit-02">
    <div class="frame">
      <div class="left">
        <div class="haze"></div>
        <div class="floor l"></div>
        <div class="floor r"></div>
        <div class="ed-title">— Situatie 02 · Eindhoven</div>
        <p class="ed-sub">Tijdelijk vermogen.<br/><em>Modulair op trailer.</em></p>
        <div class="prod-img" style="left:2%; top:18%; width:48%; bottom:18%;"><img src="assets/products/core-flex-100-5.png" alt="Core Flex 100-5" style="object-position:center 100%; transform:scale(1.05); transform-origin:center 90%;"/></div>
        <div class="prod-img" style="left:50%; top:18%; width:48%; bottom:18%;"><img src="assets/products/core-flex-100-5.png" alt="Core Flex 100-5" style="object-position:center 100%; transform:scale(1.05); transform-origin:center 90%;"/></div>
        <div class="ed-cap">CORE FLEX 100 · TRAILER<br/>CORE FLEX 100 · STACK<br/><b>6 mnd · WIQ-CASE-002</b></div>
      </div>
      <div class="right">
        <div class="tlm-head"><span class="pill">Live telemetry · &lt; 50 ms</span><span class="stamp">EMS v3.4 · CONTROL</span></div>
        <div class="kpis">
          <div class="kpi"><div class="k">Capaciteit</div><div class="v">200<small>kWh</small></div><div class="d">2× Core Flex parallel</div></div>
          <div class="kpi"><div class="k">Deploy time</div><div class="v">1<small>dag</small></div><div class="d">Plaatsen + commissioning</div></div>
          <div class="kpi"><div class="k">Demob time</div><div class="v">1<small>dag</small></div><div class="d">Verhuizen naar volgende site</div></div>
          <div class="kpi"><div class="k">Projectduur</div><div class="v">6<small>mnd</small></div><div class="d">Schaalbaar in modules</div></div>
        </div>
        <div class="flow-list">
          <div class="flow-row"><span class="dot"></span><span class="lab">Battery → site<small>continue load</small></span><span class="val">68 kW</span></div>
          <div class="flow-row"><span class="dot"></span><span class="lab">Net → battery<small>off-peak charging</small></span><span class="val">42 kW</span></div>
          <div class="flow-row"><span class="dot idle"></span><span class="lab">Genset<small>niet aangesloten</small></span><span class="val muted">— —</span></div>
        </div>
        <div class="runner-bot"><span>WIQ-CASE-002 · EINDHOVEN</span><span class="ix">SYNCED 14:02:19</span></div>
      </div>
    </div>
  </section>

  <!-- 05 SITUATIE 03 · V4 + telemetry -->
  <section class="sit-v4" id="sit-03">
    <div class="frame">
      <div class="left">
        <div class="haze"></div>
        <div class="floor l"></div>
        <div class="floor r"></div>
        <div class="ed-title">— Situatie 03 · Brabant</div>
        <p class="ed-sub">Diesel was gewoonte.<br/><em>Niet meer.</em></p>
        <div class="prod-img" style="left:2%; top:18%; width:48%; bottom:18%;"><img src="assets/products/fusion-2.png" alt="Fusion-2" style="object-position:center 95%; transform:scale(1.21); transform-origin:center 90%;"/></div>
        <div class="prod-img" style="left:50%; top:18%; width:48%; bottom:18%;"><img src="assets/products/core-flex-100-2.png" alt="Core Flex 100-2" style="object-position:center 100%; transform:scale(1.25); transform-origin:center 90%;"/></div>
        <div class="ed-cap">WATTIQ FUSION<br/>CORE FLEX 100<br/><b>−62% YTD · WIQ-CASE-003</b></div>
      </div>
      <div class="right">
        <div class="tlm-head"><span class="pill">Live telemetry · &lt; 50 ms</span><span class="stamp">EMS v3.4 · CONTROL</span></div>
        <div class="kpis">
          <div class="kpi"><div class="k">Diesel saved YTD</div><div class="v">−62<small>%</small></div><div class="d">Baseline 14.200 L → 5.400 L</div></div>
          <div class="kpi"><div class="k">Genset runtime</div><div class="v">182<small>u</small></div><div class="d">12 mnd · 32% van baseline</div></div>
          <div class="kpi"><div class="k">CO₂ vermeden</div><div class="v">23.4<small>t</small></div><div class="d">CSRD-export gereed</div></div>
          <div class="kpi"><div class="k">SoC battery</div><div class="v">74<small>%</small></div><div class="d">Battery-first dispatch</div></div>
        </div>
        <div class="flow-list">
          <div class="flow-row"><span class="dot"></span><span class="lab">Battery → site<small>battery-first</small></span><span class="val">62%</span></div>
          <div class="flow-row"><span class="dot"></span><span class="lab">Solar → battery<small>direct-DC</small></span><span class="val">18%</span></div>
          <div class="flow-row"><span class="dot"></span><span class="lab">Genset<small>on-demand</small></span><span class="val">20%</span></div>
        </div>
        <div class="runner-bot"><span>WIQ-CASE-003 · BRABANT</span><span class="ix">SYNCED 14:02:21</span></div>
      </div>
    </div>
  </section>

    <!-- 06 SITUATIE 04 · V4 + telemetry -->
  <section class="sit-v4" id="sit-04">
    <div class="frame">
      <div class="left">
        <div class="haze"></div>
        <div class="floor l"></div>
        <div class="floor r"></div>
        <div class="ed-title">— Situatie 04 · Utrecht</div>
        <p class="ed-sub">Zes voertuigen.<br/><em>Eén aansluiting.</em></p>
        <div class="prod-img" style="left:2%; top:18%; width:48%; bottom:18%;"><img src="assets/products/grid-1000-2.png" alt="Grid 1000" style="object-position:center 80%; transform:scale(0.89); transform-origin:center bottom;"/></div>
        <div class="prod-img" style="left:50%; top:18%; width:48%; bottom:18%;"><img src="assets/products/grid-200-1.png" alt="Grid 200" style="object-position:center 80%; transform:scale(0.89); transform-origin:center bottom;"/></div>
        <div class="ed-cap">GRID 1000 · 1 000 kWh<br/>GRID 200 · 200 kWh<br/>500 kW DC OUT · 6 PORTS<br/><b>412 kW · WIQ-CASE-004</b></div>
      </div>
      <div class="right">
        <div class="tlm-head"><span class="pill">Live telemetry · &lt; 50 ms</span><span class="stamp">EMS v3.4 · CONTROL</span></div>
        <div class="kpis">
          <div class="kpi"><div class="k">DC dispatch</div><div class="v">412<small>kW</small></div><div class="d">5/6 chargers in gebruik</div></div>
          <div class="kpi"><div class="k">Grid draw</div><div class="v">72<small>kW</small></div><div class="d">Onder 80 kVA limiet</div></div>
          <div class="kpi"><div class="k">SoC buffer</div><div class="v">58<small>%</small></div><div class="d">Re-charge schedule 22:00</div></div>
          <div class="kpi"><div class="k">Sessies vandaag</div><div class="v">34</div><div class="d">+18% t.o.v. weekgemiddelde</div></div>
        </div>
        <div class="flow-list">
          <div class="flow-row"><span class="dot"></span><span class="lab">P1 · BMW iX<small>charging · 78%</small></span><span class="val">62 kW</span></div>
          <div class="flow-row"><span class="dot"></span><span class="lab">P2 · Tesla M3<small>charging · 42%</small></span><span class="val">110 kW</span></div>
          <div class="flow-row"><span class="dot"></span><span class="lab">P3 · Polestar 2<small>charging · 88%</small></span><span class="val">88 kW</span></div>
          <div class="flow-row"><span class="dot idle"></span><span class="lab">P4<small>idle · auth wachten</small></span><span class="val muted">— —</span></div>
        </div>
        <div class="runner-bot"><span>WIQ-CASE-004 · UTRECHT</span><span class="ix">SYNCED 14:02:24</span></div>
      </div>
    </div>
  </section>

  <!-- 07 VERGELIJK · V3 Decision Picker -->
  <section class="opl-shell bg-paper">
    <div class="opl-wrap">
      <div class="sit-pick-hd">
        <div class="sit-pick-ix"><span class="bar"></span>07 — Vergelijk</div>
        <h2 class="sit-pick-h">Mijn locatie...</h2>
      </div>
      <div class="sit-pick" data-pick>
        <div class="qrow" data-q="0">
          <div class="q">Heeft een<br/>netaansluiting?<em>Q01 · capaciteit</em></div>
          <div class="opts">
            <div class="opt sel" data-v="0">Geen</div>
            <div class="opt" data-v="1">Beperkt</div>
            <div class="opt" data-v="2">Voldoende</div>
            <div class="opt" data-v="3">Niet relevant</div>
          </div>
        </div>
        <div class="qrow" data-q="1">
          <div class="q">Hoe lang draait<br/>het project?<em>Q02 · duur</em></div>
          <div class="opts">
            <div class="opt sel" data-v="0">2–18 mnd</div>
            <div class="opt" data-v="1">1–3 jaar</div>
            <div class="opt" data-v="2">Permanent</div>
            <div class="opt" data-v="3">Onbekend</div>
          </div>
        </div>
        <div class="qrow" data-q="2">
          <div class="q">Wat draait er nu?<em>Q03 · status quo</em></div>
          <div class="opts">
            <div class="opt sel" data-v="0">Niets · greenfield</div>
            <div class="opt" data-v="1">Diesel-aggregaten</div>
            <div class="opt" data-v="2">Vaste aansluiting</div>
            <div class="opt" data-v="3">Mix</div>
          </div>
        </div>
        <div class="qrow" data-q="3">
          <div class="q">Wat moet erbij?<em>Q04 · vraag</em></div>
          <div class="opts">
            <div class="opt sel" data-v="0">Bouw-vermogen</div>
            <div class="opt" data-v="1">EV-laders</div>
            <div class="opt" data-v="2">Industrie-load</div>
            <div class="opt" data-v="3">Mix</div>
          </div>
        </div>
        <div class="result" data-result>
          <div class="lab">● BESTE MATCH<br/><b>op basis van keuzes</b></div>
          <h3 data-result-title>Situatie 01<br/><em>Geen netaansluiting</em></h3>
          <div class="cfg" data-result-cfg><b>Aanbevolen configuratie</b>Battery Core 600 kWh<br/>Hybrid Bridge backup<br/>Control monitoring<br/>+ Solar Ray (optie)</div>
          <div class="cta-wrap"><a href="#sit-01" class="btn primary" data-result-cta>Bekijk situatie 01 <span class="arr">→</span></a></div>
        </div>
      </div>
    </div>
  </section>

  <!-- 08 SYSTEEM · Architecture diagram -->
  <section class="opl-shell sit-sys">
    <div class="opl-wrap">
      <div class="sit-sys-hd">
        <div class="sit-sys-ix"><span class="bar"></span>08 — Systeem-architectuur</div>
        <h2 class="sit-sys-h">Eén <em>kern</em>,<br/>vijf bouwblokken.</h2>
        <p class="sit-sys-lead">Battery Core in het midden — altijd. Daaromheen klik je modules aan op basis van de situatie. Eén controlelaag stuurt alles aan.</p>
        <div class="sit-sys-legend">
          <span><span class="dot core"></span>Verplicht</span>
          <span><span class="dot opt"></span>Modulair</span>
          <span><span class="dot sw"></span>Software-laag</span>
        </div>
      </div>

      <div class="sit-sys-stage">
        <!-- connection lines -->
        <svg class="sit-sys-lines" viewBox="0 0 1100 620" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
          <defs>
            <linearGradient id="sysLine" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0" stop-color="rgba(255,107,43,.55)"/>
              <stop offset="1" stop-color="rgba(255,107,43,.15)"/>
            </linearGradient>
          </defs>
          <g stroke="url(#sysLine)" stroke-width="1.4" stroke-dasharray="4 6" fill="none">
            <path d="M 550 310 Q 380 220 220 150"/>
            <path d="M 550 310 Q 720 220 880 150"/>
            <path d="M 550 310 Q 320 310 130 360"/>
            <path d="M 550 310 Q 780 310 970 360"/>
            <path d="M 550 310 Q 550 480 550 540"/>
          </g>
          <g fill="#FF6B2B" opacity=".7">
            <circle cx="380" cy="237" r="3"/>
            <circle cx="720" cy="237" r="3"/>
            <circle cx="320" cy="335" r="3"/>
            <circle cx="780" cy="335" r="3"/>
            <circle cx="550" cy="425" r="3"/>
          </g>
        </svg>

        <!-- core in center -->
        <div class="sit-sys-core">
          <div class="badge">● CORE</div>
          <div class="thumb"><img src="assets/products/core-flex-100-5.png" alt="Core Flex"/></div>
          <h4>WattIQ Core</h4>
          <p>De buffer. <b>50–1.500 kWh</b>, LFP, trailer of skid. <em>Altijd aanwezig</em>.</p>
          <div class="specs">
            <span><b>LFP</b>chemie</span>
            <span><b>±50ms</b>respons</span>
            <span><b>IP54</b>buiten</span>
          </div>
        </div>

        <!-- module 1 — top left -->
        <a href="#" data-route="producten" data-fam="bridge" class="sit-sys-mod tl">
          <div class="ix">M·02</div>
          <h5>Bridge</h5>
          <p>HVO/H₂ backup. Faalt nooit.</p>
        </a>
        <!-- module 2 — top right -->
        <a href="#" data-route="producten" data-fam="fusion" class="sit-sys-mod tr">
          <div class="ix">M·03</div>
          <h5>Fusion</h5>
          <p>Hybride met agg. −62% brandstof.</p>
        </a>
        <!-- module 3 — mid left -->
        <a href="#" data-route="producten" data-fam="grid" class="sit-sys-mod ml">
          <div class="ix">M·04</div>
          <h5>Grid</h5>
          <p>DC-laden + load-balancing.</p>
        </a>
        <!-- module 4 — mid right -->
        <a href="#" data-route="producten" data-fam="ray" class="sit-sys-mod mr">
          <div class="ix">M·05</div>
          <h5>Ray</h5>
          <p>Solar 220–500 kWp.</p>
        </a>
        <!-- software · bottom -->
        <a href="#" data-route="control" class="sit-sys-mod sw">
          <div class="ix">M·06 · SW</div>
          <h5>Control</h5>
          <p>EMS · CSRD · monitoring. Stuurt alles aan.</p>
        </a>
      </div>

      <div class="sit-sys-matrix">
        <div class="row hd"><span>Module</span><span>Wat het doet</span><span>Typisch in</span></div>
        <div class="row"><span><b>Core</b> · verplicht</span><span>Buffer · battery-first dispatch</span><span>Alle situaties</span></div>
        <div class="row"><span><b>Bridge</b> · backup</span><span>HVO/H₂ generator als laatste redmiddel</span><span>Sit 01 · 03</span></div>
        <div class="row"><span><b>Fusion</b> · hybrid</span><span>Aggregaat + battery onder één EMS</span><span>Sit 03</span></div>
        <div class="row"><span><b>Grid</b> · charging</span><span>DC-snelladers + load-balancing</span><span>Sit 04</span></div>
        <div class="row"><span><b>Ray</b> · solar</span><span>220–500 kWp foldable arrays</span><span>Sit 01 · 02</span></div>
        <div class="row"><span><b>Control</b> · software</span><span>EMS · audit-trail · CSRD-export</span><span>Alle situaties</span></div>
      </div>
    </div>
  </section>

  <!-- 09 CTA · V2 Two-Path -->
  <section class="opl-shell bg-paper">
    <div class="opl-wrap">
      <div class="sit-tp-hd">
        <div class="sit-tp-ix"><span class="bar"></span>09 — Twee paden</div>
        <h2 class="sit-tp-h">Wat past bij <em>nu</em>?</h2>
        <p class="sit-tp-lead">Twee manieren om verder te gaan. Eén voor mensen die concreet zoeken; één voor mensen die eerst willen begrijpen.</p>
      </div>
      <div class="sit-tp-paths">
        <a href="#" class="sit-tp-path primary" data-route="contact">
          <div class="ix">● PAD A · CONCREET</div>
          <h3>Ik heb een<br/>locatie in beeld.</h3>
          <p>Stuur de basisgegevens — type project, vermogen, duur. Wij komen binnen 24u terug met een eerste configuratie en richtprijs.</p>
          <ul>
            <li>Quick-scan binnen 24u</li>
            <li>Eerste configuratie + richtprijs</li>
            <li>Inplannen technisch bezoek</li>
            <li>Vrijblijvend, geen verplichting</li>
          </ul>
          <span class="cta-btn">START QUICK-SCAN <span class="arr">→</span></span>
        </a>
        <a href="#" class="sit-tp-path" data-route="contact">
          <div class="ix">● PAD B · ORIËNTEREND</div>
          <h3>Ik wil eerst<br/>begrijpen.</h3>
          <p>30 minuten met een van onze engineers. Geen sales-praat — een werksessie waarin we je situatie doorlopen en de mogelijkheden uitleggen.</p>
          <ul>
            <li>30 minuten · video of locatie</li>
            <li>Met engineer, niet account-mgr</li>
            <li>Doorlopen van vergelijkbare projecten</li>
            <li>Geen verplichting tot vervolg</li>
          </ul>
          <span class="cta-btn">PLAN 30-MIN GESPREK <span class="arr">→</span></span>
        </a>
      </div>
    </div>
  </section>
`;

// === Situatie picker · scoring matrix ===
// For each situation, score = Σ (weight when answer matches preferred value).
// Index by [sit][q][v] = weight. Higher = better match for that situation.
const SIT_SCORES = {
  "sit-01": {
    // Geen netaansluiting · bouwplaats / greenfield
    0: { 0:3, 1:1, 2:0, 3:1 }, // Q01 net
    1: { 0:1, 1:2, 2:2, 3:1 }, // Q02 duur
    2: { 0:3, 1:1, 2:0, 3:1 }, // Q03 status
    3: { 0:3, 1:0, 2:1, 3:1 }, // Q04 vraag
  },
  "sit-02": {
    // Tijdelijk projectvenster · mobiel
    0: { 0:1, 1:2, 2:1, 3:1 },
    1: { 0:3, 1:1, 2:0, 3:2 },
    2: { 0:2, 1:1, 2:1, 3:2 },
    3: { 0:2, 1:1, 2:2, 3:2 },
  },
  "sit-03": {
    // Diesel vervangen
    0: { 0:1, 1:2, 2:1, 3:1 },
    1: { 0:1, 1:2, 2:3, 3:1 },
    2: { 0:0, 1:3, 2:0, 3:2 },
    3: { 0:2, 1:1, 2:2, 3:2 },
  },
  "sit-04": {
    // EV laden, geen netcapaciteit
    0: { 0:0, 1:3, 2:1, 3:1 },
    1: { 0:1, 1:2, 2:2, 3:1 },
    2: { 0:1, 1:1, 2:2, 3:2 },
    3: { 0:0, 1:3, 2:0, 3:1 },
  },
};
const SIT_META = {
  "sit-01": {
    n: "Situatie 01",
    h: "Geen netaansluiting",
    cfg: ["Battery Core 600 kWh","Hybrid Bridge backup","Control monitoring","+ Solar Ray (optie)"],
  },
  "sit-02": {
    n: "Situatie 02",
    h: "Tijdelijk projectvenster",
    cfg: ["Core Flex 100 (rental)","Modulair stack 200–500 kWh","Control monitoring","Trailer · 1 dag deploy"],
  },
  "sit-03": {
    n: "Situatie 03",
    h: "Diesel vervangen",
    cfg: ["WattIQ Fusion hybride","Core Flex 100 buffer","Control · battery-first","Solar Ray (optie)"],
  },
  "sit-04": {
    n: "Situatie 04",
    h: "EV laden, geen netcapaciteit",
    cfg: ["Grid 1000 + Grid 200","6× DC out · 500 kW","Control fleet-balancing","Net-aansluiting blijft 80 kVA"],
  },
};

function wireSituatiePicker(root){
  const picker = root.querySelector("[data-pick]");
  if (!picker) return;
  const result = picker.querySelector("[data-result]");
  const rTitle = picker.querySelector("[data-result-title]");
  const rCfg   = picker.querySelector("[data-result-cfg]");
  const rCta   = picker.querySelector("[data-result-cta]");
  const answers = [0,0,0,0]; // defaults match the .sel marks in HTML

  function compute(){
    let best = "sit-01", bestScore = -1;
    for (const sit of Object.keys(SIT_SCORES)){
      let s = 0;
      for (let q=0; q<4; q++){
        s += (SIT_SCORES[sit][q][answers[q]] || 0);
      }
      if (s > bestScore){ bestScore = s; best = sit; }
    }
    const m = SIT_META[best];
    rTitle.innerHTML = m.n + "<br/><em>" + m.h + "</em>";
    rCfg.innerHTML = "<b>Aanbevolen configuratie</b>" + m.cfg.join("<br/>");
    rCta.setAttribute("href", "#" + best);
    rCta.innerHTML = "Bekijk " + m.n.toLowerCase() + " <span class=\"arr\">→</span>";
  }

  picker.querySelectorAll(".qrow").forEach(row => {
    const q = parseInt(row.getAttribute("data-q"), 10);
    row.querySelectorAll(".opt").forEach(opt => {
      opt.addEventListener("click", () => {
        row.querySelectorAll(".opt").forEach(o => o.classList.remove("sel"));
        opt.classList.add("sel");
        answers[q] = parseInt(opt.getAttribute("data-v"), 10);
        compute();
      });
    });
  });
  compute();
}

window.SiteSituaties = function SiteSituaties() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current) wireSituatiePicker(ref.current);
  }, []);
  return (
    <div className="page situaties-final" data-page="situaties" data-screen-label="03 Situaties" ref={ref}>
      <div dangerouslySetInnerHTML={{ __html: SITUATIES_HTML }} />
      {typeof Footer !== "undefined" ? <Footer /> : null}
    </div>
  );
};
