// Control · Probleem — 5 varianten
const CtrlProblem = {};

const PROBS = [
  ["Overbelasting","Aansluiting trekt het niet — zekering eruit."],
  ["Stilstand","Wachten tot de spanning terug is."],
  ["Onnodig diesel","Generator draait stationair voor de zekerheid."],
  ["Geen inzicht","Niemand weet wat er gebeurt of wat het kost."],
];

CtrlProblem.ProblemV1 = function ProblemV1() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">02 · Het probleem</div>
        <div className="sec-head">
          <div>
            <div className="sec-num">// Diagnose</div>
            <h2>Je hebt geen energieprobleem.<br/>Je hebt een controleprobleem.</h2>
          </div>
          <p className="lead">Op de bouwplaats gebeurt alles tegelijk: machines draaien, voertuigen laden, pieken ontstaan onverwacht. En niemand heeft overzicht.</p>
        </div>
        <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:14}}>
          {PROBS.map(([h,p])=>(
            <div key={h} style={{padding:"24px 22px", border:"1px solid var(--line)", borderRadius:10, background:"var(--industrial-black)"}}>
              <div style={{fontFamily:"var(--mono)", fontSize:10.5, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase", marginBottom:14}}>● Gevolg</div>
              <h3 style={{fontFamily:"var(--display)", fontSize:20, fontWeight:700, margin:"0 0 10px", letterSpacing:"-.01em"}}>{h}</h3>
              <p style={{color:"var(--muted)", fontSize:14, margin:0, lineHeight:1.5}}>{p}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

CtrlProblem.ProblemV2 = function ProblemV2() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">02 · Het probleem</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:48, letterSpacing:"-.02em", lineHeight:1.05, margin:"0 0 36px", maxWidth:"22ch"}}>
          Vier dingen gaan stuk — elke dag, op elke site.
        </h2>
        <div>
          {PROBS.map(([h,p],i)=>(
            <div key={h} style={{display:"grid", gridTemplateColumns:"80px 1.2fr 2fr", gap:32, padding:"28px 0", borderTop:"1px solid var(--line)", alignItems:"baseline"}}>
              <div style={{fontFamily:"var(--mono)", fontSize:48, fontWeight:700, color:"var(--power-orange)", letterSpacing:"-.02em"}}>0{i+1}</div>
              <h3 style={{fontFamily:"var(--display)", fontSize:28, fontWeight:700, margin:0, letterSpacing:"-.015em"}}>{h}</h3>
              <p style={{color:"var(--muted)", fontSize:16, margin:0, lineHeight:1.5}}>{p}</p>
            </div>
          ))}
          <div style={{borderTop:"1px solid var(--line)"}}/>
        </div>
      </div>
    </div>
  );
};

CtrlProblem.ProblemV3 = function ProblemV3() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">02 · Het probleem</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 40px", maxWidth:"24ch"}}>
          Vraag een uitvoerder wat er fout gaat.
        </h2>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:24}}>
          {[
            ["“We staan stil omdat de hoofdzekering eruit ligt. Tweede keer deze week.”", "— Uitvoerder · Bouwplaats Utrecht"],
            ["“We laten de generator de hele dag draaien. Ja stationair. Voor het geval dat.”", "— Werkvoorbereider · Tunnelproject"],
            ["“Vraag mij niet wat we verbruiken. Niemand kijkt ernaar tot de rekening komt.”", "— Projectleider · Civiele werken"],
            ["“We hebben drie laadpalen, maar als ze alle drie laden zit het hele net vast.”", "— Site manager · Logistiek hub"],
          ].map(([q,by],i)=>(
            <div key={i} style={{padding:"32px 28px", border:"1px solid var(--line)", borderRadius:12, background:i%2?"var(--industrial-black)":"var(--steel-dark)"}}>
              <div style={{fontFamily:"Georgia, serif", fontSize:64, lineHeight:.5, color:"var(--power-orange)", marginBottom:8}}>"</div>
              <p style={{fontFamily:"Georgia, serif", fontSize:20, lineHeight:1.4, color:"var(--off-white)", margin:"0 0 18px", fontStyle:"italic"}}>{q}</p>
              <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", color:"var(--muted)", textTransform:"uppercase"}}>{by}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

CtrlProblem.ProblemV4 = function ProblemV4() {
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">02 · Het probleem · KOSTEN</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"24ch"}}>
          Zonder controle stapelt het zich op.
        </h2>
        <div style={{display:"grid", gridTemplateColumns:"1.4fr 1fr", gap:48, alignItems:"start"}}>
          <div>
            {[["€ 4.200","per dag stilstand bouwplaats","60%"],["€ 1.800","per dag onnodig dieselverbruik","45%"],["€ 950","per piekoverschrijding","30%"],["€ 600","per noodingreep technicus","20%"]].map(([n,l,w])=>(
              <div key={l} style={{padding:"18px 0", borderTop:"1px solid var(--line)"}}>
                <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom:8}}>
                  <span style={{fontFamily:"var(--display)", fontSize:32, fontWeight:800, color:"var(--off-white)", letterSpacing:"-.02em"}}>{n}</span>
                  <span style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".18em", color:"var(--muted)", textTransform:"uppercase"}}>{l}</span>
                </div>
                <div style={{height:4, background:"var(--steel-dark)", borderRadius:99, overflow:"hidden"}}>
                  <div style={{width:w, height:"100%", background:"var(--power-orange)"}}/>
                </div>
              </div>
            ))}
            <div style={{borderTop:"1px solid var(--line)"}}/>
          </div>
          <div style={{padding:"32px 28px", background:"var(--power-orange)", color:"var(--deep-black)", borderRadius:12}}>
            <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", textTransform:"uppercase", marginBottom:16}}>● Som per maand</div>
            <div style={{fontFamily:"var(--display)", fontSize:72, fontWeight:800, letterSpacing:"-.025em", lineHeight:1, marginBottom:8}}>€ 220k</div>
            <p style={{fontSize:14, lineHeight:1.5, margin:0, opacity:.8}}>Op een gemiddelde bouwplaats. Zonder dat iemand het ziet aankomen.</p>
          </div>
        </div>
      </div>
    </div>
  );
};

CtrlProblem.ProblemV5 = function ProblemV5() {
  // Day-in-the-life timeline
  const events = [
    ["07:30","Generator draait al — voor de zekerheid"],
    ["09:15","EV-bus + grondboor + kraan tegelijk → piek"],
    ["09:18","Hoofdzekering uit — alles stilgelegd"],
    ["10:40","Spanning terug, technicus ter plaatse"],
    ["13:55","Tweede piek — generator springt bij"],
    ["17:30","Diesel weer bijgevuld, dag verloren"],
  ];
  return (
    <div className="ctrl-art">
      <div className="wrap">
        <div className="vlabel">02 · Het probleem · EEN DAG</div>
        <h2 style={{fontFamily:"var(--display)", fontWeight:800, fontSize:42, letterSpacing:"-.02em", lineHeight:1.1, margin:"0 0 36px", maxWidth:"24ch"}}>
          Zo ziet een dag op locatie er nu uit.
        </h2>
        <div style={{position:"relative", paddingLeft:32}}>
          <div style={{position:"absolute", left:6, top:8, bottom:8, width:2, background:"var(--steel-dark)"}}/>
          {events.map(([t,desc],i)=>(
            <div key={i} style={{position:"relative", padding:"14px 0 14px 24px", display:"grid", gridTemplateColumns:"100px 1fr", gap:24}}>
              <div style={{position:"absolute", left:-32, top:22, width:14, height:14, borderRadius:99, background:i===2||i===4?"var(--power-orange)":"var(--steel-dark)", border:"2px solid var(--deep-black)", boxShadow:i===2||i===4?"0 0 0 2px var(--power-orange)":"none"}}/>
              <div style={{fontFamily:"var(--mono)", fontSize:14, letterSpacing:".1em", color:i===2||i===4?"var(--power-orange)":"var(--muted)", fontWeight:600}}>{t}</div>
              <div style={{fontFamily:"var(--display-alt)", fontSize:17, color:"var(--off-white)", lineHeight:1.4}}>{desc}</div>
            </div>
          ))}
        </div>
        <div style={{marginTop:24, padding:"20px 24px", border:"1px dashed rgba(255,107,43,.4)", borderRadius:10}}>
          <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:".22em", color:"var(--power-orange)", textTransform:"uppercase", marginBottom:6}}>↳ De rode draad</div>
          <p style={{margin:0, fontSize:15, lineHeight:1.5, color:"var(--off-white)"}}>Niemand heeft overzicht. Alles is reactief. Elk incident kost geld.</p>
        </div>
      </div>
    </div>
  );
};

window.CtrlProblem = CtrlProblem;