// Control · Functionaliteiten — 5 varianten (zes functies)
const CtrlFuncties = {};

const CAPS = [
  ["01","Peak shaving","Voorkomt pieken en benut je aansluiting maximaal."],
  ["02","Load balancing","Verdeelt vermogen over laadpalen en machines."],
  ["03","Battery control","Laadt en ontlaadt automatisch voor maximale efficiëntie."],
  ["04","Generator control","Draait alleen wanneer nodig — minder uren, minder onderhoud."],
  ["05","Solar integratie","Maximaliseert eigen opwek en buffert overschot."],
  ["06","Microgrid modus","Werkt volledig off-grid wanneer nodig — eilandbedrijf."],
];

CtrlFuncties.FunV1 = function FunV1() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">06 · Functionaliteiten</div>
        <div className="sec-head">
          <div><div className="sec-num">// Onder de motorkap</div><h2>Zes functies. Hard onder de motorkap.</h2></div>
          <p className="lead">Geen lange feature-lijst — dit is wat het systeem concreet doet, elke seconde, op elke site.</p>
        </div>
        <div>
          {CAPS.map(([n,t,d])=>(
            <div key={n} style={{display:"grid", gridTemplateColumns:"80px 1.2fr 2fr 60px", gap:24, padding:"24px 0", borderTop:"1px solid var(--line)", alignItems:"baseline"}}>
              <div style={{fontFamily:"var(--mono)", fontSize:13, letterSpacing:".18em", color:"var(--power-orange)"}}>{n}</div>
              <h4 style={{fontFamily:"var(--display)", fontSize:22, fontWeight:700, margin:0, letterSpacing:"-.01em"}}>{t}</h4>
              <p style={{color:"var(--muted)", fontSize:15, margin:0, lineHeight:1.5}}>{d}</p>
              <div style={{textAlign:"right", color:"var(--power-orange)", fontFamily:"var(--mono)"}}>→</div>
            </div>
          ))}
          <div style={{borderTop:"1px solid var(--line)"}}/>
        </div>
      </div>
    </div>
  );
};

CtrlFuncties.FunV2 = function FunV2() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">06 · Functionaliteiten · CARDS</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 32px", maxWidth:"22ch"}}>
          Zes functies — niet meer, niet minder.
        </h2>
        <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:12}}>
          {CAPS.map(([n,t,d])=>(
            <div key={n} style={{padding:"28px 24px", border:"1px solid var(--line)", borderRadius:10, background:"var(--industrial-black)", minHeight:200}}>
              <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom:14}}>
                <span style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase"}}>FUNCTIE · {n}</span>
                <span style={{fontFamily:"var(--mono)", fontSize:10.5, letterSpacing:".18em", color:"var(--muted)", textTransform:"uppercase"}}>auto</span>
              </div>
              <h3 style={{fontFamily:"var(--display)", fontSize:20, fontWeight:700, margin:"0 0 10px", letterSpacing:"-.01em"}}>{t}</h3>
              <p style={{color:"var(--muted)", fontSize:14, margin:0, lineHeight:1.5}}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

CtrlFuncties.FunV3 = function FunV3() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">06 · Functionaliteiten · SPEC SHEET</div>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:24, alignItems:"start"}}>
          <div>
            <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:48, letterSpacing:"-.02em", lineHeight:1.05, margin:"0 0 20px", maxWidth:"14ch"}}>Zes functies. Geen losse modules.</h2>
            <p style={{color:"var(--muted)", fontSize:16, lineHeight:1.55, margin:"0 0 24px", maxWidth:"42ch"}}>Allemaal beschikbaar uit de doos. Geen extra licenties, geen modulaire onderhandelingen.</p>
            <div style={{padding:"20px 24px", background:"var(--steel-dark)", borderRadius:8, fontFamily:"var(--mono)", fontSize:12.5, letterSpacing:".1em", color:"var(--muted)"}}>
              ✓ Inbegrepen in elke Control-licentie<br/>
              ✓ Updates automatisch over-the-air<br/>
              ✓ Volledig auditeerbaar voor CSRD
            </div>
          </div>
          <div style={{border:"1px solid var(--line)", borderRadius:12, overflow:"hidden"}}>
            {CAPS.map(([n,t,d],i)=>(
              <div key={n} style={{padding:"18px 22px", borderBottom:i<5?"1px solid var(--line)":"none", background:"var(--industrial-black)", display:"grid", gridTemplateColumns:"50px 1fr 90px", gap:16, alignItems:"baseline"}}>
                <div style={{fontFamily:"var(--mono)", fontSize:12, color:"var(--power-orange)", letterSpacing:".15em"}}>{n}</div>
                <div>
                  <div style={{fontFamily:"var(--display)", fontWeight:700, fontSize:16, marginBottom:3, letterSpacing:"-.005em"}}>{t}</div>
                  <div style={{color:"var(--muted)", fontSize:13, lineHeight:1.4}}>{d}</div>
                </div>
                <div style={{textAlign:"right", fontFamily:"var(--mono)", fontSize:10, letterSpacing:".18em", color:"var(--power-orange)", textTransform:"uppercase"}}>● ACTIVE</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlFuncties.FunV4 = function FunV4() {
  // Operational timeline — when each function fires
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">06 · Functionaliteiten · TIMELINE</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"22ch"}}>
          Wanneer welke functie aan zet komt.
        </h2>
        <div style={{position:"relative", padding:"24px 32px", border:"1px solid var(--line)", borderRadius:12, background:"var(--industrial-black)"}}>
          <div style={{display:"grid", gridTemplateColumns:"repeat(24,1fr)", gap:1, marginBottom:8, fontFamily:"var(--mono)", fontSize:9.5, color:"var(--muted)"}}>
            {Array.from({length:24}, (_,i)=>(<div key={i} style={{textAlign:"center"}}>{i.toString().padStart(2,"0")}</div>))}
          </div>
          {[
            ["Peak shaving","#FF6B2B",[[7,9],[13,15],[16,18]]],
            ["Load balancing","#FFD700",[[6,11],[13,18]]],
            ["Battery control","#FF8C5A",[[0,6],[9,13],[18,24]]],
            ["Generator control","#9C7A56",[[14,15]]],
            ["Solar integratie","#7AA37A",[[8,17]]],
            ["Microgrid modus","#5B9CD3",[[18,22]]],
          ].map(([t,c,bands],i)=>(
            <div key={t} style={{display:"grid", gridTemplateColumns:"180px 1fr", gap:14, padding:"10px 0", borderTop:i?"1px solid var(--line)":"none", alignItems:"center"}}>
              <div style={{fontFamily:"var(--display)", fontWeight:600, fontSize:14, color:"var(--off-white)"}}>{t}</div>
              <div style={{position:"relative", height:24, background:"var(--steel-dark)", borderRadius:4}}>
                {bands.map(([s,e],j)=>(
                  <div key={j} style={{position:"absolute", left:(s/24*100)+"%", width:((e-s)/24*100)+"%", top:0, bottom:0, background:c, borderRadius:3, opacity:.85}}/>
                ))}
              </div>
            </div>
          ))}
        </div>
        <p style={{marginTop:16, color:"var(--muted)", fontSize:13, fontFamily:"var(--mono)", letterSpacing:".1em"}}>↳ Voorbeeld bouwplaats — een typische werkdag.</p>
      </div>
    </div>
  );
};

CtrlFuncties.FunV5 = function FunV5() {
  // Modal index — left index, right reading pane (static showing first)
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">06 · Functionaliteiten · INDEX</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 32px", maxWidth:"22ch"}}>
          Doorklikbaar overzicht van wat het systeem kan.
        </h2>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1.6fr", gap:32, alignItems:"start"}}>
          <div style={{borderTop:"1px solid var(--line)"}}>
            {CAPS.map(([n,t],i)=>(
              <div key={n} style={{display:"grid", gridTemplateColumns:"60px 1fr auto", gap:16, padding:"18px 0", borderBottom:"1px solid var(--line)", alignItems:"baseline", color:i===0?"var(--off-white)":"var(--muted)"}}>
                <span style={{fontFamily:"var(--mono)", fontSize:12, letterSpacing:".18em", color:"var(--power-orange)"}}>{n}</span>
                <span style={{fontFamily:"var(--display)", fontWeight:i===0?700:500, fontSize:i===0?20:17, letterSpacing:"-.005em"}}>{t}</span>
                <span style={{fontFamily:"var(--mono)", fontSize:10, letterSpacing:".18em", textTransform:"uppercase"}}>{i===0?"● open":"→"}</span>
              </div>
            ))}
          </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:14}}>// 01 · DETAIL</div>
            <h3 style={{fontFamily:"var(--display)", fontSize:32, fontWeight:700, margin:"0 0 16px", letterSpacing:"-.015em"}}>{CAPS[0][1]}</h3>
            <p style={{color:"var(--muted)", fontSize:16, lineHeight:1.55, margin:"0 0 24px"}}>{CAPS[0][2]}</p>
            <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:14, padding:"20px 0", borderTop:"1px solid var(--line)"}}>
              {[["Trigger","load &gt; 90% cap"],["Reactie","< 200ms"],["Resultaat","peak afgevlakt"]].map(([k,v])=>(
                <div key={k}>
                  <div style={{fontFamily:"var(--mono)", fontSize:10, letterSpacing:".22em", color:"var(--muted)", textTransform:"uppercase", marginBottom:6}}>{k}</div>
                  <div style={{fontFamily:"var(--display)", fontSize:16, fontWeight:600, color:"var(--off-white)"}} dangerouslySetInnerHTML={{__html:v}}/>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.CtrlFuncties = CtrlFuncties;

CtrlFuncties.FunV6 = function FunV6() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">06 · Functies · MEGA NUMBER</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 32px", maxWidth:"22ch"}}>
          Zes — geen meer, geen minder.
        </h2>
        <div>
          {CAPS.map(([n,t,d],i)=>(
            <div key={n} style={{display:"grid", gridTemplateColumns:"180px 1fr", gap:32, padding:"36px 0", borderTop:"1px solid var(--line)", alignItems:"baseline"}}>
              <div style={{fontFamily:"var(--display)", fontSize:120, fontWeight:800, color:"var(--power-orange)", letterSpacing:"-.04em", lineHeight:.85}}>{n}</div>
              <div>
                <h3 style={{fontFamily:"var(--display)", fontSize:32, fontWeight:700, margin:"0 0 8px", letterSpacing:"-.015em"}}>{t}</h3>
                <p style={{color:"var(--muted)", fontSize:16, lineHeight:1.55, margin:0, maxWidth:"56ch"}}>{d}</p>
              </div>
            </div>
          ))}
          <div style={{borderTop:"1px solid var(--line)"}}/>
        </div>
      </div>
    </div>
  );
};

CtrlFuncties.FunV7 = function FunV7() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">06 · Functies · 2-COL SPLIT</div>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:48, alignItems:"start"}}>
          <div style={{position:"sticky", top:80}}>
            <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:48, letterSpacing:"-.025em", lineHeight:1, margin:"0 0 18px", maxWidth:"14ch"}}>
              Zes functies, één gedrag.
            </h2>
            <p style={{color:"var(--muted)", fontSize:16, lineHeight:1.55, margin:"0 0 24px", maxWidth:"42ch"}}>Ingebouwd, niet gemodulariseerd. Iedere site krijgt alles.</p>
            <div style={{padding:"22px 24px", background:"var(--power-orange)", color:"var(--deep-black)", borderRadius:10, fontFamily:"var(--mono)", fontSize:12.5, letterSpacing:".1em", lineHeight:1.7}}>
              ✓ Standaard inbegrepen<br/>
              ✓ Updates automatisch<br/>
              ✓ Volledig auditeerbaar
            </div>
          </div>
          <div>
            {CAPS.map(([n,t,d])=>(
              <div key={n} style={{padding:"22px 24px", marginBottom:8, background:"var(--industrial-black)", border:"1px solid var(--line)", borderLeft:"3px solid var(--power-orange)", borderRadius:8}}>
                <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase", marginBottom:8}}>FN · {n}</div>
                <h3 style={{fontFamily:"var(--display)", fontSize:20, fontWeight:700, margin:"0 0 6px", letterSpacing:"-.005em"}}>{t}</h3>
                <p style={{color:"var(--muted)", fontSize:14, margin:0, lineHeight:1.5}}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlFuncties.FunV8 = function FunV8() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">06 · Functies · HEX GRID</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"22ch"}}>
          Zes disciplines, één machine.
        </h2>
        <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:14}}>
          {CAPS.map(([n,t,d],i)=>(
            <div key={n} 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?"none":"1px solid var(--line)", clipPath:"polygon(0 6%, 100% 0, 100% 94%, 0 100%)", minHeight:240}}>
              <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", textTransform:"uppercase", marginBottom:14, opacity:.7}}>{n} · ACTIVE</div>
              <h3 style={{fontFamily:"var(--display)", fontSize:22, fontWeight:700, margin:"0 0 10px", letterSpacing:"-.01em"}}>{t}</h3>
              <p style={{fontSize:14, lineHeight:1.5, margin:0, opacity:i%2?.85:.7}}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

CtrlFuncties.FunV9 = function FunV9() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">06 · Functies · CHECKLIST</div>
        <div className="sec-num">// Functionaliteiten</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"22ch"}}>
          Wat zit erin — concrete checklist.
        </h2>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:8}}>
          {CAPS.map(([n,t,d])=>(
            <div key={n} style={{padding:"24px 28px", border:"1px solid var(--line)", background:"var(--industrial-black)", display:"grid", gridTemplateColumns:"40px 1fr", gap:18, alignItems:"start"}}>
              <div style={{width:32, height:32, borderRadius:6, background:"var(--power-orange)", color:"var(--deep-black)", display:"flex", alignItems:"center", justifyContent:"center", fontFamily:"var(--display)", fontWeight:700}}>✓</div>
              <div>
                <div style={{display:"flex", justifyContent:"space-between", marginBottom:6}}>
                  <h3 style={{fontFamily:"var(--display)", fontSize:18, fontWeight:700, margin:0, letterSpacing:"-.005em"}}>{t}</h3>
                  <span style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", color:"var(--muted)"}}>{n}</span>
                </div>
                <p style={{color:"var(--muted)", fontSize:13.5, margin:0, lineHeight:1.5}}>{d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

CtrlFuncties.FunV10 = function FunV10() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">06 · Functies · LAYERED STACK</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"22ch"}}>
          Zes lagen — onder de motorkap.
        </h2>
        <div style={{border:"1px solid var(--line)", borderRadius:12, overflow:"hidden"}}>
          {CAPS.map(([n,t,d],i)=>(
            <div key={n} style={{padding:"22px 32px", background:i%2?"var(--steel-dark)":"var(--industrial-black)", borderBottom:i<5?"1px solid var(--line)":"none", display:"grid", gridTemplateColumns:"60px 200px 1fr 100px", gap:24, alignItems:"baseline"}}>
              <div style={{fontFamily:"var(--mono)", fontSize:13, letterSpacing:".18em", color:"var(--power-orange)"}}>L{n}</div>
              <h3 style={{fontFamily:"var(--display)", fontSize:18, fontWeight:700, margin:0, letterSpacing:"-.005em"}}>{t}</h3>
              <p style={{color:"var(--muted)", fontSize:14, margin:0, lineHeight:1.5}}>{d}</p>
              <span style={{fontFamily:"var(--mono)", fontSize:10.5, letterSpacing:".18em", color:"var(--power-orange)", textAlign:"right", textTransform:"uppercase"}}>● ACTIEF</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

window.CtrlFuncties = CtrlFuncties;
