// Control · De Shift — 5 varianten
const CtrlShift = {};

CtrlShift.ShiftV1 = function ShiftV1() {
  return (
    <div className="ctrl-art" style={{background:"var(--break)", color:"var(--paper-ink)"}}>
      <div className="wrap">
        <div className="vlabel" style={{color:"#7a3a16"}}>03 · De shift</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"22ch", color:"var(--paper-ink)"}}>
          Van losse bronnen naar één gestuurd systeem.
        </h2>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:24}}>
          <div style={{padding:"32px 30px", background:"rgba(20,16,10,.04)", border:"1px solid rgba(20,16,10,.12)", borderRadius:12}}>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"#6B6256", textTransform:"uppercase", marginBottom:12}}>● Zonder Control</div>
            <h3 style={{fontFamily:"var(--display)", fontSize:28, fontWeight:700, margin:"0 0 16px", letterSpacing:"-.015em"}}>Vier losse producten.<br/>Geen overzicht.</h3>
            <p style={{color:"#6B6256", fontSize:15, lineHeight:1.55, margin:"0 0 16px"}}>Iedere asset doet zijn eigen ding. De batterij weet niet dat de generator draait. Iemand moet het in de gaten houden — of er gaat iets stuk.</p>
            <ul style={{margin:0, padding:0, listStyle:"none"}}>
              {["Handmatige instellingen per asset","Geen real-time afstemming","Reactief — pas ingrijpen als het al fout ging"].map(x=>(
                <li key={x} style={{padding:"8px 0", borderTop:"1px solid rgba(20,16,10,.12)", fontSize:14, color:"#6B6256"}}>— {x}</li>
              ))}
            </ul>
          </div>
          <div style={{padding:"32px 30px", background:"var(--power-orange)", color:"var(--deep-black)", borderRadius:12}}>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", textTransform:"uppercase", marginBottom:12}}>● Met WattIQ Control</div>
            <h3 style={{fontFamily:"var(--display)", fontSize:28, fontWeight:700, margin:"0 0 16px", letterSpacing:"-.015em"}}>Eén systeem.<br/>Eén dashboard.</h3>
            <p style={{fontSize:15, lineHeight:1.55, margin:"0 0 16px", opacity:.85}}>Control verbindt alles. Het ziet de hele locatie tegelijk en stuurt continu af op wat er nodig is — voordat het misgaat.</p>
            <ul style={{margin:0, padding:0, listStyle:"none"}}>
              {["Automatische sturing per seconde","Voorspellend — voorkomt pieken","Eén interface voor je hele site"].map(x=>(
                <li key={x} style={{padding:"8px 0", borderTop:"1px solid rgba(20,16,10,.18)", fontSize:14, opacity:.85}}>+ {x}</li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlShift.ShiftV2 = function ShiftV2() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">03 · De shift · STACKED LAYERS</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"22ch"}}>
          Dezelfde hardware. Andere uitkomst.
        </h2>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:32}}>
          <div>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase", marginBottom:14}}>↳ Voor</div>
            {["Battery","EV Charging","Generator","Solar"].map((x,i)=>(
              <div key={x} style={{padding:"20px 24px", marginBottom:8, background:"var(--steel-dark)", border:"1px solid var(--line)", borderRadius:8, display:"flex", justifyContent:"space-between", alignItems:"center"}}>
                <span style={{fontFamily:"var(--display)", fontWeight:600, fontSize:18}}>{x}</span>
                <span style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", color:"var(--muted)", textTransform:"uppercase"}}>solo · 0{i+1}</span>
              </div>
            ))}
            <div style={{padding:"14px 0", textAlign:"center", fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase"}}>4 systemen, 4 interfaces</div>
          </div>
          <div>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase", marginBottom:14}}>↳ Na</div>
            <div style={{padding:"22px 24px", marginBottom:8, background:"var(--power-orange)", color:"var(--deep-black)", borderRadius:8, display:"flex", justifyContent:"space-between", alignItems:"center"}}>
              <span style={{fontFamily:"var(--display)", fontWeight:700, fontSize:20}}>WattIQ Control</span>
              <span style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", textTransform:"uppercase"}}>EMS · v2</span>
            </div>
            {["Battery","EV Charging","Generator","Solar"].map((x,i)=>(
              <div key={x} style={{padding:"16px 24px", marginBottom:6, background:"var(--industrial-black)", border:"1px solid rgba(255,107,43,.25)", borderLeft:"3px solid var(--power-orange)", display:"flex", justifyContent:"space-between", alignItems:"center"}}>
                <span style={{fontFamily:"var(--display)", fontWeight:600, fontSize:16}}>{x}</span>
                <span style={{fontFamily:"var(--mono)", fontSize:10.5, letterSpacing:".18em", color:"var(--power-orange)", textTransform:"uppercase"}}>↑ stuurt mee</span>
              </div>
            ))}
            <div style={{padding:"14px 0", textAlign:"center", fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase"}}>1 systeem, 1 interface</div>
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlShift.ShiftV3 = function ShiftV3() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">03 · De shift · BEFORE/AFTER</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 32px", maxWidth:"22ch"}}>
          Wat er verandert in het systeem.
        </h2>
        <div style={{display:"grid", gridTemplateColumns:"1fr 80px 1fr", gap:24, alignItems:"center"}}>
          <div style={{padding:"36px 32px", border:"1px solid var(--line)", borderRadius:12, background:"var(--industrial-black)"}}>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase", marginBottom:20}}>VOOR</div>
            <svg viewBox="0 0 280 200" style={{width:"100%", height:200, marginBottom:16}}>
              {[[40,40],[200,40],[40,140],[200,140]].map(([x,y],i)=>(
                <g key={i}>
                  <rect x={x} y={y} width="60" height="40" rx="4" fill="var(--steel-dark)" stroke="var(--muted)"/>
                  <text x={x+30} y={y+25} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="var(--muted)">ASSET {i+1}</text>
                </g>
              ))}
            </svg>
            <p style={{margin:0, color:"var(--muted)", fontSize:14, lineHeight:1.5}}>Vier eilanden. Geen onderlinge communicatie. Iemand moet het integreren — of niemand doet het.</p>
          </div>
          <div style={{textAlign:"center", fontFamily:"var(--display)", fontSize:48, color:"var(--power-orange)"}}>→</div>
          <div style={{padding:"36px 32px", border:"1px solid var(--power-orange)", borderRadius:12, background:"var(--industrial-black)"}}>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase", marginBottom:20}}>NA</div>
            <svg viewBox="0 0 280 200" style={{width:"100%", height:200, marginBottom:16}}>
              <rect x="100" y="80" width="80" height="40" rx="6" fill="var(--power-orange)"/>
              <text x="140" y="105" textAnchor="middle" fontFamily="Archivo" fontWeight="700" fontSize="11" fill="#0A0A0A">CONTROL</text>
              {[[40,40],[200,40],[40,140],[200,140]].map(([x,y],i)=>(
                <g key={i}>
                  <rect x={x} y={y} width="60" height="40" rx="4" fill="var(--steel-dark)" stroke="var(--power-orange)"/>
                  <text x={x+30} y={y+25} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="var(--off-white)">ASSET {i+1}</text>
                  <line x1={x+30} y1={y+(i<2?40:0)} x2={140} y2={i<2?80:120} stroke="var(--power-orange)" strokeWidth="1.4"/>
                </g>
              ))}
            </svg>
            <p style={{margin:0, color:"var(--off-white)", fontSize:14, lineHeight:1.5}}>Eén centraal punt. Alles geïntegreerd. Real-time, automatisch, voorspellend.</p>
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlShift.ShiftV4 = function ShiftV4() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">03 · De shift · MATURITY</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"22ch"}}>
          Vier niveaus van energie­controle.
        </h2>
        <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:8}}>
          {[
            ["L1","Reactief","Iemand kijkt op meters, grijpt in als het misgaat","var(--steel-dark)","var(--muted)"],
            ["L2","Monitoring","Dashboard toont verbruik, mens beslist nog","var(--steel-dark)","var(--muted)"],
            ["L3","Geautomatiseerd","Regels per asset, geen onderlinge afstemming","var(--steel-dark)","var(--off-white)"],
            ["L4","WattIQ Control","Eén systeem stuurt alles, voorspellend","var(--power-orange)","var(--deep-black)"],
          ].map(([lvl,t,d,bg,c],i)=>(
            <div key={lvl} style={{padding:"28px 22px", background:bg, color:c, borderRadius:i===3?"0 12px 12px 0":i===0?"12px 0 0 12px":"0", minHeight:280, display:"flex", flexDirection:"column"}}>
              <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", textTransform:"uppercase", marginBottom:8, opacity:i===3?.7:.6}}>{lvl} · NIVEAU</div>
              <h3 style={{fontFamily:"var(--display)", fontSize:i===3?26:22, fontWeight:700, margin:"0 0 12px", letterSpacing:"-.01em"}}>{t}</h3>
              <p style={{fontSize:13.5, lineHeight:1.5, margin:0, opacity:i===3?.85:.7, flex:1}}>{d}</p>
              {i===3 && <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", textTransform:"uppercase", marginTop:12, fontWeight:600}}>← waar je heen wilt</div>}
            </div>
          ))}
        </div>
        <div style={{marginTop:20, height:6, background:"linear-gradient(90deg, var(--steel-dark) 0%, var(--steel-dark) 70%, var(--power-orange) 100%)", borderRadius:99}}/>
      </div>
    </div>
  );
};

CtrlShift.ShiftV5 = function ShiftV5() {
  const rows = [
    ["Beslissingen","Mens, achteraf","Systeem, real-time"],
    ["Reactietijd","Minuten tot uren","Sub-seconde"],
    ["Pieken","Worden geconstateerd","Worden voorkomen"],
    ["Generatortijd","Continu","Alleen wanneer nodig"],
    ["Capaciteit","Beperkt door zekering","3× uit dezelfde aansluiting"],
    ["Verantwoordelijke","Verspreid","Één partij — WattIQ"],
  ];
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">03 · De shift · TABLE</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"22ch"}}>
          Wat er concreet anders is.
        </h2>
        <div style={{border:"1px solid var(--line)", borderRadius:12, overflow:"hidden"}}>
          <div style={{display:"grid", gridTemplateColumns:"1fr 1.4fr 1.4fr", padding:"18px 28px", background:"var(--steel-dark)", borderBottom:"1px solid var(--line)", fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase"}}>
            <div>Aspect</div><div>Zonder Control</div><div style={{color:"var(--power-orange)"}}>Met Control</div>
          </div>
          {rows.map(([k,a,b],i)=>(
            <div key={k} style={{display:"grid", gridTemplateColumns:"1fr 1.4fr 1.4fr", padding:"22px 28px", borderBottom:i<rows.length-1?"1px solid var(--line)":"none", background:"var(--industrial-black)", alignItems:"baseline"}}>
              <div style={{fontFamily:"var(--display)", fontWeight:700, fontSize:17, color:"var(--off-white)"}}>{k}</div>
              <div style={{color:"var(--muted)", fontSize:15, lineHeight:1.5}}>{a}</div>
              <div style={{color:"var(--off-white)", fontSize:15, lineHeight:1.5, fontWeight:500}}>{b}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

CtrlShift.ShiftV6 = function ShiftV6() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">03 · De shift · TIMELINE</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"22ch"}}>
          Hoe energiebeheer evolueerde.
        </h2>
        <div style={{position:"relative", padding:"32px 0"}}>
          <div style={{position:"absolute", top:80, left:"4%", right:"4%", height:1, background:"var(--line)"}}/>
          <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:14, position:"relative"}}>
            {[
              ["1990s","Manueel","Operator stuurt assets handmatig"],
              ["2000s","Monitoring","Dashboards, mens beslist nog"],
              ["2010s","Regels","If-this-then-that per asset"],
              ["NU","WattIQ Control","Eén systeem, voorspellend, real-time"],
            ].map(([y,t,d],i)=>(
              <div key={y} style={{textAlign:"center", padding:"0 8px"}}>
                <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:i===3?"var(--power-orange)":"var(--muted)", textTransform:"uppercase", marginBottom:18}}>{y}</div>
                <div style={{width:18, height:18, borderRadius:99, background:i===3?"var(--power-orange)":"var(--steel-dark)", border:"3px solid var(--deep-black)", margin:"0 auto 24px", boxShadow:i===3?"0 0 0 4px rgba(255,107,43,.2)":"none"}}/>
                <h3 style={{fontFamily:"var(--display)", fontSize:i===3?22:18, fontWeight:700, margin:"0 0 8px", color:i===3?"var(--power-orange)":"var(--off-white)"}}>{t}</h3>
                <p style={{fontSize:13, color:"var(--muted)", lineHeight:1.5, margin:0}}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlShift.ShiftV7 = function ShiftV7() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">03 · De shift · ARROW BIG</div>
        <div style={{display:"grid", gridTemplateColumns:"1fr auto 1fr", gap:32, alignItems:"center"}}>
          <div style={{textAlign:"right"}}>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase", marginBottom:14}}>VAN</div>
            <h3 style={{fontFamily:"var(--display)", fontSize:64, fontWeight:800, letterSpacing:"-.03em", lineHeight:.95, margin:"0 0 16px", color:"var(--muted)"}}>Losse<br/>hardware</h3>
            <p style={{color:"var(--muted)", fontSize:15, lineHeight:1.5, margin:0, marginLeft:"auto", maxWidth:"30ch"}}>Vier producten, vier interfaces, geen onderling gesprek.</p>
          </div>
          <div style={{fontFamily:"var(--display)", fontSize:120, color:"var(--power-orange)", lineHeight:1, fontWeight:300}}>→</div>
          <div>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase", marginBottom:14}}>NAAR</div>
            <h3 style={{fontFamily:"var(--display)", fontSize:64, fontWeight:800, letterSpacing:"-.03em", lineHeight:.95, margin:"0 0 16px"}}>Eén<br/><span style={{color:"var(--power-orange)"}}>systeem</span></h3>
            <p style={{color:"var(--off-white)", fontSize:15, lineHeight:1.5, margin:0, maxWidth:"30ch"}}>Control bovenop alles. Eén dashboard, één gedrag, één partij.</p>
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlShift.ShiftV8 = function ShiftV8() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">03 · De shift · MODES</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 32px", maxWidth:"22ch"}}>
          Drie modi. Eén stap omhoog.
        </h2>
        <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:14}}>
          {[
            ["MODUS A","Reactief","Mens grijpt in zodra er iets fout gaat. Geen patroon, geen voorspelling.","✗",["Gen draait altijd","Pieken raken zekering","Stilstand wekelijks"]],
            ["MODUS B","Geautomatiseerd","Statische regels per asset. Werkt — totdat omstandigheden veranderen.","◐",["Gen op timer","Pieken soms","Update vereist regelmatig"]],
            ["MODUS C","WattIQ Control","Voorspellend systeem. Past zich aan elke seconde aan.","✓",["Gen alleen indien nodig","Pieken voorkomen","Continu zelflerend"]],
          ].map(([m,t,d,sym,bullets],i)=>(
            <div key={m} style={{padding:"32px 28px", background:i===2?"var(--power-orange)":"var(--industrial-black)", color:i===2?"var(--deep-black)":"var(--off-white)", border:i===2?"1px solid var(--power-orange)":"1px solid var(--line)", borderRadius:12, minHeight:340, display:"flex", flexDirection:"column"}}>
              <div style={{display:"flex", justifyContent:"space-between", marginBottom:18}}>
                <span style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", textTransform:"uppercase", opacity:.7}}>{m}</span>
                <span style={{fontFamily:"var(--display)", fontSize:24, fontWeight:700, color:i===2?"var(--deep-black)":"var(--power-orange)"}}>{sym}</span>
              </div>
              <h3 style={{fontFamily:"var(--display)", fontSize:24, fontWeight:700, margin:"0 0 12px", letterSpacing:"-.01em"}}>{t}</h3>
              <p style={{fontSize:14, lineHeight:1.5, margin:"0 0 18px", opacity:i===2?.85:.75}}>{d}</p>
              <ul style={{margin:0, padding:0, listStyle:"none", marginTop:"auto"}}>
                {bullets.map(b=>(<li key={b} style={{padding:"6px 0", borderTop:"1px solid "+(i===2?"rgba(10,10,10,.15)":"var(--line)"), fontSize:13, opacity:i===2?.85:.7}}>— {b}</li>))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

CtrlShift.ShiftV9 = function ShiftV9() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">03 · De shift · QUOTE</div>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:48, alignItems:"start"}}>
          <div>
            <div style={{fontFamily:"Georgia, serif", fontSize:160, color:"var(--power-orange)", lineHeight:.4, marginBottom:24}}>"</div>
            <p style={{fontFamily:"Georgia, serif", fontSize:36, lineHeight:1.3, color:"var(--off-white)", margin:"0 0 28px", fontStyle:"italic", maxWidth:"24ch"}}>
              Het is geen energieprobleem. Het is een coördinatieprobleem.
            </p>
            <div>
              <div style={{fontFamily:"var(--display)", fontWeight:700, fontSize:18, marginBottom:4}}>Mark de Boer</div>
              <div style={{fontFamily:"var(--mono)", fontSize:12, letterSpacing:".18em", color:"var(--muted)", textTransform:"uppercase"}}>CTO · WattIQ</div>
            </div>
          </div>
          <div style={{padding:"36px 32px", border:"1px solid var(--line)", borderRadius:12, background:"var(--industrial-black)"}}>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase", marginBottom:18}}>↳ Wat dat betekent</div>
            {[
              ["Probleem","Vier assets praten niet onderling"],
              ["Oplossing","Een laag erbovenop die ze dirigeert"],
              ["Resultaat","Eén systeem dat zichzelf bijstuurt"],
            ].map(([k,v])=>(
              <div key={k} style={{padding:"18px 0", borderTop:"1px solid var(--line)"}}>
                <div style={{fontFamily:"var(--mono)", fontSize:10.5, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase", marginBottom:6}}>{k}</div>
                <div style={{fontFamily:"var(--display)", fontWeight:600, fontSize:18}}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlShift.ShiftV10 = function ShiftV10() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">03 · De shift · DIAGRAM SLIDER</div>
        <div className="sec-num">// De shift</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 32px", maxWidth:"22ch"}}>
          Dezelfde site. Andere coördinatie.
        </h2>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:0, border:"1px solid var(--line)", borderRadius:12, overflow:"hidden"}}>
          <div style={{padding:"36px 32px", background:"var(--steel-dark)"}}>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase", marginBottom:20}}>VOOR · CHAOS</div>
            <svg viewBox="0 0 400 220" style={{width:"100%", height:220}}>
              {[[60,40],[200,40],[340,40],[60,180],[200,180],[340,180]].map(([x,y],i)=>(
                <g key={i}>
                  <circle cx={x} cy={y} r="22" fill="var(--industrial-black)" stroke="var(--muted)"/>
                  <text x={x} y={y+4} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="var(--muted)">A{i+1}</text>
                </g>
              ))}
              {[[60,40,200,180],[200,40,340,180],[340,40,60,180],[60,180,340,40]].map(([x1,y1,x2,y2],i)=>(
                <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="var(--muted)" strokeWidth="0.6" strokeDasharray="2 4" opacity=".5"/>
              ))}
            </svg>
            <p style={{margin:"16px 0 0", color:"var(--muted)", fontSize:13.5, lineHeight:1.5}}>Lossse koppelingen, mens als integrator, geen overzicht.</p>
          </div>
          <div style={{padding:"36px 32px", background:"var(--industrial-black)", borderLeft:"1px solid var(--line)"}}>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase", marginBottom:20}}>NA · ORDE</div>
            <svg viewBox="0 0 400 220" style={{width:"100%", height:220}}>
              <circle cx="200" cy="110" r="34" fill="var(--power-orange)"/>
              <text x="200" y="115" textAnchor="middle" fontFamily="Archivo" fontWeight="700" fontSize="11" fill="#0A0A0A">CTRL</text>
              {[[60,40],[340,40],[60,180],[340,180],[200,30],[200,190]].map(([x,y],i)=>(
                <g key={i}>
                  <line x1={x} y1={y} x2="200" y2="110" stroke="var(--power-orange)" strokeWidth="1.4" opacity=".7"/>
                  <circle cx={x} cy={y} r="20" fill="var(--steel-dark)" stroke="var(--power-orange)"/>
                  <text x={x} y={y+4} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="var(--off-white)">A{i+1}</text>
                </g>
              ))}
            </svg>
            <p style={{margin:"16px 0 0", color:"var(--off-white)", fontSize:13.5, lineHeight:1.5}}>Eén centrum, alles geïntegreerd, real-time afgestemd.</p>
          </div>
        </div>
      </div>
    </div>
  );
};

window.CtrlShift = CtrlShift;
