<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

{%- assign pack = product.metafields.custom.shop_pack_config.value -%}
{%- assign pack_h1 = pack.heading_1 | default: section.settings.heading_1 -%}
{%- assign pack_h2 = pack.heading_2 | default: section.settings.heading_2 -%}
{%- assign pack_h3 = pack.heading_3 | default: section.settings.heading_3 -%}
{%- assign pack_body = pack.body_text | default: section.settings.body_text -%}
{%- assign pack_btn = pack.button_text | default: section.settings.button_text -%}
{%- assign pack_link = pack.button_link | default: section.settings.button_link -%}
{%- assign pack_slides = pack.slides.value -%}

<div class="olaboa-shop-pack">
  <div class="swiper olaboa-shop-pack__swiper" data-pack-swiper data-autoplay-delay="{{ section.settings.autoplay_delay | default: 8 }}">
    <div class="swiper-wrapper">
      {%- if pack_slides != blank -%}
        {%- for slide_img in pack_slides -%}
          <div class="swiper-slide olaboa-shop-pack__slide">
            <img
              class="olaboa-shop-pack__bg"
              src="{{ slide_img | image_url: width: 2000 }}"
              alt="{{ slide_img.alt | escape }}"
              loading="lazy"
            >
          </div>
        {%- endfor -%}
      {%- else -%}
        {%- for block in section.blocks -%}
          {%- if block.type == 'slide' and block.settings.image != blank -%}
            <div class="swiper-slide olaboa-shop-pack__slide" {{ block.shopify_attributes }}>
              <picture>
                {%- if block.settings.image_mobile != blank -%}
                  <source media="(max-width: 900px)" srcset="{{ block.settings.image_mobile | image_url: width: 1000 }} 1000w, {{ block.settings.image_mobile | image_url: width: 1500 }} 1500w" sizes="100vw">
                {%- endif -%}
                <img
                  class="olaboa-shop-pack__bg"
                  src="{{ block.settings.image | image_url: width: 2000 }}"
                  alt="{{ block.settings.image.alt | escape }}"
                  loading="lazy"
                >
              </picture>
            </div>
          {%- endif -%}
        {%- endfor -%}
      {%- endif -%}
    </div>
    <div class="swiper-pagination olaboa-shop-pack__pagination"></div>
  </div>
  <div class="olaboa-shop-pack__overlay">
    <div class="olaboa-shop-pack__content">
      <h2 class="olaboa-shop-pack__heading">
        <span class="olaboa-shop-pack__heading-line1">
          <span class="olaboa-shop-pack__heading-try olaboa-font-clash">{{ pack_h1 }}</span>
          <span class="olaboa-shop-pack__heading-all">{{ pack_h2 }}</span>
        </span>
        <span class="olaboa-shop-pack__heading-line2">{{ pack_h3 }}</span>
      </h2>
      <p class="olaboa-shop-pack__body">{{ pack_body }}</p>
    </div>
    <div class="olaboa-shop-pack__action">
      <a href="{{ pack_link }}" class="olaboa-btn">
        {{ pack_btn }}
        <svg xmlns="http://www.w3.org/2000/svg" width="38" height="22" viewBox="0 0 42 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-left:8px;vertical-align:middle;"><line x1="2" y1="12" x2="35" y2="12"/><polyline points="26 4 35 12 26 20"/></svg>
      </a>
    </div>
  </div>
</div>

<script>
  (function() {
    var el = document.querySelector('[data-pack-swiper]');
    if (!el) return;
    var delay = (parseInt(el.dataset.autoplayDelay) || 8) * 1000;

    function initPackSwiper() {
      new Swiper(el, {
        loop: true,
        speed: 800,
        grabCursor: true,
        keyboard: { enabled: true },
        autoplay: {
          delay: delay,
          disableOnInteraction: false
        },
        pagination: {
          el: '.olaboa-shop-pack__pagination',
          clickable: true
        },
        effect: 'fade',
        fadeEffect: { crossFade: true }
      });
    }

    if (typeof Swiper !== 'undefined') {
      initPackSwiper();
    } else {
      document.addEventListener('DOMContentLoaded', function() {
        if (typeof Swiper !== 'undefined') initPackSwiper();
      });
    }
  })();
</script>

{% schema %}
{
  "name": "Shop Pack CTA",
  "tag": "section",
  "settings": [
    {
      "type": "range",
      "id": "autoplay_delay",
      "label": "Slide interval (seconds)",
      "min": 3,
      "max": 15,
      "step": 1,
      "default": 8,
      "unit": "s"
    },
    {
      "type": "text",
      "id": "heading_1",
      "label": "Heading Word 1 (fallback)",
      "default": "Try"
    },
    {
      "type": "text",
      "id": "heading_2",
      "label": "Heading Word 2 (fallback)",
      "default": "all"
    },
    {
      "type": "text",
      "id": "heading_3",
      "label": "Heading Line 2 (fallback)",
      "default": "our flavors"
    },
    {
      "type": "text",
      "id": "body_text",
      "label": "Body Text (fallback)",
      "default": "Order our sample pack to taste them all!"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text (fallback)",
      "default": "Buy Now"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link (fallback)"
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "Slide (fallback)",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Slide Image"
        },
        {
          "type": "image_picker",
          "id": "image_mobile",
          "label": "Slide Image (mobile / vertical)",
          "info": "Optional. Shown on screens ≤ 900px. Falls back to the main image if empty."
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Shop Pack CTA"
    }
  ]
}
{% endschema %}
