{% comment %}
  icons-next-to-gallery.liquid
  Renders either the Original or Advanced icon layout next to the media gallery,
  based on section.settings.icon_style_version ('original' or 'advanced').
{% endcomment %}

{%- assign icon_version = section.settings.icon_style_version | default: 'original' -%}
{%- assign icons_enabled  = section.settings.gallery_icons -%}
{%- assign mobile_enabled = section.settings.show_mobile_icons -%}

{%- if icons_enabled or mobile_enabled -%}

  {%- if icon_version == 'original' -%}

    {%- comment -%} ── ORIGINAL VERSION ─────────────────────────────────────── {%- endcomment -%}

    {% if section.settings.gallery_icons %}
    <div class="product-feature-icons small-hide">
      {% if section.settings.image1 %}
        <div class="single-feature-icon" style="background: {{ section.settings.background_color }}; border-radius: {{ section.settings.border_radiusicon }}px;">
          <div class="feature-icon-wrapper">
            <img src="{{ section.settings.image1 | image_url: width: 500 }}" alt="{{ section.settings.text1 }}" loading="eager">
          </div>
          <p class="feature-text" style="color: {{ section.settings.text_color }}">{{ section.settings.text1 }}</p>
        </div>
      {% endif %}
      {% if section.settings.image2 %}
        <div class="single-feature-icon" style="background: {{ section.settings.background_color }}; border-radius: {{ section.settings.border_radiusicon }}px;">
          <div class="feature-icon-wrapper">
            <img src="{{ section.settings.image2 | image_url: width: 500 }}" alt="{{ section.settings.text2 }}" loading="eager">
          </div>
          <p class="feature-text" style="color: {{ section.settings.text_color }}">{{ section.settings.text2 }}</p>
        </div>
      {% endif %}
      {% if section.settings.image3 %}
        <div class="single-feature-icon" style="background: {{ section.settings.background_color }}; border-radius: {{ section.settings.border_radiusicon }}px;">
          <div class="feature-icon-wrapper">
            <img src="{{ section.settings.image3 | image_url: width: 500 }}" alt="{{ section.settings.text3 }}" loading="eager">
          </div>
          <p class="feature-text" style="color: {{ section.settings.text_color }}">{{ section.settings.text3 }}</p>
        </div>
      {% endif %}
      {% if section.settings.image4 %}
        <div class="single-feature-icon" style="background: {{ section.settings.background_color }}; border-radius: {{ section.settings.border_radiusicon }}px;">
          <div class="feature-icon-wrapper">
            <img src="{{ section.settings.image4 | image_url: width: 500 }}" alt="{{ section.settings.text4 }}" loading="eager">
          </div>
          <p class="feature-text" style="color: {{ section.settings.text_color }}">{{ section.settings.text4 }}</p>
        </div>
      {% endif %}
      {% if section.settings.image5 %}
        <div class="single-feature-icon" style="background: {{ section.settings.background_color }}; border-radius: {{ section.settings.border_radiusicon }}px;">
          <div class="feature-icon-wrapper">
            <img src="{{ section.settings.image5 | image_url: width: 500 }}" alt="{{ section.settings.text5 }}" loading="eager">
          </div>
          <p class="feature-text" style="color: {{ section.settings.text_color }}">{{ section.settings.text5 }}</p>
        </div>
      {% endif %}
    </div>
    {% endif %}

    {% if section.settings.show_mobile_icons %}
      {%- assign mobile_icon_count = 0 -%}
      {%- if section.settings.image1 %}{%- assign mobile_icon_count = mobile_icon_count | plus: 1 -%}{%- endif -%}
      {%- if section.settings.image2 %}{%- assign mobile_icon_count = mobile_icon_count | plus: 1 -%}{%- endif -%}
      {%- if section.settings.image3 %}{%- assign mobile_icon_count = mobile_icon_count | plus: 1 -%}{%- endif -%}
      {%- if section.settings.image4 and section.settings.show_icon4 %}{%- assign mobile_icon_count = mobile_icon_count | plus: 1 -%}{%- endif -%}

      <div class="product-feature-icons-mobile large-up-hide {% if section.settings.mobile_icons_position == 'left' %}mobile-icons-left{% else %}mobile-icons-right{% endif %}{% if section.settings.center_mobile_three_icons and mobile_icon_count == 3 %} mobile-icons-centered{% endif %}">
        {% if section.settings.image1 %}
          <div class="single-feature-icon" style="background: {{ section.settings.background_color }}; border-radius: {{ section.settings.border_radiusicon }}px;">
            <div class="feature-icon-wrapper">
              <img src="{{ section.settings.image1 | image_url: width: 500 }}" alt="{{ section.settings.text1 }}" loading="eager">
            </div>
            <p class="feature-text" style="color: {{ section.settings.text_color }}">{{ section.settings.text1 }}</p>
          </div>
        {% endif %}
        {% if section.settings.image2 %}
          <div class="single-feature-icon" style="background: {{ section.settings.background_color }}; border-radius: {{ section.settings.border_radiusicon }}px;">
            <div class="feature-icon-wrapper">
              <img src="{{ section.settings.image2 | image_url: width: 500 }}" alt="{{ section.settings.text2 }}" loading="eager">
            </div>
            <p class="feature-text" style="color: {{ section.settings.text_color }}">{{ section.settings.text2 }}</p>
          </div>
        {% endif %}
        {% if section.settings.image3 %}
          <div class="single-feature-icon" style="background: {{ section.settings.background_color }}; border-radius: {{ section.settings.border_radiusicon }}px;">
            <div class="feature-icon-wrapper">
              <img src="{{ section.settings.image3 | image_url: width: 500 }}" alt="{{ section.settings.text3 }}" loading="eager">
            </div>
            <p class="feature-text" style="color: {{ section.settings.text_color }}">{{ section.settings.text3 }}</p>
          </div>
        {% endif %}
        {% if section.settings.image4 and section.settings.show_icon4 %}
          <div class="single-feature-icon" style="background: {{ section.settings.background_color }}; border-radius: {{ section.settings.border_radiusicon }}px;">
            <div class="feature-icon-wrapper">
              <img src="{{ section.settings.image4 | image_url: width: 500 }}" alt="{{ section.settings.text4 }}" loading="eager">
            </div>
            <p class="feature-text" style="color: {{ section.settings.text_color }}">{{ section.settings.text4 }}</p>
          </div>
        {% endif %}
      </div>
    {% endif %}

    <style>
      /* Main container for media gallery and feature icons */
      .media-features-container {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        width: 100%;
      }

      /* Media gallery takes remaining space */
      .media-features-container media-gallery {
        flex: 1 1 auto;
        {% if section.settings.gallery_icons %}
          width: 80%;
        {% elsif section.settings.show_mobile_icons %}
          width: calc(100% - 90px);
        {% else %}
          width: 100%;
        {% endif %}
      }

      /* Desktop feature icons */
      {% if section.settings.gallery_icons %}
      .product-feature-icons {
        width: 180px;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      {% endif %}

      /* Mobile feature icons */
      {% if section.settings.show_mobile_icons %}
      .product-feature-icons-mobile {
        display: none;
        width: 80px;
        flex: 0 0 auto;
      }
      .product-feature-icons-mobile.mobile-icons-right { margin-left: 10px; }
      .product-feature-icons-mobile.mobile-icons-left  { margin-right: 10px; order: -1; }
      {% endif %}

      /* Individual icon card */
      .single-feature-icon {
        background: #f4f4ff;
        padding: 12px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      /* Icon image */
      .feature-icon-wrapper img {
        max-width: 60px;
        max-height: 60px;
      }

      /* Label text */
      .feature-text {
        font-family: var(--text-font-family);
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
        text-align: center;
        color: #202031;
        margin: 6px 0 0 0;
      }

      /* Mobile */
      @media (max-width: 749px) {
        .media-features-container {
          flex-direction: row;
          align-items: flex-start;
        }
        {% if section.settings.show_mobile_icons %}
        .product-feature-icons-mobile {
          display: flex;
          flex-direction: column;
          gap: 10px;
          margin-top: 3px;
        }
        .product-feature-icons-mobile.mobile-icons-centered {
          justify-content: center;
          height: 100vh;
          max-height: 300px;
        }
        .product-feature-icons-mobile .single-feature-icon { padding: 8px; }
        .product-feature-icons-mobile .feature-icon-wrapper img { max-width: 40px; max-height: 40px; }
        .product-feature-icons-mobile .feature-text { font-size: 11px; line-height: 14px; }
        {% endif %}
      }

      /* Desktop */
      @media (min-width: 750px) {
        .media-features-container { align-items: center; }
        .media-features-container media-gallery {
          {% if section.settings.gallery_icons %}
            max-width: calc(100% - 200px);
          {% else %}
            max-width: 100%;
          {% endif %}
        }
        /* Always hide mobile icons on desktop */
        .product-feature-icons-mobile { display: none !important; }
      }

      {% unless section.settings.show_mobile_icons %}.product-feature-icons-mobile { display: none !important; }{% endunless %}
      {% unless section.settings.gallery_icons %}.product-feature-icons { display: none !important; }{% endunless %}

      /* Reset container layout on tablet so it has no effect (768–1024px) */
      @media (max-width: 1024px) and (min-width: 768px) {
        .media-features-container {
          all: unset;
        }
      }

      /* Hide icons on tablet (768–1024px) */
      @media (min-width: 768px) and (max-width: 1024px) {
        .product-feature-icons,
        .product-feature-icons-mobile { display: none; }
      }
    </style>

  {%- elsif icon_version == 'advanced' -%}

    {%- comment -%} ── ADVANCED VERSION ──────────────────────────────────────── {%- endcomment -%}

    {%- liquid
      assign icons_position = section.settings.icons_position | default: 'left'
      assign col_width      = section.settings.icon_column_width | default: 22
      assign icon_gap       = section.settings.icon_gap | default: 5
      assign global_bg      = section.settings.icon_box_bg_color           | default: '#2c234a'
      assign border_radius  = section.settings.icon_box_border_radius       | default: 10
      assign border_width   = section.settings.icon_box_border_width        | default: 0
      assign global_border  = section.settings.icon_box_border_color        | default: 'rgba(0,0,0,0)'
      assign global_text    = section.settings.icon_text_color              | default: '#ffffff'
      assign font_size_d    = section.settings.icon_text_font_size_desktop  | default: 14
      assign font_size_m    = section.settings.icon_text_font_size_mobile   | default: 11
      assign font_weight    = section.settings.icon_text_font_weight        | default: '400'

      assign icon_count = 0
      for i in (1..4)
        assign enable_key = 'icon_' | append: i | append: '_enable'
        if section.settings[enable_key]
          assign icon_count = icon_count | plus: 1
        endif
      endfor
    -%}

    {%- if icon_count > 0 -%}

      <style>
        .product-icons-and-viewer {
          display: flex;
          flex-direction: row;
          align-items: stretch;
          width: 100%;
        }
        .product-icons-and-viewer > media-gallery {
          flex: 1;
          min-width: 0;
        }
        .product-image-icons {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          flex-shrink: 0;
          width: var(--icon-column-width, 22%);
          gap: var(--icon-gap, 5px);
          opacity: 1;
          align-self: flex-start;
        }
        .product-image-icons.loaded { opacity: 1; }
        .product-image-icons--left {
          order: -1;
          margin-right: var(--icon-gap, 5px);
        }
        .product-image-icons--right {
          order: 1;
          margin-left: var(--icon-gap, 5px);
        }
        @media screen and (min-width: 750px) {
          .product-image-icons--desktop-hidden { display: none !important; }
        }
        @media screen and (max-width: 749px) {
          .product-image-icons--mobile-hidden { display: none !important; }
        }
        .product-image-icon-item {
          width: 100%;
          flex: 1;
          display: flex;
          align-items: stretch;
        }
        .product-image-icon-wrapper {
          border-radius: var(--icon-box-border-radius, 10px);
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          box-sizing: border-box;
          padding: 0.5rem 0.3rem;
          overflow: hidden;
        }
        .product-image-icon-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 0.4rem;
          width: 100%;
          height: 100%;
        }
        .product-image-icon-img {
          width: auto;
          height: auto;
          max-width: 60%;
          max-height: 55%;
          object-fit: contain;
          flex-shrink: 0;
          display: block;
        }
        .product-image-icon-text {
          font-size: var(--icon-text-font-size-desktop, 14px);
          font-weight: var(--icon-text-font-weight, 400);
          color: var(--icon-text-color, #ffffff);
          text-align: center;
          width: 100%;
          line-height: 1.2;
          word-wrap: break-word;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        @media screen and (max-width: 749px) {
          .product-image-icon-content { gap: 0.25rem; }
          .product-image-icon-text {
            font-size: var(--icon-text-font-size-mobile, 11px) !important;
            -webkit-line-clamp: 3;
          }
          .product-image-icon-img {
            max-width: 55% !important;
            max-height: 50% !important;
          }
        }
        .product-icons-and-viewer slider-component:not(.thumbnail-slider--no-slide) {
          margin-left: 0 !important;
          margin-right: 0 !important;
        }
      </style>

      <div
        id="product-icon-column-{{ section.id }}"
        class="product-image-icons product-image-icons--{{ icons_position }}{% unless icons_enabled %} product-image-icons--desktop-hidden{% endunless %}{% unless mobile_enabled %} product-image-icons--mobile-hidden{% endunless %}"
        style="
          --icon-column-width: {{ col_width }}%;
          --icon-gap: {{ icon_gap }}px;
          --icon-bg-color: {{ global_bg }};
          --icon-text-color: {{ global_text }};
          --icon-box-border-radius: {{ border_radius }}px;
          --icon-text-font-size-desktop: {{ font_size_d }}px;
          --icon-text-font-size-mobile: {{ font_size_m }}px;
          --icon-text-font-weight: {{ font_weight }};
        "
      >
        {%- for i in (1..4) -%}
          {%- liquid
            assign enable_key = 'icon_' | append: i | append: '_enable'
            assign image_key  = 'icon_' | append: i | append: '_image'
            assign label_key  = 'icon_' | append: i | append: '_label'
            assign icon_on    = section.settings[enable_key]
            assign icon_image = section.settings[image_key]
            assign icon_label = section.settings[label_key]
          -%}
          {%- if icon_on and icon_image != blank -%}
            <div class="product-image-icon-item">
              <div
                class="product-image-icon-wrapper"
                style="background-color: {{ global_bg }}; border: {{ border_width }}px solid {{ global_border }};"
              >
                <div class="product-image-icon-content">
                  {{
                    icon_image
                    | image_url: width: 120
                    | image_tag:
                      class: 'product-image-icon-img',
                      loading: 'lazy',
                      alt: icon_label
                  }}
                  {%- if icon_label != blank -%}
                    <span class="product-image-icon-text">{{ icon_label }}</span>
                  {%- endif -%}
                </div>
              </div>
            </div>
          {%- endif -%}
        {%- endfor -%}
      </div>

        <script>
      (function () {
        var SECTION_ID        = '{{ section.id }}';
        var DESKTOP_ENABLED   = {{ icons_enabled | json }};
        var MOBILE_ENABLED    = {{ mobile_enabled | json }};
        var MOBILE_BREAKPOINT = 750;

        function iconsVisibleNow() {
          return window.innerWidth < MOBILE_BREAKPOINT ? MOBILE_ENABLED : DESKTOP_ENABLED;
        }
        function getGallery() {
          return (
            document.getElementById('MediaGallery-' + SECTION_ID) ||
            document.querySelector('media-gallery')
          );
        }
        function getIconCol() {
          return document.getElementById('product-icon-column-' + SECTION_ID);
        }

        // ── Only wraps if not already wrapped ───────────────────────────────────
        function wrap(iconCol, gallery) {
          var existing = gallery.closest('.product-icons-and-viewer');
          if (existing) {
            // Already wrapped — just make sure iconCol is still in there
            if (!existing.contains(iconCol)) existing.appendChild(iconCol);
            return;
          }
          var wrapper = document.createElement('div');
          wrapper.className = 'product-icons-and-viewer';
          gallery.parentNode.insertBefore(wrapper, gallery);
          wrapper.appendChild(gallery);
          wrapper.appendChild(iconCol);
        }

        // ── Unwrap only when icons need to be hidden ─────────────────────────────
        function unwrap(gallery) {
          var wrapper = gallery.closest('.product-icons-and-viewer');
          if (!wrapper) return;
          // Move all children back out before removing wrapper
          while (wrapper.firstChild) {
            wrapper.parentNode.insertBefore(wrapper.firstChild, wrapper);
          }
          wrapper.parentNode.removeChild(wrapper);
        }

        // ── Height sync: never touches DOM structure ─────────────────────────────
        function syncHeight(iconCol, gallery) {
          var activeImg = gallery.querySelector('.is-active img') || gallery.querySelector('img');
          if (!activeImg) return;
          function trySet() {
            var h = activeImg.offsetHeight;
            if (h > 0) {
              iconCol.style.height = h + 'px';
              iconCol.classList.add('loaded');
              return true;
            }
            return false;
          }
          if (activeImg.complete && activeImg.naturalHeight > 0) {
            if (!trySet()) {
              var attempts = 0;
              var poll = setInterval(function () {
                if (trySet() || ++attempts > 20) clearInterval(poll);
              }, 50);
            }
          } else {
            activeImg.addEventListener('load', function () {
              var attempts = 0;
              var poll = setInterval(function () {
                if (trySet() || ++attempts > 20) clearInterval(poll);
              }, 50);
            }, { once: true });
          }
        }

        function showIconCol(iconCol) {
          iconCol.style.display = '';
          // Only remove 'loaded' on first show, not every time
          if (!iconCol.classList.contains('loaded')) {
            void iconCol.offsetHeight;
          }
        }

        function update() {
          var iconCol = getIconCol();
          var gallery = getGallery();
          if (!gallery) return;
          if (iconsVisibleNow() && iconCol) {
            showIconCol(iconCol);
            wrap(iconCol, gallery);         // no-op if already wrapped ✓
            syncHeight(iconCol, gallery);   // height only, no DOM moves ✓
          } else {
            unwrap(gallery);
            if (iconCol) {
              iconCol.classList.remove('loaded');
              iconCol.style.display = 'none';
            }
          }
        }

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

        var resizeTimer;
        window.addEventListener('resize', function () {
          clearTimeout(resizeTimer);
          resizeTimer = setTimeout(update, 250);
        });

        // Shopify editor events
        document.addEventListener('shopify:section:load', function (e) {
          if (e.detail && e.detail.sectionId !== SECTION_ID) return;
          update();
        });
        document.addEventListener('shopify:section:select', function (e) {
          if (e.detail && e.detail.sectionId !== SECTION_ID) return;
          update();
        });
        document.addEventListener('shopify:section:deselect', function (e) {
          if (e.detail && e.detail.sectionId !== SECTION_ID) return;
          update();
        });
        document.addEventListener('shopify:section:unload', function (e) {
          if (e.detail && e.detail.sectionId !== SECTION_ID) return;
          var gallery = getGallery();
          if (gallery) unwrap(gallery);
        });

        // Variant change: sync height only, never re-wrap
        document.addEventListener('variant:change', function () {
          var iconCol = getIconCol();
          var gallery = getGallery();
          if (iconCol && gallery && iconsVisibleNow()) syncHeight(iconCol, gallery);
        });

        // MutationObserver: height sync only, never re-wrap
        var galleryForObserver = getGallery();
        if (galleryForObserver) {
          new MutationObserver(function () {
            var iconCol = getIconCol();
            var gallery = getGallery();
            if (iconCol && gallery && iconsVisibleNow()) syncHeight(iconCol, gallery);
          }).observe(galleryForObserver, { attributes: true, childList: true, subtree: true });
        }
      })();
    </script>

    {%- endif -%}

  {%- endif -%}

{%- endif -%}