Hero met postcodecheck werkgebied Nieuw

<!-- Hero met postcodecheck werkgebied · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="xpc">
  <div class="xpc__inner">
    <div class="xpc__text">
      <span class="xpc__eyebrow">CV-ketel · warmtepomp · airco · sinds 1998</span>
      <h2 class="xpc__h">Storing aan de ketel? Vaak zijn wij er dezelfde dag.</h2>
      <p class="xpc__lead">Van Dijk Installatietechniek werkt vanuit Zoetermeer in een groot deel van Zuid-Holland. Vul uw postcode in en zie meteen of wij bij u komen.</p>
      <form class="xpc__form" novalidate>
        <label class="xpc__label" for="xpc-pc">Uw postcode</label>
        <div class="xpc__row">
          <input id="xpc-pc" class="xpc__input" type="text" maxlength="7" placeholder="2711 AB" autocomplete="postal-code" spellcheck="false">
          <button class="xpc__btn" type="submit">Controleer</button>
        </div>
        <p class="xpc__out" aria-live="polite">Probeer 2512 of 3511.</p>
      </form>
      <ul class="xpc__facts"><li><b>4,8</b> uit 1.240 beoordelingen</li><li><b>24/7</b> storingsdienst</li><li><b>14</b> monteurs onderweg</li></ul>
    </div>
    <div class="xpc__visual" aria-hidden="true">
      <svg class="xpc__map" viewBox="0 0 300 330">
        <path class="xpc__land" d="M88 18 L150 28 L196 58 L214 104 L262 128 L284 178 L270 236 L238 288 L176 312 L118 300 L84 262 L46 222 L30 168 L44 120 L62 70 Z"/>
        <path class="xpc__zone" d="M98 52 L160 60 L200 112 L248 150 L254 210 L222 270 L160 288 L112 270 L80 228 L60 172 L72 112 Z"/>
        <g class="xpc__dots">
          <g data-pc="22 23"><circle cx="118" cy="74" r="5"/><text x="128" y="78">Leiden</text></g>
          <g data-pc="24"><circle cx="186" cy="92" r="5"/><text x="196" y="96">Alphen</text></g>
          <g data-pc="25"><circle cx="78" cy="150" r="5"/><text x="20" y="140">Den Haag</text></g>
          <g data-pc="26"><circle cx="104" cy="190" r="5"/><text x="40" y="206">Delft</text></g>
          <g data-pc="28"><circle cx="226" cy="168" r="5"/><text x="234" y="160">Gouda</text></g>
          <g data-pc="29 30 31"><circle cx="156" cy="238" r="5"/><text x="166" y="242">Rotterdam</text></g>
          <g data-pc="33"><circle cx="214" cy="282" r="5"/><text x="222" y="300">Dordrecht</text></g>
          <g class="xpc__base" data-pc="27"><circle class="xpc__pulse" cx="150" cy="150" r="9"/><circle cx="150" cy="150" r="7"/><text x="162" y="146">Zoetermeer</text></g>
        </g>
      </svg>
      <span class="xpc__legend"><i></i> ons werkgebied</span>
    </div>
  </div>
</div>
</div>

/* Hero met postcodecheck werkgebied · NedDev · eigen werk. */
.xpc{background:#0f2d4d;color:#fff;font-family:'Switzer',sans-serif;box-sizing:border-box}
.xpc *,.xpc *::before{box-sizing:border-box}
.xpc__inner{max-width:1120px;margin:0 auto;padding:56px 32px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;min-height:460px}
.xpc__eyebrow{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#f2b705;margin-bottom:18px}
.xpc__h{font-size:clamp(30px,4vw,46px);line-height:1.04;font-weight:700;letter-spacing:-.02em;margin:0 0 16px;max-width:18ch}
.xpc__lead{font-size:16px;line-height:1.55;color:rgba(255,255,255,.78);margin:0 0 26px;max-width:46ch}
.xpc__form{background:#fff;color:#0f2d4d;border-radius:6px;padding:16px;max-width:460px}
.xpc__label{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#5b6b7c;margin-bottom:8px}
.xpc__row{display:flex;gap:8px}
.xpc__input{flex:1;min-width:0;font:600 18px 'Switzer',sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:12px 14px;border:2px solid #d5dde6;border-radius:4px;color:#0f2d4d;background:#f6f8fb;outline:none;transition:border-color .2s}
.xpc__input:focus{border-color:#0f2d4d}
.xpc__btn{font:700 15px 'Switzer',sans-serif;background:#f2b705;color:#0f2d4d;border:0;border-radius:4px;padding:0 20px;cursor:pointer;transition:background .2s}
.xpc__btn:hover{background:#ffc928}
.xpc__out{margin:10px 0 0;font-size:14px;line-height:1.45;color:#5b6b7c;min-height:40px}
.xpc__out b{display:block;font-size:15px}
.xpc__out.is-ok{color:#11734b}.xpc__out.is-no{color:#a3341f}.xpc__out.is-err{color:#a3341f}
.xpc__facts{list-style:none;padding:0;margin:22px 0 0;display:flex;gap:22px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.7)}
.xpc__facts b{color:#fff;font-size:15px;margin-right:4px}
.xpc__visual{position:relative;background:#133a62;border-radius:6px;padding:20px;aspect-ratio:1/1.05;max-height:420px;justify-self:center;width:100%}
.xpc__map{width:100%;height:100%;display:block}
.xpc__land{fill:#1a4775;stroke:#2b5d91;stroke-width:1.5}
.xpc__zone{fill:rgba(242,183,5,.12);stroke:#f2b705;stroke-width:1.5;stroke-dasharray:5 5}
.xpc__dots circle{fill:#cfe0f2;transition:fill .3s,r .3s}
.xpc__dots text{fill:rgba(255,255,255,.75);font:500 11px 'Switzer',sans-serif}
.xpc__dots g.is-hit circle{fill:#f2b705}
.xpc__dots g.is-hit text{fill:#fff;font-weight:700}
.xpc__base circle{fill:#f2b705}
.xpc__pulse{fill:none!important;stroke:#f2b705;stroke-width:2;transform-origin:150px 150px;animation:xpc-pulse 2.2s ease-out infinite}
@keyframes xpc-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(3);opacity:0}}
.xpc__legend{position:absolute;left:18px;bottom:14px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.65);display:flex;align-items:center;gap:6px}
.xpc__legend i{width:14px;height:10px;border:1.5px dashed #f2b705;background:rgba(242,183,5,.12)}
@media(prefers-reduced-motion:reduce){.xpc__pulse{animation:none}}
@media(max-width:760px){.xpc__inner{grid-template-columns:minmax(0,1fr);padding:36px 18px;gap:28px}.xpc__visual{max-width:min(340px,100%);max-height:none}.xpc__facts{gap:14px}}

// Hero met postcodecheck werkgebied · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.xpc');if(!w)return;
var f=w.querySelector('.xpc__form'),inp=w.querySelector('.xpc__input'),out=w.querySelector('.xpc__out');
var area={'22':'Katwijk en Noordwijk','23':'Leiden','24':'Alphen aan den Rijn','25':'Den Haag','26':'Delft en het Westland','27':'Zoetermeer','28':'Gouda','29':'Capelle en Krimpen','30':'Rotterdam','31':'Schiedam en Vlaardingen','33':'Dordrecht'};
var groups=w.querySelectorAll('.xpc__dots g[data-pc]');
function nextDay(){var d=new Date(),h=d.getHours(),wd=d.getDay();if(wd>=1&&wd<=5&&h<12)return 'vandaag nog';if(wd===5||wd===6)return 'maandag';return 'morgen';}
function check(final){
  var v=inp.value.replace(/\s/g,'').toUpperCase();
  groups.forEach(function(g){g.classList.remove('is-hit');});
  if(v.length<4){if(final){out.className='xpc__out is-err';out.textContent='Vul minimaal de vier cijfers van uw postcode in.';}return;}
  if(!/^[1-9][0-9]{3}([A-Z]{2})?$/.test(v)){out.className='xpc__out is-err';out.textContent='Dat lijkt geen Nederlandse postcode. Bijvoorbeeld: 2711 AB.';return;}
  var p=v.slice(0,2);
  if(area[p]){
    out.className='xpc__out is-ok';
    out.innerHTML='<b>Wij komen bij u.</b>Regio '+area[p]+'. Eerstvolgende monteur beschikbaar: '+nextDay()+'.';
    groups.forEach(function(g){if((' '+g.getAttribute('data-pc')+' ').indexOf(' '+p+' ')>-1)g.classList.add('is-hit');});
  }else{
    out.className='xpc__out is-no';
    out.innerHTML='<b>Buiten ons werkgebied.</b>Bel 079 123 4567, dan noemen wij een collega-installateur bij u in de buurt.';
  }
}
inp.addEventListener('input',function(){check(false);});
f.addEventListener('submit',function(e){e.preventDefault();check(true);});
}
init(document.querySelector('.jouw-container'));