// Control · Resultaat — 5 varianten (KPIs)
const CtrlResultaat = {};

const KPIS = [
  ["−60%","Dieselverbruik op locatie"],
  ["−70%","CO2-uitstoot t.o.v. baseline"],
  ["3×","Meer vermogen uit aansluiting"],
  ["0","Stilstand door overbelasting"],
];

CtrlResultaat.ResV1 = function ResV1() {
  return (
    <div className="ctrl-art" style={{background:"var(--break)", color:"var(--paper-ink)"}}>
      <div className="wrap">
        <div className="vlabel" style={{color:"#7a3a16"}}>07 · Resultaat</div>
        <div className="sec-head">
          <div><div className="sec-num" style={{color:"#7a3a16"}}>// Wat het oplevert</div><h2 style={{color:"var(--paper-ink)"}}>Dit is wat controle oplevert.</h2></div>
          <p className="lead" style={{color:"#6B6256"}}>Geen aannames. Cijfers gebaseerd op actieve projecten over de afgelopen 12 maanden.</p>
        </div>
        <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:14}}>
          {KPIS.map(([n,l])=>(
            <div key={l} style={{padding:"36px 28px", background:"var(--paper)", borderRadius:12, minHeight:200}}>
              <div style={{fontFamily:"var(--display)", fontSize:72, fontWeight:800, color:"var(--power-orange)", letterSpacing:"-.025em", lineHeight:1, marginBottom:14}}>{n}</div>
              <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", color:"#6B6256", textTransform:"uppercase"}}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

CtrlResultaat.ResV2 = function ResV2() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">07 · Resultaat · BIG NUMBER</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 28px", maxWidth:"22ch"}}>
          Vier cijfers vatten het samen.
        </h2>
        <div>
          {KPIS.map(([n,l],i)=>(
            <div key={l} style={{padding:"36px 0", borderTop:"1px solid var(--line)", display:"grid", gridTemplateColumns:"320px 1fr 200px", gap:32, alignItems:"center"}}>
              <div style={{fontFamily:"var(--display)", fontSize:120, fontWeight:800, color:"var(--power-orange)", letterSpacing:"-.04em", lineHeight:.85}}>{n}</div>
              <div>
                <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase", marginBottom:6}}>METRIC · 0{i+1}</div>
                <div style={{fontFamily:"var(--display)", fontSize:24, fontWeight:700, letterSpacing:"-.01em", color:"var(--off-white)"}}>{l}</div>
              </div>
              <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", color:"var(--muted)", textTransform:"uppercase", textAlign:"right"}}>n=147 sites · 2024</div>
            </div>
          ))}
          <div style={{borderTop:"1px solid var(--line)"}}/>
        </div>
      </div>
    </div>
  );
};

CtrlResultaat.ResV3 = function ResV3() {
  // Comparative bars — baseline vs Control
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">07 · Resultaat · COMPARATIVE</div>
        <div className="sec-num">// Wat het oplevert</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"22ch"}}>
          Voor en na — op dezelfde site.
        </h2>
        <div style={{display:"grid", gridTemplateColumns:"1fr", gap:24}}>
          {[
            ["Dieselverbruik","liters/maand",4200,1680,40],
            ["CO2-uitstoot","kg/maand",11200,3360,30],
            ["Vermogen uit aansluiting","kW piek",200,600,100],
            ["Stilstand","minuten/maand",380,0,0],
          ].map(([t,u,b,a,pa],i)=>{
            const max = Math.max(b,a)||1;
            return (
              <div key={t} style={{padding:"22px 28px", border:"1px solid var(--line)", borderRadius:10, background:"var(--industrial-black)"}}>
                <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom:14}}>
                  <h3 style={{fontFamily:"var(--display)", fontWeight:700, fontSize:19, margin:0, letterSpacing:"-.005em"}}>{t}</h3>
                  <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", color:"var(--muted)", textTransform:"uppercase"}}>{u}</div>
                </div>
                <div style={{display:"grid", gridTemplateColumns:"100px 1fr 80px", gap:14, marginBottom:10, alignItems:"center"}}>
                  <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", color:"var(--muted)", textTransform:"uppercase"}}>VOOR</div>
                  <div style={{height:14, background:"var(--steel-dark)", borderRadius:99, overflow:"hidden"}}>
                    <div style={{width:(b/max*100)+"%", height:"100%", background:"var(--muted)"}}/>
                  </div>
                  <div style={{fontFamily:"var(--display)", fontWeight:700, fontSize:16, color:"var(--muted)", textAlign:"right"}}>{b.toLocaleString()}</div>
                </div>
                <div style={{display:"grid", gridTemplateColumns:"100px 1fr 80px", gap:14, alignItems:"center"}}>
                  <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", color:"var(--power-orange)", textTransform:"uppercase"}}>NA</div>
                  <div style={{height:14, background:"var(--steel-dark)", borderRadius:99, overflow:"hidden"}}>
                    <div style={{width:(a/max*100)+"%", height:"100%", background:"var(--power-orange)"}}/>
                  </div>
                  <div style={{fontFamily:"var(--display)", fontWeight:700, fontSize:16, color:"var(--off-white)", textAlign:"right"}}>{a.toLocaleString()}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

CtrlResultaat.ResV4 = function ResV4() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">07 · Resultaat · QUOTE</div>
        <div style={{display:"grid", gridTemplateColumns:"1.2fr 1fr", gap:48, alignItems:"start"}}>
          <div>
            <div style={{fontFamily:"Georgia, serif", fontSize:120, color:"var(--power-orange)", lineHeight:.4, marginBottom:20}}>"</div>
            <p style={{fontFamily:"Georgia, serif", fontSize:32, lineHeight:1.35, color:"var(--off-white)", margin:"0 0 28px", fontStyle:"italic", maxWidth:"24ch"}}>
              Sinds Control draait staat de generator nog maar twee uur per dag. We hadden hem voorheen non-stop aan staan.
            </p>
            <div>
              <div style={{fontFamily:"var(--display)", fontWeight:700, fontSize:18, marginBottom:4}}>Pieter de Vries</div>
              <div style={{fontFamily:"var(--mono)", fontSize:12, letterSpacing:".18em", color:"var(--muted)", textTransform:"uppercase"}}>Site Manager · A12 Knooppunt</div>
            </div>
          </div>
          <div style={{padding:"32px 28px", background:"var(--industrial-black)", border:"1px solid var(--line)", borderRadius:12}}>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase", marginBottom:18}}>↳ Op deze site</div>
            {KPIS.map(([n,l])=>(
              <div key={l} style={{padding:"14px 0", borderBottom:"1px solid var(--line)", display:"flex", justifyContent:"space-between", alignItems:"baseline"}}>
                <span style={{fontFamily:"var(--display)", fontWeight:800, fontSize:32, color:"var(--power-orange)", letterSpacing:"-.02em"}}>{n}</span>
                <span style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", color:"var(--muted)", textTransform:"uppercase", textAlign:"right", maxWidth:"60%"}}>{l}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlResultaat.ResV5 = function ResV5() {
  // Live dashboard
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">07 · Resultaat · LIVE</div>
        <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom:24}}>
          <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:38, letterSpacing:"-.02em", lineHeight:1.1, margin:0, maxWidth:"22ch"}}>
            Dit gebeurt nu, op een Control-site.
          </h2>
          <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase"}}>● LIVE · 14:32:08</div>
        </div>
        <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:12, marginBottom:18}}>
          {KPIS.map(([n,l],i)=>(
            <div key={l} style={{padding:"24px 22px", background:"var(--industrial-black)", border:"1px solid var(--line)", borderRadius:10}}>
              <div style={{fontFamily:"var(--mono)", fontSize:10.5, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase", marginBottom:10}}>KPI · 0{i+1}</div>
              <div style={{fontFamily:"var(--display)", fontSize:48, fontWeight:800, color:"var(--power-orange)", letterSpacing:"-.025em", lineHeight:1, marginBottom:12}}>{n}</div>
              <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".15em", color:"var(--off-white)"}}>{l}</div>
              <svg viewBox="0 0 200 30" style={{width:"100%", height:30, marginTop:12}}>
                <polyline points={["0,20 25,18 50,12 75,15 100,8 125,10 150,5 175,8 200,4","0,15 25,18 50,14 75,12 100,8 125,9 150,5 175,6 200,3","0,25 25,22 50,18 75,14 100,10 125,8 150,6 175,5 200,3","0,15 25,12 50,10 75,8 100,6 125,5 150,4 175,3 200,2"][i]} fill="none" stroke="var(--power-orange)" strokeWidth="1.4" opacity=".7"/>
              </svg>
            </div>
          ))}
        </div>
        <div style={{padding:"22px 28px", border:"1px solid var(--line)", borderRadius:10, background:"var(--steel-dark)", display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:24}}>
          {[["Sites actief","147"],["Beslissingen vandaag","2.3M"],["Gemiddelde reactie","312ms"],["Uptime","99.97%"]].map(([k,v])=>(
            <div key={k}>
              <div style={{fontFamily:"var(--mono)", fontSize:10.5, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase", marginBottom:6}}>{k}</div>
              <div style={{fontFamily:"var(--display)", fontSize:24, fontWeight:700, color:"var(--off-white)", letterSpacing:"-.01em"}}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

window.CtrlResultaat = CtrlResultaat;