(function () {
  'use strict';

  var CONFIG = {
    firstGridCount: 8,
    heroRightCount: 4,
    heroSelector: '.shop-hero-block',
    bannerSelector: '.shop-banner-block',
    imagesCustomSelector: '.images_custom',
    mobileBreakpoint: 991
  };

  function getProductItems(list) {
    if (!list) return [];
    return [].slice.call(
      list.querySelectorAll('.product-container.product-item.w-dyn-item[sf-product]')
    );
  }

  function parsePrice(el) {
    var priceEl = el.querySelector('[fs-list-field="price"], .product_price');
    if (!priceEl) return 0;
    var text = (priceEl.textContent || '').replace(/\s/g, '').replace(',', '.');
    var num = parseFloat(text.replace(/[^\d.]/g, ''), 10);
    return isNaN(num) ? 0 : num;
  }

  function getTitle(el) {
    var titleEl = el.querySelector('[fs-list-field="name"], .product_title_short');
    return (titleEl && titleEl.textContent) ? titleEl.textContent.trim() : '';
  }

  function sortItems(items, sortValue) {
    if (!sortValue || sortValue === 'Featured') {
      return items.slice().sort(function (a, b) {
        var ia = parseInt(a.getAttribute('data-initial-index'), 10);
        var ib = parseInt(b.getAttribute('data-initial-index'), 10);
        return (ia - ib);
      });
    }
    var parts = sortValue.split(':');
    var key = parts[0];
    var dir = (parts[1] || 'asc').toLowerCase();
    var mult = dir === 'desc' ? -1 : 1;

    return items.slice().sort(function (a, b) {
      var cmp = 0;
      if (key === 'PRICE') {
        cmp = parsePrice(a) - parsePrice(b);
      } else if (key === 'TITLE') {
        var ta = getTitle(a);
        var tb = getTitle(b);
        cmp = ta.localeCompare(tb, undefined, { sensitivity: 'base' });
      } else if (key === 'BEST_SELLING') {
        cmp = 0;
      }
      return cmp * mult;
    });
  }

  function buildLayout(items, heroEl, bannerEl) {
    var wrapper = document.createElement('div');
    wrapper.className = 'shop-layout';

    var grid1 = document.createElement('div');
    grid1.className = 'shop-layout-grid shop-layout-grid--first';
    items.slice(0, CONFIG.firstGridCount).forEach(function (el) {
      grid1.appendChild(el);
    });
    wrapper.appendChild(grid1);

    var heroSection = document.createElement('div');
    heroSection.className = 'shop-layout-hero-section';

    var heroContent = heroEl ? heroEl.cloneNode(true) : document.createElement('div');
    if (!heroEl) heroContent.className = 'shop-layout-hero-block';

    var heroRight = document.createElement('div');
    heroRight.className = 'shop-layout-hero-right';
    items
      .slice(CONFIG.firstGridCount, CONFIG.firstGridCount + CONFIG.heroRightCount)
      .forEach(function (el) {
        heroRight.appendChild(el);
      });

    heroSection.appendChild(heroContent);
    heroSection.appendChild(heroRight);
    wrapper.appendChild(heroSection);

    var from = CONFIG.firstGridCount + CONFIG.heroRightCount;
    var rest = items.slice(from);
    var i = 0;

    while (i < rest.length) {
      var row4 = document.createElement('div');
      row4.className = 'shop-layout-row-4';
      var chunk = rest.slice(i, i + 4);
      chunk.forEach(function (el) {
        row4.appendChild(el);
      });
      wrapper.appendChild(row4);
      i += 4;
      if (i < rest.length) {
        var bannerSection = document.createElement('div');
        bannerSection.className = 'shop-layout-banner-section';
        var bannerContent = bannerEl ? bannerEl.cloneNode(true) : document.createElement('div');
        if (!bannerEl) bannerContent.className = 'shop-layout-banner-block';
        bannerContent.style.height = '';
        bannerContent.style.minHeight = '';
        bannerSection.appendChild(bannerContent);
        wrapper.appendChild(bannerSection);
      }
    }

    return wrapper;
  }

  function setMobileHeightsFromSource() {
    if (window.innerWidth > CONFIG.mobileBreakpoint) return;
    var layoutHero = document.querySelector(
      '.shop-layout-hero-section .shop-layout-hero-block, .shop-layout-hero-section .shop-hero-block'
    );
    if (layoutHero) {
      layoutHero.style.height = '';
      layoutHero.style.minHeight = '';
    }
    document.querySelectorAll('.shop-layout-banner-section .shop-layout-banner-block, .shop-layout-banner-section .shop-banner-block').forEach(function (block) {
      block.style.height = '';
      block.style.minHeight = '';
    });
  }

  function setHeroHeight() {
    if (window.innerWidth <= CONFIG.mobileBreakpoint) {
      setMobileHeightsFromSource();
      return;
    }

    document.querySelectorAll('.shop-layout-banner-section .shop-layout-banner-block, .shop-layout-banner-section .shop-banner-block').forEach(function (block) {
      block.style.height = '';
      block.style.minHeight = '';
    });

    var heroRight = document.querySelector('.shop-layout-hero-right');
    var heroBlock = document.querySelector(
      '.shop-layout-hero-section .shop-layout-hero-block, .shop-layout-hero-section .shop-hero-block'
    );
    if (!heroRight || !heroBlock) return;
    if (window.innerWidth <= 991) {
      heroBlock.style.height = '';
      return;
    }
    var h = heroRight.offsetHeight;
    if (h > 0) {
      heroBlock.style.height = h + 'px';
      var img = heroBlock.querySelector('img');
      if (img) img.style.objectFit = 'cover';
    }
  }

  function run() {
    if (document.querySelector('.shop-layout')) return;

    var list = document.querySelector(
      '.collection .product-list.grid_2_ver, .collection [role="list"].w-dyn-items'
    );
    if (!list) return;

    var items = getProductItems(list);
    if (!items.length) return;

    items.forEach(function (el, i) {
      el.setAttribute('data-initial-index', String(i));
    });

    var heroEl = document.querySelector(CONFIG.heroSelector);
    var bannerEl = document.querySelector(CONFIG.bannerSelector);
    var parent = list.parentElement;

    var wrapper = buildLayout(items, heroEl, bannerEl);
    parent.replaceChild(wrapper, list);

    requestAnimationFrame(function () {
      requestAnimationFrame(setHeroHeight);
    });
    window.addEventListener('resize', setHeroHeight);
    window.addEventListener('load', function () {
      setHeroHeight();
    });

    var heroRightEl = document.querySelector('.shop-layout-hero-right');
    if (heroRightEl && 'ResizeObserver' in window) {
      var ro = new ResizeObserver(function () {
        setHeroHeight();
      });
      ro.observe(heroRightEl);
    }

    var select = document.getElementById('Sort');
    if (select) {
      select.addEventListener('change', function () {
        var layout = document.querySelector('.shop-layout');
        if (!layout) return;
        var currentItems = [].slice.call(
          layout.querySelectorAll('.product-container.product-item.w-dyn-item[sf-product]')
        );
        var sortValue = select.value;
        var sorted = sortItems(currentItems, sortValue);
        var newWrapper = buildLayout(sorted, heroEl, bannerEl);
        layout.parentNode.replaceChild(newWrapper, layout);
        requestAnimationFrame(function () {
          requestAnimationFrame(setHeroHeight);
        });
        var newHeroRight = document.querySelector('.shop-layout-hero-right');
        if (newHeroRight && 'ResizeObserver' in window) {
          var ro2 = new ResizeObserver(function () {
            setHeroHeight();
          });
          ro2.observe(newHeroRight);
        }
      });
    }
  }

  function tryRun() {
    var list = document.querySelector(
      '.collection .product-list.grid_2_ver, .collection [role="list"].w-dyn-items'
    );
    var items = getProductItems(list);
    if (items.length > 0) {
      run();
      return true;
    }
    return false;
  }

  function init() {
    if (!tryRun()) {
      setTimeout(function () {
        tryRun();
      }, 500);
    }
  }

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

  var collection = document.querySelector('.collection');
  if (collection && 'MutationObserver' in window) {
    var mo = new MutationObserver(function () {
      if (
        document.querySelector('.collection .product-list.grid_2_ver, .collection [role="list"].w-dyn-items') &&
        !document.querySelector('.collection .shop-layout')
      ) {
        setTimeout(tryRun, 100);
      }
    });
    mo.observe(collection, { childList: true, subtree: true });
  }
})();