Reviews met scoreverdeling per ster New

<!-- Reviews met scoreverdeling per ster · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="xsv">
  <div class="xsv__inner">
    <div class="xsv__score">
      <span class="xsv__eyebrow">Rijschool Bakker · Amersfoort</span>
      <h2 class="xsv__h">Wat leerlingen zeggen</h2>
      <div class="xsv__big"><strong>4,6</strong><div><span class="xsv__stars" style="--v:92%" aria-label="4,6 van 5 sterren"></span><small>312 beoordelingen</small></div></div>
      <div class="xsv__bars" role="group" aria-label="Filter op aantal sterren">
        <button type="button" data-s="5"><span>5 ster</span><i style="--w:77%"></i><em>241</em></button>
        <button type="button" data-s="4"><span>4 ster</span><i style="--w:15%"></i><em>48</em></button>
        <button type="button" data-s="3"><span>3 ster</span><i style="--w:4%"></i><em>12</em></button>
        <button type="button" data-s="2"><span>2 ster</span><i style="--w:2%"></i><em>5</em></button>
        <button type="button" data-s="1"><span>1 ster</span><i style="--w:2%"></i><em>6</em></button>
      </div>
      <p class="xsv__note">Geslaagd in één keer: <b>71%</b> · landelijk gemiddelde 49%</p>
    </div>
    <div class="xsv__list">
      <div class="xsv__listhead"><span class="xsv__filter">Meest recent</span><button type="button" class="xsv__reset" hidden>Alle sterren tonen</button></div>
      <ul class="xsv__reviews" aria-live="polite"></ul>
    </div>
  </div>
</div>
</div>

/* Reviews met scoreverdeling per ster · NedDev · eigen werk. */
.xsv{background:#fff;color:#14213d;font-family:'Switzer',sans-serif;box-sizing:border-box}
.xsv *{box-sizing:border-box}
.xsv__inner{max-width:1120px;margin:0 auto;padding:50px 32px;display:grid;grid-template-columns:380px 1fr;gap:48px}
.xsv__eyebrow{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#b07400;margin-bottom:12px}
.xsv__h{font-size:30px;line-height:1.1;font-weight:700;letter-spacing:-.02em;margin:0 0 20px}
.xsv__big{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.xsv__big strong{font-size:64px;line-height:.9;font-weight:700;letter-spacing:-.03em}
.xsv__big small{display:block;font-size:13px;color:#5a6378;margin-top:4px}
.xsv__stars{display:inline-block;font-size:22px;letter-spacing:2px;line-height:1;background:linear-gradient(90deg,#fca311 var(--v),#d9dde6 var(--v));-webkit-background-clip:text;background-clip:text;color:transparent}
.xsv__stars::before{content:'\2605\2605\2605\2605\2605'}
.xsv__bars{display:grid;gap:6px}
.xsv__bars button{display:grid;grid-template-columns:52px 1fr 36px;align-items:center;gap:10px;background:transparent;border:0;padding:5px 6px;margin:0 -6px;border-radius:4px;cursor:pointer;font:500 13px 'Switzer',sans-serif;color:#14213d;text-align:left;transition:background .2s}
.xsv__bars button:hover{background:#f3f5f9}
.xsv__bars button.is-on{background:#fff4dc}
.xsv__bars i{display:block;height:9px;border-radius:5px;background:#eceff4;position:relative;overflow:hidden}
.xsv__bars i::after{content:'';position:absolute;inset:0;width:var(--w);background:#fca311;border-radius:5px;transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.xsv.is-in .xsv__bars i::after{transform:scaleX(1)}
.xsv__bars em{font-style:normal;color:#5a6378;text-align:right;font-variant-numeric:tabular-nums}
.xsv__note{font-size:13px;color:#5a6378;margin:18px 0 0;padding-top:14px;border-top:1px solid #e6e9ef}
.xsv__note b{color:#14213d}
.xsv__listhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;min-height:28px}
.xsv__filter{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#5a6378}
.xsv__reset{font:600 13px 'Switzer',sans-serif;background:transparent;border:0;color:#14213d;text-decoration:underline;cursor:pointer}
.xsv__reviews{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.xsv__rev{border:1px solid #e6e9ef;border-radius:6px;padding:16px 18px;animation:xsv-in .4s ease both}
.xsv__rev:nth-child(2){animation-delay:.06s}.xsv__rev:nth-child(3){animation-delay:.12s}
@keyframes xsv-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.xsv__revtop{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.xsv__who{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px}
.xsv__av{width:30px;height:30px;border-radius:50%;background:#14213d;color:#fca311;display:grid;place-items:center;font-size:12px;font-weight:700}
.xsv__rev .xsv__stars{font-size:14px}
.xsv__rev p{margin:0;font-size:14.5px;line-height:1.5;color:#2c3650}
.xsv__date{display:block;font-size:12px;color:#7a8296;margin-top:8px}
.xsv__empty{font-size:14px;color:#5a6378;padding:20px;border:1px dashed #d4d9e3;border-radius:6px}
@media(prefers-reduced-motion:reduce){.xsv__bars i::after{transition:none}.xsv__rev{animation:none}}
@media(max-width:860px){.xsv__inner{grid-template-columns:minmax(0,1fr);padding:32px 18px;gap:28px}.xsv__big strong{font-size:52px}}

// Reviews met scoreverdeling per ster · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.xsv');if(!w)return;
var R=[
 {n:'Fleur',s:5,d:'2 oktober 2026',t:'In één keer geslaagd! Ruud bleef rustig toen ik op de rotonde bij de Hogeweg vastliep, en liet me het daarna drie keer oefenen.'},
 {n:'Daan',s:5,d:'28 september 2026',t:'Lessen altijd op tijd en via de app makkelijk te verzetten. Examenroute van Amersfoort-Noord goed doorgenomen.'},
 {n:'Yasmina',s:4,d:'21 september 2026',t:'Fijne instructeur en duidelijke uitleg. Alleen de planning voor de week erna kwam soms pas op zondag.'},
 {n:'Thomas',s:5,d:'14 september 2026',t:'Na een andere rijschool hier verder gegaan. Binnen 12 lessen klaar voor examen, eerlijk advies over hoeveel ik nog nodig had.'},
 {n:'Lotte',s:3,d:'3 september 2026',t:'Instructeur prima, maar ik heb twee keer in een andere auto les gehad door onderhoud. Dat was even wennen.'},
 {n:'Kevin',s:2,d:'19 augustus 2026',t:'Twee lessen verzet door ziekte van de instructeur. Wel netjes een gratis extra les gekregen.'},
 {n:'Mirjam',s:1,d:'2 augustus 2026',t:'Tussentijdse toets te vroeg ingepland naar mijn gevoel. Na een gesprek met de eigenaar wel opgelost.'}
];
var ul=w.querySelector('.xsv__reviews'),lab=w.querySelector('.xsv__filter'),rs=w.querySelector('.xsv__reset'),btns=w.querySelectorAll('.xsv__bars button');
function render(s){
  var list=R.filter(function(r){return !s||r.s===s;}).slice(0,3);
  lab.textContent=s?('Recent met '+s+' ster'+(s>1?'ren':'')):'Meest recent';
  rs.hidden=!s;
  if(!list.length){ul.innerHTML='<li class="xsv__empty">Nog geen recente reviews met dit aantal sterren.</li>';return;}
  ul.innerHTML=list.map(function(r){return '<li class="xsv__rev"><div class="xsv__revtop"><span class="xsv__who"><span class="xsv__av">'+r.n.charAt(0)+'</span>'+r.n+'</span><span class="xsv__stars" style="--v:'+(r.s*20)+'%" aria-label="'+r.s+' van 5 sterren"></span></div><p>'+r.t+'</p><span class="xsv__date">'+r.d+' · geverifieerde leerling</span></li>';}).join('');
}
var cur=0;
btns.forEach(function(b){b.addEventListener('click',function(){var s=+b.getAttribute('data-s');cur=cur===s?0:s;btns.forEach(function(x){x.classList.toggle('is-on',+x.getAttribute('data-s')===cur);x.setAttribute('aria-pressed',+x.getAttribute('data-s')===cur);});render(cur);});});
rs.addEventListener('click',function(){cur=0;btns.forEach(function(x){x.classList.remove('is-on');});render(0);});
render(0);
if('IntersectionObserver' in window){var io=new IntersectionObserver(function(e){if(e[0].isIntersecting){w.classList.add('is-in');io.disconnect();}},{threshold:.25});io.observe(w);}else w.classList.add('is-in');
}
init(document.querySelector('.jouw-container'));