// Control · Positionering — 5 varianten (de verbindende laag)
const CtrlPos = {};

const PRODS = [
  ["01","Battery","Core · Lite · Flex"],
  ["02","EV Charging","Grid 80–800"],
  ["03","Solar","Ray Fold · Flex"],
  ["04","Generator","Forge · Fusion"],
];

CtrlPos.PosV1 = function PosV1() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">08 · Positionering</div>
        <div className="sec-head">
          <div><div className="sec-num">// De verbindende laag</div><h2>Geen software. Geen batterij.<br/>Eén systeem.</h2></div>
          <p className="lead">WattIQ Control is de laag die alles verbindt — zonder Control zijn dit losse producten. Met Control werkt het als één geheel.</p>
        </div>
        <div style={{padding:"32px 36px", border:"1px solid var(--line)", borderRadius:14, background:"var(--industrial-black)"}}>
          <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:12, marginBottom:0}}>
            {PRODS.map(([n,t,s])=>(
              <div key={n} style={{padding:"18px 20px", background:"var(--steel-dark)", border:"1px solid var(--line)", borderRadius:8}}>
                <div style={{fontFamily:"var(--mono)", fontSize:10.5, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase", marginBottom:8}}>{n}</div>
                <div style={{fontFamily:"var(--display)", fontWeight:600, fontSize:16, marginBottom:4}}>{t}</div>
                <div style={{fontFamily:"var(--mono)", fontSize:10.5, letterSpacing:".15em", color:"var(--muted)", textTransform:"uppercase"}}>{s}</div>
              </div>
            ))}
          </div>
          <div style={{height:32, position:"relative"}}>
            {[12.5,37.5,62.5,87.5].map(x=>(
              <div key={x} style={{position:"absolute", left:x+"%", top:0, bottom:0, width:1, background:"var(--power-orange)"}}/>
            ))}
          </div>
          <div style={{padding:"24px 28px", background:"var(--power-orange)", borderRadius:10, color:"var(--deep-black)", textAlign:"center"}}>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", textTransform:"uppercase", marginBottom:8, opacity:.7}}>EMS PLATFORM · STUURT ALLES</div>
            <div style={{fontFamily:"var(--display)", fontSize:30, fontWeight:800, letterSpacing:"-.02em"}}>WattIQ Control — de verbindende laag</div>
          </div>
          <div style={{textAlign:"center", marginTop:20, fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase"}}>
            ↓ Eén gedrag · één dashboard · één verantwoordelijke partij
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlPos.PosV2 = function PosV2() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">08 · Positionering · HUB & SPOKES</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"22ch"}}>
          Control verbindt vier productlijnen.
        </h2>
        <div style={{position:"relative", padding:"40px 24px", border:"1px solid var(--line)", borderRadius:14, background:"var(--industrial-black)", minHeight:480}}>
          <svg viewBox="0 0 1100 460" style={{width:"100%", height:"auto"}}>
            <line x1="200" y1="100" x2="550" y2="230" stroke="var(--power-orange)" strokeWidth="1.6" opacity=".6"/>
            <line x1="900" y1="100" x2="550" y2="230" stroke="var(--power-orange)" strokeWidth="1.6" opacity=".6"/>
            <line x1="200" y1="380" x2="550" y2="230" stroke="var(--power-orange)" strokeWidth="1.6" opacity=".6"/>
            <line x1="900" y1="380" x2="550" y2="230" stroke="var(--power-orange)" strokeWidth="1.6" opacity=".6"/>
            <circle cx="550" cy="230" r="100" fill="var(--power-orange)"/>
            <text x="550" y="220" textAnchor="middle" fontFamily="Archivo" fontWeight="800" fontSize="32" fill="#0A0A0A">Control</text>
            <text x="550" y="248" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="11" letterSpacing="2" fill="#0A0A0A" opacity=".7">EMS · v2</text>
            {[[200,100,"Battery","Core · Lite · Flex"],[900,100,"EV Charging","Grid 80–800"],[200,380,"Solar","Ray · Fold · Flex"],[900,380,"Generator","Forge · Fusion"]].map(([x,y,t,s],i)=>(
              <g key={i}>
                <circle cx={x} cy={y} r="68" fill="var(--steel-dark)" stroke="var(--power-orange)" strokeWidth="1.4"/>
                <text x={x} y={y-5} textAnchor="middle" fontFamily="Archivo" fontWeight="700" fontSize="18" fill="var(--off-white)">{t}</text>
                <text x={x} y={y+18} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9.5" letterSpacing="1.5" fill="var(--muted)">{s}</text>
              </g>
            ))}
          </svg>
        </div>
        <p style={{marginTop:20, color:"var(--muted)", fontSize:14, fontFamily:"var(--mono)", letterSpacing:".1em", textAlign:"center"}}>↳ Alleen Control kan dit aansturen — losse hardware niet.</p>
      </div>
    </div>
  );
};

CtrlPos.PosV3 = function PosV3() {
  // Stack tower
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">08 · Positionering · STACK</div>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:48, alignItems:"start"}}>
          <div>
            <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 20px", maxWidth:"22ch"}}>
              De stack van een gestuurde site.
            </h2>
            <p style={{color:"var(--muted)", fontSize:16, lineHeight:1.55, margin:"0 0 24px", maxWidth:"42ch"}}>
              Vier hardware-lagen, één coördinator. Zonder die laag werken de stukken niet samen — met die laag is het één machine.</p>
            <ul style={{margin:0, padding:0, listStyle:"none", fontFamily:"var(--mono)", fontSize:13, letterSpacing:".08em", color:"var(--muted)"}}>
              {["Hardware-agnostisch — werkt op andere merken","Open API voor SCADA en BMS koppelingen","Updates over-the-air, geen onderbreking"].map(x=>(<li key={x} style={{padding:"6px 0"}}>↳ {x}</li>))}
            </ul>
          </div>
          <div>
            {[
              ["L4","WattIQ Control","var(--power-orange)","var(--deep-black)","Beslist & stuurt"],
              ["L3","Battery · Solar","var(--steel-dark)","var(--off-white)","Energie-opslag & opwek"],
              ["L2","EV · Generator","var(--steel-dark)","var(--off-white)","Lasten & back-up"],
              ["L1","Aansluiting","var(--industrial-black)","var(--muted)","Net · capaciteit"],
            ].map(([lvl,t,bg,c,d],i)=>(
              <div key={lvl} style={{padding:"22px 26px", background:bg, color:c, borderTop:i?"none":"none", borderRadius:i===0?"12px 12px 0 0":i===3?"0 0 12px 12px":"0", display:"flex", justifyContent:"space-between", alignItems:"center", borderBottom:i<3?"1px solid rgba(244,239,226,.08)":"none"}}>
                <div style={{display:"flex", alignItems:"baseline", gap:18}}>
                  <span style={{fontFamily:"var(--mono)", fontSize:12, letterSpacing:".22em", textTransform:"uppercase", opacity:i===0?.7:.6}}>{lvl}</span>
                  <span style={{fontFamily:"var(--display)", fontWeight:i===0?800:600, fontSize:i===0?22:18, letterSpacing:"-.005em"}}>{t}</span>
                </div>
                <span style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", textTransform:"uppercase", opacity:.7}}>{d}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlPos.PosV4 = function PosV4() {
  // Periodic-table style tile
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">08 · Positionering · PERIODIC</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"22ch"}}>
          Elke laag heeft een rol — Control is de katalysator.
        </h2>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr 1fr", gap:8}}>
          {[
            ["Bt","Battery","var(--steel-dark)","Core · Lite · Flex"],
            ["EV","EV Charging","var(--steel-dark)","Grid 80–800"],
            ["So","Solar","var(--steel-dark)","Ray · Fold · Flex"],
            ["Gn","Generator","var(--steel-dark)","Forge · Fusion"],
          ].map(([sym,name,bg,fam])=>(
            <div key={sym} style={{padding:"24px", background:bg, border:"1px solid var(--line)", aspectRatio:"1", display:"flex", flexDirection:"column", justifyContent:"space-between"}}>
              <div style={{display:"flex", justifyContent:"space-between", fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", color:"var(--muted)", textTransform:"uppercase"}}>
                <span>HW</span><span>L2-3</span>
              </div>
              <div style={{textAlign:"center"}}>
                <div style={{fontFamily:"var(--display)", fontSize:64, fontWeight:800, color:"var(--off-white)", letterSpacing:"-.03em", lineHeight:1}}>{sym}</div>
                <div style={{fontFamily:"var(--display)", fontWeight:600, fontSize:14, color:"var(--off-white)", marginTop:6}}>{name}</div>
              </div>
              <div style={{fontFamily:"var(--mono)", fontSize:10, letterSpacing:".15em", color:"var(--muted)", textTransform:"uppercase", textAlign:"center"}}>{fam}</div>
            </div>
          ))}
        </div>
        <div style={{marginTop:8, padding:"36px 24px", background:"var(--power-orange)", color:"var(--deep-black)", display:"grid", gridTemplateColumns:"auto 1fr auto", gap:32, alignItems:"center"}}>
          <div style={{fontFamily:"var(--display)", fontSize:96, fontWeight:800, letterSpacing:"-.04em", lineHeight:.85}}>Ct</div>
          <div>
            <div style={{fontFamily:"var(--mono)", fontSize:12, letterSpacing:".22em", textTransform:"uppercase", marginBottom:6}}>EMS · L4 · CONTROL</div>
            <div style={{fontFamily:"var(--display)", fontSize:32, fontWeight:800, letterSpacing:"-.015em"}}>WattIQ Control</div>
            <div style={{fontFamily:"var(--display-alt)", fontSize:14, marginTop:6, opacity:.75}}>Verbindende laag · stuurt alle 4 hardware-lagen, real-time, automatisch.</div>
          </div>
          <div style={{fontFamily:"var(--display)", fontSize:48, fontWeight:800, opacity:.5}}>↑</div>
        </div>
      </div>
    </div>
  );
};

CtrlPos.PosV5 = function PosV5() {
  // Flow manifest - giant orange band with logos around
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">08 · Positionering · MANIFEST</div>
        <div style={{textAlign:"center", marginBottom:32}}>
          <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:48, letterSpacing:"-.02em", lineHeight:1.05, margin:"0 auto", maxWidth:"22ch"}}>
            Vier producten. Eén systeem. Eén partij.
          </h2>
        </div>
        <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:8, marginBottom:8}}>
          {PRODS.map(([n,t,s])=>(
            <div key={n} style={{padding:"24px 20px", background:"var(--industrial-black)", border:"1px solid var(--line)", textAlign:"center"}}>
              <div style={{fontFamily:"var(--mono)", fontSize:10.5, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase", marginBottom:10}}>{n}</div>
              <div style={{fontFamily:"var(--display)", fontWeight:700, fontSize:18, marginBottom:4}}>{t}</div>
              <div style={{fontFamily:"var(--mono)", fontSize:10, letterSpacing:".15em", color:"var(--muted)", textTransform:"uppercase"}}>{s}</div>
            </div>
          ))}
        </div>
        <div style={{padding:"48px 32px", background:"var(--power-orange)", color:"var(--deep-black)"}}>
          <div style={{display:"flex", justifyContent:"space-between", marginBottom:18, fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", textTransform:"uppercase", opacity:.7}}>
            <span>↑ HARDWARE</span><span>EMS · CONTROL · L4</span><span>↓ NETWERK</span>
          </div>
          <h3 style={{fontFamily:"var(--display)", fontSize:64, fontWeight:800, letterSpacing:"-.025em", lineHeight:1, margin:0, textAlign:"center"}}>
            WattIQ Control
          </h3>
          <p style={{fontFamily:"var(--display-alt)", fontSize:18, lineHeight:1.5, margin:"16px auto 0", textAlign:"center", maxWidth:"56ch", opacity:.85}}>
            De verbindende laag — stuurt alle hardware als één systeem, met één dashboard en één verantwoordelijke partij.
          </p>
        </div>
        <div style={{padding:"22px 28px", background:"var(--steel-dark)", display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:24, fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase", textAlign:"center"}}>
          <div>● Eén gedrag</div><div>● Eén dashboard</div><div>● Eén verantwoordelijke</div>
        </div>
      </div>
    </div>
  );
};

CtrlPos.PosV6 = function PosV6() {
  // Without / With — contrast split
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">08 · Positionering · WITHOUT / WITH</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"22ch"}}>
          Hetzelfde site. Twee uitkomsten.
        </h2>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:10}}>
          <div style={{padding:"32px 28px", background:"var(--industrial-black)", border:"1px solid var(--line)", borderRadius:12, minHeight:480, position:"relative"}}>
            <div style={{display:"flex", justifyContent:"space-between", marginBottom:20, fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase"}}>
              <span>↳ Zonder Control</span><span style={{color:"#a85a3a"}}>● losse stukken</span>
            </div>
            <svg viewBox="0 0 380 360" style={{width:"100%", height:"auto"}}>
              {[[80,90],[300,80],[90,290],[300,300]].map(([x,y],i)=>(
                <g key={i}>
                  <rect x={x-40} y={y-22} width="80" height="44" fill="var(--steel-dark)" stroke="var(--muted)" strokeWidth="1"/>
                  <text x={x} y={y+5} textAnchor="middle" fontFamily="Archivo" fontWeight="600" fontSize="12" fill="var(--off-white)">{["Battery","EV","Solar","Generator"][i]}</text>
                </g>
              ))}
              {[[80,90,300,80],[80,90,90,290],[300,80,300,300],[90,290,300,300],[80,90,300,300],[300,80,90,290]].map(([x1,y1,x2,y2],i)=>(
                <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#a85a3a" strokeWidth=".8" strokeDasharray="3 4" opacity=".6"/>
              ))}
              <text x="190" y="190" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="2" fill="#a85a3a">CONFLICT</text>
            </svg>
            <div style={{marginTop:18, fontFamily:"var(--mono)", fontSize:11.5, letterSpacing:".1em", color:"var(--muted)", lineHeight:1.7}}>
              <div>↳ Apparaten beslissen los</div>
              <div>↳ Pieken botsen, batterij leeg op verkeerd moment</div>
              <div>↳ Vier dashboards, vier leveranciers</div>
            </div>
          </div>
          <div style={{padding:"32px 28px", background:"#1a1208", border:"1px solid var(--power-orange)", borderRadius:12, minHeight:480, position:"relative"}}>
            <div style={{display:"flex", justifyContent:"space-between", marginBottom:20, fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase"}}>
              <span>↳ Met Control</span><span>● één systeem</span>
            </div>
            <svg viewBox="0 0 380 360" style={{width:"100%", height:"auto"}}>
              <circle cx="190" cy="190" r="44" fill="var(--power-orange)"/>
              <text x="190" y="186" textAnchor="middle" fontFamily="Archivo" fontWeight="800" fontSize="13" fill="#0A0A0A">CONTROL</text>
              <text x="190" y="200" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="8" letterSpacing="1.5" fill="#0A0A0A" opacity=".7">EMS · v2</text>
              {[[80,90],[300,80],[90,290],[300,300]].map(([x,y],i)=>(
                <g key={i}>
                  <line x1="190" y1="190" x2={x} y2={y} stroke="var(--power-orange)" strokeWidth="1.2"/>
                  <rect x={x-40} y={y-22} width="80" height="44" fill="var(--steel-dark)" stroke="var(--power-orange)" strokeWidth="1"/>
                  <text x={x} y={y+5} textAnchor="middle" fontFamily="Archivo" fontWeight="600" fontSize="12" fill="var(--off-white)">{["Battery","EV","Solar","Generator"][i]}</text>
                </g>
              ))}
            </svg>
            <div style={{marginTop:18, fontFamily:"var(--mono)", fontSize:11.5, letterSpacing:".1em", color:"var(--off-white)", lineHeight:1.7}}>
              <div style={{color:"var(--power-orange)"}}>↳ Eén beslisser, real-time</div>
              <div style={{color:"var(--power-orange)"}}>↳ Pieken voorspeld, capaciteit benut</div>
              <div style={{color:"var(--power-orange)"}}>↳ Eén dashboard, één partij</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlPos.PosV7 = function PosV7() {
  // Org chart — Control as manager, products as reports
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">08 · Positionering · ORG</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 8px", maxWidth:"22ch"}}>
          Wie beslist op een gestuurde site?
        </h2>
        <p style={{color:"var(--muted)", fontSize:15, lineHeight:1.5, margin:"0 0 36px", maxWidth:"50ch"}}>
          Hardware voert uit. Control beslist. Een organogram van een geautomatiseerde site.
        </p>
        <div style={{padding:"40px 32px 36px", background:"var(--industrial-black)", border:"1px solid var(--line)", borderRadius:14}}>
          <div style={{display:"flex", justifyContent:"center", marginBottom:0}}>
            <div style={{padding:"22px 38px", background:"var(--power-orange)", color:"var(--deep-black)", borderRadius:10, textAlign:"center", minWidth:280}}>
              <div style={{fontFamily:"var(--mono)", fontSize:10.5, letterSpacing:".24em", textTransform:"uppercase", opacity:.7, marginBottom:6}}>EMS · L4 · BESLISSER</div>
              <div style={{fontFamily:"var(--display)", fontWeight:800, fontSize:28, letterSpacing:"-.015em"}}>WattIQ Control</div>
              <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", marginTop:4, opacity:.7}}>4 directs · real-time</div>
            </div>
          </div>
          <div style={{display:"flex", justifyContent:"center", margin:"0", height:32}}>
            <div style={{width:1, background:"var(--power-orange)"}}/>
          </div>
          <div style={{height:1, background:"var(--power-orange)", margin:"0 12.5%"}}/>
          <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:12, marginTop:0, paddingTop:0}}>
            {PRODS.map(([n,t,s],i)=>(
              <div key={n} style={{position:"relative"}}>
                <div style={{position:"absolute", left:"50%", top:-16, width:1, height:16, background:"var(--power-orange)"}}/>
                <div style={{padding:"18px 18px", background:"var(--steel-dark)", border:"1px solid var(--line)", borderRadius:8, marginTop:16}}>
                  <div style={{display:"flex", justifyContent:"space-between", marginBottom:10, fontFamily:"var(--mono)", fontSize:10, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase"}}>
                    <span>HW · {n}</span><span style={{color:"var(--power-orange)"}}>↳ direct</span>
                  </div>
                  <div style={{fontFamily:"var(--display)", fontWeight:700, fontSize:17, color:"var(--off-white)", marginBottom:4}}>{t}</div>
                  <div style={{fontFamily:"var(--mono)", fontSize:10, letterSpacing:".15em", color:"var(--muted)", textTransform:"uppercase", marginBottom:14}}>{s}</div>
                  <div style={{fontFamily:"var(--display-alt)", fontSize:12, color:"var(--muted)", lineHeight:1.5}}>
                    {["Slaat op, levert terug","Laadt slim, prioriteert","Wekt op, voorspelt","Vult aan, back-up"][i]}
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div style={{marginTop:24, padding:"14px 20px", background:"var(--deep-black)", border:"1px dashed var(--muted)", borderRadius:6, fontFamily:"var(--mono)", fontSize:11, letterSpacing:".15em", color:"var(--muted)", textTransform:"uppercase", textAlign:"center"}}>
            ↳ rapporteert via één dashboard · één SLA · één telefoonnummer
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlPos.PosV8 = function PosV8() {
  // Cabling / panel schematic
  const items = [
    ["BAT","Battery","Core · Lite · Flex","#FF6B2B"],
    ["EVS","EV Charging","Grid 80–800","#FFD700"],
    ["SOL","Solar","Ray · Fold · Flex","#7AA37A"],
    ["GEN","Generator","Forge · Fusion","#D86060"],
  ];
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">08 · Positionering · BUS BAR</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"22ch"}}>
          De rail waarop alles aangesloten zit.
        </h2>
        <div style={{padding:"28px 24px", background:"#0a0805", border:"1px solid var(--line)", borderRadius:8, fontFamily:"var(--mono)"}}>
          <div style={{display:"flex", justifyContent:"space-between", marginBottom:14, fontSize:10.5, letterSpacing:".24em", color:"var(--muted)", textTransform:"uppercase"}}>
            <span>↳ PNL · WATTIQ-CTRL · 01</span>
            <span>BUS · 24V · DC</span>
            <span style={{color:"var(--power-orange)"}}>● ENERGIZED</span>
          </div>
          <div style={{position:"relative", padding:"40px 0 60px"}}>
            <div style={{position:"absolute", left:"4%", right:"4%", top:"50%", height:14, background:"var(--power-orange)", transform:"translateY(-50%)", borderRadius:2}}/>
            <div style={{position:"absolute", left:"50%", top:"50%", transform:"translate(-50%,-50%)", padding:"10px 18px", background:"var(--deep-black)", border:"2px solid var(--power-orange)", borderRadius:6, fontSize:11, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase", whiteSpace:"nowrap"}}>
              ↳ EMS CONTROL · L4
            </div>
            <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:24, position:"relative"}}>
              {items.map(([code,t,s,c],i)=>(
                <div key={code} style={{textAlign:"center"}}>
                  <div style={{padding:"14px 12px", background:"var(--steel-dark)", border:"1px solid "+c, borderRadius:6, marginBottom:0}}>
                    <div style={{fontSize:10, letterSpacing:".22em", color:c, marginBottom:4, textTransform:"uppercase"}}>{code} · {String(i+1).padStart(2,"0")}</div>
                    <div style={{fontFamily:"var(--display)", fontWeight:700, fontSize:15, color:"var(--off-white)"}}>{t}</div>
                    <div style={{fontSize:9.5, letterSpacing:".15em", color:"var(--muted)", marginTop:4, textTransform:"uppercase"}}>{s}</div>
                  </div>
                  <div style={{width:2, height:32, background:c, margin:"0 auto"}}/>
                  <div style={{width:14, height:14, borderRadius:99, background:c, margin:"-6px auto 0", border:"3px solid #0a0805"}}/>
                </div>
              ))}
            </div>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:8, paddingTop:18, borderTop:"1px dashed var(--muted)", fontSize:10, letterSpacing:".18em", color:"var(--muted)", textTransform:"uppercase", textAlign:"center"}}>
            <span>● Modbus TCP</span><span>● OCPP 2.0.1</span><span>● SunSpec</span><span>● Dry contact</span>
          </div>
        </div>
        <p style={{marginTop:18, color:"var(--muted)", fontSize:13, fontFamily:"var(--mono)", letterSpacing:".1em"}}>↳ Eén rail, één protocolstack, één partij voor alles.</p>
      </div>
    </div>
  );
};

CtrlPos.PosV9 = function PosV9() {
  // Conductor metaphor — orchestra
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">08 · Positionering · DIRIGENT</div>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1.4fr", gap:48, alignItems:"start"}}>
          <div>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".24em", color:"var(--power-orange)", textTransform:"uppercase", marginBottom:14}}>↳ Metafoor</div>
            <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.05, margin:"0 0 20px"}}>
              Vier secties.<br/>Eén dirigent.
            </h2>
            <p style={{color:"var(--muted)", fontSize:16, lineHeight:1.55, margin:"0 0 24px", maxWidth:"38ch"}}>
              Een orkest zonder dirigent is vier groepen die hetzelfde stuk anders spelen. Met dirigent: één muziek. Control is die laag voor je site.
            </p>
            <div style={{padding:"22px 24px", background:"var(--industrial-black)", border:"1px solid var(--line)", borderRadius:8, fontFamily:"var(--display-alt)", fontSize:14, lineHeight:1.6, color:"var(--muted)"}}>
              <div style={{fontFamily:"var(--mono)", fontSize:10.5, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase", marginBottom:10}}>↳ Wat een dirigent doet</div>
              <div>· Bepaalt tempo (cyclustijd)</div>
              <div>· Bepaalt dynamiek (welke laag, hoe hard)</div>
              <div>· Anticipeert (volgende maat)</div>
              <div>· Houdt het samen (één geheel)</div>
            </div>
          </div>
          <div>
            <div style={{padding:"40px 32px", background:"var(--industrial-black)", border:"1px solid var(--line)", borderRadius:14, position:"relative"}}>
              <div style={{display:"flex", justifyContent:"center", marginBottom:36}}>
                <div style={{padding:"22px 32px", background:"var(--power-orange)", color:"var(--deep-black)", borderRadius:99, textAlign:"center"}}>
                  <div style={{fontFamily:"var(--mono)", fontSize:10, letterSpacing:".24em", textTransform:"uppercase", opacity:.7}}>↳ Dirigent</div>
                  <div style={{fontFamily:"var(--display)", fontWeight:800, fontSize:24, letterSpacing:"-.015em"}}>Control</div>
                </div>
              </div>
              <svg viewBox="0 0 600 160" style={{width:"100%", height:160, marginBottom:24}}>
                <path d="M 60 80 Q 300 -10 540 80" fill="none" stroke="var(--power-orange)" strokeWidth="1.2" strokeDasharray="3 5" opacity=".5"/>
                {[60,200,400,540].map((x,i)=>(
                  <g key={i}>
                    <circle cx={x} cy={80} r="4" fill="var(--power-orange)"/>
                  </g>
                ))}
              </svg>
              <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:8}}>
                {[
                  ["Battery","Strijkers","Core · Lite · Flex"],
                  ["EV","Hout","Grid 80–800"],
                  ["Solar","Koper","Ray · Fold · Flex"],
                  ["Generator","Slag","Forge · Fusion"],
                ].map(([t,sec,fam],i)=>(
                  <div key={i} style={{padding:"16px 14px", background:"var(--steel-dark)", border:"1px solid var(--line)", borderRadius:6, textAlign:"center"}}>
                    <div style={{fontFamily:"var(--mono)", fontSize:9.5, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase", marginBottom:6}}>↳ {sec}</div>
                    <div style={{fontFamily:"var(--display)", fontWeight:700, fontSize:14, color:"var(--off-white)"}}>{t}</div>
                    <div style={{fontFamily:"var(--mono)", fontSize:9, letterSpacing:".15em", color:"var(--muted)", textTransform:"uppercase", marginTop:4}}>{fam}</div>
                  </div>
                ))}
              </div>
              <div style={{textAlign:"center", marginTop:22, fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase"}}>
                ↳ Symphony in C · WattIQ Stack
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlPos.PosV10 = function PosV10() {
  // Spec-sheet / product index
  const rows = [
    ["01","Battery","Hardware","L2","Slaat op, levert terug","Core · Lite · Flex"],
    ["02","EV Charging","Hardware","L2","Laadt slim, prioriteert","Grid 80–800"],
    ["03","Solar","Hardware","L3","Wekt op, voorspelt","Ray · Fold · Flex"],
    ["04","Generator","Hardware","L2","Vult aan, back-up","Forge · Fusion"],
  ];
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">08 · Positionering · INDEX</div>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:24, alignItems:"end", marginBottom:28}}>
          <div>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".24em", color:"var(--muted)", textTransform:"uppercase", marginBottom:12}}>↳ INDEX 08 · POSITIONERING</div>
            <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.05, margin:0, maxWidth:"22ch"}}>
              Vier producten als regels.<br/>Control als kop.
            </h2>
          </div>
          <div style={{fontFamily:"var(--display-alt)", fontSize:15, lineHeight:1.55, color:"var(--muted)"}}>
            Een productindex laat de hiërarchie zwart-op-wit zien — vier hardware-rijen onder één coördinerende laag. Geen logo's, geen metaforen.
          </div>
        </div>
        <div style={{padding:"22px 26px", background:"var(--power-orange)", color:"var(--deep-black)", borderRadius:"10px 10px 0 0", display:"grid", gridTemplateColumns:"60px 2fr 1fr 80px 2.4fr 1.4fr", gap:18, alignItems:"center"}}>
          <div style={{fontFamily:"var(--display)", fontSize:48, fontWeight:800, lineHeight:1, letterSpacing:"-.02em"}}>00</div>
          <div>
            <div style={{fontFamily:"var(--mono)", fontSize:10.5, letterSpacing:".24em", textTransform:"uppercase", opacity:.7, marginBottom:4}}>EMS · L4 · COORDINATOR</div>
            <div style={{fontFamily:"var(--display)", fontWeight:800, fontSize:24, letterSpacing:"-.015em"}}>WattIQ Control</div>
          </div>
          <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", textTransform:"uppercase"}}>Software</div>
          <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", textTransform:"uppercase"}}>L4</div>
          <div style={{fontFamily:"var(--display-alt)", fontSize:13.5, lineHeight:1.45}}>Beslist & stuurt — verbindt alle hardware-lagen tot één gedrag.</div>
          <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", textTransform:"uppercase"}}>v2 · live</div>
        </div>
        <div style={{background:"var(--industrial-black)", border:"1px solid var(--line)", borderTop:"none", borderRadius:"0 0 10px 10px"}}>
          <div style={{padding:"14px 26px", display:"grid", gridTemplateColumns:"60px 2fr 1fr 80px 2.4fr 1.4fr", gap:18, fontFamily:"var(--mono)", fontSize:10, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase", borderBottom:"1px solid var(--line)"}}>
            <span>NR</span><span>PRODUCT</span><span>TYPE</span><span>LAAG</span><span>ROL</span><span>FAMILIES</span>
          </div>
          {rows.map(([nr,prod,typ,laag,rol,fam],i)=>(
            <div key={nr} style={{padding:"22px 26px", display:"grid", gridTemplateColumns:"60px 2fr 1fr 80px 2.4fr 1.4fr", gap:18, alignItems:"center", borderBottom:i<rows.length-1?"1px solid var(--line)":"none"}}>
              <span style={{fontFamily:"var(--display)", fontSize:30, fontWeight:800, color:"var(--muted)", letterSpacing:"-.02em"}}>{nr}</span>
              <span style={{fontFamily:"var(--display)", fontWeight:700, fontSize:18, color:"var(--off-white)"}}>{prod}</span>
              <span style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", color:"var(--muted)", textTransform:"uppercase"}}>{typ}</span>
              <span style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", color:"var(--power-orange)", textTransform:"uppercase"}}>{laag}</span>
              <span style={{fontFamily:"var(--display-alt)", fontSize:13.5, color:"var(--muted)", lineHeight:1.45}}>{rol}</span>
              <span style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".15em", color:"var(--muted)", textTransform:"uppercase"}}>{fam}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

CtrlPos.PosV11 = function PosV11() {
  // Onderscheid — wat het wel/niet is
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">08 · Positionering · ONDERSCHEID</div>
        <div className="sec-num">// Onderscheid</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.05, margin:"0 0 36px", maxWidth:"22ch"}}>
          Niet dat. Niet dit. Maar dat.
        </h2>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:10}}>
          {[
            ["Niet","Een dashboard","Software die alleen meet, kijkt, rapporteert. Stuurt niets aan.","var(--steel-dark)","var(--muted)","#a85a3a"],
            ["Niet","Een batterij","Hardware die opslaat, maar niet weet wanneer, voor wie of waarom.","var(--steel-dark)","var(--muted)","#a85a3a"],
            ["Wel","Eén systeem","De laag die meet én beslist én stuurt — over alle hardware tegelijk.","var(--power-orange)","var(--deep-black)","var(--deep-black)"],
          ].map(([k,t,d,bg,c,tagC],i)=>(
            <div key={i} style={{padding:"32px 28px", background:bg, color:c, borderRadius:10, minHeight:280, display:"flex", flexDirection:"column", justifyContent:"space-between"}}>
              <div>
                <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".24em", color:tagC, textTransform:"uppercase", marginBottom:24}}>↳ {k}</div>
                <div style={{fontFamily:"var(--display)", fontWeight:800, fontSize:32, letterSpacing:"-.018em", lineHeight:1.05, marginBottom:14}}>{t}</div>
                <div style={{fontFamily:"var(--display-alt)", fontSize:14.5, lineHeight:1.55, opacity:i<2?.85:.9}}>{d}</div>
              </div>
              <div style={{fontFamily:"var(--mono)", fontSize:48, fontWeight:600, opacity:.2, textAlign:"right", lineHeight:.8, letterSpacing:"-.04em"}}>{i<2?"✕":"●"}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

CtrlPos.PosV12 = function PosV12() {
  // Layered site map — Control als laag eroverheen
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">08 · Positionering · LAYER MAP</div>
        <div className="sec-num">// Layer map</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.05, margin:"0 0 32px", maxWidth:"22ch"}}>
          Eén laag bovenop de site.
        </h2>
        <div style={{padding:"32px 28px", background:"var(--industrial-black)", border:"1px solid var(--line)", borderRadius:14}}>
          <div style={{position:"relative", minHeight:420}}>
            <svg viewBox="0 0 900 420" style={{width:"100%", height:"auto"}}>
              <defs>
                <pattern id="grid" width="30" height="30" patternUnits="userSpaceOnUse"><path d="M 30 0 L 0 0 0 30" fill="none" stroke="var(--muted)" strokeWidth="0.4" opacity=".25"/></pattern>
              </defs>
              <rect width="900" height="420" fill="url(#grid)"/>
              <text x="20" y="26" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="2" fill="var(--muted)">SITE · PLAN</text>
              {[
                [120,140,"BAT","Battery"],
                [340,90,"EV","Charger"],
                [560,170,"SOL","Solar"],
                [760,120,"GEN","Genset"],
                [220,300,"BAT","Battery"],
                [480,330,"EV","Charger"],
                [700,290,"BAT","Battery"],
              ].map(([x,y,c,t],i)=>(
                <g key={i}>
                  <rect x={x-32} y={y-22} width="64" height="44" fill="var(--steel-dark)" stroke="var(--muted)" strokeWidth=".8"/>
                  <text x={x} y={y-2} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" letterSpacing="1" fill="var(--muted)">{c}</text>
                  <text x={x} y={y+12} textAnchor="middle" fontFamily="Archivo" fontWeight="600" fontSize="10" fill="var(--off-white)">{t}</text>
                </g>
              ))}
              <rect x="40" y="40" width="820" height="340" fill="rgba(255,107,43,.08)" stroke="var(--power-orange)" strokeWidth="1.4" strokeDasharray="6 4"/>
              <rect x="60" y="60" width="180" height="44" fill="var(--power-orange)" rx="4"/>
              <text x="150" y="80" textAnchor="middle" fontFamily="Archivo" fontWeight="800" fontSize="14" fill="#0A0A0A">↳ CONTROL · L4</text>
              <text x="150" y="96" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" letterSpacing="1.5" fill="#0A0A0A" opacity=".7">verbindt deze 7 assets</text>
            </svg>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:8, marginTop:18, padding:"14px 18px", background:"var(--steel-dark)", borderRadius:6, fontFamily:"var(--mono)", fontSize:10.5, letterSpacing:".18em", color:"var(--muted)", textTransform:"uppercase", textAlign:"center"}}>
            <span>● 7 assets ↑</span><span>● 1 platform ↑</span><span style={{color:"var(--power-orange)"}}>● 1 dashboard ↑</span>
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlPos.PosV13 = function PosV13() {
  // Switchboard / cockpit panel
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">08 · Positionering · SWITCHBOARD</div>
        <div className="sec-num">// Eén schakelpaneel</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.05, margin:"0 0 32px", maxWidth:"22ch"}}>
          Eén paneel. Vier schakelaars.
        </h2>
        <div style={{padding:"40px 36px", background:"#1a1208", border:"1px solid var(--line)", borderRadius:14}}>
          <div style={{display:"flex", justifyContent:"space-between", marginBottom:28, fontFamily:"var(--mono)", fontSize:10.5, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase"}}>
            <span>↳ PNL · WATTIQ-CTRL · 01</span>
            <span style={{color:"var(--power-orange)"}}>● MASTER · ON</span>
            <span>STATUS · NOMINAL</span>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:14}}>
            {PRODS.map(([n,t,s],i)=>{
              const states = ["AUTO","AUTO","AUTO","STDBY"];
              return (
                <div key={n} style={{padding:"24px 20px", background:"var(--steel-dark)", border:"1px solid var(--line)", borderRadius:10}}>
                  <div style={{fontFamily:"var(--mono)", fontSize:10, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase", marginBottom:14}}>CH · {n}</div>
                  <div style={{fontFamily:"var(--display)", fontWeight:700, fontSize:18, marginBottom:18, color:"var(--off-white)"}}>{t}</div>
                  <div style={{position:"relative", height:64, background:"#0a0805", borderRadius:32, padding:"6px", display:"flex", alignItems:"center", marginBottom:16}}>
                    <div style={{position:"absolute", left:i===3?"6px":"calc(100% - 58px)", top:6, width:52, height:52, background:i===3?"var(--muted)":"var(--power-orange)", borderRadius:99, transition:".2s"}}/>
                    <div style={{display:"flex", justifyContent:"space-between", width:"100%", padding:"0 14px", fontFamily:"var(--mono)", fontSize:9, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase"}}>
                      <span>OFF</span><span>ON</span>
                    </div>
                  </div>
                  <div style={{display:"flex", justifyContent:"space-between", fontFamily:"var(--mono)", fontSize:9.5, letterSpacing:".18em", color:i===3?"var(--muted)":"var(--power-orange)", textTransform:"uppercase"}}>
                    <span>● {states[i]}</span><span>{s}</span>
                  </div>
                </div>
              );
            })}
          </div>
          <div style={{marginTop:24, padding:"22px 28px", background:"var(--power-orange)", color:"var(--deep-black)", borderRadius:10, display:"grid", gridTemplateColumns:"auto 1fr auto", gap:24, alignItems:"center"}}>
            <div style={{width:48, height:48, borderRadius:99, background:"var(--deep-black)", border:"3px solid #FFFAF0", display:"flex", alignItems:"center", justifyContent:"center", fontFamily:"var(--mono)", fontSize:18, color:"var(--power-orange)"}}>●</div>
            <div>
              <div style={{fontFamily:"var(--mono)", fontSize:10.5, letterSpacing:".22em", textTransform:"uppercase", opacity:.7, marginBottom:4}}>↳ MASTER · EMS</div>
              <div style={{fontFamily:"var(--display)", fontWeight:800, fontSize:22, letterSpacing:"-.015em"}}>WattIQ Control beslist over alle 4 kanalen</div>
            </div>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", textTransform:"uppercase"}}>v2 · LIVE</div>
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlPos.PosV14 = function PosV14() {
  // One vs Many — multi-vendor split
  const others = ["Battery vendor","EV vendor","Solar vendor","Genset vendor","Software vendor"];
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">08 · Positionering · ONE VS MANY</div>
        <div className="sec-num">// One vs many</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.05, margin:"0 0 36px", maxWidth:"22ch"}}>
          Vijf leveranciers. Of één.
        </h2>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:10}}>
          <div style={{padding:"32px 28px", background:"var(--industrial-black)", border:"1px solid var(--line)", borderRadius:12}}>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".24em", color:"#a85a3a", textTransform:"uppercase", marginBottom:24}}>↳ Klassiek · 5 partijen</div>
            <div style={{display:"flex", flexDirection:"column", gap:8, marginBottom:20}}>
              {others.map((v,i)=>(
                <div key={v} style={{display:"grid", gridTemplateColumns:"1fr auto auto", gap:18, padding:"14px 18px", background:"var(--steel-dark)", border:"1px solid var(--line)", borderRadius:6, alignItems:"center"}}>
                  <span style={{fontFamily:"var(--display)", fontWeight:600, fontSize:14, color:"var(--off-white)"}}>{v}</span>
                  <span style={{fontFamily:"var(--mono)", fontSize:10, letterSpacing:".18em", color:"var(--muted)", textTransform:"uppercase"}}>SLA · ?</span>
                  <span style={{fontFamily:"var(--mono)", fontSize:10, letterSpacing:".18em", color:"var(--muted)", textTransform:"uppercase"}}>contract · {i+1}</span>
                </div>
              ))}
            </div>
            <div style={{padding:"14px 18px", background:"var(--deep-black)", borderRadius:6, fontFamily:"var(--mono)", fontSize:11, letterSpacing:".15em", color:"var(--muted)", lineHeight:1.7}}>
              <div>↳ 5 dashboards</div>
              <div>↳ 5 telefoonnummers</div>
              <div>↳ Bij storing: wie is verantwoordelijk?</div>
            </div>
          </div>
          <div style={{padding:"32px 28px", background:"#1a1208", border:"1px solid var(--power-orange)", borderRadius:12}}>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".24em", color:"var(--power-orange)", textTransform:"uppercase", marginBottom:24}}>↳ Met Control · 1 partij</div>
            <div style={{padding:"32px 24px", background:"var(--power-orange)", color:"var(--deep-black)", borderRadius:10, marginBottom:20, textAlign:"center"}}>
              <div style={{fontFamily:"var(--mono)", fontSize:10.5, letterSpacing:".22em", textTransform:"uppercase", opacity:.7, marginBottom:6}}>EMS · L4 · ALLES</div>
              <div style={{fontFamily:"var(--display)", fontWeight:800, fontSize:30, letterSpacing:"-.02em", marginBottom:8}}>WattIQ Control</div>
              <div style={{display:"flex", justifyContent:"center", gap:10, flexWrap:"wrap", marginTop:14}}>
                {["Battery","EV","Solar","Generator","Software"].map(t=>(
                  <span key={t} style={{padding:"5px 12px", background:"rgba(10,10,10,.15)", borderRadius:99, fontFamily:"var(--mono)", fontSize:10, letterSpacing:".15em", textTransform:"uppercase"}}>{t}</span>
                ))}
              </div>
            </div>
            <div style={{padding:"14px 18px", background:"var(--steel-dark)", borderRadius:6, fontFamily:"var(--mono)", fontSize:11, letterSpacing:".15em", color:"var(--off-white)", lineHeight:1.7}}>
              <div style={{color:"var(--power-orange)"}}>↳ 1 dashboard</div>
              <div style={{color:"var(--power-orange)"}}>↳ 1 telefoonnummer</div>
              <div style={{color:"var(--power-orange)"}}>↳ Bij storing: WattIQ.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlPos.PosV15 = function PosV15() {
  // Timeline — how site-management evolves with Control
  const lanes = [
    ["Battery", "rgba(255,107,43,.85)", [["Idle",0,18],["Discharge",18,42],["Charge",42,68],["Standby",68,82],["Discharge",82,100]]],
    ["EV Charging","rgba(255,215,0,.85)", [["Off",0,12],["Slow",12,28],["Off",28,42],["Fast",42,72],["Slow",72,100]]],
    ["Solar","rgba(122,163,122,.85)", [["",0,8],["Ramp",8,30],["Peak",30,68],["Ramp",68,90],["",90,100]]],
    ["Generator","rgba(216,96,96,.85)", [["Off",0,40],["Standby",40,55],["Off",55,100]]],
  ];
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">08 · Positionering · ORCHESTRATION</div>
        <div className="sec-num">// Eén tijdlijn</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.05, margin:"0 0 32px", maxWidth:"22ch"}}>
          Eén partituur. Vier lijnen.
        </h2>
        <div style={{padding:"32px 28px", background:"var(--industrial-black)", border:"1px solid var(--line)", borderRadius:14}}>
          <div style={{display:"flex", justifyContent:"space-between", marginBottom:18, fontFamily:"var(--mono)", fontSize:10.5, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase"}}>
            <span>↳ 24 uur · gecoördineerd door Control</span>
            <span style={{color:"var(--power-orange)"}}>● live</span>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"120px 1fr", gap:14}}>
            {lanes.map(([name,color,segs],i)=>(
              <React.Fragment key={i}>
                <div style={{display:"flex", alignItems:"center", fontFamily:"var(--display)", fontWeight:600, fontSize:14, color:"var(--off-white)"}}>{name}</div>
                <div style={{position:"relative", height:38, background:"var(--steel-dark)", borderRadius:6, overflow:"hidden"}}>
                  {segs.map(([lab,a,b],j)=>(
                    <div key={j} style={{position:"absolute", left:a+"%", width:(b-a)+"%", top:0, bottom:0, background:lab?color:"transparent", display:"flex", alignItems:"center", justifyContent:"center", fontFamily:"var(--mono)", fontSize:10, letterSpacing:".15em", color:"var(--deep-black)", textTransform:"uppercase", borderRight:j<segs.length-1?"1px solid rgba(0,0,0,.25)":"none"}}>{lab}</div>
                  ))}
                </div>
              </React.Fragment>
            ))}
            <div style={{}}/>
            <div style={{display:"flex", justifyContent:"space-between", marginTop:6, fontFamily:"var(--mono)", fontSize:10, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase"}}>
              <span>00:00</span><span>06:00</span><span>12:00</span><span>18:00</span><span>24:00</span>
            </div>
          </div>
          <div style={{marginTop:24, padding:"18px 22px", background:"var(--power-orange)", color:"var(--deep-black)", borderRadius:8, display:"flex", justifyContent:"space-between", alignItems:"center"}}>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", textTransform:"uppercase"}}>↳ DIRIGENT</div>
            <div style={{fontFamily:"var(--display)", fontWeight:800, fontSize:18, letterSpacing:"-.01em"}}>WattIQ Control schrijft de partituur</div>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", textTransform:"uppercase"}}>elke 100ms</div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.CtrlPos = CtrlPos;