/* VIP Club presentation. Cards and selected-tier details render from LEVELS;
   arrows and card clicks browse tiers, with selection persisted in localStorage. */
(function () {
  'use strict';

  var ART = 'assets-new/vip/';
  var LEVELS = [
    { name: 'SQUIRE', num: 'I', art: 'vip-tier-1-v2-cardfit.webp', cash: 5,  mcash: 2,  bonus: 0,    next: 1000,
      daily: 1000,  weekly: 3000,  monthly: 9000,   wager: 40, bonusMax: 5, fsmax: 100,
      loyalty: true, vipClub: false, manager: false },
    { name: 'KNIGHT', num: 'II', art: 'vip-tier-2-v2-cardfit.webp', cash: 10, mcash: 4,  bonus: 100,  next: 5000,
      daily: 2000,  weekly: 6000,  monthly: 18000,  wager: 35, bonusMax: 5, fsmax: 150,
      loyalty: true, vipClub: false, manager: false },
    { name: 'BARON',  num: 'III', art: 'vip-tier-3-v2.webp', cash: 15, mcash: 6,  bonus: 250,  next: 20000,
      daily: 3500,  weekly: 10000, monthly: 30000,  wager: 30, bonusMax: 5, fsmax: 250,
      loyalty: true, vipClub: true,  manager: false },
    { name: 'DUKE',   num: 'IV', art: 'p9-tier-4.webp', cash: 20, mcash: 8,  bonus: 600,  next: 50000,
      daily: 5000,  weekly: 15000, monthly: 50000,  wager: 25, bonusMax: 5, fsmax: 400,
      loyalty: true, vipClub: true,  manager: true },
    { name: 'CROWN',  num: 'V', art: 'p9-tier-5.webp', cash: 25, mcash: 10, bonus: 1500, next: 0,
      daily: 10000, weekly: 30000, monthly: 100000, wager: 20, bonusMax: 5, fsmax: 1000,
      loyalty: true, vipClub: true,  manager: true }
  ];
  var CUR = 1;        // player's tier: Knight

  var sel = CUR;
  try {
    var s = parseInt(localStorage.getItem('np-vip-sel'), 10);
    if (s >= 0 && s < LEVELS.length) sel = s;
  } catch (e) {}

  var cardsEl = document.getElementById('v9Cards');
  var panelEl = document.getElementById('v9Panel');

  /* ---------- icons (thin gold line style from the mockup) ---------- */
  var I = {
    coin: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.4v9.2M14.6 9.3c-.5-1-1.5-1.4-2.6-1.4-1.4 0-2.5.8-2.5 2s1 1.7 2.5 2c1.6.3 2.6.9 2.6 2.1 0 1.3-1.2 2-2.6 2-1.2 0-2.2-.5-2.6-1.5"/></svg>',
    gift: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="8.5" width="17" height="4"/><rect x="5.5" y="12.5" width="13" height="8"/><path d="M12 8.5v12M12 8.5c-1.6 0-4.6-.6-4.6-2.8C7.4 3.8 10.6 3.6 12 8.5zM12 8.5c1.6 0 4.6-.6 4.6-2.8 0-1.9-3.2-2.1-4.6 2.8z"/></svg>',
    person: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><circle cx="12" cy="8" r="3.6"/><path d="M5 20c.6-3.6 3.4-5.6 7-5.6s6.4 2 7 5.6"/></svg>',
    card: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><rect x="3" y="5.5" width="18" height="13" rx="2.4"/><path d="M3 10h18M6.5 14.5h4"/></svg>',
    tag: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 12.6 11.4 4.7a2 2 0 0 1 1.4-.6l5.6-.1a2 2 0 0 1 2 2l-.1 5.6a2 2 0 0 1-.6 1.4l-7.9 7.9a2 2 0 0 1-2.8 0l-5.5-5.5a2 2 0 0 1 0-2.8z"/><path d="m9 15 6-6M9.6 9.9v.01M14.4 14.1v.01"/></svg>',
    star: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"><path d="m12 3.4 2.5 5.2 5.7.8-4.1 4 1 5.6L12 16.4 6.9 19l1-5.6-4.1-4 5.7-.8z"/></svg>',
    bell: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M4.5 18h15M6 18c0-3.6 2.7-6.5 6-6.5s6 2.9 6 6.5"/><path d="M12 11.5V9M10.5 9h3"/></svg>',
    tick: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="m8.4 12.3 2.4 2.4 4.8-5"/></svg>',
    dash: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="12" r="8.5"/><path d="M8.5 12h7"/></svg>',
    left: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m14.5 6-6 6 6 6"/></svg>',
    right: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9.5 6 6 6-6 6"/></svg>'
  };
  document.getElementById('v9Prev').innerHTML = I.left;
  document.getElementById('v9Next').innerHTML = I.right;

  /* ---------- tier cards ---------- */
  function buildCards() {
    var h = '';
    LEVELS.forEach(function (lv, i) {
      h += '<article class="v9-card' + (i === sel ? ' is-sel' : '') +
        '" data-i="' + i + '" tabindex="0" role="button" aria-label="' + lv.name + ' level, ' + lv.cash + '% cashback">' +
        '<img class="v9-art" src="' + ART + lv.art + '" alt="">' +
        '<span class="v9-chip">' + lv.num + '</span>' +
        '<div class="v9-foot">' +
          '<span class="v9-name">' + lv.name + '</span>' +
          '<span class="v9-cash"><span>CASHBACK</span><b>' + lv.cash + '%</b></span>' +
        '</div></article>';
    });
    cardsEl.innerHTML = h;
  }

  /* ---------- level ledger for the selected tier ---------- */
  function eur(n) { return '€' + n.toLocaleString('en-GB'); }
  function num(n) { return n.toLocaleString('en-GB'); }
  function yesNo(v) { return v ? 'Yes' : 'No'; }
  function percent(n) { return n ? n + '%' : 'No'; }
  function boost(n) { return n ? '+' + n + '%' : 'No'; }
  function summary(icon, k, v, no) {
    return '<div class="v9-sum">' +
      '<span class="v9-si" aria-hidden="true">' + I[icon] + '</span>' +
      '<span><span class="k">' + k + '</span><b' + (no ? ' class="is-no"' : '') + '>' + v + '</b></span>' +
      '<span class="v9-mini" aria-hidden="true">' + (no ? I.dash : I.tick) + '</span>' +
    '</div>';
  }
  function row(k, v, no, wide) {
    return '<div class="v9-lr' + (wide ? ' is-wide' : '') + '"><span class="k">' + k + '</span>' +
      '<b' + (no ? ' class="is-no"' : '') + '>' + v + '</b></div>';
  }
  function rankTrack() {
    return '<div class="v9-rank-track" aria-hidden="true">' +
      LEVELS.map(function (level, i) {
        return '<span class="v9-rank-step' +
          (i <= sel ? ' is-on' : '') +
          (i === sel ? ' is-sel' : '') +
          '" title="' + level.name + '"></span>';
      }).join('') +
    '</div>';
  }
  function renderPanel() {
    var lv = LEVELS[sel], nx = LEVELS[sel + 1];
    panelEl.innerHTML =
      '<div class="v9-panel-top">' +
        '<p class="v9-led-name">' + lv.name + ' · Level ' + lv.num + ' of V</p>' +
        rankTrack() +
      '</div>' +
      '<div class="v9-summary">' +
        summary('coin', 'Cashback', percent(lv.cash), !lv.cash) +
        summary('gift', 'Level-up bonus', lv.bonus ? eur(lv.bonus) : 'No', !lv.bonus) +
        summary('person', 'Manager', yesNo(lv.manager), !lv.manager) +
        summary('card', 'Monthly limit', eur(lv.monthly), false) +
      '</div>' +
      '<div class="v9-led-grid">' +
        row('Points to unlock next level', nx ? num(lv.next) : 'Max') +
        row('Level-up bonus', lv.bonus ? eur(lv.bonus) : 'No', !lv.bonus) +
        row('Daily limit', eur(lv.daily)) +
        row('Weekly limit', eur(lv.weekly)) +
        row('Monthly limit', eur(lv.monthly)) +
        row('Cashback', percent(lv.cash), !lv.cash) +
        row('Monthly cashback', boost(lv.mcash), !lv.mcash) +
        row('Free bonus wager', 'x' + lv.wager) +
        row('Free bonus max win', 'x' + lv.bonusMax) +
        row('Free spins max win', eur(lv.fsmax)) +
        row('Loyalty program', yesNo(lv.loyalty), !lv.loyalty) +
        row('VIP club', yesNo(lv.vipClub), !lv.vipClub) +
        row('Personal VIP manager', yesNo(lv.manager), !lv.manager, true) +
      '</div>';
    panelEl.setAttribute('aria-label', lv.name + ' level details');
    panelEl.classList.remove('is-swap');
    void panelEl.offsetWidth;
    panelEl.classList.add('is-swap');
  }

  /* ---------- benefit tile icons ---------- */
  document.querySelectorAll('.v9-ti').forEach(function (el) {
    el.innerHTML = I[el.getAttribute('data-ico')];
  });

  function select(i, scroll) {
    sel = (i + LEVELS.length) % LEVELS.length;
    try { localStorage.setItem('np-vip-sel', sel); } catch (e) {}
    cardsEl.querySelectorAll('.v9-card').forEach(function (c, j) {
      c.classList.toggle('is-sel', j === sel);
    });
    renderPanel();
    if (scroll) centerCard(true);
  }

  /* centre the selected card in the ≤900px carousel (container scroll only —
     window scroll is unreliable in headless checks and jumpy for users) */
  function centerCard(smooth) {
    if (!window.matchMedia('(max-width:900px)').matches) return;
    var el = cardsEl.querySelector('[data-i="' + sel + '"]');
    if (!el) return;
    var left = el.offsetLeft - (cardsEl.clientWidth - el.offsetWidth) / 2;
    if (cardsEl.scrollTo) cardsEl.scrollTo({ left: left, behavior: smooth ? 'smooth' : 'auto' });
    else cardsEl.scrollLeft = left;
  }

  document.getElementById('v9Prev').addEventListener('click', function () { select(sel - 1, true); });
  document.getElementById('v9Next').addEventListener('click', function () { select(sel + 1, true); });
  /* swiping the ≤900px carousel also selects (and gold-borders) the centred card */
  var scrollT;
  cardsEl.addEventListener('scroll', function () {
    if (!window.matchMedia('(max-width:900px)').matches) return;
    clearTimeout(scrollT);
    scrollT = setTimeout(function () {
      var cx = cardsEl.scrollLeft + cardsEl.clientWidth / 2, best = sel, bd = 1e9;
      cardsEl.querySelectorAll('.v9-card').forEach(function (c, j) {
        var d = Math.abs(c.offsetLeft + c.offsetWidth / 2 - cx);
        if (d < bd) { bd = d; best = j; }
      });
      if (best !== sel) select(best, false);
    }, 130);
  }, { passive: true });
  cardsEl.addEventListener('click', function (e) {
    var c = e.target.closest('.v9-card');
    if (c) select(+c.getAttribute('data-i'), false);
  });
  cardsEl.addEventListener('keydown', function (e) {
    if (e.key !== 'Enter' && e.key !== ' ') return;
    var c = e.target.closest('.v9-card');
    if (c) { e.preventDefault(); select(+c.getAttribute('data-i'), false); }
  });

  buildCards();
  renderPanel();
  centerCard(false);
})();
