// OVER WATTIQ — Composed (Hero V4 · Manifesto V1 · Pijlers V1 · Tijdlijn V4 · Cijfers V5 · CTA V2)
window.SiteOver = function SiteOver() {

  const PILLARS = [
    {
      n: "01",
      meta: "Pijler I · Distribution",
      t: "Direct.",
      p: "Plug & play. Geen vergunning. Geen wachttijd. Wij leveren maandag, je draait dinsdag. Een bouwplaats heeft geen geduld voor installateurs en aansluitprocedures — wij leveren energie als product, niet als infrastructuur-project.",
      data: [
        { k: "20 min",       v: "installatie" },
        { k: "0",            v: "vergunningen nodig" },
        { k: "Verplaatsbaar", v: "tussen locaties" },
      ],
      img: "Site delivery · 20 min plug-in",
    },
    {
      n: "02",
      meta: "Pijler II · Software",
      t: "Slim.",
      p: "EMS-aangestuurd. Real-time monitoring, automatische optimalisatie, CO₂-logging. Dit is wat je niet kunt kopiëren — niet door een batterijfabrikant, niet door een dieselverhuurder. Het EMS is het hart van WattIQ.",
      data: [
        { k: "Real-time", v: "dashboard" },
        { k: "Auto",      v: "load-balancing" },
        { k: "CSRD",      v: "export standaard" },
      ],
      img: "EMS dashboard · close-up",
    },
    {
      n: "03",
      meta: "Pijler III · Distribution",
      t: "Schaalbaar.",
      p: "Distributie via verhuur en groothandel. Geen capex op installatie. Schaalbaar naar elke markt waar diesel wordt vervangen — bouw, infra, evenementen, datacenters, EV charging.",
      data: [
        { k: "Verhuur",  v: "· groothandel · direct" },
        { k: "Geen",     v: "monteurs op de loonlijst" },
        { k: "4 EU",     v: "markten geactiveerd" },
      ],
      img: "Logistiek netwerk · verhuur partner",
    },
  ];

  const TIMELINE = [
    {
      yr: "2023", phase: "Origin", tag: "Q3 2023",
      t: "Idee op de bouwplaats",
      p: "Eerste prototype WattIQ Core. Drie generators, één lekkende dieseltank — en een vraag die niemand kon beantwoorden: hoeveel kWh ging er die dag doorheen?",
      cls: "",
    },
    {
      yr: "2024", phase: "Pilot", tag: "5 sites · NL",
      t: "Eerste 5 systemen live",
      p: "Pilots met verhuurpartners. Bouw, infra, evenementen — alle situaties getest in productie, op echte sites.",
      cls: "",
    },
    {
      yr: "2025", phase: "Software", tag: "● Live",
      t: "WattIQ Control v2",
      p: "CSRD-export, fleet management, real-time monitoring. Het EMS wordt het hart van het platform en de moat van het product.",
      cls: "now",
    },
    {
      yr: "2026", phase: "Schaal", tag: "Q1 · 4 markten",
      t: "Distributie via verhuur",
      p: "Internationale uitrol via verhuur en groothandel in vier markten: Nederland, België, Duitsland, Verenigd Koninkrijk.",
      cls: "future",
    },
  ];

  const STATS = [
    { ix: "M-01", big: "12",  unit: "+",   lab: "Actieve deployments",   stamp: "● Live · 2025" },
    { ix: "M-02", big: "3,4", unit: "GWh", lab: "Geleverd zonder diesel", stamp: "+220 % YoY" },
    { ix: "M-03", big: "540", unit: "t",   lab: "CO₂ vermeden · 2025",   stamp: "Gecertificeerd" },
    { ix: "M-04", big: "4",   unit: "EU",  lab: "Markten geactiveerd",    stamp: "NL · BE · DE · UK" },
  ];

  return (
    <div className="page" data-page="over" data-screen-label="05 Over WattIQ">

      {/* ============ HERO — V4 Manifesto Centered ============ */}
      <section className="over-sec over-hero no-top" data-screen-label="05.01 Hero">
        <div className="wrap">
          <div className="badge">
            <span className="pulse"></span>
            Over WattIQ
          </div>
          <h1>Direct. Slim. <span className="o">Schaalbaar.</span></h1>
          <p className="lead">
            Drie principes. Eén systeem. WattIQ ontwikkelt modulaire energiesystemen
            voor de bouw en industrie — gemaakt om diesel te vervangen.
          </p>
          <div className="pillars">
            <div className="it">
              <div className="ix">PIJLER I</div>
              <b>Direct.</b>
              <span>Plug & play. Geen vergunning. 20 min installatie.</span>
            </div>
            <div className="it">
              <div className="ix">PIJLER II</div>
              <b>Slim.</b>
              <span>EMS-aangestuurd. Real-time. CSRD-ready.</span>
            </div>
            <div className="it">
              <div className="ix">PIJLER III</div>
              <b>Schaalbaar.</b>
              <span>Verhuur · groothandel · international.</span>
            </div>
          </div>
        </div>
      </section>

      {/* ============ MANIFESTO — V1 Big Statement ============ */}
      <section className="over-sec over-manifesto" data-screen-label="05.02 Manifesto">
        <div className="wrap">
          <div className="eye"><span className="bar"></span>Statement</div>
          <h2>De bouwsector loopt <span className="o">10 jaar achter</span> op energie.</h2>
          <p>
            Een lang gesprek op een bouwplaats in 2023. Drie generators, één lekkende
            dieseltank, en niemand die wist hoeveel kWh er die dag verbruikt was.
          </p>
          <p>Daar begon WattIQ. Niet als startup. Als reactie.</p>
          <div className="sig">
            <span>Origin · <b>2023</b></span>
            <span>Rotterdam-Zuid</span>
          </div>
        </div>
      </section>

      {/* ============ DRIE PIJLERS — V1 Alternating Rows ============ */}
      <section className="over-sec over-pijlers" data-screen-label="05.03 Drie pijlers">
        <div className="wrap">
          <div className="head">
            <div className="eye"><span className="bar"></span>Drie pijlers</div>
            <h2>Hoe WattIQ werkt — in drie principes.</h2>
          </div>

          {PILLARS.map((P) => (
            <div className="pillar" key={P.n}>
              <div>
                <div className="meta">{P.meta} · {P.n}</div>
                <h3>{P.t}</h3>
                <p>{P.p}</p>
                <div className="data">
                  {P.data.map((d, i) => (
                    <div key={i}>· <span>{d.k}</span> {d.v}</div>
                  ))}
                </div>
              </div>
              <div className="ph">
                <span className="meta">{P.img}</span>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ============ TIJDLIJN — V4 Vertical Spine ============ */}
      <section className="over-sec over-tijdlijn" data-screen-label="05.04 Tijdlijn">
        <div className="wrap">
          <div className="head">
            <div className="eye"><span className="bar"></span>Tijdlijn</div>
            <h2>Hoe we hier kwamen.</h2>
          </div>
          <div className="timeline">
            {TIMELINE.map((R) => (
              <div className={"row " + R.cls} key={R.yr}>
                <div className="yr"><b>{R.yr}</b><span>{R.phase}</span></div>
                <div className="body">
                  <h3>{R.t}</h3>
                  <p>{R.p}</p>
                </div>
                <span className="tag">{R.tag}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============ IN CIJFERS — V5 Animated Badges ============ */}
      <section className="over-sec over-cijfers" data-screen-label="05.05 In cijfers">
        <div className="wrap">
          <div className="head">
            <div className="eye"><span className="bar"></span>In cijfers</div>
            <h2>Waar WattIQ vandaag staat.</h2>
          </div>
          <div className="grid">
            {STATS.map((S) => (
              <div className="badge" key={S.ix}>
                <div className="ix">{S.ix}</div>
                <div className="big">{S.big}<em>{S.unit}</em></div>
                <div className="lab">{S.lab}</div>
                <span className="stamp">{S.stamp}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============ CTA — V3 Composed Split ============ */}
      <section className="over-cta" data-screen-label="05.06 CTA">
        <div className="cta-inner">
        <div className="cta-head">
          <div>
            <div className="eye"><span className="bar"></span>Volgende stap</div>
            <h2>Twee paden. <em>Eén richting.</em></h2>
          </div>
          <div className="stamp"><span className="dot"></span>Antwoord · binnen 48 uur</div>
        </div>

        <div className="cta-grid">
          <a href="#" data-route="contact" className="col partner">
            <div className="top">
              <div className="ix">01<em>Pad</em></div>
              <span className="tag">Verhuur · groothandel</span>
            </div>
            <h3>Word distributie&shy;partner.</h3>
            <p>
              Voor verhuurbedrijven en groothandels die diesel willen vervangen in hun vloot.
              Geen capex op installatie. Marge op verhuur. Training inbegrepen.
            </p>
            <ul>
              <li>Min. vlootomvang · 5 systemen</li>
              <li>Onboarding · 4 weken</li>
              <li>Marges · gepubliceerd in partner deck</li>
            </ul>
            <div className="foot">
              <div className="arrow">Word partner <span className="arr">→</span></div>
              <div className="sub">Partner intake</div>
            </div>
          </a>

          <a href="#" data-route="contact" className="col contact">
            <div className="top">
              <div className="ix">02<em>Pad</em></div>
              <span className="tag">Direct contact</span>
            </div>
            <h3>Praat met het team.</h3>
            <p>
              Vragen over inzetbaarheid, specificaties of een specifieke situatie?
              We plannen een gesprek binnen 48 uur — geen formulier, gewoon een mens.
            </p>
            <ul>
              <li>Reactie · binnen 48 uur</li>
              <li>Sales engineer aanwezig</li>
              <li>NDA op verzoek</li>
            </ul>
            <div className="foot">
              <div className="arrow">Plan gesprek <span className="arr">→</span></div>
              <div className="sub">Direct gesprek</div>
            </div>
          </a>
        </div>

        <div className="cta-tail">
          <div className="left"><span className="bar"></span>WattIQ B.V. · Rotterdam-Zuid</div>
          <div className="right">— — —<span className="bar"></span></div>
        </div>
        </div>
      </section>

      <Footer />
    </div>
  );
};