// Control · Hoe het denkt — 5 varianten (input/output schema)
const CtrlDenkt = {};

const INPUTS = [
  ["Belasting","live load (kW)"],
  ["Capaciteit","aansluiting limit"],
  ["Prioriteiten","locatie-regels"],
  ["Bronnen","net · batterij · gen · solar"],
];
const OUTPUTS = [
  ["Battery","ontladen / laden"],
  ["Generator","start / stop"],
  ["EV Chargers","limit per paal"],
  ["Solar / Net","buffer / export"],
];
const FLOW = [
  ["Piekbelasting","Batterij ontlaadt automatisch om de piek af te vlakken."],
  ["Batterij leeg","Generator start tijdelijk om door te draaien."],
  ["Solar beschikbaar","Eigen opwek gaat eerst de batterij in."],
  ["EV laden actief","Vermogen wordt verdeeld over palen en machines."],
];

CtrlDenkt.DenktV1 = function DenktV1() {
  // Original hub schema
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">05 · Hoe het denkt</div>
        <div className="sec-head">
          <div><div className="sec-num">// Beslissingsschema</div><h2>Het systeem neemt beslissingen voor je.</h2></div>
          <p className="lead">Continu, op basis van actuele belasting, beschikbare capaciteit, prioriteiten op locatie en energiebronnen — zonder handmatige actie.</p>
        </div>
        <div style={{padding:"28px 24px", border:"1px solid var(--line)", borderRadius:14, background:"var(--industrial-black)"}}>
          <svg viewBox="0 0 1400 460" style={{width:"100%", height:"auto"}}>
            <rect x="560" y="170" width="280" height="120" rx="16" fill="var(--power-orange)"/>
            <text x="700" y="215" textAnchor="middle" fontFamily="Archivo" fontWeight="700" fontSize="32" fill="#0A0A0A">Control</text>
            <text x="700" y="248" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="11.5" letterSpacing="2" fill="#0A0A0A" opacity=".7">EMS PLATFORM</text>
            <text x="700" y="270" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10.5" fill="#0A0A0A" opacity=".6">v2.0 · Real-time</text>
            {INPUTS.map(([t,s],i)=>{
              const x = [80,360,740,1060][i]; const y = i%2?20:50;
              return (<g key={i}>
                <rect x={x} y={y} width="220" height="70" rx="10" fill="var(--steel-dark)" stroke="rgba(244,239,226,.18)"/>
                <text x={x+20} y={y+30} fontFamily="JetBrains Mono" fontSize="10.5" letterSpacing="1.6" fill="var(--muted)">INPUT · {String(i+1).padStart(2,"0")}</text>
                <text x={x+20} y={y+52} fontFamily="IBM Plex Sans" fontWeight="600" fontSize="15" fill="var(--off-white)">{t}</text>
                <text x={x+200} y={y+52} textAnchor="end" fontFamily="JetBrains Mono" fontSize="9" fill="var(--muted)">{s}</text>
                <line x1={x+110} y1={y+70} x2="700" y2="170" stroke="var(--power-orange)" strokeWidth="1.4" strokeDasharray="3 5" opacity=".55"/>
              </g>);
            })}
            {OUTPUTS.map(([t,s],i)=>{
              const x=[80,360,740,1060][i]; const y=i%2?400:370;
              return (<g key={i}>
                <rect x={x} y={y} width="220" height="70" rx="10" fill="var(--deep-black)" stroke="rgba(255,107,43,.4)"/>
                <text x={x+20} y={y+30} fontFamily="JetBrains Mono" fontSize="10.5" letterSpacing="1.6" fill="var(--power-orange)">OUTPUT · {String(i+1).padStart(2,"0")}</text>
                <text x={x+20} y={y+52} fontFamily="IBM Plex Sans" fontWeight="600" fontSize="15" fill="var(--off-white)">{t}</text>
                <text x={x+200} y={y+52} textAnchor="end" fontFamily="JetBrains Mono" fontSize="9" fill="var(--muted)">{s}</text>
                <line x1="700" y1="290" x2={x+110} y2={y} stroke="var(--power-orange)" strokeWidth="1.6" opacity=".85"/>
              </g>);
            })}
          </svg>
        </div>
        <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:14, marginTop:28}}>
          {FLOW.map(([w,t],i)=>(
            <div key={i} style={{padding:"18px 20px", background:"var(--steel-dark)", borderRadius:8}}>
              <div style={{fontFamily:"var(--mono)", fontSize:10, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase", marginBottom:8}}>WANNEER</div>
              <div style={{fontFamily:"var(--display)", fontWeight:700, fontSize:15, marginBottom:8}}>{w}</div>
              <div style={{fontFamily:"var(--mono)", fontSize:10, color:"var(--muted)", marginBottom:6}}>→ DAN</div>
              <div style={{fontSize:13, color:"var(--muted)", lineHeight:1.4}}>{t}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

CtrlDenkt.DenktV2 = function DenktV2() {
  // Decision tree
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">05 · Hoe het denkt · DECISION TREE</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"24ch"}}>
          De logica achter elke beslissing.
        </h2>
        <div style={{padding:"36px 32px", border:"1px solid var(--line)", borderRadius:12, background:"var(--industrial-black)"}}>
          <svg viewBox="0 0 1200 460" style={{width:"100%", height:"auto"}}>
            <rect x="500" y="20" width="200" height="60" rx="8" fill="var(--power-orange)"/>
            <text x="600" y="55" textAnchor="middle" fontFamily="Archivo" fontWeight="700" fontSize="18" fill="#0A0A0A">Iedere seconde</text>
            <line x1="600" y1="80" x2="600" y2="120" stroke="var(--power-orange)" strokeWidth="2"/>
            <rect x="450" y="120" width="300" height="60" rx="8" fill="var(--steel-dark)" stroke="var(--power-orange)" strokeWidth="1.5"/>
            <text x="600" y="146" textAnchor="middle" fontFamily="IBM Plex Sans" fontWeight="600" fontSize="15" fill="var(--off-white)">Belasting &gt; capaciteit?</text>
            <text x="600" y="166" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="1.5" fill="var(--muted)">CHECK · 01</text>
            {/* yes branch */}
            <line x1="450" y1="180" x2="200" y2="240" stroke="var(--power-orange)" strokeWidth="1.4"/>
            <text x="290" y="215" fontFamily="JetBrains Mono" fontSize="11" letterSpacing="1.5" fill="var(--power-orange)">JA →</text>
            <rect x="60" y="240" width="280" height="80" rx="8" fill="var(--deep-black)" stroke="var(--power-orange)"/>
            <text x="80" y="266" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="1.5" fill="var(--power-orange)">ACTIE</text>
            <text x="80" y="290" fontFamily="IBM Plex Sans" fontWeight="600" fontSize="15" fill="var(--off-white)">Batterij ontladen</text>
            <text x="80" y="310" fontFamily="IBM Plex Sans" fontSize="13" fill="var(--muted)">Vlak de piek af binnen 200ms</text>
            {/* no branch */}
            <line x1="750" y1="180" x2="1000" y2="240" stroke="var(--muted)" strokeWidth="1.2" strokeDasharray="4 4"/>
            <text x="900" y="215" fontFamily="JetBrains Mono" fontSize="11" letterSpacing="1.5" fill="var(--muted)">NEE →</text>
            <rect x="860" y="240" width="280" height="60" rx="8" fill="var(--steel-dark)" stroke="var(--line)"/>
            <text x="1000" y="266" textAnchor="middle" fontFamily="IBM Plex Sans" fontWeight="600" fontSize="15" fill="var(--off-white)">Solar beschikbaar?</text>
            <text x="1000" y="286" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="1.5" fill="var(--muted)">CHECK · 02</text>
            <line x1="860" y1="300" x2="700" y2="380" stroke="var(--power-orange)" strokeWidth="1.4"/>
            <line x1="1140" y1="300" x2="1100" y2="380" stroke="var(--muted)" strokeWidth="1.2" strokeDasharray="4 4"/>
            <rect x="560" y="380" width="280" height="60" rx="8" fill="var(--deep-black)" stroke="var(--power-orange)"/>
            <text x="700" y="406" textAnchor="middle" fontFamily="IBM Plex Sans" fontWeight="600" fontSize="14" fill="var(--off-white)">Buffer in batterij</text>
            <text x="700" y="424" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="1.5" fill="var(--power-orange)">→ ACTIE</text>
            <rect x="960" y="380" width="200" height="60" rx="8" fill="var(--steel-dark)" stroke="var(--line)"/>
            <text x="1060" y="406" textAnchor="middle" fontFamily="IBM Plex Sans" fontWeight="600" fontSize="14" fill="var(--muted)">Status quo</text>
            <text x="1060" y="424" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="1.5" fill="var(--muted)">→ NIETS</text>
          </svg>
        </div>
        <p style={{marginTop:24, color:"var(--muted)", fontSize:14, fontFamily:"var(--mono)", letterSpacing:".1em"}}>↳ &gt; 40 beslisregels per site, allemaal automatisch toegepast.</p>
      </div>
    </div>
  );
};

CtrlDenkt.DenktV3 = function DenktV3() {
  // Pipeline horizontal
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">05 · Hoe het denkt · PIPELINE</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"24ch"}}>
          Vier stappen, elke seconde.
        </h2>
        <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr) 60px", gap:0, alignItems:"stretch"}}>
          {[
            ["01","Meten","Belasting · capaciteit · prioriteit · bronnen","INPUT"],
            ["02","Wegen","Vergelijk met regels en limieten","ANALYSE"],
            ["03","Beslissen","Welke actie levert het beste resultaat","BESLIS"],
            ["04","Sturen","Stuur signalen naar batterij, gen, palen","ACTIE"],
          ].map(([n,t,d,tag],i)=>(
            <React.Fragment key={n}>
              <div style={{padding:"28px 24px", background:i===3?"var(--power-orange)":"var(--industrial-black)", color:i===3?"var(--deep-black)":"var(--off-white)", border:"1px solid "+(i===3?"var(--power-orange)":"var(--line)"), borderRight:i===3?"1px solid var(--power-orange)":"none", display:"flex", flexDirection:"column", justifyContent:"space-between", minHeight:240}}>
                <div>
                  <div style={{fontFamily:"var(--mono)", fontSize:10.5, letterSpacing:".22em", textTransform:"uppercase", marginBottom:8, opacity:.6}}>{tag}</div>
                  <div style={{fontFamily:"var(--display)", fontSize:36, fontWeight:800, color:i===3?"var(--deep-black)":"var(--power-orange)", letterSpacing:"-.02em", marginBottom:12}}>{n}</div>
                  <h3 style={{fontFamily:"var(--display)", fontSize:24, fontWeight:700, margin:"0 0 10px", letterSpacing:"-.01em"}}>{t}</h3>
                  <p style={{fontSize:13.5, lineHeight:1.5, margin:0, opacity:i===3?.85:.7}}>{d}</p>
                </div>
                <div style={{fontFamily:"var(--mono)", fontSize:10.5, letterSpacing:".22em", textTransform:"uppercase", marginTop:16, opacity:.5}}>~ {[80,140,40,200][i]}ms</div>
              </div>
              {i<3 && <div style={{display:"flex", alignItems:"center", justifyContent:"center", color:"var(--power-orange)", fontFamily:"var(--mono)", fontSize:24}}>→</div>}
            </React.Fragment>
          ))}
          <div style={{display:"flex", alignItems:"center", justifyContent:"center", color:"var(--power-orange)", fontFamily:"var(--mono)", fontSize:24}}>→</div>
        </div>
        <div style={{marginTop:28, padding:"20px 24px", border:"1px dashed rgba(255,107,43,.4)", borderRadius:8, fontFamily:"var(--mono)", fontSize:13, letterSpacing:".1em", color:"var(--muted)"}}>
          ↳ TOTAAL CYCLUS: ~460ms — sneller dan een mens kan blinken
        </div>
      </div>
    </div>
  );
};

CtrlDenkt.DenktV4 = function DenktV4() {
  // Logic table - if/then/auto
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">05 · Hoe het denkt · LOGIC TABLE</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"24ch"}}>
          Wat gebeurt er, wanneer.
        </h2>
        <div style={{border:"1px solid var(--line)", borderRadius:12, overflow:"hidden", fontFamily:"var(--mono)"}}>
          <div style={{display:"grid", gridTemplateColumns:"60px 1.2fr 80px 2fr 140px", padding:"14px 24px", background:"var(--steel-dark)", borderBottom:"1px solid var(--line)", fontSize:10.5, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase"}}>
            <div>#</div><div>WANNEER</div><div></div><div>DAN</div><div style={{textAlign:"right"}}>SNELHEID</div>
          </div>
          {[
            ["01","Piekbelasting > 95% capaciteit","→","Batterij ontlaadt automatisch","< 200ms"],
            ["02","Batterij < 15% en piek > drempel","→","Generator start tijdelijk","2s"],
            ["03","Solar > eigen verbruik","→","Overschot gaat in batterij","real-time"],
            ["04","EV-paal vraagt vermogen","→","Verdeel over palen + machines","< 500ms"],
            ["05","Net beschikbaar + tarief laag","→","Batterij laadt bij","real-time"],
            ["06","Onderhoud asset gepland","→","Routeer load om asset heen","planned"],
          ].map(([n,w,a,t,s])=>(
            <div key={n} style={{display:"grid", gridTemplateColumns:"60px 1.2fr 80px 2fr 140px", padding:"18px 24px", borderBottom:"1px solid var(--line)", background:"var(--industrial-black)", alignItems:"baseline"}}>
              <div style={{fontSize:13, color:"var(--power-orange)", letterSpacing:".15em"}}>{n}</div>
              <div style={{fontFamily:"var(--display-alt)", fontSize:14.5, color:"var(--off-white)"}}>{w}</div>
              <div style={{color:"var(--power-orange)", fontSize:18}}>{a}</div>
              <div style={{fontFamily:"var(--display-alt)", fontSize:14.5, color:"var(--muted)"}}>{t}</div>
              <div style={{textAlign:"right", fontSize:11, letterSpacing:".18em", color:"var(--muted)", textTransform:"uppercase"}}>{s}</div>
            </div>
          ))}
        </div>
        <p style={{marginTop:16, color:"var(--muted)", fontSize:13, fontFamily:"var(--mono)", letterSpacing:".1em"}}>↳ Alles automatisch — geen handmatige actie nodig.</p>
      </div>
    </div>
  );
};

CtrlDenkt.DenktV5 = function DenktV5() {
  // Live trace - terminal style
  const lines = [
    ["14:32:08.124","INFO","load=486kW cap=630kW soc=78%","ok"],
    ["14:32:08.291","INFO","prediction: peak in 18s","watch"],
    ["14:32:09.512","WARN","load=624kW approaching cap","trigger"],
    ["14:32:09.604","ACT ","battery → discharge 60kW","exec"],
    ["14:32:09.689","INFO","load=564kW within bounds","ok"],
    ["14:32:12.103","INFO","ev-charger-03 ramp request","queue"],
    ["14:32:12.205","ACT ","throttle ev-charger-03 to 22kW","exec"],
    ["14:32:14.012","INFO","solar production +12kW","ok"],
    ["14:32:14.118","ACT ","battery → charge 12kW","exec"],
  ];
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">05 · Hoe het denkt · LIVE TRACE</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 32px", maxWidth:"24ch"}}>
          Wat het systeem ziet en doet — live.
        </h2>
        <div style={{border:"1px solid var(--line)", borderRadius:12, overflow:"hidden", background:"#0a0805"}}>
          <div style={{padding:"12px 20px", borderBottom:"1px solid var(--line)", display:"flex", justifyContent:"space-between", fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", color:"var(--muted)", textTransform:"uppercase", background:"var(--steel-dark)"}}>
            <span>● control@site-001 · trace</span><span>v2.0 · live</span>
          </div>
          <div style={{padding:"20px 24px", fontFamily:"var(--mono)", fontSize:13, lineHeight:1.7}}>
            {lines.map(([t,lv,m,tag],i)=>{
              const lvColor = lv.trim()==="WARN"?"#FFD700": lv.trim()==="ACT"?"var(--power-orange)":"var(--muted)";
              const tagColor = tag==="exec"?"var(--power-orange)":tag==="trigger"?"#FFD700":"var(--muted)";
              return (
                <div key={i} style={{display:"grid", gridTemplateColumns:"160px 60px 1fr 100px", gap:12, padding:"3px 0", color:"var(--off-white)"}}>
                  <span style={{color:"var(--muted)"}}>{t}</span>
                  <span style={{color:lvColor, fontWeight:600}}>[{lv}]</span>
                  <span>{m}</span>
                  <span style={{color:tagColor, textAlign:"right", letterSpacing:".15em", textTransform:"uppercase", fontSize:11}}>{tag}</span>
                </div>
              );
            })}
            <div style={{padding:"3px 0", color:"var(--power-orange)"}}>▮</div>
          </div>
        </div>
        <p style={{marginTop:16, color:"var(--muted)", fontSize:13, fontFamily:"var(--mono)", letterSpacing:".1em"}}>↳ ~ 4–8 acties per minuut, 24/7. Volledig auditeerbaar.</p>
      </div>
    </div>
  );
};

CtrlDenkt.DenktV6 = function DenktV6() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">05 · Hoe het denkt · LOOP</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"22ch"}}>
          De feedback-lus draait continu.
        </h2>
        <div style={{padding:"40px 32px", border:"1px solid var(--line)", borderRadius:14, background:"var(--industrial-black)"}}>
          <svg viewBox="0 0 1100 380" style={{width:"100%", height:"auto"}}>
            <ellipse cx="550" cy="190" rx="380" ry="140" fill="none" stroke="var(--power-orange)" strokeWidth="1.4" strokeDasharray="6 8" opacity=".5"/>
            {[
              [170,190,"Sensoren","Lezen elke 100ms"],
              [550,50,"Analyse","Vergelijk met regels"],
              [930,190,"Beslissing","Kies beste actie"],
              [550,330,"Sturing","Naar assets"],
            ].map(([x,y,t,d],i)=>(
              <g key={i}>
                <circle cx={x} cy={y} r="62" fill="var(--steel-dark)" stroke="var(--power-orange)" strokeWidth="1.5"/>
                <text x={x} y={y-8} textAnchor="middle" fontFamily="Archivo" fontWeight="700" fontSize="16" fill="var(--off-white)">{t}</text>
                <text x={x} y={y+12} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="var(--muted)">{d}</text>
                <text x={x} y={y+30} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="11" letterSpacing="1.5" fill="var(--power-orange)">0{i+1}</text>
              </g>
            ))}
          </svg>
        </div>
      </div>
    </div>
  );
};

CtrlDenkt.DenktV7 = function DenktV7() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">05 · Hoe het denkt · INPUTS/OUTPUTS COLUMNS</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"22ch"}}>
          Ingangen, regels, uitgangen.
        </h2>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:14}}>
          {[
            ["INPUTS",["Belasting","Capaciteit","Prioriteiten","Bronnen","Tarief","Weersvoorspelling"],"var(--muted)"],
            ["REGELS",["Peak shaving","Load balancing","Solar first","Generator min-uren","SOC-bandbreedte","Failover"],"var(--power-orange)"],
            ["OUTPUTS",["Battery (laad/ontlaad)","Generator (start/stop)","EV palen (limit)","Solar (export)","Net (import/export)","Alerts"],"var(--off-white)"],
          ].map(([t,items,c])=>(
            <div key={t} style={{padding:"24px 22px", border:"1px solid var(--line)", borderRadius:10, background:"var(--industrial-black)"}}>
              <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:c, textTransform:"uppercase", marginBottom:14}}>{t}</div>
              {items.map((x,i)=>(<div key={x} style={{padding:"10px 0", borderTop:i?"1px solid var(--line)":"none", fontFamily:"var(--display-alt)", fontSize:14, color:"var(--off-white)"}}>{String(i+1).padStart(2,"0")} · {x}</div>))}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

CtrlDenkt.DenktV8 = function DenktV8() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">05 · Hoe het denkt · STATE MACHINE</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"22ch"}}>
          Het systeem heeft vijf states.
        </h2>
        <div style={{padding:"32px 28px", border:"1px solid var(--line)", borderRadius:12, background:"var(--industrial-black)"}}>
          <svg viewBox="0 0 1100 320" style={{width:"100%", height:"auto"}}>
            {[
              [120,160,"IDLE","Niets te doen","#9A9182"],
              [340,160,"MONITOR","Watching","#9A9182"],
              [560,80,"BALANCE","Bijsturen","#FF6B2B"],
              [560,240,"PROTECT","Piek voorkomen","#FF6B2B"],
              [820,160,"RECOVER","Herstellen","#FFD700"],
            ].map(([x,y,t,d,c],i)=>(
              <g key={i}>
                <rect x={x-60} y={y-30} width="120" height="60" rx="8" fill="var(--steel-dark)" stroke={c} strokeWidth="1.5"/>
                <text x={x} y={y-6} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="12" letterSpacing="1.5" fill={c} fontWeight="600">{t}</text>
                <text x={x} y={y+14} textAnchor="middle" fontFamily="IBM Plex Sans" fontSize="11" fill="var(--muted)">{d}</text>
              </g>
            ))}
            <line x1="180" y1="160" x2="280" y2="160" stroke="var(--muted)" strokeWidth="1.2" markerEnd="url(#arr1)"/>
            <line x1="400" y1="140" x2="500" y2="100" stroke="var(--power-orange)" strokeWidth="1.4"/>
            <line x1="400" y1="180" x2="500" y2="220" stroke="var(--power-orange)" strokeWidth="1.4"/>
            <line x1="620" y1="100" x2="760" y2="140" stroke="var(--power-orange)" strokeWidth="1.4"/>
            <line x1="620" y1="220" x2="760" y2="180" stroke="var(--power-orange)" strokeWidth="1.4"/>
            <path d="M 820 130 Q 700 30 340 130" fill="none" stroke="#FFD700" strokeWidth="1.2" strokeDasharray="4 4"/>
            <defs><marker id="arr1" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="var(--muted)"/></marker></defs>
          </svg>
        </div>
      </div>
    </div>
  );
};

CtrlDenkt.DenktV9 = function DenktV9() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">05 · Hoe het denkt · IF/THEN PSEUDOCODE</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 32px", maxWidth:"22ch"}}>
          Pseudocode van een typische cyclus.
        </h2>
        <div style={{padding:"32px 36px", border:"1px solid var(--line)", borderRadius:12, background:"#0a0805", fontFamily:"var(--mono)", fontSize:14, lineHeight:1.9, color:"var(--off-white)"}}>
          <div style={{color:"var(--muted)"}}>// every 100ms</div>
          <div><span style={{color:"#FF6B2B"}}>read</span> load, capacity, soc, sources</div>
          <div></div>
          <div><span style={{color:"#FFD700"}}>if</span> load &gt; 0.95 * capacity:</div>
          <div style={{paddingLeft:24}}><span style={{color:"#FF6B2B"}}>battery</span>.discharge(load - capacity)</div>
          <div></div>
          <div><span style={{color:"#FFD700"}}>elif</span> soc &lt; 0.15 <span style={{color:"#FFD700"}}>and</span> load &gt; threshold:</div>
          <div style={{paddingLeft:24}}><span style={{color:"#FF6B2B"}}>generator</span>.start()</div>
          <div></div>
          <div><span style={{color:"#FFD700"}}>elif</span> solar &gt; consumption:</div>
          <div style={{paddingLeft:24}}><span style={{color:"#FF6B2B"}}>battery</span>.charge(solar - consumption)</div>
          <div></div>
          <div><span style={{color:"#FFD700"}}>else</span>:</div>
          <div style={{paddingLeft:24, color:"var(--muted)"}}>continue monitoring</div>
          <div style={{color:"#FF6B2B", marginTop:8}}>▮</div>
        </div>
        <p style={{marginTop:14, color:"var(--muted)", fontSize:13, fontFamily:"var(--mono)", letterSpacing:".1em"}}>↳ Vereenvoudigd. Werkelijke regels: 40+ per site.</p>
      </div>
    </div>
  );
};

CtrlDenkt.DenktV10 = function DenktV10() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">05 · Hoe het denkt · COCKPIT</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 32px", maxWidth:"22ch"}}>
          Het denken — visueel.
        </h2>
        <div style={{padding:"28px 32px", border:"1px solid var(--line)", borderRadius:12, background:"var(--industrial-black)"}}>
          <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:14}}>
            {[
              ["LOAD","486","kW","#FF6B2B",.78],
              ["SOC","78","%","#FFD700",.78],
              ["MARGIN","144","kW","#7AA37A",.23],
            ].map(([k,n,u,c,p])=>(
              <div key={k} style={{padding:"20px 22px", background:"var(--steel-dark)", borderRadius:8}}>
                <div style={{display:"flex", justifyContent:"space-between", marginBottom:10, fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase"}}>
                  <span>{k}</span><span style={{color:c}}>● live</span>
                </div>
                <div style={{display:"flex", alignItems:"baseline", gap:8, marginBottom:10}}>
                  <span style={{fontFamily:"var(--display)", fontSize:48, fontWeight:800, color:"var(--off-white)", letterSpacing:"-.02em"}}>{n}</span>
                  <span style={{fontFamily:"var(--mono)", fontSize:13, color:"var(--muted)"}}>{u}</span>
                </div>
                <div style={{height:6, background:"var(--deep-black)", borderRadius:99, overflow:"hidden"}}>
                  <div style={{width:(p*100)+"%", height:"100%", background:c}}/>
                </div>
              </div>
            ))}
          </div>
          <div style={{marginTop:14, padding:"18px 22px", background:"var(--steel-dark)", borderRadius:8, fontFamily:"var(--mono)", fontSize:13, color:"var(--off-white)"}}>
            <span style={{color:"var(--power-orange)"}}>↳ DECISION 14:32:08</span>
            <span style={{marginLeft:18, color:"var(--muted)"}}>load + 12% prediction → battery discharge 60kW (200ms)</span>
          </div>
          <div style={{marginTop:6, padding:"18px 22px", background:"var(--steel-dark)", borderRadius:8, fontFamily:"var(--mono)", fontSize:13, color:"var(--off-white)"}}>
            <span style={{color:"#FFD700"}}>↳ NEXT</span>
            <span style={{marginLeft:18, color:"var(--muted)"}}>solar peak in ~12min → schedule battery charge</span>
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlDenkt.DenktV16 = function DenktV16() {
  // Hub variant — radial circular
  const inputs = INPUTS;
  const outputs = OUTPUTS;
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">05 · Hoe het denkt · HUB · RADIAL</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 32px", maxWidth:"22ch"}}>
          Alles draait rondom één centrum.
        </h2>
        <div style={{padding:"32px", border:"1px solid var(--line)", borderRadius:14, background:"var(--industrial-black)"}}>
          <svg viewBox="0 0 800 600" style={{width:"100%", height:"auto", maxHeight:520, display:"block", margin:"0 auto"}}>
            <circle cx="400" cy="300" r="240" fill="none" stroke="var(--line)" strokeDasharray="2 6"/>
            <circle cx="400" cy="300" r="160" fill="none" stroke="var(--line)" strokeDasharray="2 6"/>
            <circle cx="400" cy="300" r="80" fill="var(--power-orange)"/>
            <text x="400" y="295" textAnchor="middle" fontFamily="Archivo" fontWeight="800" fontSize="20" fill="#0A0A0A">CONTROL</text>
            <text x="400" y="318" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9.5" letterSpacing="1.5" fill="#0A0A0A" opacity=".7">EMS · v2</text>
            {[...inputs, ...outputs].map((item,i)=>{
              const total = inputs.length + outputs.length;
              const angle = (i / total) * 2 * Math.PI - Math.PI/2;
              const isOut = i >= inputs.length;
              const r = 240;
              const x = 400 + Math.cos(angle) * r;
              const y = 300 + Math.sin(angle) * r;
              const lx = 400 + Math.cos(angle) * 80;
              const ly = 300 + Math.sin(angle) * 80;
              return (
                <g key={i}>
                  <line x1={lx} y1={ly} x2={x} y2={y} stroke={isOut?"var(--power-orange)":"var(--muted)"} strokeWidth="1.2" strokeDasharray={isOut?"":"3 5"} opacity={isOut?.85:.6}/>
                  <circle cx={x} cy={y} r="38" fill="var(--steel-dark)" stroke={isOut?"var(--power-orange)":"var(--muted)"} strokeWidth="1.4"/>
                  <text x={x} y={y-2} textAnchor="middle" fontFamily="Archivo" fontWeight="700" fontSize="11" fill="var(--off-white)">{item[0]}</text>
                  <text x={x} y={y+12} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="8" fill={isOut?"var(--power-orange)":"var(--muted)"}>{isOut?"OUT":"IN"}</text>
                </g>
              );
            })}
          </svg>
        </div>
      </div>
    </div>
  );
};

CtrlDenkt.DenktV17 = function DenktV17() {
  // Hub — orbital with rings
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">05 · Hoe het denkt · HUB · ORBITAL RINGS</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 32px", maxWidth:"22ch"}}>
          Drie ringen rondom de kern.
        </h2>
        <div style={{padding:"32px", border:"1px solid var(--line)", borderRadius:14, background:"var(--industrial-black)"}}>
          <svg viewBox="0 0 900 520" style={{width:"100%", height:"auto"}}>
            <ellipse cx="450" cy="260" rx="380" ry="190" fill="none" stroke="var(--muted)" strokeWidth="0.8" opacity=".4"/>
            <ellipse cx="450" cy="260" rx="270" ry="135" fill="none" stroke="var(--power-orange)" strokeWidth="0.8" strokeDasharray="3 5" opacity=".5"/>
            <ellipse cx="450" cy="260" rx="160" ry="80" fill="none" stroke="var(--power-orange)" strokeWidth="1" opacity=".7"/>
            <text x="60" y="80" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="1.6" fill="var(--muted)">INPUTS · OUTER</text>
            <text x="60" y="240" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="1.6" fill="var(--power-orange)">RULES · MIDDLE</text>
            <text x="60" y="360" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="1.6" fill="var(--power-orange)">OUTPUTS · INNER</text>
            <rect x="380" y="230" width="140" height="60" rx="8" fill="var(--power-orange)"/>
            <text x="450" y="258" textAnchor="middle" fontFamily="Archivo" fontWeight="800" fontSize="16" fill="#0A0A0A">CONTROL</text>
            <text x="450" y="278" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" letterSpacing="1.5" fill="#0A0A0A" opacity=".7">CORE</text>
            {INPUTS.map(([t],i)=>{
              const angles = [-2.4,-1.2,1.2,2.4];
              const a = angles[i];
              const x = 450 + Math.cos(a) * 380;
              const y = 260 + Math.sin(a) * 190;
              return (<g key={"in"+i}>
                <circle cx={x} cy={y} r="6" fill="var(--off-white)"/>
                <text x={x} y={y+24} textAnchor="middle" fontFamily="Archivo" fontWeight="600" fontSize="13" fill="var(--off-white)">{t}</text>
              </g>);
            })}
            {["Peak shaving","Load balance","Failover"].map((t,i)=>{
              const a = -1.6 + i*1.6;
              const x = 450 + Math.cos(a) * 270;
              const y = 260 + Math.sin(a) * 135;
              return (<g key={"r"+i}>
                <circle cx={x} cy={y} r="5" fill="var(--power-orange)"/>
                <text x={x} y={y-10} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill="var(--power-orange)">{t}</text>
              </g>);
            })}
            {OUTPUTS.map(([t],i)=>{
              const angles = [-2.4,-1.2,1.2,2.4];
              const a = angles[i] + Math.PI;
              const x = 450 + Math.cos(a) * 160;
              const y = 260 + Math.sin(a) * 80;
              return (<g key={"out"+i}>
                <circle cx={x} cy={y} r="5" fill="var(--power-orange)"/>
                <text x={x} y={y+22} textAnchor="middle" fontFamily="Archivo" fontWeight="600" fontSize="11" fill="var(--off-white)">{t}</text>
              </g>);
            })}
          </svg>
        </div>
      </div>
    </div>
  );
};

CtrlDenkt.DenktV18 = function DenktV18() {
  // Hub — left/right with detail panels
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">05 · Hoe het denkt · HUB · GROUPED I/O</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 32px", maxWidth:"22ch"}}>
          Inputs links. Outputs rechts. Brein in het midden.
        </h2>
        <div style={{padding:"32px", border:"1px solid var(--line)", borderRadius:14, background:"var(--industrial-black)", display:"grid", gridTemplateColumns:"1fr 240px 1fr", gap:24, alignItems:"center"}}>
          <div>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase", marginBottom:14}}>↳ Inputs</div>
            {INPUTS.map(([t,s],i)=>(
              <div key={i} style={{padding:"14px 18px", marginBottom:6, background:"var(--steel-dark)", border:"1px solid var(--line)", borderRadius:6, position:"relative"}}>
                <div style={{fontFamily:"var(--display)", fontWeight:600, fontSize:14, color:"var(--off-white)"}}>{t}</div>
                <div style={{fontFamily:"var(--mono)", fontSize:10.5, color:"var(--muted)", marginTop:2}}>{s}</div>
                <div style={{position:"absolute", right:-12, top:"50%", width:12, height:1, background:"var(--power-orange)"}}/>
              </div>
            ))}
          </div>
          <div style={{padding:"32px 22px", background:"var(--power-orange)", color:"var(--deep-black)", borderRadius:12, textAlign:"center"}}>
            <div style={{fontFamily:"var(--mono)", fontSize:10, letterSpacing:".24em", marginBottom:8, opacity:.7}}>EMS PLATFORM</div>
            <div style={{fontFamily:"var(--display)", fontWeight:800, fontSize:32, letterSpacing:"-.02em", marginBottom:6}}>Control</div>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", opacity:.7, marginBottom:18}}>v2 · live</div>
            <div style={{borderTop:"1px solid rgba(10,10,10,.2)", paddingTop:14, fontFamily:"var(--mono)", fontSize:11, letterSpacing:".16em", textAlign:"left"}}>
              <div style={{marginBottom:4}}>● 4 inputs ↓</div>
              <div style={{marginBottom:4}}>○ regels ⇄</div>
              <div>● 4 outputs ↑</div>
            </div>
          </div>
          <div>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase", marginBottom:14}}>↳ Outputs</div>
            {OUTPUTS.map(([t,s],i)=>(
              <div key={i} style={{padding:"14px 18px", marginBottom:6, background:"var(--steel-dark)", border:"1px solid var(--line)", borderLeft:"3px solid var(--power-orange)", borderRadius:"0 6px 6px 0", position:"relative"}}>
                <div style={{fontFamily:"var(--display)", fontWeight:600, fontSize:14, color:"var(--off-white)"}}>{t}</div>
                <div style={{fontFamily:"var(--mono)", fontSize:10.5, color:"var(--muted)", marginTop:2}}>{s}</div>
                <div style={{position:"absolute", left:-12, top:"50%", width:12, height:1, background:"var(--power-orange)"}}/>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlDenkt.DenktV19 = function DenktV19() {
  // Hub — minimal/asymmetric, large negative space
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">05 · Hoe het denkt · HUB · MINIMAL</div>
        <div className="sec-num">// Hoe het denkt</div>
        <div style={{padding:"56px 48px", border:"1px solid var(--line)", borderRadius:14, background:"var(--industrial-black)", position:"relative", minHeight:520, overflow:"hidden"}}>
          <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:64, letterSpacing:"-.03em", lineHeight:1, margin:"0 0 40px", maxWidth:"14ch"}}>
            Eén kern.<br/>Acht zenuwen.
          </h2>
          <svg viewBox="0 0 900 320" style={{width:"100%", height:"auto"}}>
            {INPUTS.map(([t],i)=>{
              const y = 40 + i*70;
              return (<g key={"in"+i}>
                <text x="40" y={y} fontFamily="Archivo" fontWeight="600" fontSize="16" fill="var(--off-white)">{t}</text>
                <text x="40" y={y+18} fontFamily="JetBrains Mono" fontSize="9.5" letterSpacing="1.4" fill="var(--muted)">INPUT · {String(i+1).padStart(2,"0")}</text>
                <line x1="200" y1={y-4} x2="430" y2="160" stroke="var(--muted)" strokeWidth="0.8" strokeDasharray="2 4" opacity=".6"/>
              </g>);
            })}
            <circle cx="450" cy="160" r="60" fill="none" stroke="var(--power-orange)" strokeWidth="1.4"/>
            <circle cx="450" cy="160" r="6" fill="var(--power-orange)"/>
            <text x="450" y="240" textAnchor="middle" fontFamily="Archivo" fontWeight="800" fontSize="18" fill="var(--off-white)">CONTROL</text>
            <text x="450" y="258" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="1.6" fill="var(--muted)">EMS · v2</text>
            {OUTPUTS.map(([t],i)=>{
              const y = 40 + i*70;
              return (<g key={"out"+i}>
                <text x="860" y={y} textAnchor="end" fontFamily="Archivo" fontWeight="600" fontSize="16" fill="var(--off-white)">{t}</text>
                <text x="860" y={y+18} textAnchor="end" fontFamily="JetBrains Mono" fontSize="9.5" letterSpacing="1.4" fill="var(--power-orange)">OUTPUT · {String(i+1).padStart(2,"0")}</text>
                <line x1="700" y1={y-4} x2="510" y2="160" stroke="var(--power-orange)" strokeWidth="1.2" opacity=".85"/>
              </g>);
            })}
          </svg>
        </div>
      </div>
    </div>
  );
};

CtrlDenkt.DenktV20 = function DenktV20() {
  // Hub — schematic blueprint with grid
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">05 · Hoe het denkt · HUB · BLUEPRINT</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 32px", maxWidth:"22ch"}}>
          Schematisch — zoals een ingenieur het tekent.
        </h2>
        <div style={{padding:"32px", border:"1px solid var(--line)", borderRadius:14, background:"#0a0805", position:"relative"}}>
          <svg viewBox="0 0 1000 480" style={{width:"100%", height:"auto"}}>
            <defs>
              <pattern id="grid20" width="40" height="40" patternUnits="userSpaceOnUse">
                <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,107,43,.06)" strokeWidth="0.5"/>
              </pattern>
            </defs>
            <rect width="1000" height="480" fill="url(#grid20)"/>
            <text x="20" y="30" fontFamily="JetBrains Mono" fontSize="9" letterSpacing="1.6" fill="var(--muted)">DWG-001 · CONTROL · I/O SCHEMATIC</text>
            <text x="980" y="30" textAnchor="end" fontFamily="JetBrains Mono" fontSize="9" letterSpacing="1.6" fill="var(--muted)">REV 02</text>
            {INPUTS.map(([t,s],i)=>{
              const y = 80 + i*70;
              return (<g key={"in"+i}>
                <rect x="40" y={y} width="180" height="48" fill="none" stroke="var(--muted)" strokeWidth="1"/>
                <text x="50" y={y+20} fontFamily="JetBrains Mono" fontSize="10.5" letterSpacing="1.4" fill="var(--muted)">IN-{String(i+1).padStart(2,"0")}</text>
                <text x="50" y={y+38} fontFamily="Archivo" fontWeight="600" fontSize="13" fill="var(--off-white)">{t}</text>
                <line x1="220" y1={y+24} x2="430" y2="240" stroke="var(--power-orange)" strokeWidth="1.2" strokeDasharray="4 3"/>
                <circle cx="220" cy={y+24} r="3" fill="var(--power-orange)"/>
              </g>);
            })}
            <rect x="430" y="200" width="140" height="80" fill="none" stroke="var(--power-orange)" strokeWidth="1.6"/>
            <rect x="438" y="208" width="124" height="64" fill="var(--power-orange)" opacity=".15"/>
            <text x="500" y="234" textAnchor="middle" fontFamily="Archivo" fontWeight="800" fontSize="16" fill="var(--power-orange)">CONTROL</text>
            <text x="500" y="252" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="1.4" fill="var(--power-orange)">EMS·CORE</text>
            <text x="500" y="268" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="var(--muted)">P/N: WTQ-CTRL-2</text>
            {OUTPUTS.map(([t,s],i)=>{
              const y = 80 + i*70;
              return (<g key={"out"+i}>
                <line x1="570" y1="240" x2="780" y2={y+24} stroke="var(--power-orange)" strokeWidth="1.2"/>
                <circle cx="780" cy={y+24} r="3" fill="var(--power-orange)"/>
                <rect x="780" y={y} width="180" height="48" fill="none" stroke="var(--power-orange)" strokeWidth="1"/>
                <text x="790" y={y+20} fontFamily="JetBrains Mono" fontSize="10.5" letterSpacing="1.4" fill="var(--power-orange)">OUT-{String(i+1).padStart(2,"0")}</text>
                <text x="790" y={y+38} fontFamily="Archivo" fontWeight="600" fontSize="13" fill="var(--off-white)">{t}</text>
              </g>);
            })}
            <text x="20" y="460" fontFamily="JetBrains Mono" fontSize="9" letterSpacing="1.4" fill="var(--muted)">SCALE · 1:1   ·   UNIT · MM   ·   SHEET 1/1</text>
          </svg>
        </div>
      </div>
    </div>
  );
};

CtrlDenkt.DenktV11 = function DenktV11() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">05 · Hoe het denkt · ANNOTATED SCREEN</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 32px", maxWidth:"22ch"}}>
          Het denken — geannoteerd.
        </h2>
        <div style={{position:"relative", padding:"36px 36px 36px 36px", border:"1px solid var(--line)", borderRadius:12, background:"var(--industrial-black)"}}>
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr 1fr", gap:10, marginBottom:18}}>
            {[["LOAD","486 kW"],["SOC","78%"],["GEN","OFF"],["MARGIN","144 kW"]].map(([k,v])=>(
              <div key={k} style={{padding:"14px 16px", background:"var(--steel-dark)", borderRadius:6}}>
                <div style={{fontFamily:"var(--mono)", fontSize:10, letterSpacing:".22em", color:"var(--muted)", marginBottom:6}}>{k}</div>
                <div style={{fontFamily:"var(--display)", fontWeight:700, fontSize:18}}>{v}</div>
              </div>
            ))}
          </div>
          <svg viewBox="0 0 1000 220" style={{width:"100%", height:220, background:"var(--steel-dark)", borderRadius:6}}>
            <polyline points="0,160 100,140 200,150 300,130 400,90 500,60 600,80 700,70 800,90 900,80 1000,100" fill="none" stroke="var(--power-orange)" strokeWidth="2"/>
            <line x1="500" y1="0" x2="500" y2="220" stroke="#FFD700" strokeWidth="1" strokeDasharray="4 4"/>
            <circle cx="500" cy="60" r="6" fill="#FFD700"/>
            <text x="510" y="50" fontFamily="JetBrains Mono" fontSize="11" fill="#FFD700">A</text>
            <line x1="700" y1="0" x2="700" y2="220" stroke="var(--power-orange)" strokeWidth="1" strokeDasharray="4 4"/>
            <circle cx="700" cy="70" r="6" fill="var(--power-orange)"/>
            <text x="710" y="60" fontFamily="JetBrains Mono" fontSize="11" fill="var(--power-orange)">B</text>
          </svg>
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:14, marginTop:18}}>
            <div style={{padding:"14px 18px", background:"var(--steel-dark)", borderLeft:"3px solid #FFD700", borderRadius:"0 6px 6px 0"}}>
              <div style={{fontFamily:"var(--mono)", fontSize:11, color:"#FFD700", letterSpacing:".18em", marginBottom:4}}>↳ A · 14:32:08</div>
              <div style={{fontSize:14, color:"var(--off-white)"}}>Voorspelt piek over 12 min — bereidt batterij voor.</div>
            </div>
            <div style={{padding:"14px 18px", background:"var(--steel-dark)", borderLeft:"3px solid var(--power-orange)", borderRadius:"0 6px 6px 0"}}>
              <div style={{fontFamily:"var(--mono)", fontSize:11, color:"var(--power-orange)", letterSpacing:".18em", marginBottom:4}}>↳ B · 14:44:21</div>
              <div style={{fontSize:14, color:"var(--off-white)"}}>Piek aangekomen — batterij ontlaadt 60kW. Geen generator nodig.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlDenkt.DenktV12 = function DenktV12() {
  const cards = [
    ["IF","load > 95% capacity","→ batterij ontlaad","CRITICAL"],
    ["IF","SOC < 15% AND demand high","→ generator start","FALLBACK"],
    ["IF","solar > consumption","→ batterij laad","HARVEST"],
    ["IF","tarief laag AND SOC < 80%","→ batterij laad van net","ECONOMIC"],
    ["IF","piek voorspeld < 5min","→ pre-position batterij","PREDICTIVE"],
    ["IF","grid frequentie afwijkt","→ failover modus","SAFETY"],
  ];
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">05 · Hoe het denkt · DECISION CARDS</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 32px", maxWidth:"22ch"}}>
          Zes typische beslissingen.
        </h2>
        <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:12}}>
          {cards.map(([kw,cond,act,tag],i)=>(
            <div key={i} style={{padding:"24px 24px", background:"var(--industrial-black)", border:"1px solid var(--line)", borderRadius:10}}>
              <div style={{display:"flex", justifyContent:"space-between", marginBottom:18}}>
                <span style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--power-orange)"}}>{kw} · {String(i+1).padStart(2,"0")}</span>
                <span style={{fontFamily:"var(--mono)", fontSize:9.5, letterSpacing:".18em", color:"var(--muted)", padding:"3px 8px", border:"1px solid var(--line)", borderRadius:99}}>{tag}</span>
              </div>
              <div style={{fontFamily:"var(--mono)", fontSize:13, color:"var(--off-white)", lineHeight:1.6, marginBottom:12, padding:"10px 12px", background:"var(--steel-dark)", borderRadius:4}}>{cond}</div>
              <div style={{fontFamily:"var(--display)", fontSize:17, fontWeight:700, color:"var(--power-orange)"}}>{act}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

CtrlDenkt.DenktV13 = function DenktV13() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">05 · Hoe het denkt · LATENCY STRIP</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 32px", maxWidth:"22ch"}}>
          De cyclus duurt 100 milliseconden.
        </h2>
        <div style={{padding:"40px 36px", border:"1px solid var(--line)", borderRadius:12, background:"var(--industrial-black)"}}>
          <div style={{position:"relative", height:80, marginBottom:24, background:"var(--steel-dark)", borderRadius:6}}>
            {[
              [0,18,"SENSE","#9A9182"],
              [18,40,"PREDICT","#FFD700"],
              [40,68,"DECIDE","#FF6B2B"],
              [68,92,"ACT","#FF6B2B"],
              [92,100,"LOG","#7AA37A"],
            ].map(([s,e,t,c])=>(
              <div key={t} style={{position:"absolute", top:0, bottom:0, left:s+"%", width:(e-s)+"%", background:c, opacity:.85, display:"flex", alignItems:"center", justifyContent:"center", borderRight:"1px solid var(--deep-black)"}}>
                <span style={{fontFamily:"var(--mono)", fontSize:11, fontWeight:700, color:"var(--deep-black)", letterSpacing:".18em"}}>{t}</span>
              </div>
            ))}
          </div>
          <div style={{display:"grid", gridTemplateColumns:"repeat(11,1fr)", gap:0, fontFamily:"var(--mono)", fontSize:11, color:"var(--muted)", borderTop:"1px solid var(--line)", paddingTop:8}}>
            {[0,10,20,30,40,50,60,70,80,90,100].map(n=>(<div key={n} style={{textAlign:n===0?"left":n===100?"right":"center"}}>{n}ms</div>))}
          </div>
          <div style={{display:"grid", gridTemplateColumns:"repeat(5,1fr)", gap:14, marginTop:32}}>
            {[
              ["SENSE","Lees alle sensoren — load, SOC, solar, frequenties."],
              ["PREDICT","Voorspel kort de komende 60 sec op basis van patronen."],
              ["DECIDE","Vergelijk staat met regels, kies optimale actie."],
              ["ACT","Stuur commando naar batterij/generator/EV/solar."],
              ["LOG","Audit-trail wegschrijven, leer van uitkomst."],
            ].map(([t,d],i)=>(
              <div key={t}>
                <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--power-orange)", marginBottom:8}}>0{i+1} · {t}</div>
                <p style={{margin:0, fontSize:13, color:"var(--muted)", lineHeight:1.5}}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlDenkt.DenktV14 = function DenktV14() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">05 · Hoe het denkt · OPTIMALISATIE</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 32px", maxWidth:"22ch"}}>
          Wat het systeem optimaliseert.
        </h2>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:32, alignItems:"start"}}>
          <div style={{padding:"36px 36px", 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}}>↳ Doelfunctie</div>
            <div style={{fontFamily:"var(--mono)", fontSize:18, color:"var(--off-white)", lineHeight:1.9, padding:"22px 22px", background:"#0a0805", borderRadius:8}}>
              <div style={{color:"var(--muted)"}}>// minimize</div>
              <div>cost = <span style={{color:"#FF6B2B"}}>α</span>·grid_kWh</div>
              <div>{"     "}+ <span style={{color:"#FF6B2B"}}>β</span>·gen_hours</div>
              <div>{"     "}+ <span style={{color:"#FF6B2B"}}>γ</span>·peak_kW²</div>
              <div>{"     "}+ <span style={{color:"#FF6B2B"}}>δ</span>·battery_wear</div>
              <div style={{color:"var(--muted)", marginTop:10}}>// subject to</div>
              <div>load_served ≥ 100%</div>
              <div>SOC ∈ [10%, 95%]</div>
            </div>
          </div>
          <div>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase", marginBottom:18}}>↳ Wat dat betekent</div>
            {[
              ["α","Minder van het net halen — vooral bij dure tarieven."],
              ["β","Generator zo min mogelijk laten draaien."],
              ["γ","Pieken zwaar straffen — kwadratisch wegen."],
              ["δ","Batterij niet onnodig zwaar belasten."],
            ].map(([s,d])=>(
              <div key={s} style={{padding:"18px 0", borderTop:"1px solid var(--line)", display:"grid", gridTemplateColumns:"60px 1fr", gap:18}}>
                <div style={{fontFamily:"var(--mono)", fontSize:22, color:"var(--power-orange)", fontWeight:600}}>{s}</div>
                <p style={{margin:0, color:"var(--off-white)", fontSize:14.5, lineHeight:1.55}}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlDenkt.DenktV15 = function DenktV15() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">05 · Hoe het denkt · NARRATIEF</div>
        <div style={{display:"grid", gridTemplateColumns:"1fr 2fr", gap:48, alignItems:"start"}}>
          <div>
            <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.05, margin:"0 0 18px", maxWidth:"14ch"}}>
              Een dag in 5 stappen.
            </h2>
            <p style={{color:"var(--muted)", fontSize:15, lineHeight:1.55, margin:0, maxWidth:"36ch"}}>Geen flowchart, geen pseudocode — gewoon wat het systeem doet, in volgorde.</p>
          </div>
          <div style={{position:"relative", paddingLeft:36}}>
            <div style={{position:"absolute", left:13, top:8, bottom:8, width:1, background:"var(--line)"}}/>
            {[
              ["07:14","Ochtend","Load loopt op. Batterij vol uit nacht-tarief. Begint met ontladen, geen net-import."],
              ["10:42","Solar piek","Zon op dak produceert 180kW. Batterij laadt op met overschot. Net-export geblokkeerd."],
              ["13:08","EV golf","Drie chauffeurs pluggen in. Control verlaagt laadtempo van twee om piek te voorkomen."],
              ["16:35","Piek voorspeld","Algoritme ziet patroon: piek over 8 min. Batterij wordt voorgepositioneerd."],
              ["22:50","Nacht","Lage tarief. Batterij laadt tot 95%. Generator stand-by, niet gestart vandaag."],
            ].map(([t,kw,d],i)=>(
              <div key={t} style={{position:"relative", padding:"0 0 28px"}}>
                <div style={{position:"absolute", left:-32, top:6, width:14, height:14, borderRadius:99, background:"var(--power-orange)", border:"3px solid var(--deep-black)"}}/>
                <div style={{display:"flex", gap:14, alignItems:"baseline", marginBottom:6}}>
                  <span style={{fontFamily:"var(--mono)", fontSize:13, color:"var(--power-orange)", letterSpacing:".18em"}}>{t}</span>
                  <h3 style={{fontFamily:"var(--display)", fontSize:20, fontWeight:700, margin:0}}>{kw}</h3>
                </div>
                <p style={{margin:0, color:"var(--muted)", fontSize:14.5, lineHeight:1.55, maxWidth:"60ch"}}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

window.CtrlDenkt = CtrlDenkt;
