(function () {
  var SLUG = document.documentElement.getAttribute('data-demo-slug') || 'cleaning-service';
  var CURRENT = document.documentElement.getAttribute('data-version') || '1';
  var VERSIONS = [
    { id: '1', label: 'V1' },
    { id: '2', label: 'V2' },
    { id: '3', label: 'V3' }
  ];
  var PALETTES = [
    { id: '01', label: 'Fresh Mint', swatch: '#0F766E' },
    { id: '02', label: 'Night Aqua', swatch: '#2DD4BF' },
    { id: '03', label: 'Soft Sage', swatch: '#4F7A5A' },
    { id: '04', label: 'Sky Line', swatch: '#0369A1' },
    { id: '05', label: 'Citrus Clean', swatch: '#B45309' }
  ];

  function qs(name) {
    return new URLSearchParams(window.location.search).get(name);
  }

  function storageKey(kind) {
    return 'wptopd3v-demo-' + SLUG + '-' + kind;
  }

  function normalizePalette(p) {
    p = String(p || '01').replace(/\D/g, '');
    if (p.length < 2) p = ('0' + p).slice(-2);
    return PALETTES.some(function (x) { return x.id === p; }) ? p : '01';
  }

  function pageName() {
    var parts = window.location.pathname.split('/');
    var last = parts[parts.length - 1] || 'index.html';
    if (!last || last.indexOf('.') === -1) return 'index.html';
    return last;
  }

  function versionUrl(version, palette) {
    var base = window.location.pathname.replace(/\/v[123]\/[^/]*$/, '/');
    if (!/\/$/.test(base)) {
      base = base.replace(/\/[^/]*$/, '/');
    }
    if (/\/v[123]\/?$/.test(window.location.pathname) || /\/v[123]\//.test(window.location.pathname)) {
      base = window.location.pathname.replace(/\/v[123]\/.*$/, '/');
    }
    var url = new URL(base + 'v' + version + '/' + pageName(), window.location.origin);
    url.searchParams.set('v', version);
    url.searchParams.set('palette', palette);
    return url.pathname + url.search;
  }

  function applyPalette(palette, pushUrl) {
    palette = normalizePalette(palette);
    document.documentElement.setAttribute('data-palette', palette);
    try { localStorage.setItem(storageKey('palette'), palette); } catch (e) {}
    if (pushUrl) {
      var url = new URL(window.location.href);
      url.searchParams.set('palette', palette);
      url.searchParams.set('v', CURRENT);
      window.history.replaceState({}, '', url.toString());
    }
    document.querySelectorAll('[data-demo-palette]').forEach(function (btn) {
      btn.classList.toggle('is-active', btn.getAttribute('data-demo-palette') === palette);
    });
  }

  function buildBar() {
    if (document.querySelector('.demo-bar')) return;
    var bar = document.createElement('div');
    bar.className = 'demo-bar';
    bar.setAttribute('role', 'region');
    bar.setAttribute('aria-label', 'Demo version and palette controls');

    var brand = document.createElement('a');
    brand.className = 'demo-bar__brand';
    brand.href = 'https://wptopd3v.com/free-html-templates/' + SLUG + '/';
    brand.target = '_blank';
    brand.rel = 'noopener';
    brand.textContent = 'Free HTML demo';
    bar.appendChild(brand);

    var vg = document.createElement('div');
    vg.className = 'demo-bar__group';
    var vl = document.createElement('span');
    vl.className = 'demo-bar__label';
    vl.textContent = 'Version';
    vg.appendChild(vl);
    VERSIONS.forEach(function (v) {
      var b = document.createElement('button');
      b.type = 'button';
      b.className = 'demo-bar__btn' + (v.id === CURRENT ? ' is-active' : '');
      b.setAttribute('data-demo-version', v.id);
      b.textContent = v.label;
      b.addEventListener('click', function () {
        var palette = document.documentElement.getAttribute('data-palette') || '01';
        try { localStorage.setItem(storageKey('version'), v.id); } catch (e) {}
        window.location.href = versionUrl(v.id, palette);
      });
      vg.appendChild(b);
    });
    bar.appendChild(vg);

    var pg = document.createElement('div');
    pg.className = 'demo-bar__group';
    var pl = document.createElement('span');
    pl.className = 'demo-bar__label';
    pl.textContent = 'Palette';
    pg.appendChild(pl);
    PALETTES.forEach(function (p) {
      var b = document.createElement('button');
      b.type = 'button';
      b.className = 'demo-bar__swatch';
      b.style.setProperty('--swatch', p.swatch);
      b.title = p.label;
      b.setAttribute('aria-label', 'Palette ' + p.label);
      b.setAttribute('data-demo-palette', p.id);
      b.addEventListener('click', function () {
        applyPalette(p.id, true);
      });
      pg.appendChild(b);
    });
    bar.appendChild(pg);

    var cta = document.createElement('a');
    cta.className = 'demo-bar__cta';
    cta.href = 'https://wptopd3v.com/free-html-templates/' + SLUG + '/#versions-palettes';
    cta.target = '_blank';
    cta.rel = 'noopener';
    cta.textContent = 'Get free download';
    bar.appendChild(cta);

    document.body.insertBefore(bar, document.body.firstChild);
    requestAnimationFrame(function () {
      var h = Math.ceil(bar.getBoundingClientRect().height) || 52;
      document.documentElement.style.setProperty('--demo-bar-h', h + 'px');
    });
    window.addEventListener('resize', function () {
      var h = Math.ceil(bar.getBoundingClientRect().height) || 52;
      document.documentElement.style.setProperty('--demo-bar-h', h + 'px');
    }, { passive: true });
  }

  var initialPalette = qs('palette') || (function () {
    try { return localStorage.getItem(storageKey('palette')); } catch (e) { return null; }
  })() || '01';

  try { localStorage.setItem(storageKey('version'), CURRENT); } catch (e) {}

  function boot() {
    buildBar();
    applyPalette(initialPalette, true);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', boot);
  } else {
    boot();
  }
})();
