Calculator

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.47.0/dist/tabler-icons.min.css">
<style>
  .hyd-cc-wrap { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 1.5rem 0; max-width: 600px; margin: 0 auto; }
  .hyd-cc-shell { background: #fff; border: 0.5px solid #e5e5e5; border-radius: 16px; padding: 2rem; }
  .hyd-cc-eye { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #639922; margin-bottom: .4rem; text-align: center; }
  .hyd-cc-title { font-size: 22px; font-weight: 500; color: #1a1a1a; text-align: center; margin-bottom: 1.8rem; }
  .hyd-cc-row { margin-bottom: 1.6rem; }
  .hyd-cc-row-lbl { font-size: 14px; font-weight: 500; color: #1a1a1a; margin-bottom: 8px; }
  .hyd-cc-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hyd-cc-opt { border: 0.5px solid #e5e5e5; border-radius: 10px; padding: 10px 8px; text-align: center; font-size: 12.5px; cursor: pointer; color: #666; transition: border-color .15s, background .15s, color .15s; }
  .hyd-cc-opt:hover { border-color: #8bc34a; }
  .hyd-cc-opt.on { border-color: #8bc34a; background: #eaf3de; color: #3b6d11; font-weight: 500; }
  .hyd-cc-result { margin-top: 1.8rem; border-top: 0.5px solid #e5e5e5; padding-top: 1.6rem; }
  .hyd-cc-res-eye { font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #666; margin-bottom: .6rem; }
  .hyd-cc-res-box { background: #4f7fc0; border-radius: 12px; padding: 1.4rem 1.6rem; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; transition: opacity .2s; }
  .hyd-cc-res-left { flex: 1; min-width: 180px; }
  .hyd-cc-res-name { font-size: 18px; font-weight: 500; margin-bottom: 4px; }
  .hyd-cc-res-desc { font-size: 12px; color: #d6e4f6; line-height: 1.6; }
  .hyd-cc-res-right { text-align: right; }
  .hyd-cc-res-price { font-size: 26px; font-weight: 500; }
  .hyd-cc-res-old { font-size: 12px; color: #aac4e8; text-decoration: line-through; }
  .hyd-cc-cta { display: flex; align-items: center; justify-content: center; gap: 8px; background: #8bc34a; color: #fff; border: none; border-radius: 30px; padding: 14px; font-size: 14px; font-weight: 500; cursor: pointer; width: 100%; margin-top: 1.2rem; text-decoration: none; }
  .hyd-cc-cta:hover { background: #7aac3f; }
  .hyd-cc-stock { display: flex; align-items: center; gap: 8px; margin-top: 1rem; font-size: 12px; color: #666; }
  .hyd-cc-stock-bar { flex: 1; height: 4px; background: #e5e5e5; border-radius: 2px; overflow: hidden; }
  .hyd-cc-stock-fill { height: 100%; background: #e8a020; border-radius: 2px; transition: width .4s ease; }
  .hyd-cc-meta { display: flex; justify-content: center; gap: 16px; margin-top: 1rem; font-size: 11px; color: #999; flex-wrap: wrap; }
  .hyd-cc-meta span { display: flex; align-items: center; gap: 5px; }
  .hyd-cc-meta i { color: #8bc34a; }
</style>

<div class="hyd-cc-wrap">
  <div class="hyd-cc-shell">
    <div class="hyd-cc-eye">Hydrated+ · Pakket calculator</div>
    <div class="hyd-cc-title">Hoeveel heb jij écht nodig?</div>

    <div class="hyd-cc-row">
      <div class="hyd-cc-row-lbl">Hoe vaak sport of beweeg je intensief per week?</div>
      <div class="hyd-cc-opts" id="hyd-cc-freq">
        <div class="hyd-cc-opt" data-val="1">1-2x</div>
        <div class="hyd-cc-opt" data-val="2">3-4x</div>
        <div class="hyd-cc-opt" data-val="3">5+x</div>
      </div>
    </div>

    <div class="hyd-cc-row">
      <div class="hyd-cc-row-lbl">Hoe vaak heb je 's avonds of na inspanning krampen of vermoeidheid?</div>
      <div class="hyd-cc-opts" id="hyd-cc-symp">
        <div class="hyd-cc-opt" data-val="1">Bijna nooit</div>
        <div class="hyd-cc-opt" data-val="2">Soms</div>
        <div class="hyd-cc-opt" data-val="3">Regelmatig</div>
      </div>
    </div>

    <div class="hyd-cc-row">
      <div class="hyd-cc-row-lbl">Wat drink je gemiddeld per dag aan water?</div>
      <div class="hyd-cc-opts" id="hyd-cc-water">
        <div class="hyd-cc-opt" data-val="1">2L+</div>
        <div class="hyd-cc-opt" data-val="2">1-2L</div>
        <div class="hyd-cc-opt" data-val="3">&lt; 1L</div>
      </div>
    </div>

    <div class="hyd-cc-result">
      <div class="hyd-cc-res-eye">Jouw aanbevolen pakket</div>
      <div class="hyd-cc-res-box" id="hyd-cc-res-box"></div>
      <a href="/cart" class="hyd-cc-cta" id="hyd-cc-cta-btn"><i class="ti ti-shopping-cart" aria-hidden="true"></i> Voeg toe aan winkelwagen</a>
      <div class="hyd-cc-stock">
        <span id="hyd-cc-stock-txt">Nog 14 pakketten op voorraad deze week</span>
        <div class="hyd-cc-stock-bar"><div class="hyd-cc-stock-fill" id="hyd-cc-stock-fill"></div></div>
      </div>
      <div class="hyd-cc-meta">
        <span><i class="ti ti-truck" aria-hidden="true"></i> Gratis verzending NL/BE</span>
        <span><i class="ti ti-refresh" aria-hidden="true"></i> Maandelijks opzegbaar</span>
      </div>
    </div>
  </div>
</div>

<script>
const hydState = {freq:null, symp:null, water:null};

const hydPackages = [
  {min:3, max:5, name:"Starter pakket", days:"14 zakjes", desc:"Voor af en toe een steuntje in de rug — tijdens drukke weken of intensieve trainingen.", price:18, old:24, stockPct:80, stockTxt:"Nog 22 pakketten op voorraad deze week", url:"/products/starter-pakket"},
  {min:6, max:7, name:"Maandpakket", days:"30 zakjes", desc:"Het meest gekozen pakket. Dagelijks gebruik voor stabiele energie en herstel, het hele jaar door.", price:32, old:45, stockPct:55, stockTxt:"Nog 14 pakketten op voorraad deze week", url:"/products/maandpakket"},
  {min:8, max:9, name:"Performance pakket", days:"60 zakjes", desc:"Voor intensieve sporters en mannen met veel klachten — dubbele voorraad, maximale korting.", price:55, old:84, stockPct:30, stockTxt:"Nog 6 pakketten op voorraad deze week", url:"/products/performance-pakket"},
];

document.querySelectorAll('#hyd-cc-freq, #hyd-cc-symp, #hyd-cc-water').forEach(group=>{
  const key = group.id.replace('hyd-cc-','');
  group.querySelectorAll('.hyd-cc-opt').forEach(opt=>{
    opt.addEventListener('click', ()=>{
      group.querySelectorAll('.hyd-cc-opt').forEach(o=>o.classList.remove('on'));
      opt.classList.add('on');
      hydState[key] = parseInt(opt.dataset.val);
      hydRenderCC();
    });
  });
});

function hydRenderCC(){
  const box = document.getElementById('hyd-cc-res-box');
  const stockTxt = document.getElementById('hyd-cc-stock-txt');
  const stockFill = document.getElementById('hyd-cc-stock-fill');
  const ctaBtn = document.getElementById('hyd-cc-cta-btn');

  let pkg;
  if(hydState.freq===null || hydState.symp===null || hydState.water===null){
    pkg = hydPackages[1];
    box.style.opacity = '0.55';
  } else {
    const total = hydState.freq + hydState.symp + hydState.water;
    pkg = hydPackages.find(p=>total>=p.min && total<=p.max) || hydPackages[1];
    box.style.opacity = '1';
  }

  box.innerHTML = `
    <div class="hyd-cc-res-left">
      <div class="hyd-cc-res-name">${pkg.name}</div>
      <div class="hyd-cc-res-desc">${pkg.desc} · ${pkg.days}</div>
    </div>
    <div class="hyd-cc-res-right">
      <div class="hyd-cc-res-old">€${pkg.old.toFixed(2)}</div>
      <div class="hyd-cc-res-price">€${pkg.price.toFixed(2)}</div>
    </div>
  `;
  stockTxt.textContent = pkg.stockTxt;
  stockFill.style.width = pkg.stockPct + '%';
  ctaBtn.setAttribute('href', pkg.url);
}

hydRenderCC();
</script>