// OPLOSSINGEN — Final composed page (10 picked variants)
// Each pick wrapped in a homepage-style <section.opl-shell> with unified <div.opl-head>
// (kicker + h2 + lead). The variant body sits below in .opl-sec-NN scope.
//
//   01 Hero          — V3 Industrial Blueprint
//   02 Probleem      — V2 Three-Actor Diagram
//   03 Reframe       — V1 Manifesto Wall            [paper break]
//   04 Eén systeem   — V2 Constellation Diagram
//   05 Hoe het werkt — V1 Vertical Timeline Rail
//   06 Resultaat     — V4 Dashboard Mock            [paper break]
//   07 Business case — V2 Payback Chart
//   08 Why WattIQ    — V5 Trust Stack               [deep break]
//   09 Knowledge     — V1 Editorial 3-Up
//   10 CTA           — V4 Inline Form + Proof

const OPLOSSINGEN_HTML = `
  <!-- 01 Hero (v3) -->
  <section class="opl-shell opl-shell--hero">
    <div class="opl-wrap opl-wrap--wide">
      <div class="opl-sec-01">
<section class="variant">
  
  <div class="variant-body">
    <div class="v3">
      <div class="wrap">
        <div class="main">
          <div class="docnum">
            <span>Doc · WIQ/OPL/HERO/01</span>
            <b>● LIVE — 2026</b>
            <span>Pagina 1 / 9</span>
          </div>
          <h1>Replace diesel.<br/><span class="a">Gain control.</span></h1>
          <p class="lead">Eén modulair energiesysteem voor je bouwplaats. Direct inzetbaar, EMS-aangestuurd, CO₂-rapportage standaard.</p>
          <div class="actions">
            <a class="btn primary" href="#">Plan locatie-analyse <span class="arrow">→</span></a>
            <a class="btn ghost" href="#">Datasheet (PDF)</a>
          </div>
        </div>
        <aside class="specs">
          <div class="row"><div class="k">System</div><div class="v">Modular Energy Platform<em>Core · Control · Grid · Fusion</em></div></div>
          <div class="row"><div class="k">Capaciteit</div><div class="v">40 – 2 000 kWh<em>Schaalbaar per cluster</em></div></div>
          <div class="row"><div class="k">Setup</div><div class="v">≤ 20 min<em>Plug & play, geen vergunning</em></div></div>
          <div class="row"><div class="k">Compliance</div><div class="v">CSRD-ready<em>ISO 9001 · automatisch CO₂-log</em></div></div>
          <div class="row"><div class="k">Status</div><div class="v" style="color:var(--power-orange)">● Operational<em>12 actieve sites · NL · BE</em></div></div>
        </aside>
      </div>
    </div>
  </div>
</section>
      </div>
    </div>
  </section>

  <!-- 02 Probleem (v2) -->
  <section class="opl-shell">
    <div class="opl-wrap">
      <div class="opl-sec-02">
<section class="variant">
<div class="variant-body"><div class="v2"><div class="wrap">
  <div class="kicker"><span class="bar"></span>02 — Probleem</div>
  <h2 style="margin-top:18px">Drie partijen. Geen overzicht.</h2>
  <p class="lead">Stroom op locatie wordt vandaag de dag versnipperd ingekocht. Dat kost je marge — én CO₂-data die je niet kunt verantwoorden.</p>
  <div class="diag">
    <div class="actor"><div class="lab"><span class="d"></span>Partij 01</div><h4>Dieselverhuurder</h4><p>Levert de genset, factureert per draaiuur. Geen inzicht in jouw verbruikspatroon.</p><div class="bill">Factuur · per maand · €8.200</div></div>
    <div class="actor"><div class="lab"><span class="d"></span>Partij 02</div><h4>Brandstoflogistiek</h4><p>Tankt bij. Reagent op leeg meldingen. Reisbewegingen tellen niet mee in jouw scope-1 rapport.</p><div class="bill">Factuur · per levering · variable</div></div>
    <div class="actor"><div class="lab"><span class="d"></span>Partij 03</div><h4>Aannemer aansluiting</h4><p>Plaatst kabels, schakelkasten. Geen bemoeienis met daily ops of energiestrategie.</p><div class="bill">Factuur · projectmatig · €2.400</div></div>
  </div>
  <div class="me">
    <div class="icon">1</div>
    <div><h3>Met WattIQ: één partner. Eén systeem. Eén dashboard.</h3><p>Energie als geïntegreerde dienst — hardware, EMS-platform en CO₂-rapport in één contract.</p></div>
  </div>
</div></div></div></section>
      </div>
    </div>
  </section>

  <!-- 03 Reframe (v1) -->
  <section class="opl-shell">
    <div class="opl-wrap">
      <div class="opl-sec-03">
<section class="variant">
<div class="variant-body"><div class="v1"><div class="wrap">
  <div class="kicker"><span class="bar"></span>03 — Reframe</div>
  <h2><span class="strike">Een batterij</span> is een component.<br/><span class="accent">Een systeem is controle.</span></h2>
  <p class="lead">WattIQ verkoopt nooit losse hardware. Elk WattIQ-systeem is gebouwd rond een EMS-platform dat real-time monitort, automatisch optimaliseert en CO₂ logt — voor CSRD-rapportages en aanbestedingen.</p>
  <div class="sig"><span>WattIQ · Manifesto · 03</span><span>● Niet te kopiëren</span></div>
</div></div></div></section>
      </div>
    </div>
  </section>

  <!-- 04 Eén systeem (v2) -->
  <section class="opl-shell">
    <div class="opl-wrap">
      <div class="opl-sec-04">
<section class="variant">
<div class="variant-body"><div class="v2"><div class="wrap">
  <div class="top"><div><div class="kicker"><span class="bar"></span>04 — Eén systeem</div><h2>Vier modules,<br/>één brein.</h2></div><p class="lead">WattIQ Control zit altijd in het midden. De andere modules klikken erop in — of sluiten elkaar uit. Wat je niet nodig hebt, koop je niet.</p></div>
  <div class="canvas">
    <svg viewBox="0 0 1100 560" preserveAspectRatio="none">
      <line class="line" x1="180" y1="120" x2="550" y2="280"/>
      <line class="line" x1="920" y1="120" x2="550" y2="280"/>
      <line class="line" x1="180" y1="440" x2="550" y2="280"/>
      <line class="line" x1="920" y1="440" x2="550" y2="280"/>
      <line class="pulse" x1="180" y1="120" x2="550" y2="280" stroke-dasharray="6 6"/>
      <line class="pulse" x1="920" y1="120" x2="550" y2="280" stroke-dasharray="6 6"/>
    </svg>
    <div class="node n-core"><div class="lab"><span class="d"></span>01</div><h4>Core</h4><p>Energieopslag. Lite · Flex · 40 – 2 000 kWh.</p></div>
    <div class="node n-grid"><div class="lab"><span class="d"></span>03a</div><h4>Grid</h4><p>DC charging — voor de hele bouwplaats.</p></div>
    <div class="node n-fusion"><div class="lab"><span class="d"></span>04a</div><h4>Fusion · Forge</h4><p>Hybrid genset · diesel — alleen wanneer nodig.</p></div>
    <div class="node n-ray"><div class="lab"><span class="d"></span>03b</div><h4>Ray</h4><p>Foldable solar — gratis kWh, draaitijd weg.</p></div>
    <div class="node core n-control"><div class="role">02 · brein</div><h4>Control</h4><p>EMS-platform · stuurt alles aan · CO₂-log standaard.</p></div>
  </div>
</div></div></div></section>
      </div>
    </div>
  </section>

  <!-- 05 Hoe het werkt (v1) -->
  <section class="opl-shell">
    <div class="opl-wrap">
      <div class="opl-sec-05">
<section class="variant">
<div class="variant-body"><div class="v1"><div class="wrap">
  <div class="head"><div><div class="kicker"><span class="bar"></span>05 — Hoe het werkt</div><h2>Vier stappen.<br/>Geen installateur.</h2></div><p class="lead">Maandag bellen. Dinsdag operationeel. EMS draait vanaf minuut één — geen wachttijd, geen aansluitkosten, geen verrassingen.</p></div>
  <div class="rail">
    <div class="step"><div class="ix">Stap 01</div><div><h3>Locatie-analyse</h3><p>Eén telefoongesprek. We bekijken vermogen, looptijd, piek en aansluiting. Indien nodig komen we langs.</p></div><div class="when">Doorlooptijd<b>≤ 24 uur</b></div></div>
    <div class="step"><div class="ix">Stap 02</div><div><h3>Configuratie & offerte</h3><p>We stellen het systeem samen — Core, Control, eventueel Grid/Ray/Fusion. Vaste prijs, geen open einden.</p></div><div class="when">Doorlooptijd<b>1 dag</b></div></div>
    <div class="step"><div class="ix">Stap 03</div><div><h3>Levering & plaatsing</h3><p>Truck arriveert. Plug & play. Geen graafwerk, geen netaansluiting nodig. Klaar binnen 20 minuten.</p></div><div class="when">Doorlooptijd<b>≤ 20 min</b></div></div>
    <div class="step"><div class="ix">Stap 04</div><div><h3>EMS-activatie</h3><p>Control wordt aan-gezet. Optimalisatie loopt automatisch. Dashboard live. CO₂-log loopt mee.</p></div><div class="when">Doorlooptijd<b>≤ 5 min</b></div></div>
  </div>
</div></div></div></section>
      </div>
    </div>
  </section>

  <!-- 06 Resultaat (v4) -->
  <section class="opl-shell">
    <div class="opl-wrap">
      <div class="opl-sec-06">
<section class="variant">
<div class="variant-body"><div class="v4"><div class="wrap">
  <div class="head"><div><div class="kicker"><span class="bar"></span>06 — Resultaat</div><h2>Wat de EMS<br/>zelf rapporteert.</h2></div><div class="stamp">Gem. over 50+ projecten<b>● Live</b></div></div>
  <div class="dash">
    <div>
      <div class="pane">
        <div class="top"><div class="lab">● Brandstofverbruik · 30d</div><div class="pill">−61% vs baseline</div></div>
        <h4>14 320 L</h4><div class="sub">vs. 36 700 L — diesel-only</div>
        <div class="chart">
          <svg viewBox="0 0 600 140" preserveAspectRatio="none">
            <defs><linearGradient id="g1" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="rgba(255,107,43,.5)"/><stop offset="100%" stop-color="rgba(255,107,43,0)"/></linearGradient></defs>
            <path d="M0,40 C60,20 120,30 180,40 C240,50 300,30 360,28 C420,26 480,40 540,30 L600,32 L600,140 L0,140 Z" fill="url(#g1)"/>
            <path d="M0,40 C60,20 120,30 180,40 C240,50 300,30 360,28 C420,26 480,40 540,30 L600,32" stroke="#ff6b2b" stroke-width="2" fill="none"/>
            <path d="M0,80 C60,90 120,100 180,95 C240,92 300,100 360,105 C420,108 480,100 540,98 L600,100" stroke="#666" stroke-width="1.5" fill="none" stroke-dasharray="4 4"/>
          </svg>
        </div>
        <div class="row">
          <div class="mini"><div class="lab">NOₓ</div><div class="v">−85%<em>↓</em></div></div>
          <div class="mini"><div class="lab">Geluid</div><div class="v">42 dB<em>−40</em></div></div>
          <div class="mini"><div class="lab">Uptime</div><div class="v">99.6%<em>↑</em></div></div>
          <div class="mini"><div class="lab">Genset uren</div><div class="v">2.4 u<em>/dag</em></div></div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="pane">
        <div class="top"><div class="lab">● Financieel</div><div class="pill">YTD</div></div>
        <h4>€ 712K</h4><div class="sub">brandstof bespaard</div>
        <div style="margin-top:14px"><div class="kv"><span>ROI · mediaan</span><span class="v">14 mnd</span></div><div class="kv"><span>Genset draaiuren</span><span class="v">−71%</span></div><div class="kv"><span>CO₂ bespaard</span><span class="v">412 ton</span></div><div class="kv"><span>CSRD-rapport</span><span class="v">auto</span></div></div>
      </div>
      <div class="pane">
        <div class="top"><div class="lab">● Project mix</div><div class="pill">n = 50</div></div>
        <h4>Bouw · Events · Off-grid</h4><div class="sub">verschillen &lt; 8% in ROI</div>
      </div>
    </div>
  </div>
</div></div></div></section>
      </div>
    </div>
  </section>

  <!-- 07 Business case (v2) -->
  <section class="opl-shell">
    <div class="opl-wrap">
      <div class="opl-sec-07">
<section class="variant">
<div class="variant-body"><div class="v2"><div class="wrap">
  <div class="head"><div><div class="kicker"><span class="bar"></span>07 — Business case</div><h2>Break-even op<br/>maand veertien.</h2></div><div class="key"><span><span class="d"></span>Diesel-only</span><span><span class="d orange"></span>WattIQ</span></div></div>
  <div class="grid">
    <div class="chart-wrap">
      <div class="lab"><span>Cumulatieve cashflow · € (000)</span><b>break-even M14</b></div>
      <div class="chart">
        <svg viewBox="0 0 600 300" preserveAspectRatio="none">
          <line x1="0" y1="150" x2="600" y2="150" stroke="#333" stroke-width="1" stroke-dasharray="4 4"/>
          <text class="axis" x="6" y="146">€0</text>
          <text class="axis" x="6" y="22">+€800K</text>
          <text class="axis" x="6" y="290">−€400K</text>
          <text class="axis" x="0" y="298" font-size="9">M0</text>
          <text class="axis" x="290" y="298" font-size="9">M18</text>
          <text class="axis" x="570" y="298" font-size="9">M36</text>
          <path d="M0,150 L600,290" stroke="#666" stroke-width="2" fill="none" stroke-dasharray="6 4"/>
          <path d="M0,150 L40,260 L240,150 L600,40" stroke="#ff6b2b" stroke-width="2.5" fill="none"/>
          <circle cx="240" cy="150" r="6" fill="#ff6b2b"/>
          <line x1="240" y1="150" x2="240" y2="20" stroke="#ff6b2b" stroke-width="1" stroke-dasharray="3 3"/>
        </svg>
        <div class="crossover">● break-even · M14</div>
      </div>
    </div>
    <div class="side">
      <div class="card featured"><div class="lab">● Mediaan ROI</div><h4>14<span style="font-size:24px;font-weight:700"> mnd</span></h4><p>Over 50+ projecten, 7-daags inzet, hybride modus.</p></div>
      <div class="card"><div class="lab">Bespaard · 36 mnd</div><h4>€ 2.3M</h4><p>Cumulatief, vs. diesel-only baseline.</p></div>
      <div class="card"><div class="lab">IRR · 5 jaar</div><h4>38%</h4><p>Bij continue inzet, exclusief CO₂-credits.</p></div>
    </div>
  </div>
</div></div></div></section>
      </div>
    </div>
  </section>

  <!-- 08 Why WattIQ (v5) -->
  <section class="opl-shell bg-deep">
    <div class="opl-wrap">
      <div class="opl-sec-08">
<section class="variant">
<div class="variant-body"><div class="v5"><div class="wrap">
  <div class="head"><div class="kicker"><span class="bar"></span>08 — Why WattIQ</div><h2>Cijfers &amp; bewijs.</h2></div>
  <div class="row1">
    <div class="stat"><div class="lab">● Projecten gerealiseerd</div><div class="v">50+</div><p>Bouw, events, off-grid industrie. NL · BE · DE.</p></div>
    <div class="stat"><div class="lab">● Uptime gemiddeld</div><div class="v">99.6%</div><p>Over 18 maanden, alle modules samen.</p></div>
    <div class="stat"><div class="lab">● Mediaan ROI</div><div class="v">14 m</div><p>Hybride inzet, 7-daags, gem. 300 kW.</p></div>
    <div class="stat"><div class="lab">● Hoofdpijn­dossiers</div><div class="v">0</div><p>Garantie · service · CO₂-rapportage in één hand.</p></div>
  </div>
  <div class="row2">
    <div class="badges">
      <h4>● Compliance &amp; certificering</h4>
      <div class="grid">
        <div class="badge"><div class="b-ic">CE</div><div class="b-lab">EU-conform</div></div>
        <div class="badge"><div class="b-ic">ISO</div><div class="b-lab">9001 · 14001</div></div>
        <div class="badge"><div class="b-ic">CSRD</div><div class="b-lab">Auto-rapport</div></div>
        <div class="badge"><div class="b-ic">VCA*</div><div class="b-lab">Veiligheid</div></div>
        <div class="badge"><div class="b-ic">IEC</div><div class="b-lab">62619 · 62133</div></div>
        <div class="badge"><div class="b-ic">UN</div><div class="b-lab">38.3 transport</div></div>
        <div class="badge"><div class="b-ic">NEN</div><div class="b-lab">EN 50549</div></div>
        <div class="badge"><div class="b-ic">EMC</div><div class="b-lab">EN 61000</div></div>
      </div>
    </div>
    <div class="quote">
      <p class="q">"Eén nummer voor alles. Geen <em>onderaannemer-keten,</em> geen <em>excuus-mailtjes.</em> Maandag belden, dinsdag draaide het."</p>
      <div class="who"><b>BAM Infra · projectleider</b>Bouwplaats Amsterdam-Noord · 320 kW · 14 mnd</div>
    </div>
  </div>
</div></div></div></section>
      </div>
    </div>
  </section>

  <!-- 09 Knowledge (v1) -->
  <section class="opl-shell">
    <div class="opl-wrap">
      <div class="opl-sec-09">
<section class="variant">
<div class="variant-body"><div class="v1"><div class="wrap">
  <div class="head"><div><div class="kicker"><span class="bar"></span>09 — Knowledge</div><h2>Verder lezen.</h2></div><p class="lead">Cases, whitepapers en technische deep-dives. Geen marketing-blogs — materiaal dat je daadwerkelijk gebruikt in je projectvoorbereiding.</p></div>
  <div class="grid">
    <div class="card c1"><div class="cover"><span class="cat">● Case study</span></div><div class="body"><div class="meta"><span>Bouw · Amsterdam</span><span>14 min</span></div><h3>320 kW bouwplaats: van diesel-only naar 92% hybride.</h3><p>Hoe BAM Infra in zes weken hun NOₓ-blootstelling met 85% verlaagde — zonder netaansluiting.</p><div class="link"><span>Lees case</span><span>→</span></div></div></div>
    <div class="card c2"><div class="cover"><span class="cat">● Whitepaper</span></div><div class="body"><div class="meta"><span>CSRD · CO₂</span><span>22 min</span></div><h3>CSRD-rapportage voor tijdelijke stroom: wat audit-proof is.</h3><p>Welke data moet je vastleggen, welke methodiek staat overeind, en hoe automatiseer je het.</p><div class="link"><span>Download PDF</span><span>↓</span></div></div></div>
    <div class="card c3"><div class="cover"><span class="cat">● Technical</span></div><div class="body"><div class="meta"><span>EMS · Architecture</span><span>18 min</span></div><h3>EMS-first: waarom het brein in elk pakket zit.</h3><p>Een diepe duik in de Control-architectuur — modulair, OTA, met open API-protocol.</p><div class="link"><span>Lees deep-dive</span><span>→</span></div></div></div>
  </div>
</div></div></div></section>
      </div>
    </div>
  </section>

  <!-- 10 Plan je locatie-analyse (v4) -->
  <section class="opl-shell">
    <div class="opl-wrap">
      <div class="opl-sec-10">
<section class="variant">
<div class="variant-body"><div class="v4"><div class="wrap">
  <div class="head"><div class="kicker"><span class="bar"></span>10 — Plan locatie-analyse</div><h2>Geef je site door.<br/>Wij rekenen.</h2></div>
  <div class="grid">
    <form class="form">
      <h3>● Locatie-analyse · 24 u doorlooptijd</h3>
      <div class="row"><div class="field"><label>Naam</label><input placeholder="Voor- en achternaam"/></div><div class="field"><label>Bedrijf</label><input placeholder="Bedrijfsnaam"/></div></div>
      <div class="row"><div class="field"><label>E-mail</label><input placeholder="email@bedrijf.nl"/></div><div class="field"><label>Telefoon</label><input placeholder="06 ..."/></div></div>
      <div class="row"><div class="field full"><label>Type project</label><div class="chips"><span class="chip on">Bouwplaats</span><span class="chip">Event / pop-up</span><span class="chip">Off-grid industrie</span><span class="chip">Anders</span></div></div></div>
      <div class="row"><div class="field"><label>Geschat vermogen</label><input placeholder="bv. 300 kW"/></div><div class="field"><label>Looptijd</label><input placeholder="bv. 18 maanden"/></div></div>
      <div class="row"><div class="field full"><label>Korte toelichting (optioneel)</label><textarea rows="3" placeholder="Locatie, deadline, NOₓ-zone..."></textarea></div></div>
      <button class="submit">Stuur aanvraag →</button>
      <div class="legal">● 100% vertrouwelijk · geen marketing-mails · GDPR-compliant</div>
    </form>
    <div class="side">
      <div class="stat"><div class="lab">● Doorlooptijd</div><div class="v">≤ 24 u</div><p>Standaard reactie­tijd op aanvragen, werkdagen.</p></div>
      <div class="stat"><div class="lab">● Conversie naar offerte</div><div class="v">68%</div><p>Van aanvragen die in een offerte resulteren — geen massa­benadering.</p></div>
      <div class="contact"><b>Of direct schakelen?</b>● 020 779 8800<br/>● — — —<br/>● Ma–Vr · 08:00–18:00</div>
    </div>
  </div>
</div></div></div></section>
      </div>
    </div>
  </section>
`;

window.SiteOplossingen = function SiteOplossingen() {
  return (
    <div className="page oplossingen-final" data-page="oplossingen">
      <div dangerouslySetInnerHTML={{ __html: OPLOSSINGEN_HTML }} />
      {typeof Footer !== "undefined" ? <Footer /> : null}
    </div>
  );
};