Terugbelverzoek met tijdvakken Nieuw

<!-- Terugbelverzoek met tijdvakken · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="xtb">
  <div class="xtb__inner">
    <div class="xtb__person">
      <div class="xtb__photo" aria-hidden="true">
        <svg viewBox="0 0 200 220" preserveAspectRatio="xMidYMax meet"><rect x="88" y="104" width="24" height="44" rx="8" fill="#1d5a45"/><path d="M26 220c4-48 32-76 74-76s70 28 74 76z" fill="#0b3d2e"/><path d="M100 144l-16 20 16 22 16-22z" fill="#e4f1ea"/><circle cx="100" cy="84" r="34" fill="#2a6b53"/><path d="M64 92c-6-34 12-56 38-56 26 0 42 20 36 52-4-14-14-24-30-26-12 8-28 14-44 30z" fill="#082a20"/><path d="M66 90c-8 30-4 56 6 66l10-30z" fill="#082a20"/></svg>
      </div>
      <div class="xtb__badge"><span class="xtb__dot"></span><span>Belt gemiddeld binnen <b>1 uur en 40 min</b> terug</span></div>
      <div class="xtb__name"><b>Sanne de Wit</b>Hypotheekadviseur · 11 jaar ervaring</div>
    </div>
    <form class="xtb__form" novalidate>
      <span class="xtb__eyebrow">Hypotheekhuis Brabant · Tilburg</span>
      <h2 class="xtb__h">Liever even bellen? Kies wanneer het u uitkomt.</h2>
      <fieldset class="xtb__set"><legend>Welke dag</legend>
        <div class="xtb__chips" data-k="dag"><button type="button" data-v="vandaag">Vandaag</button><button type="button" data-v="morgen">Morgen</button></div>
      </fieldset>
      <fieldset class="xtb__set"><legend>Welk dagdeel</legend>
        <div class="xtb__chips" data-k="deel"><button type="button" data-v="ochtend">Ochtend<small>9:00 tot 12:00</small></button><button type="button" data-v="middag">Middag<small>13:00 tot 17:00</small></button></div>
      </fieldset>
      <div class="xtb__fields">
        <label><span>Naam</span><input type="text" class="xtb__in" name="naam" placeholder="Uw naam" autocomplete="name"></label>
        <label><span>Telefoon</span><input type="tel" class="xtb__in" name="tel" placeholder="06 12345678" autocomplete="tel"></label>
      </div>
      <button type="submit" class="xtb__send">Bel mij terug</button>
      <p class="xtb__msg" aria-live="polite">Kosteloos en vrijblijvend. Wij bellen vanaf 013 123 4567.</p>
    </form>
  </div>
</div>
</div>

/* Terugbelverzoek met tijdvakken · NedDev · eigen werk. */
.xtb{background:#e4f1ea;color:#0b3d2e;font-family:'Switzer',sans-serif;box-sizing:border-box}
.xtb *{box-sizing:border-box}
.xtb__inner{max-width:1040px;margin:0 auto;padding:44px 32px;display:grid;grid-template-columns:330px 1fr;gap:0;align-items:stretch}
.xtb__person{position:relative;background:linear-gradient(170deg,#9fcdb5,#d9ece1 70%);border-radius:6px 0 0 6px;overflow:hidden;min-height:420px}
.xtb__photo{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;background-image:radial-gradient(circle at 70% 20%,rgba(255,255,255,.55),transparent 45%)}
.xtb__photo svg{width:88%;height:auto;display:block}
.xtb__badge{position:absolute;left:16px;right:16px;top:16px;background:#fff;border-radius:4px;padding:10px 12px;font-size:13px;line-height:1.35;display:flex;gap:10px;align-items:flex-start;box-shadow:0 8px 20px -12px rgba(11,61,46,.5)}
.xtb__dot{flex:none;width:9px;height:9px;border-radius:50%;background:#1fa36a;margin-top:4px;box-shadow:0 0 0 3px rgba(31,163,106,.2)}
.xtb__name{position:absolute;left:0;right:0;bottom:0;background:#0b3d2e;color:#e4f1ea;padding:12px 16px;font-size:13px}
.xtb__name b{display:block;font-size:16px;color:#fff}
.xtb__form{background:#fff;border-radius:0 6px 6px 0;padding:30px 32px;display:grid;gap:14px;align-content:start}
.xtb__eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#b9761a}
.xtb__h{font-size:clamp(22px,2.6vw,30px);line-height:1.1;font-weight:700;letter-spacing:-.015em;margin:0 0 4px}
.xtb__set{border:0;padding:0;margin:0;min-width:0}
.xtb__set legend{padding:0;font-size:12px;font-weight:600;color:#55736a;margin-bottom:6px}
.xtb__chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.xtb__chips button{font:600 14px 'Switzer',sans-serif;color:#0b3d2e;background:#f2f8f5;border:1.5px solid #cfe3d8;border-radius:4px;padding:10px 12px;text-align:left;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.xtb__chips button small{display:block;font-weight:400;font-size:12px;color:#55736a;margin-top:2px}
.xtb__chips button:hover:not(:disabled){border-color:#0b3d2e}
.xtb__chips button.is-on{background:#0b3d2e;border-color:#0b3d2e;color:#fff}
.xtb__chips button.is-on small{color:#bfe0cf}
.xtb__chips button:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.xtb__fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.xtb__fields label span{display:block;font-size:12px;font-weight:600;color:#55736a;margin-bottom:5px}
.xtb__in{width:100%;font:500 15px 'Switzer',sans-serif;color:#0b3d2e;border:1.5px solid #cfe3d8;border-radius:4px;padding:10px 12px;background:#fff;outline:none}
.xtb__in:focus{border-color:#0b3d2e}
.xtb__in.is-bad{border-color:#c0392b}
.xtb__send{font:700 15px 'Switzer',sans-serif;background:#e8a33d;color:#0b3d2e;border:0;border-radius:4px;padding:13px;cursor:pointer;transition:background .2s}
.xtb__send:hover{background:#f1b55b}
.xtb__msg{margin:0;font-size:13px;color:#55736a;min-height:36px;line-height:1.4}
.xtb__msg.is-ok{color:#0b3d2e;font-weight:600}.xtb__msg.is-err{color:#b0322a}
@media(max-width:820px){.xtb__inner{grid-template-columns:minmax(0,1fr);padding:22px 14px}.xtb__person{min-height:260px;border-radius:6px 6px 0 0}.xtb__photo svg{width:58%}.xtb__form{border-radius:0 0 6px 6px;padding:22px 18px}.xtb__fields{grid-template-columns:1fr}}

// Terugbelverzoek met tijdvakken · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.xtb');if(!w)return;
var st={dag:null,deel:null},msg=w.querySelector('.xtb__msg');
var h=new Date().getHours(),wd=new Date().getDay(),weekend=(wd===0||wd===6);
var deelBtns=w.querySelectorAll('[data-k="deel"] button'),dagBtns=w.querySelectorAll('[data-k="dag"] button');
if(weekend||h>=17){dagBtns[0].disabled=true;dagBtns[0].title='Vandaag kan niet meer';}
if(wd===5||wd===6){dagBtns[1].innerHTML='Maandag';}
function sync(){deelBtns.forEach(function(b){var past=st.dag==='vandaag'&&((b.getAttribute('data-v')==='ochtend'&&h>=12)||(b.getAttribute('data-v')==='middag'&&h>=17));b.disabled=past;if(past&&b.classList.contains('is-on')){b.classList.remove('is-on');st.deel=null;}});}
w.querySelectorAll('.xtb__chips').forEach(function(g){g.addEventListener('click',function(e){var b=e.target.closest('button');if(!b||b.disabled)return;g.querySelectorAll('button').forEach(function(x){x.classList.toggle('is-on',x===b);x.setAttribute('aria-pressed',x===b);});st[g.getAttribute('data-k')]=b.getAttribute('data-v');sync();});});
w.querySelector('form').addEventListener('submit',function(e){e.preventDefault();
  var n=w.querySelector('[name=naam]'),t=w.querySelector('[name=tel]'),ok=true;
  [n,t].forEach(function(i){i.classList.remove('is-bad');});
  if(!n.value.trim()){n.classList.add('is-bad');ok=false;}
  if(t.value.replace(/\D/g,'').length<10){t.classList.add('is-bad');ok=false;}
  if(!st.dag||!st.deel){msg.className='xtb__msg is-err';msg.textContent='Kies een dag en een dagdeel.';return;}
  if(!ok){msg.className='xtb__msg is-err';msg.textContent='Vul uw naam en een telefoonnummer van 10 cijfers in.';return;}
  var dagTxt=st.dag==='vandaag'?'vandaag':dagBtns[1].textContent.toLowerCase();
  msg.className='xtb__msg is-ok';msg.textContent='Genoteerd, '+n.value.trim().split(' ')[0]+'. Sanne belt u '+dagTxt+' tussen '+(st.deel==='ochtend'?'9:00 en 12:00':'13:00 en 17:00')+'.';
});
}
init(document.querySelector('.jouw-container'));