// HOME — D4 Control (ported from WattIQ Home D4 Control.html)
window.SiteHome = function SiteHome() {
  const sparkLine = React.useRef(null);
  const sparkFill = React.useRef(null);
  const kwRef = React.useRef(null);
  const socRef = React.useRef(null);
  const stageRef = React.useRef(null);
  const svgRef = React.useRef(null);
  const bubbleRef = React.useRef(null);
  const legendRef = React.useRef(null);
  const ticksRef = React.useRef(null);

  React.useEffect(() => {
    // Sparkline + tickers
    let raf,t = 0;
    const tick = () => {
      t += 1;
      if (!sparkLine.current) return;
      const pts = [];
      for (let i = 0; i < 40; i++) {
        const x = i * 8;
        const phase = t * 0.02 + i * 0.4;
        const y = 40 + Math.sin(phase) * 14 + Math.sin(phase * 1.7) * 6;
        pts.push(x.toFixed(1) + ',' + y.toFixed(1));
      }
      const ptsStr = pts.join(' ');
      sparkLine.current.setAttribute('points', ptsStr);
      sparkFill.current.setAttribute('points', '0,80 ' + ptsStr + ' 320,80');
      const kw = (124 + Math.sin(t * 0.04) * 18).toFixed(1);
      const soc = 78 + Math.round(Math.sin(t * 0.01) * 4);
      if (kwRef.current) kwRef.current.firstChild.nodeValue = kw;
      if (socRef.current) socRef.current.firstChild.nodeValue = soc;
      raf = requestAnimationFrame(tick);
    };
    tick();

    // Reveal observer
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {e.target.classList.add('in');io.unobserve(e.target);}
      });
    }, { threshold: .12, rootMargin: "0px 0px -40px 0px" });
    document.querySelectorAll('.d4home .reveal').forEach((el) => io.observe(el));

    // Stopwatch ticks
    if (ticksRef.current) {
      let s = "";
      for (let a = 0; a < 360; a += 6) {
        if (a % 90 === 0) continue;
        s += `<line x1="110" y1="26" x2="110" y2="${a % 30 === 0 ? 32 : 30}" transform="rotate(${a} 110 110)"/>`;
      }
      ticksRef.current.innerHTML = s;
    }

    // Iso bubble logic
    const MODULES = {
      control: { num: "00", name: "Control", role: "EMS · brain", short: "Edge AI",
        desc: "Edge-AI controller die alle modules op locatie aanstuurt. Voorspelt belasting, schakelt bronnen en logt elke kWh.",
        specs: [["Hardware", "Edge-AI"], ["Connect", "4G/5G/LAN"], ["Update", "OTA"], ["Logging", "24/7"]],
        anchor: { x: 320, y: 54, side: "below" } },
      core: { num: "01", name: "Core", role: "Storage", short: "40–2.000 kWh",
        desc: "Het batterijhart van de stack. Buffert pieken, levert basislast en reduceert generator-uren met tot 70%.",
        specs: [["Capaciteit", "40–2.000 kWh"], ["Vermogen", "tot 500 kVA"], ["Behuizing", "IP54"], ["Cycli", "6.000+"]],
        anchor: { x: 320, y: 290, side: "above" } },
      ray: { num: "02", name: "Ray", role: "Solar", short: "Tot 30 kWp",
        desc: "Vouwbare zonnepanelen die in minuten uitvouwen. Volledig draagbaar — geen vaste installatie nodig.",
        specs: [["Vermogen", "tot 30 kWp"], ["Vorm", "Foldable"], ["Opzet", "< 10 min"], ["Connector", "MC4"]],
        anchor: { x: 320, y: 180, side: "above" } },
      fusion: { num: "03", name: "Fusion", role: "Hybrid backup", short: "60–200 kVA",
        desc: "Hybride generator die alleen bijspringt als Core en Ray het niet redden. HVO-ready, tot 92% minder CO₂.",
        specs: [["Vermogen", "60–200 kVA"], ["Brandstof", "HVO/diesel"], ["Emissie", "Stage V"], ["Modus", "Smart standby"]],
        anchor: { x: 175, y: 425, side: "above" } },
      grid: { num: "04", name: "Grid", role: "EV charging", short: "Tot 360 kW",
        desc: "DC-snelladers gevoed vanuit Core. Laadt voertuigen op locaties zonder netaansluiting.",
        specs: [["Vermogen", "tot 360 kW"], ["Connectoren", "CCS/CHAdeMO"], ["Voeding", "via Core"], ["Net", "niet vereist"]],
        anchor: { x: 445, y: 425, side: "above" } }
    };
    const order = ["control", "core", "ray", "fusion", "grid"];
    let activeKey = null;

    const $legend = legendRef.current;
    const $svg = svgRef.current;
    const $stage = stageRef.current;
    const $bubble = bubbleRef.current;
    if (!$legend || !$svg || !$stage || !$bubble) return;

    $legend.innerHTML = order.map((k) => {
      const m = MODULES[k];
      return `<button class="li" data-mod="${k}" type="button"><div class="num">${m.num}</div><div class="li-row"><div class="nm">${m.name}</div><div class="role">${m.role}</div></div><div class="sp">${m.short}</div></button>`;
    }).join("");

    const placeBubble = (key) => {
      const m = MODULES[key];
      const stageRect = $stage.getBoundingClientRect();
      const svgRect = $svg.getBoundingClientRect();
      const scale = svgRect.width / 600;
      const ax = svgRect.left - stageRect.left + m.anchor.x * scale;
      const ay = svgRect.top - stageRect.top + m.anchor.y * scale;
      const bw = $bubble.offsetWidth || 280;
      const bh = $bubble.offsetHeight || 160;
      const tail = 14;
      let left = ax;
      const half = bw / 2;
      left = Math.max(half + 8, Math.min(stageRect.width - half - 8, left));
      if (m.anchor.side === "below") {
        $bubble.classList.add("below");
        $bubble.style.left = left + "px";
        $bubble.style.top = ay + tail + "px";
      } else {
        $bubble.classList.remove("below");
        $bubble.style.left = left + "px";
        $bubble.style.top = ay - bh - tail + "px";
      }
    };

    const setActive = (key) => {
      if (key === activeKey) key = null;
      activeKey = key;
      $stage.querySelectorAll(".iso-group").forEach((g) => {
        const k = g.getAttribute("data-mod");
        g.classList.toggle("dim", activeKey && k !== activeKey);
        g.classList.toggle("active", k === activeKey);
      });
      $legend.querySelectorAll(".li").forEach((b) => {
        b.classList.toggle("active", b.getAttribute("data-mod") === activeKey);
      });
      if (!activeKey) {$bubble.classList.remove("show");return;}
      const m = MODULES[activeKey];
      $bubble.querySelector('.bb-num').textContent = m.num;
      $bubble.querySelector('.bb-name').textContent = m.name;
      $bubble.querySelector('.bb-role').textContent = m.role;
      $bubble.querySelector('.bb-desc').textContent = m.desc;
      $bubble.querySelector('.bb-specs').innerHTML =
      m.specs.map(([k, v]) => `<div class="bb-spec"><b>${k}</b>${v}</div>`).join("");
      $bubble.style.visibility = "hidden";
      $bubble.classList.add("show");
      requestAnimationFrame(() => {placeBubble(activeKey);$bubble.style.visibility = "visible";});
    };

    const handlers = [];
    $stage.querySelectorAll("[data-mod]").forEach((el) => {
      const h = (e) => {e.stopPropagation();setActive(el.getAttribute("data-mod"));};
      el.addEventListener("click", h);
      handlers.push([el, h]);
    });
    $legend.querySelectorAll("[data-mod]").forEach((el) => {
      const h = (e) => {e.stopPropagation();setActive(el.getAttribute("data-mod"));};
      el.addEventListener("click", h);
      handlers.push([el, h]);
    });
    const closeBtn = $bubble.querySelector('.bb-close');
    const closeH = () => setActive(activeKey);
    closeBtn.addEventListener("click", closeH);
    const resizeH = () => {if (activeKey) placeBubble(activeKey);};
    window.addEventListener("resize", resizeH);

    return () => {
      cancelAnimationFrame(raf);
      io.disconnect();
      handlers.forEach(([el, h]) => el.removeEventListener("click", h));
      closeBtn.removeEventListener("click", closeH);
      window.removeEventListener("resize", resizeH);
    };
  }, []);

  return (
    <div className="d4home" data-page="home" data-screen-label="01 Home">
      <main>
        {/* HERO */}
        <section className="hero">
          <div className="bg-grid"></div>
          <div className="bg-glow"></div>
          <div className="scanline"></div>
          <div className="hero-inner">
            <div className="hero-split">
              <div className="hero-left">
                <div className="kicker"><span className="bar"></span>01 — Modulaire Energie · Bouw &amp; Industrie</div>
                <h1 className="h1">Energy,<br />wherever you<br />need it.</h1>
                <p className="lead">Modulaire energiesystemen die diesel vervangen en je volledige controle geven over stroom op locatie. Direct inzetbaar. EMS-aangestuurd. CO2-rapportage standaard.</p>
                <div className="hero-actions">
                  <a href="#" data-route="contact" className="btn primary">Plan je locatie-analyse <span className="arrow">→</span></a>
                  <a href="#" data-route="oplossingen" className="btn ghost">Hoe het werkt</a>
                </div>
                <div className="hero-stats">
                  <div className="s"><div className="n">50–500 kWh</div><div className="l">Schaalbaar per locatie</div></div>
                  <div className="s"><div className="n">20 min</div><div className="l">Plug &amp; play, geen installateur</div></div>
                  <div className="s"><div className="n">−72%</div><div className="l">CO2 t.o.v. diesel-baseline</div></div>
                  <div className="s"><div className="n">CSRD</div><div className="l">Aanbestedings-klaar uit de doos</div></div>
                </div>
              </div>
              <div className="hero-right">
                <div className="dash-stage">
                  <div className="dash-card main">
                    <div className="dash-head">
                      <div className="dash-dot"></div>
                      <span className="dash-loc">SITE_07 · Rotterdam Centrum</span>
                      <span className="dash-status">● LIVE</span>
                    </div>
                    <div className="dash-row big">
                      <div>
                        <div className="dash-lab">Vermogen nu</div>
                        <div className="dash-val" ref={kwRef}>139.1<span> kW</span></div>
                      </div>
                      <div>
                        <div className="dash-lab">SoC</div>
                        <div className="dash-val" ref={socRef}>80<span>%</span></div>
                      </div>
                    </div>
                    <svg className="spark" viewBox="0 0 320 80" preserveAspectRatio="none">
                      <defs>
                        <linearGradient id="d4sg" x1="0" y1="0" x2="0" y2="1">
                          <stop offset="0%" stopColor="#FF6B2B" stopOpacity="0.45" />
                          <stop offset="100%" stopColor="#FF6B2B" stopOpacity="0" />
                        </linearGradient>
                      </defs>
                      <polyline ref={sparkLine} points="" fill="none" stroke="#FF6B2B" strokeWidth="1.5" />
                      <polygon ref={sparkFill} points="" fill="url(#d4sg)" />
                    </svg>
                    <div className="dash-row tags">
                      <span className="dash-tag">Diesel uit · 14:22</span>
                      <span className="dash-tag">−214 kg CO2 vandaag</span>
                    </div>
                  </div>
                  <div className="dash-card mini one">
                    <div className="dash-mini-lab">Units online</div>
                    <div className="dash-mini-val">3 / 3</div>
                    <div className="dash-mini-bars">
                      <span style={{ height: "60%" }}></span>
                      <span style={{ height: "82%" }}></span>
                      <span style={{ height: "44%" }}></span>
                    </div>
                  </div>
                  <div className="dash-card mini two">
                    <div className="dash-mini-lab">Volgende cyclus</div>
                    <div className="dash-mini-val small">Solar peak<br />11:40 — 14:10</div>
                  </div>
                  <div className="dash-pin"><div className="dash-pin-ring"></div><div className="dash-pin-dot"></div></div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* PROBLEM */}
        <section>
          <div className="bg-grid" style={{ opacity: .18 }}></div>
          <div className="wrap">
            <div className="sec-head reveal">
              <div>
                <div className="sec-num"><span className="ix">02</span><span>Probleem</span></div>
                <h2 className="h2">Wat WattIQ vervangt, en waarom dat tijd werd.</h2>
              </div>
              <p className="lead">Diesel is luid, vervuilend en duur. Vaste netaansluitingen zijn traag en inflexibel. De praktijk vraagt om iets daartussen.</p>
            </div>
            <div className="prob-stage reveal">
              <div className="prob-photo">
                <span className="tag">Diesel — WattIQ Forge D60 (referentie)</span>
                <img src="assets/products/forge-d60.png" alt="Diesel generator" />
              </div>
              <div className="prob-callouts">
                {[
                ["01", "Kostprijs", "€0,80 / kWh inclusief logistiek", "Brandstof, transport, service en stilstand bij elkaar — diesel kost meer dan op de factuur staat."],
                ["02", "Geluid", "95 dB op 7 meter — 's nachts dicht", "Vergunning verloopt na zonsondergang. Klachten van omwonenden zijn de norm, niet de uitzondering."],
                ["03", "CO₂", "2,7 kg per liter, ongerapporteerd", "CSRD vraagt om cijfers die diesel niet kan leveren. Handmatig bijhouden is een nachtmerrie."],
                ["04", "Alternatief?", "Vaste infra: 12+ weken wachten", "Netcongestie + vergunning + graafwerk. Tegen die tijd is je bouwfase al door."]].
                map((c) =>
                <div className="prob-co" key={c[0]}>
                    <div className="num">{c[0]}</div>
                    <div className="body">
                      <span className="label">{c[1]}</span>
                      <h4>{c[2]}</h4>
                      <p>{c[3]}</p>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </section>

        {/* REFRAME */}
        <section>
          <div className="bg-grid" style={{ opacity: .18 }}></div>
          <div className="wrap">
            <div className="sec-head reveal">
              <div>
                <div className="sec-num"><span className="ix">03</span><span>Reframe</span></div>
                <h2 className="h2">Een derde categorie, tussen diesel en vaste infra.</h2>
              </div>
              <p className="lead">WattIQ is niet de goedkoopste batterij. Het is het meest controleerbare systeem.</p>
            </div>
            <div className="reframe reveal">
              <div className="venn">
                <div className="circle c1">
                  <span className="v-label">Categorie A</span>
                  <span className="v-name">Diesel</span>
                  <div className="v-traits">Direct beschikbaar<br />Meeneembaar<br />—<br />Luid · vervuilend</div>
                </div>
                <div className="circle c2">
                  <span className="v-label">Categorie B</span>
                  <span className="v-name">Vaste infra</span>
                  <div className="v-traits">Stil · schoon<br />Goedkope kWh<br />—<br />Traag · niet flexibel</div>
                </div>
                <div className="circle c3">
                  <span className="v-label">De overlap</span>
                  <span className="v-name">WattIQ</span>
                  <div className="v-traits">Direct &amp; stil<br />Schoon &amp; meeneembaar<br />EMS-aangestuurd<br />CSRD-ready</div>
                </div>
              </div>
              <div className="reframe-side">
                <div className="item">
                  <span className="lab">Wat we behouden van diesel</span>
                  <h4>Snelheid en mobiliteit</h4>
                  <p>20 minuten op locatie, mee naar de volgende.</p>
                </div>
                <div className="item">
                  <span className="lab">Wat we overnemen van vaste infra</span>
                  <h4>Stil, schoon, slim</h4>
                  <p>&lt;55 dB, nul lokale emissies, real-time data.</p>
                </div>
                <div className="item">
                  <span className="lab">Wat alleen WattIQ heeft</span>
                  <h4>Eén integraal systeem</h4>
                  <p>Core + Grid + Ray + Control — uit één hand, één dashboard.</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* SYSTEM */}
        <section>
          <div className="bg-glow"></div>
          <div className="wrap">
            <div className="sec-head reveal">
              <div>
                <div className="sec-num"><span className="ix">04</span><span>Eén systeem</span></div>
                <h2 className="h2">Niet een batterij. Een systeem.</h2>
              </div>
              <p className="lead">Hoe de modules op locatie samenwerken — Core onderaan, Ray bovenop, Grid voor laden, Control overal doorheen.</p>
            </div>
            <div className="d4-iso reveal">
              <div className="bp-bar">
                <span>DOC.04 / SHEET 01 — VERT. EXPL.</span>
                <span className="c">EXPLODED ASSEMBLY · INTERACTIVE</span>
                <span className="r">REV 02 · 2026</span>
              </div>
              <div className="bp-content">
                <div className="iso-grid">
                  <div className="iso-stage" ref={stageRef}>
                    <svg className="iso-svg" viewBox="0 0 600 540" ref={svgRef}>
                      <defs><linearGradient id="d4og" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#FF8A4D" /><stop offset="1" stopColor="#C4421A" /></linearGradient></defs>
                      <g stroke="rgba(255,107,43,.18)" strokeDasharray="4 4" fill="none"><path d="M 100 470 L 380 530 L 540 470 L 260 410 Z" /></g>
                      <g stroke="rgba(255,107,43,.4)" strokeDasharray="2 4" fill="none"><line x1="320" y1="40" x2="320" y2="460" /></g>
                      <g className="iso-group" data-mod="grid" transform="translate(380,420)">
                        <path d="M 0 30 L 70 55 L 70 95 L 0 70 Z" fill="#221208" stroke="rgba(244,239,226,.22)" />
                        <path d="M 70 55 L 130 30 L 130 70 L 70 95 Z" fill="#180D07" stroke="rgba(244,239,226,.22)" />
                        <path d="M 0 30 L 50 5 L 130 30 L 70 55 Z" fill="#2A1408" stroke="rgba(244,239,226,.22)" />
                        <circle cx="62" cy="60" r="5" fill="#FF6B2B" opacity=".8" />
                        <text className="iso-text" x="65" y="84" textAnchor="middle">04 · GRID</text>
                        <path className="iso-hit" d="M 0 5 L 130 5 L 130 95 L 0 95 Z" />
                      </g>
                      <g className="iso-group" data-mod="fusion" transform="translate(110,420)">
                        <path d="M 0 30 L 70 55 L 70 95 L 0 70 Z" fill="#221208" stroke="rgba(244,239,226,.22)" />
                        <path d="M 70 55 L 130 30 L 130 70 L 70 95 Z" fill="#180D07" stroke="rgba(244,239,226,.22)" />
                        <path d="M 0 30 L 50 5 L 130 30 L 70 55 Z" fill="#2A1408" stroke="rgba(244,239,226,.22)" />
                        <text className="iso-text" x="65" y="84" textAnchor="middle">03 · FUSION</text>
                        <path className="iso-hit" d="M 0 5 L 130 5 L 130 95 L 0 95 Z" />
                      </g>
                      <g className="iso-group" data-mod="core" transform="translate(220,300)">
                        <path d="M 0 30 L 100 70 L 100 130 L 0 90 Z" fill="url(#d4og)" stroke="#FF6B2B" />
                        <path d="M 100 70 L 200 30 L 200 90 L 100 130 Z" fill="#C4421A" stroke="#FF6B2B" />
                        <path d="M 0 30 L 100 -10 L 200 30 L 100 70 Z" fill="#FF8A4D" stroke="#FF6B2B" />
                        <text className="iso-text dark" x="100" y="74" textAnchor="middle" fontFamily="Archivo,sans-serif" fontWeight="800" fontSize="14">CORE</text>
                        <text className="iso-text dark" x="100" y="92" textAnchor="middle" opacity=".7">01 · STORAGE</text>
                        <path className="iso-hit" d="M 0 -10 L 200 -10 L 200 130 L 0 130 Z" />
                      </g>
                      <g className="iso-group" data-mod="ray" transform="translate(230,180)">
                        <path d="M 0 30 L 90 60 L 90 75 L 0 45 Z" fill="#221208" stroke="rgba(244,239,226,.4)" />
                        <path d="M 90 60 L 180 30 L 180 45 L 90 75 Z" fill="#180D07" stroke="rgba(244,239,226,.4)" />
                        <path d="M 0 30 L 90 0 L 180 30 L 90 60 Z" fill="#2A1408" stroke="rgba(244,239,226,.4)" />
                        <g stroke="#FF6B2B" strokeWidth=".7" opacity=".7">
                          <line x1="20" y1="22" x2="80" y2="42" /><line x1="40" y1="14" x2="100" y2="34" />
                          <line x1="60" y1="6" x2="120" y2="26" /><line x1="80" y1="-2" x2="140" y2="18" />
                        </g>
                        <text className="iso-text ink" x="90" y="38" textAnchor="middle">02 · RAY</text>
                        <path className="iso-hit" d="M 0 0 L 180 0 L 180 75 L 0 75 Z" />
                      </g>
                      <g className="iso-group" data-mod="control" transform="translate(320,80)">
                        <polygon points="0,-26 22,-13 22,13 0,26 -22,13 -22,-13" fill="rgba(255,107,43,.15)" stroke="#FF6B2B" strokeWidth="1.2" />
                        <text className="iso-text hl" x="0" y="2" textAnchor="middle">CONTROL</text>
                        <text className="iso-text" x="0" y="14" textAnchor="middle" fontSize="8">EMS · L02</text>
                        <polygon className="iso-hit" points="0,-30 26,-15 26,15 0,30 -26,15 -26,-15" />
                      </g>
                      <g className="iso-text hl" fontSize="11">
                        <text x="500" y="220">[02]</text><text x="500" y="370">[01]</text>
                        <text x="60" y="450">[03]</text><text x="500" y="450">[04]</text>
                        <text x="370" y="80">[00]</text>
                      </g>
                      <g stroke="#FF6B2B" strokeWidth=".8" strokeDasharray="3 3" fill="none" opacity=".6">
                        <line x1="420" y1="220" x2="495" y2="217" /><line x1="420" y1="370" x2="495" y2="367" />
                        <line x1="180" y1="450" x2="55" y2="447" /><line x1="500" y1="450" x2="495" y2="447" />
                        <line x1="345" y1="80" x2="365" y2="78" />
                      </g>
                    </svg>
                    <div className="bubble" ref={bubbleRef}>
                      <button className="bb-close" aria-label="Sluiten">×</button>
                      <div className="bb-head"><span className="bb-num"></span><span className="bb-name"></span></div>
                      <div className="bb-role"></div>
                      <div className="bb-desc"></div>
                      <div className="bb-specs"></div>
                    </div>
                  </div>
                  <div className="legend" ref={legendRef}></div>
                </div>
              </div>
              <div className="bp-foot">
                <span>SCALE 1:NTS</span>
                <span className="c">VERTICAL EXPLODED · 5 MODULES</span>
                <span className="r">DRWN. WATTIQ ENG.</span>
              </div>
            </div>
          </div>
        </section>

        {/* STEPS */}
        <section>
          <div className="bg-grid" style={{ opacity: .18 }}></div>
          <div className="wrap">
            <div className="sec-head reveal">
              <div>
                <div className="sec-num"><span className="ix">05</span><span>Hoe het werkt</span></div>
                <h2 className="h2">Vier stappen. Geen installateur.</h2>
              </div>
              <p className="lead">Maandag bellen. Dinsdag operationeel. EMS draait vanaf minuut één.</p>
            </div>
            <div className="d4-sw reveal">
              <div className="dial-wrap">
                <svg className="dial" viewBox="0 0 220 220">
                  <g stroke="rgba(244,239,226,.12)" strokeWidth="0.5"><g ref={ticksRef}></g></g>
                  <g stroke="rgba(244,239,226,.4)" strokeWidth="1">
                    <line x1="110" y1="24" x2="110" y2="32" />
                    <line x1="196" y1="110" x2="188" y2="110" />
                    <line x1="110" y1="196" x2="110" y2="188" />
                    <line x1="24" y1="110" x2="32" y2="110" />
                  </g>
                  <g fill="none" strokeWidth="6" strokeLinecap="butt">
                    <path d="M110 38 A 72 72 0 0 1 182 110" stroke="#FF6B2B" />
                    <path d="M182 110 A 72 72 0 0 1 110 182" stroke="#FF6B2B" strokeOpacity="0.85" />
                    <path d="M110 182 A 72 72 0 0 1 38 110" stroke="#FF6B2B" strokeOpacity="0.65" />
                    <path d="M38 110 A 72 72 0 0 1 110 38" stroke="#3A2618" strokeDasharray="2.5 3.5" />
                  </g>
                  <g>
                    <circle cx="110" cy="38" r="4" fill="#FF6B2B" />
                    <circle cx="182" cy="110" r="4" fill="#FF6B2B" />
                    <circle cx="110" cy="182" r="4" fill="#FF6B2B" />
                    <circle cx="38" cy="110" r="4" fill="#0A0604" stroke="#FF6B2B" strokeWidth="1.5" />
                  </g>
                  <g fontFamily="Archivo" fontWeight="800" fontSize="9" fill="#FF6B2B">
                    <text x="151" y="73" textAnchor="middle" dominantBaseline="middle">01</text>
                    <text x="151" y="150" textAnchor="middle" dominantBaseline="middle">02</text>
                    <text x="69" y="150" textAnchor="middle" dominantBaseline="middle">03</text>
                    <text x="69" y="73" textAnchor="middle" dominantBaseline="middle" fill="#7A6E5C">04</text>
                  </g>
                  <g fontFamily="JetBrains Mono" fontSize="7" fill="#A89B85" letterSpacing="0.5">
                    <text x="110" y="16" textAnchor="middle" fill="#FF6B2B" fontWeight="600">00H</text>
                    <text x="206" y="113" textAnchor="middle">+6H</text>
                    <text x="110" y="212" textAnchor="middle">+12H</text>
                    <text x="14" y="113" textAnchor="middle">+18H</text>
                  </g>
                  <circle cx="110" cy="110" r="3" fill="#FF6B2B" />
                </svg>
                <div className="center-time">
                  <div className="big">&lt; 24h</div>
                  <div className="lbl">Plug &amp; play cyclus</div>
                </div>
              </div>
              <div className="stack">
                <div className="row"><div className="num"><i></i>01</div><div className="clock">T+0h</div><div className="t">Locatie-analyse<span>Vermogen, kWh-profiel, piekbelasting</span></div><div className="dur">3 min</div></div>
                <div className="row"><div className="num"><i></i>02</div><div className="clock">T+5h</div><div className="t">Systeem op maat<span>Core + Control + opties</span></div><div className="dur">~1 dag</div></div>
                <div className="row now"><div className="num"><i></i>03</div><div className="clock">T+22h</div><div className="t">Plug &amp; play<span>Levering &amp; aansluiting · geen vergunning</span></div><div className="dur">20 min</div></div>
                <div className="row future"><div className="num"><i></i>04</div><div className="clock">T+24h</div><div className="t">Control in charge<span>Monitoring · optimalisatie · CO₂-rapport</span></div><div className="dur">vanaf min 1</div></div>
              </div>
            </div>
          </div>
        </section>

        {/* RESULT */}
        <section>
          <div className="bg-glow"></div>
          <div className="wrap">
            <div className="va-head reveal">
              <h2 className="h2">Concrete cijfers, geen claims.</h2>
              <p className="lead">Eén nummer dat ertoe doet — en vier die het ondersteunen. Gemiddelde van 12 actieve WattIQ-deployments — bouw &amp; verhuur, NL/BE, 2024–2025.</p>
            </div>
            <div className="va-grid reveal">
              <div className="va-card hero">
                <div>
                  <div className="lab"><span className="dot"></span>Hoofdmetriek · gem. n=12</div>
                  <div className="big">−72<span className="accent">%</span></div>
                  <div className="desc">Minder CO₂ per draaiuur dan een vergelijkbare diesel-set. Gemeten over 12 actieve deployments, 2024–2025.</div>
                </div>
                <div className="src">Verified · CSRD scope 1 · WattIQ FY24–25</div>
              </div>
              <div className="va-card">
                <div className="lab"><span className="dot"></span>Brandstof</div>
                <div className="big">−62<span className="unit">%</span></div>
                <div className="desc">Liter diesel-equivalent per draaiuur, t.o.v. baseline.</div>
              </div>
              <div className="va-card">
                <div className="lab"><span className="dot"></span>Kostprijs / kWh</div>
                <div className="big">€0,28</div>
                <div className="desc">All-in: brandstof, logistiek, service. Was €0,80.</div>
              </div>
              <div className="va-card">
                <div className="lab"><span className="dot"></span>ROI break-even</div>
                <div className="big">11<span className="unit">mnd</span></div>
                <div className="desc">Op een 18-maands bouwproject. 7 maanden netto.</div>
              </div>
              <div className="va-card">
                <div className="lab"><span className="dot"></span>Geluid (dB op 7m)</div>
                <div className="big">&lt;55</div>
                <div className="desc">Diesel ≈ 95 dB. Verschil &gt; 40 dB = 16× zachter waargenomen.</div>
                <div className="micro-bar">
                  <div className="b" style={{ height: "30%" }}></div>
                  <div className="b" style={{ height: "55%" }}></div>
                  <div className="b" style={{ height: "80%" }}></div>
                  <div className="b" style={{ height: "95%" }}></div>
                  <div className="b lit" style={{ height: "30%" }}></div>
                  <div className="b lit" style={{ height: "25%" }}></div>
                  <div className="b lit" style={{ height: "22%" }}></div>
                  <div className="b lit" style={{ height: "24%" }}></div>
                </div>
              </div>
            </div>
            <div className="diptych reveal">
              <div className="dip-card">
                <div className="dip-img"><span className="tag">Vandaag · diesel</span></div>
                <div className="dip-body">
                  <div className="t">Vandaag</div>
                  <h3 className="h3" style={{ margin: "6px 0" }}>Diesel · 95 dB · €0,80/kWh</h3>
                  <p>Brandstoftruck om de 4 dagen. 's Nachts uit. Klachten van omwonenden.</p>
                </div>
              </div>
              <div className="dip-card">
                <div className="dip-img after"><span className="tag">Met WattIQ</span></div>
                <div className="dip-body after">
                  <div className="t">Met WattIQ</div>
                  <h3 className="h3" style={{ margin: "6px 0" }}>200 kWh · &lt; 55 dB · €0,28/kWh</h3>
                  <p>Stil. 24/7 inzetbaar. CO2-rapport automatisch elke maandag.</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* CTA — Two-Path (geport vanuit Situaties) */}
        <div className="situaties-final">
          <section className="opl-shell bg-paper">
            <div className="opl-wrap">
              <div className="sit-tp-hd">
                <div className="sit-tp-ix"><span className="bar"></span>09 · TWEE PADEN<span className="bar"></span></div>
                <h2 className="sit-tp-h">Wat past bij <em>nu</em>?</h2>
                <p className="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 className="sit-tp-paths">
                <a href="#" className="sit-tp-path primary" data-route="contact">
                  <div className="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 className="cta-btn">START QUICK-SCAN <span className="arr">→</span></span>
                </a>
                <a href="#" className="sit-tp-path" data-route="contact">
                  <div className="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 className="cta-btn">PLAN 30-MIN GESPREK <span className="arr">→</span></span>
                </a>
              </div>
            </div>
          </section>
        </div>
      </main>
      {typeof Footer !== "undefined" ? <Footer /> : null}
    </div>);

};