Contact: nu bereikbaar of morgen New

<!-- Contact: nu bereikbaar of morgen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="cno">
  <div class="cno__in">
    <div class="cno__status">
      <span class="cno__eye">Witgoedservice Delft · klantenservice</span>
      <p class="cno__state"><i class="cno__led"></i><span class="cno__now">Nu bereikbaar</span></p>
      <p class="cno__sub"></p>
      <ul class="cno__hours"></ul>
      <div class="cno__demo" role="group" aria-label="Demo-tijd"><span>Demo</span><button type="button" data-t="echt" class="is-on">echte tijd</button><button type="button" data-t="10">di 10:00</button><button type="button" data-t="21">di 21:00</button><button type="button" data-t="za">za 15:00</button></div>
    </div>
    <div class="cno__opts">
      <a class="cno__opt" href="tel:+31151234567"><span class="cno__ic"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.6 2.5 9.4 6c.4.5.4 1.2 0 1.7L8 9.4a12 12 0 0 0 6.6 6.6l1.7-1.4c.5-.4 1.2-.4 1.7 0l3.5 2.8c.6.5.6 1.4.1 2l-1.6 1.9c-.6.7-1.6 1-2.5.7C10.4 19.8 4.2 13.6 2 6.6c-.3-.9 0-1.9.7-2.5l1.9-1.6c.6-.5 1.5-.5 2 0Z" fill="currentColor"/></svg></span><b>Bellen</b><span class="cno__val">015 123 4567</span><span class="cno__exp" data-open="Direct iemand aan de lijn" data-closed="Spreek in, we bellen u terug"></span></a>
      <a class="cno__opt" href="https://wa.me/31612345678" target="_blank" rel="noopener"><span class="cno__ic"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.5a9.5 9.5 0 0 0-8.2 14.3L2.5 21.5l4.8-1.3A9.5 9.5 0 1 0 12 2.5Z" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M9 7.8c.3 0 .5 0 .7.5l.7 1.6c.1.3 0 .5-.1.7l-.6.7c.6 1.2 1.6 2.2 2.9 2.8l.7-.7c.2-.2.5-.2.7-.1l1.6.8c.3.1.4.4.3.7-.3 1-1.2 1.6-2.2 1.5-3-.4-5.6-3-6-6-.1-1 .5-1.9 1.3-2.3Z" fill="currentColor"/></svg></span><b>WhatsApp</b><span class="cno__val">06 1234 5678</span><span class="cno__exp" data-open="Antwoord binnen 15 minuten" data-closed="Antwoord vanaf openingstijd"></span></a>
      <a class="cno__opt" href="mailto:service@voorbeeld.nl"><span class="cno__ic"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="2.5" y="5" width="19" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="m3.5 6.5 8.5 7 8.5-7" fill="none" stroke="currentColor" stroke-width="1.8"/></svg></span><b>Mailen</b><span class="cno__val">service@voorbeeld.nl</span><span class="cno__exp" data-open="Antwoord binnen 4 uur" data-closed="Antwoord de volgende werkdag vóór 12:00"></span></a>
    </div>
  </div>
</div>
</div>

/* Contact: nu bereikbaar of morgen · NedDev · eigen werk. */
.cno{background:#e8ecf1;color:#121a26;font-family:'Switzer',sans-serif;box-sizing:border-box}
.cno *{box-sizing:border-box}
.cno__in{max-width:1180px;margin:0 auto;padding:44px 32px;display:grid;grid-template-columns:.9fr 1.4fr;gap:40px;align-items:center}
.cno__eye{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#2f6bff}
.cno__state{display:flex;align-items:center;gap:14px;margin:14px 0 8px;font-size:clamp(28px,3.6vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1}
.cno__led{width:16px;height:16px;border-radius:50%;background:#18a957;flex:none;box-shadow:0 0 0 0 rgba(24,169,87,.5);animation:cno-pulse 2s infinite}
.cno.is-closed .cno__led{background:#9aa4b2;animation:none}
.cno__sub{margin:0 0 18px;font-size:15px;color:#4a5566;line-height:1.5}
.cno__hours{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid #cdd4de;display:grid;grid-template-columns:auto 1fr;gap:4px 18px;font-size:13.5px;color:#4a5566}
.cno__hours li{display:contents}
.cno__hours .is-today span{color:#121a26;font-weight:700}
.cno__demo{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-top:18px;font:500 11px 'JetBrains Mono',monospace;color:#7b8594}
.cno__demo span{margin-right:4px}
.cno__demo button{font:inherit;color:#4a5566;background:transparent;border:1px solid #cdd4de;border-radius:999px;padding:4px 9px;cursor:pointer}
.cno__demo button.is-on{background:#121a26;color:#fff;border-color:#121a26}
.cno__opts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cno__opt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:#fff;border:1px solid #d5dbe4;border-radius:6px;padding:22px 20px 20px;color:#121a26;text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s;min-width:0}
.cno__opt:hover{border-color:#2f6bff;transform:translateY(-3px);box-shadow:0 12px 26px rgba(18,26,38,.1)}
.cno__opt:focus-visible{outline:2px solid #2f6bff;outline-offset:2px}
.cno__ic{width:44px;height:44px;border-radius:50%;background:#2f6bff;color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.cno__ic svg{width:21px;height:21px}
.cno.is-closed .cno__ic{background:#121a26}
.cno__opt b{font-size:18px}
.cno__val{font:500 13px 'JetBrains Mono',monospace;color:#2f6bff;overflow-wrap:anywhere}
.cno__exp{margin-top:auto;padding-top:14px;font-size:13px;color:#4a5566;line-height:1.4}
@keyframes cno-pulse{0%{box-shadow:0 0 0 0 rgba(24,169,87,.5)}70%{box-shadow:0 0 0 12px rgba(24,169,87,0)}100%{box-shadow:0 0 0 0 rgba(24,169,87,0)}}
@media(max-width:860px){.cno__in{grid-template-columns:1fr;gap:24px;padding:30px 16px}.cno__opts{grid-template-columns:1fr;gap:10px}.cno__opt{display:grid;grid-template-columns:44px 1fr;gap:0 14px;padding:14px}.cno__ic{grid-row:1/4;margin:0}.cno__exp{padding-top:4px}}
@media(prefers-reduced-motion:reduce){.cno__led{animation:none}.cno__opt{transition:none}.cno__opt:hover{transform:none}}

// Contact: nu bereikbaar of morgen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.cno');if(!w)return;
var H={0:null,1:[8,18],2:[8,18],3:[8,18],4:[8,18],5:[8,18],6:[9,13]};
var D=['zondag','maandag','dinsdag','woensdag','donderdag','vrijdag','zaterdag'];
function hh(h){return h+':00';}
function render(day,hour){var o=H[day];var open=o&&hour>=o[0]&&hour<o[1];w.classList.toggle('is-closed',!open);
 var head,sub;
 if(open){head='Nu bereikbaar';sub='We nemen op tot '+hh(o[1])+'. Gemiddelde wachttijd: 1 minuut.';}
 else if(o&&hour<o[0]){head='Vandaag vanaf '+hh(o[0]);sub='We zijn nog niet open. Bericht sturen kan al, dan staat u bovenaan de lijst.';}
 else{var n=1;while(!H[(day+n)%7])n++;var nd=(day+n)%7;head=(n===1?'Morgen':D[nd].charAt(0).toUpperCase()+D[nd].slice(1))+' vanaf '+hh(H[nd][0]);sub='We zijn nu gesloten. Laat een bericht achter, dan reageren we als eerste.';}
 w.querySelector('.cno__now').textContent=head;w.querySelector('.cno__sub').textContent=sub;
 w.querySelectorAll('.cno__exp').forEach(function(e){e.textContent=e.getAttribute(open?'data-open':'data-closed');});
 var rows=[['Maandag t/m vrijdag','8:00 tot 18:00',[1,2,3,4,5]],['Zaterdag','9:00 tot 13:00',[6]],['Zondag','gesloten',[0]]];
 w.querySelector('.cno__hours').innerHTML=rows.map(function(r){var t=r[2].indexOf(day)>-1?' class="is-today"':'';return '<li'+t+'><span>'+r[0]+'</span><span>'+r[1]+'</span></li>';}).join('');}
function real(){var d=new Date();render(d.getDay(),d.getHours()+d.getMinutes()/60);}
var mode='echt';w.querySelectorAll('.cno__demo button').forEach(function(b){b.addEventListener('click',function(){mode=b.getAttribute('data-t');w.querySelectorAll('.cno__demo button').forEach(function(x){x.classList.toggle('is-on',x===b);});
 if(mode==='echt')real();else if(mode==='za')render(6,15);else render(2,+mode);});});
real();var iv=setInterval(function(){if(!w.isConnected){clearInterval(iv);return;}if(mode==='echt')real();},60000);
}
init(document.querySelector('.jouw-container'));