Contact met vestiging-tabbladen Nieuw

<!-- Contact met vestiging-tabbladen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="cvs">
  <div class="cvs__in">
    <form class="cvs__form" novalidate>
      <span class="cvs__eye">Autobedrijf Brink · contact</span>
      <h2 class="cvs__h">Afspraak voor onderhoud of APK?</h2>
      <div class="cvs__row"><label class="cvs__f"><span>Naam</span><input name="naam" required autocomplete="name"></label><label class="cvs__f"><span>Telefoon</span><input name="tel" type="tel" required autocomplete="tel"></label></div>
      <div class="cvs__row"><label class="cvs__f"><span>Kenteken</span><input name="kenteken" placeholder="bv. 12-ABC-3" autocomplete="off"></label><label class="cvs__f"><span>Vestiging</span><select name="vestiging"><option value="0">Amersfoort</option><option value="1">Ede</option><option value="2">Zwolle</option></select></label></div>
      <label class="cvs__f"><span>Waar gaat het om?</span><textarea name="bericht" rows="3" placeholder="bv. APK en grote beurt, liefst op een woensdag"></textarea></label>
      <button class="cvs__send" type="submit">Verstuur aanvraag</button>
      <p class="cvs__ok" role="status"></p>
    </form>
    <div class="cvs__loc">
      <div class="cvs__tabs" role="tablist" aria-label="Vestigingen">
        <button role="tab" class="cvs__tab" aria-selected="true" data-i="0">Amersfoort</button>
        <button role="tab" class="cvs__tab" aria-selected="false" tabindex="-1" data-i="1">Ede</button>
        <button role="tab" class="cvs__tab" aria-selected="false" tabindex="-1" data-i="2">Zwolle</button>
      </div>
      <div class="cvs__panel" role="tabpanel">
        <div class="cvs__map" aria-hidden="true"><span class="cvs__pin"></span><span class="cvs__lbl"></span></div>
        <div class="cvs__info">
          <div><span class="cvs__k">Adres</span><p class="cvs__addr"></p></div>
          <div><span class="cvs__k">Telefoon</span><p><a class="cvs__tel" href="#"></a></p></div>
          <div class="cvs__hours"><span class="cvs__k">Openingstijden</span><dl></dl></div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

/* Contact met vestiging-tabbladen · NedDev · eigen werk. */
.cvs{background:#f2f2f0;color:#1c1d1f;font-family:'Switzer',sans-serif;box-sizing:border-box}
.cvs *{box-sizing:border-box}
.cvs__in{max-width:1180px;margin:0 auto;padding:40px 32px;display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:start}
.cvs__eye{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#d62828}
.cvs__h{font-size:clamp(22px,2.6vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:8px 0 20px}
.cvs__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cvs__f{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.cvs__f span{font-size:12.5px;font-weight:600;color:#45474b}
.cvs__f input,.cvs__f select,.cvs__f textarea{font:400 15px 'Switzer',sans-serif;color:#1c1d1f;background:#fff;border:1px solid #c9cacc;border-radius:3px;padding:10px 12px;width:100%;resize:vertical}
.cvs__f input:focus,.cvs__f select:focus,.cvs__f textarea:focus{outline:2px solid #1c1d1f;outline-offset:-1px;border-color:#1c1d1f}
.cvs__f .is-bad{border-color:#d62828;background:#fff5f5}
.cvs__send{font:700 15px 'Switzer',sans-serif;background:#d62828;color:#fff;border:0;border-radius:3px;padding:13px 22px;cursor:pointer;transition:background .2s}
.cvs__send:hover{background:#1c1d1f}
.cvs__send:focus-visible{outline:2px solid #1c1d1f;outline-offset:2px}
.cvs__ok{font-size:14px;margin:10px 0 0;min-height:20px;color:#1d7a46;font-weight:600}
.cvs__ok.is-err{color:#d62828}
.cvs__loc{background:#1c1d1f;color:#f2f2f0;border-radius:6px;overflow:hidden}
.cvs__tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.12)}
.cvs__tab{flex:1;font:600 14px 'Switzer',sans-serif;color:rgba(242,242,240,.6);background:none;border:0;padding:15px 10px;cursor:pointer;position:relative;transition:color .2s}
.cvs__tab::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;background:#d62828;transform:scaleX(0);transition:transform .25s}
.cvs__tab[aria-selected="true"]{color:#fff}.cvs__tab[aria-selected="true"]::after{transform:none}
.cvs__tab:hover{color:#fff}
.cvs__tab:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.cvs__panel{padding:18px}
.cvs__map{height:150px;border-radius:3px;position:relative;background-color:#2b2d31;background-image:linear-gradient(var(--a1,20deg),transparent 46%,#4a4d53 46% 54%,transparent 54%),linear-gradient(var(--a2,105deg),transparent 47%,#3c3f44 47% 53%,transparent 53%),linear-gradient(0deg,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:100% 100%,100% 100%,22px 22px,22px 22px;transition:background-position .4s}
.cvs__pin{position:absolute;left:var(--px,50%);top:var(--py,50%);width:22px;height:22px;margin:-22px 0 0 -11px;background:#d62828;border-radius:50% 50% 50% 0;transform:rotate(-45deg);transition:left .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1)}
.cvs__pin::after{content:'';position:absolute;inset:7px;border-radius:50%;background:#1c1d1f}
.cvs__lbl{position:absolute;left:12px;bottom:10px;font:500 11px 'JetBrains Mono',monospace;color:rgba(255,255,255,.7)}
.cvs__info{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin-top:16px}
.cvs__hours{grid-column:1/-1}
.cvs__k{font:500 10.5px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,242,240,.5)}
.cvs__info p{margin:5px 0 0;font-size:15px;line-height:1.45}
.cvs__tel{color:#fff;font-weight:700;text-decoration:none;border-bottom:2px solid #d62828}
.cvs__tel:hover{color:#ff8a8a}
.cvs__hours dl{display:grid;grid-template-columns:auto 1fr;gap:3px 16px;margin:6px 0 0;font-size:13.5px}
.cvs__hours dt{color:rgba(242,242,240,.6)}.cvs__hours dd{margin:0}
.cvs__hours .is-today{color:#fff;font-weight:700}
@media(max-width:820px){.cvs__in{grid-template-columns:1fr;padding:28px 16px;gap:24px}.cvs__map{height:120px}}
@media(max-width:420px){.cvs__row{grid-template-columns:1fr;gap:0}.cvs__info{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.cvs__pin,.cvs__tab::after{transition:none}}

// Contact met vestiging-tabbladen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.cvs');if(!w)return;
var V=[
 {a:'Ruimtehoek 12<br>3824 MP Amersfoort',t:'033 123 4410',h:[['Ma t/m vr','07:30 tot 17:30'],['Zaterdag','08:30 tot 13:00'],['Zondag','gesloten']],px:'62%',py:'44%',a1:'24deg',a2:'112deg',l:'Bedrijventerrein De Isselt'},
 {a:'Proosdijweg 7<br>6716 BX Ede',t:'0318 123 456',h:[['Ma t/m vr','08:00 tot 17:30'],['Zaterdag','gesloten'],['Zondag','gesloten']],px:'34%',py:'58%',a1:'-12deg',a2:'78deg',l:'Naast de Keuringshal'},
 {a:'Marsweg 41<br>8013 PE Zwolle',t:'038 123 4477',h:[['Ma t/m vr','07:30 tot 18:00'],['Zaterdag','09:00 tot 14:00'],['Zondag','gesloten']],px:'48%',py:'36%',a1:'48deg',a2:'140deg',l:'Afslag 19 Zwolle-Noord'}];
var tabs=w.querySelectorAll('.cvs__tab'),map=w.querySelector('.cvs__map'),sel=w.querySelector('select[name=vestiging]');
var day=new Date().getDay();var ti=day===0?2:day===6?1:0;
function show(i,focus){var v=V[i];tabs.forEach(function(t,j){var on=j===i;t.setAttribute('aria-selected',on?'true':'false');t.tabIndex=on?0:-1;if(on&&focus)t.focus();});
 w.querySelector('.cvs__addr').innerHTML=v.a;var tel=w.querySelector('.cvs__tel');tel.textContent=v.t;tel.href='tel:+31'+v.t.replace(/\s/g,'').slice(1);
 w.querySelector('.cvs__hours dl').innerHTML=v.h.map(function(r,j){var c=j===ti?' class="is-today"':'';return '<dt'+c+'>'+r[0]+'</dt><dd'+c+'>'+r[1]+'</dd>';}).join('');
 map.style.setProperty('--px',v.px);map.style.setProperty('--py',v.py);map.style.setProperty('--a1',v.a1);map.style.setProperty('--a2',v.a2);w.querySelector('.cvs__lbl').textContent=v.l;sel.value=String(i);}
tabs.forEach(function(t,i){t.addEventListener('click',function(){show(i);});t.addEventListener('keydown',function(e){var n=e.key==='ArrowRight'?1:e.key==='ArrowLeft'?-1:0;if(n){e.preventDefault();show((i+n+3)%3,true);}});});
sel.addEventListener('change',function(){show(+sel.value);});
var f=w.querySelector('.cvs__form'),ok=w.querySelector('.cvs__ok');
f.addEventListener('submit',function(e){e.preventDefault();var bad=[];['naam','tel'].forEach(function(n){var el=f.elements[n];var v=el.value.trim();var good=n==='tel'?v.replace(/\D/g,'').length>=10:v.length>1;el.classList.toggle('is-bad',!good);if(!good)bad.push(el);});
 if(bad.length){ok.classList.add('is-err');ok.textContent='Vul je naam en een telefoonnummer van 10 cijfers in.';bad[0].focus();return;}
 var vi=+sel.value;ok.classList.remove('is-err');ok.textContent='Dank je, '+f.elements.naam.value.trim().split(' ')[0]+'. We bellen je vandaag nog terug vanuit '+tabs[vi].textContent+'.';f.reset();sel.value=String(vi);});
show(0);
}
init(document.querySelector('.jouw-container'));