// WATTIQ CONTROL — Detail page (composed from variants/ctrl-*.jsx)
// Mirrors WattIQ Control Detail.html, adapted for in-site SPA rendering.
window.SiteControl = function SiteControl() {
  const TwoPathCTA = () => (
    <section id="cta" data-screen-label="C · 10 CTA">
      <div className="situaties-final">
        <section className="opl-shell bg-paper">
          <div className="opl-wrap">
            <div className="sit-tp-hd">
              <div className="sit-tp-ix"><span className="bar"></span>10 — Twee paden</div>
              <h2 className="sit-tp-h">Wat past bij <em>nu</em>?</h2>
              <p className="sit-tp-lead">Twee manieren om verder te gaan. Eén voor mensen die concreet zoeken; één voor mensen die eerst willen begrijpen.</p>
            </div>
            <div className="sit-tp-paths">
              <a href="#" className="sit-tp-path primary" data-route="contact">
                <div className="ix">● PAD A · CONCREET</div>
                <h3>Ik heb een<br/>locatie in beeld.</h3>
                <p>Stuur de basisgegevens — type project, vermogen, duur. Wij komen binnen 24u terug met een eerste configuratie en richtprijs.</p>
                <ul>
                  <li>Quick-scan binnen 24u</li>
                  <li>Eerste configuratie + richtprijs</li>
                  <li>Inplannen technisch bezoek</li>
                  <li>Vrijblijvend, geen verplichting</li>
                </ul>
                <span className="cta-btn">START QUICK-SCAN <span className="arr">→</span></span>
              </a>
              <a href="#" className="sit-tp-path" data-route="contact">
                <div className="ix">● PAD B · ORIËNTEREND</div>
                <h3>Ik wil eerst<br/>begrijpen.</h3>
                <p>30 minuten met een van onze engineers. Geen sales-praat — een werksessie waarin we je situatie doorlopen en de mogelijkheden uitleggen.</p>
                <ul>
                  <li>30 minuten · video of locatie</li>
                  <li>Met engineer, niet account-mgr</li>
                  <li>Doorlopen van vergelijkbare projecten</li>
                  <li>Geen verplichting tot vervolg</li>
                </ul>
                <span className="cta-btn">PLAN 30-MIN GESPREK <span className="arr">→</span></span>
              </a>
            </div>
          </div>
        </section>
      </div>
    </section>
  );

  return (
    <div className="page ctrl-detail-page" data-page="control" data-screen-label="C Control">
      <nav className="ctrl-page-nav">
        <div className="wrap"><div className="row">
          <span className="brand">WattIQ · Control</span>
          <a href="#hero">Intro</a>
          <a href="#problem">Probleem</a>
          <a href="#shift">Shift</a>
          <a href="#doet">Wat het doet</a>
          <a href="#denkt">Hoe het denkt</a>
          <a href="#functies">Functies</a>
          <a href="#resultaat">Resultaat</a>
          <a href="#positionering">Positionering</a>
          <a href="#voorwie">Voor wie</a>
          <a href="#cta">Contact</a>
        </div></div>
      </nav>

      <div className="ctrl-detail-root">
        <section id="hero" data-screen-label="C · 01 Hero">{window.CtrlHero?.HeroV2 ? React.createElement(window.CtrlHero.HeroV2) : null}</section>
        <section id="problem" data-screen-label="C · 02 Probleem">{window.CtrlProblem?.ProblemV1 ? React.createElement(window.CtrlProblem.ProblemV1) : null}</section>
        <section id="shift" data-screen-label="C · 03 Shift">{window.CtrlShift?.ShiftV10 ? React.createElement(window.CtrlShift.ShiftV10) : null}</section>
        <section id="doet" data-screen-label="C · 04 Wat het doet">{window.CtrlDoet?.DoetV2 ? React.createElement(window.CtrlDoet.DoetV2) : null}</section>
        <section id="denkt" data-screen-label="C · 05 Hoe het denkt">{window.CtrlDenkt?.DenktV19 ? React.createElement(window.CtrlDenkt.DenktV19) : null}</section>
        <section id="functies" data-screen-label="C · 06 Functies">{window.CtrlFuncties?.FunV9 ? React.createElement(window.CtrlFuncties.FunV9) : null}</section>
        <section id="resultaat" data-screen-label="C · 07 Resultaat">{window.CtrlResultaat?.ResV5 ? React.createElement(window.CtrlResultaat.ResV5) : null}</section>
        <section id="positionering" data-screen-label="C · 08 Positionering">{window.CtrlPos?.PosV13 ? React.createElement(window.CtrlPos.PosV13) : null}</section>
        <section id="voorwie" data-screen-label="C · 09 Voor wie">{window.CtrlVoorWie?.VWV3 ? React.createElement(window.CtrlVoorWie.VWV3) : null}</section>
        <TwoPathCTA />
      </div>
      {typeof Footer !== "undefined" ? <Footer /> : null}
    </div>
  );
};