// Control · Voor wie — 5 varianten (3 doelgroepen)
const CtrlVoorWie = {};

const AUDS = [
  ["A","BOUWPLAATSEN","Beperkte aansluiting, hoge pieken","Op een drukke bouwplaats is netcapaciteit altijd te klein. Control trekt de pieken vlak en haalt 3× meer vermogen uit dezelfde aansluiting."],
  ["B","VERHUURDERS","Maximale inzet van assets","Verhuurders willen dat een set bij elke klant werkt. Control configureert zich naar de locatie — geen handmatige integratie meer."],
  ["C","DISTRIBUTEURS","Complete oplossing i.p.v. losse verkoop","Distributeurs verkopen niet langer losse machines. Control maakt elk pakket een schaalbare propositie met meetbaar resultaat."],
];

CtrlVoorWie.VWV1 = function VWV1() {
  return (
    <div className="ctrl-art" style={{background:"var(--break)", color:"var(--paper-ink)"}}>
      <div className="wrap">
        <div className="vlabel" style={{color:"#7a3a16"}}>09 · Voor wie</div>
        <div className="sec-head">
          <div><div className="sec-num" style={{color:"#7a3a16"}}>// Drie doelgroepen</div><h2 style={{color:"var(--paper-ink)"}}>Wie haalt hier nu winst uit?</h2></div>
          <p className="lead" style={{color:"#6B6256"}}>Control is gebouwd voor partijen die energie als operationele factor zien — niet als nutsvoorziening.</p>
        </div>
        <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:14}}>
          {AUDS.map(([k,tag,t,d])=>(
            <div key={k} style={{padding:"32px 28px", background:"var(--paper)", borderRadius:12, minHeight:300}}>
              <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase", marginBottom:14}}>{k} · {tag}</div>
              <h3 style={{fontFamily:"var(--display)", fontSize:24, fontWeight:700, margin:"0 0 12px", letterSpacing:"-.01em", color:"var(--paper-ink)", lineHeight:1.2}}>{t}</h3>
              <p style={{color:"#6B6256", fontSize:14, margin:0, lineHeight:1.55}}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

CtrlVoorWie.VWV2 = function VWV2() {
  const [tab,setTab] = React.useState(0);
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">09 · Voor wie · TABBED</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 28px", maxWidth:"22ch"}}>
          Drie doelgroepen — kies de jouwe.
        </h2>
        <div style={{display:"flex", gap:0, marginBottom:0, borderBottom:"1px solid var(--line)"}}>
          {AUDS.map(([k,tag],i)=>(
            <button key={k} onClick={()=>setTab(i)} style={{padding:"18px 32px", background:"transparent", border:"none", borderBottom:tab===i?"2px solid var(--power-orange)":"2px solid transparent", color:tab===i?"var(--off-white)":"var(--muted)", cursor:"pointer", fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", textTransform:"uppercase", marginBottom:-1}}>
              {k} · {tag}
            </button>
          ))}
        </div>
        <div style={{padding:"40px 32px", background:"var(--industrial-black)", border:"1px solid var(--line)", borderTop:"none", display:"grid", gridTemplateColumns:"1.4fr 1fr", gap:48, minHeight:340}}>
          <div>
            <h3 style={{fontFamily:"var(--display)", fontSize:36, fontWeight:700, margin:"0 0 18px", letterSpacing:"-.015em", lineHeight:1.1}}>{AUDS[tab][2]}</h3>
            <p style={{color:"var(--muted)", fontSize:16, lineHeight:1.55, margin:"0 0 24px", maxWidth:"50ch"}}>{AUDS[tab][3]}</p>
            <ul style={{margin:0, padding:0, listStyle:"none"}}>
              {[["Implementatie","2–4 weken"],["Eerste resultaat","binnen 30 dagen"],["Pilot mogelijk","ja, 90 dagen"]].map(([k,v])=>(
                <li key={k} style={{padding:"12px 0", borderTop:"1px solid var(--line)", display:"flex", justifyContent:"space-between"}}>
                  <span style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", color:"var(--muted)", textTransform:"uppercase"}}>{k}</span>
                  <span style={{fontFamily:"var(--display)", fontWeight:600, fontSize:15}}>{v}</span>
                </li>
              ))}
            </ul>
          </div>
          <div style={{padding:"28px 24px", background:"var(--steel-dark)", borderRadius:8}}>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase", marginBottom:14}}>↳ Typische winst</div>
            {[["−60%","Diesel"],["3×","Capaciteit"],["0","Stilstand"]].map(([n,l])=>(
              <div key={l} style={{padding:"14px 0", borderBottom:"1px solid var(--line)", display:"flex", justifyContent:"space-between", alignItems:"baseline"}}>
                <span style={{fontFamily:"var(--display)", fontSize:32, fontWeight:800, color:"var(--power-orange)", letterSpacing:"-.02em"}}>{n}</span>
                <span style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", color:"var(--muted)", textTransform:"uppercase"}}>{l}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlVoorWie.VWV3 = function VWV3() {
  // Side list — large title + bullets
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">09 · Voor wie · SIDE LIST</div>
        <div className="sec-num" style={{color:"#7a3a16"}}>// Drie doelgroepen</div>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1.4fr", gap:64, alignItems:"start"}}>
          <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:64, letterSpacing:"-.025em", lineHeight:.95, margin:0}}>
            Voor partijen die energie<br/><span style={{color:"var(--power-orange)"}}>operationeel</span><br/>maken.
          </h2>
          <div>
            {AUDS.map(([k,tag,t,d],i)=>(
              <div key={k} style={{padding:"32px 0", borderTop:"1px solid var(--line)"}}>
                <div style={{display:"flex", justifyContent:"space-between", marginBottom:14}}>
                  <span style={{fontFamily:"var(--mono)", fontSize:12, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase"}}>{k} · {tag}</span>
                  <span style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", color:"var(--muted)", textTransform:"uppercase"}}>0{i+1}/03</span>
                </div>
                <h3 style={{fontFamily:"var(--display)", fontSize:28, fontWeight:700, margin:"0 0 12px", letterSpacing:"-.015em", lineHeight:1.15}}>{t}</h3>
                <p style={{color:"var(--muted)", fontSize:15, lineHeight:1.55, margin:0, maxWidth:"56ch"}}>{d}</p>
              </div>
            ))}
            <div style={{borderTop:"1px solid var(--line)"}}/>
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlVoorWie.VWV4 = function VWV4() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">09 · Voor wie · QUOTE TRIPTYCH</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"22ch"}}>
          Drie stemmen, drie wins.
        </h2>
        <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:14}}>
          {[
            ["A","BOUWPLAATSEN","“We hadden continu spanningsproblemen. Nu draait alles vanzelf binnen onze 250kW aansluiting.”","Site Manager · A12-knooppunt","−60% diesel"],
            ["B","VERHUURDERS","“Eén keer configureren, op elke locatie plug-and-play. Onze sets zijn nu een product.”","CTO · BESS-verhuurder","2× hogere bezetting"],
            ["C","DISTRIBUTEURS","“Wij verkopen geen losse units meer. We verkopen het systeem — en wat het oplevert.”","Sales Lead · DACH","+30% marge"],
          ].map(([k,tag,q,by,kpi],i)=>(
            <div key={k} style={{padding:"32px 28px", background:i===1?"var(--power-orange)":"var(--industrial-black)", color:i===1?"var(--deep-black)":"var(--off-white)", border:i===1?"1px solid var(--power-orange)":"1px solid var(--line)", borderRadius:12, display:"flex", flexDirection:"column", justifyContent:"space-between", minHeight:340}}>
              <div>
                <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", textTransform:"uppercase", marginBottom:18, opacity:.7}}>{k} · {tag}</div>
                <div style={{fontFamily:"Georgia, serif", fontSize:48, lineHeight:.5, color:i===1?"var(--deep-black)":"var(--power-orange)", marginBottom:8, opacity:i===1?.5:1}}>"</div>
                <p style={{fontFamily:"Georgia, serif", fontStyle:"italic", fontSize:19, lineHeight:1.4, margin:"0 0 24px"}}>{q}</p>
              </div>
              <div>
                <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", textTransform:"uppercase", marginBottom:6, opacity:.7}}>{by}</div>
                <div style={{fontFamily:"var(--display)", fontWeight:800, fontSize:28, letterSpacing:"-.015em", color:i===1?"var(--deep-black)":"var(--power-orange)"}}>{kpi}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

CtrlVoorWie.VWV5 = function VWV5() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">09 · Voor wie · USE CASES</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"22ch"}}>
          Drie sectoren, drie scenario's.
        </h2>
        <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:14}}>
          {AUDS.map(([k,tag,t,d],i)=>(
            <article key={k} style={{border:"1px solid var(--line)", borderRadius:12, overflow:"hidden", background:"var(--industrial-black)"}}>
              {/* Photo placeholder */}
              <div style={{aspectRatio:"4/3", background:["linear-gradient(135deg,#3a2515 0%,#1a1409 60%,#0a0805 100%)","linear-gradient(135deg,#2a3a25 0%,#1a2419 60%,#0a1005 100%)","linear-gradient(135deg,#252a3a 0%,#191a24 60%,#05080a 100%)"][i], position:"relative", display:"flex", alignItems:"flex-end"}}>
                <div style={{padding:"22px 24px", color:"var(--off-white)"}}>
                  <div style={{fontFamily:"var(--mono)", fontSize:10.5, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase", marginBottom:6}}>● PHOTO · {k}</div>
                  <div style={{fontFamily:"var(--mono)", fontSize:10, letterSpacing:".18em", color:"var(--muted)", textTransform:"uppercase"}}>placeholder · {["bouwplaats","BESS-verhuur","distributiehub"][i]}</div>
                </div>
              </div>
              <div style={{padding:"24px 24px"}}>
                <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase", marginBottom:10}}>{k} · {tag}</div>
                <h3 style={{fontFamily:"var(--display)", fontSize:20, fontWeight:700, margin:"0 0 10px", letterSpacing:"-.005em", lineHeight:1.2}}>{t}</h3>
                <p style={{color:"var(--muted)", fontSize:13.5, margin:0, lineHeight:1.5}}>{d}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </div>
  );
};

window.CtrlVoorWie = CtrlVoorWie;
