DV Lease — Widget Code

<!-- DV Lease Premium Widget: plaats deze regel bij elke auto -->
<div class="dv-lease-widget" data-car-price="VERVANG_MET_AUTOPRIJS"></div>

<!-- Plaats dit script één keer onderaan de pagina/template -->
<script>
(function() {
  function calculateLease(price) {
    var downPayment = 7500;
    var months = 72;
    var residualValue = 5000;
    var interestRate = 0.04;
    var financedAmount = price - downPayment;
    var depreciationCost = (price - residualValue) / months;
    var averageBalance = financedAmount / 2;
    var monthlyInterest = (averageBalance * interestRate) / 12;
    return Math.round((depreciationCost + monthlyInterest) * 100) / 100;
  }

  var widgets = document.querySelectorAll('.dv-lease-widget');
  widgets.forEach(function(container) {
    var carPrice = parseFloat(container.getAttribute('data-car-price'));
    if (isNaN(carPrice) || carPrice <= 0) return;

    var monthly = calculateLease(carPrice);
    var formatted = new Intl.NumberFormat('nl-NL', {
      style: 'currency', currency: 'EUR', maximumFractionDigits: 0
    }).format(monthly);

    container.innerHTML =
      '<div style="position:relative;isolation:isolate;overflow:hidden;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;border:1px solid rgba(37,99,235,.22);border-radius:22px;padding:18px;display:inline-block;min-width:260px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(239,246,255,.92));box-shadow:0 22px 55px rgba(15,23,42,.18),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(14px);">' +
        '<div style="position:absolute;right:-26px;top:-28px;width:118px;height:118px;border-radius:999px;background:radial-gradient(circle,rgba(37,99,235,.20),rgba(37,99,235,0));z-index:-1;"></div>' +
        '<div style="display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;">' +
          '<div style="display:flex;align-items:center;gap:9px;">' +
            '<div style="width:36px;height:36px;border-radius:10px;background:#2563EB;display:flex;align-items:center;justify-content:center;color:white;font-weight:900;font-size:14px;box-shadow:0 10px 22px rgba(37,99,235,.35);">DV</div>' +
            '<div style="line-height:1.05;"><div style="font-size:16px;font-weight:800;color:#172554;letter-spacing:-.02em;">Lease</div><div style="font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#64748b;font-weight:700;">Premium layer</div></div>' +
          '</div>' +
          '<span style="font-size:11px;color:#1d4ed8;background:#dbeafe;border:1px solid #bfdbfe;border-radius:999px;padding:5px 8px;font-weight:700;">Indicatie</span>' +
        '</div>' +
        '<p style="margin:0 0 5px;font-size:12px;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:.12em;">Financial lease vanaf</p>' +
        '<p style="margin:0 0 16px;font-size:30px;line-height:1;font-weight:900;color:#172554;letter-spacing:-.05em;">' + formatted + ' <span style="font-size:13px;font-weight:800;color:#64748b;letter-spacing:0;">p.m.</span></p>' +
        '<a href="https://dvlease.nl?prijs=' + carPrice + '" target="_blank" rel="noopener" ' +
           'style="display:block;background:linear-gradient(135deg,#2563EB,#172554);color:#fff;text-align:center;padding:12px 16px;border-radius:999px;font-size:14px;font-weight:800;text-decoration:none;box-shadow:0 14px 28px rgba(37,99,235,.32);transition:transform .2s ease,box-shadow .2s ease;">' +
          'Vraag lease offerte aan' +
        '</a>' +
        '<p style="margin:10px 0 0;font-size:11px;color:#64748b;text-align:center;">Berekening en aanvraag via <strong style="color:#172554;">DV Lease</strong></p>' +
      '</div>';
  });
})();
</script>