{%- if shop.metafields.search-three != blank -%}
  <!-- BEGIN app snippet: conversionbox-upsell -->

  <script>
    window.conversionBoxUpsell = window.conversionBoxUpsell || {};
    window.conversionBoxUpsell.config = window.conversionBoxUpsell.config || {};
    window.conversionBoxUpsell.config = {{shop.metafields.search-three.searchConfig}};
    window.conversionBoxUpsell.config.currency  = "{{shop.currency}}";
    window.conversionBoxUpsell.config.money_format = "{{ shop.money_format }}";
    window.conversionBoxUpsell.config.APPURL  = "https://vend.conversionbox.io";
    window.conversionBoxUpsell.config.analyticsURL  = "https://backend.conversionbox.io"
    window.conversionBoxUpsell.config.CSSURL  = "https://cdn.conversionbox.io/shopify/upsell.css"
    
    {% if product %}
      window.conversionBoxUpsell.productId = {{product.id}};
      window.conversionBoxUpsell.productTitle = "{{product.title}}";
      window.conversionBoxUpsell.productPrice = {{product.price}};
    {% endif %}
    
    {% if cart %}
      window.conversionBoxUpsell.cartTotal = {{cart.total_price}};
      window.conversionBoxUpsell.cartItems = {{cart.item_count}};
    {% endif %}
  </script>

  <div class="conversionbox-upsell-container">
    <div id="conversionBoxUpsellContainer" class="conversionbox-upsell-widget">
      <div class="cb-upsell-header">
        <h3 class="cb-upsell-title">{{ block.settings.upsell_title | default: "YOU MAY ALSO LIKE" }}</h3>
        {% if block.settings.show_subtitle %}
          <p class="cb-upsell-subtitle">{{ block.settings.upsell_subtitle | default: "Customers also bought" }}</p>
        {% endif %}
      </div>
      
      <div class="cb-upsell-carousel-wrapper">
        <button class="cb-upsell-nav-btn cb-upsell-nav-prev" aria-label="Previous products">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
        
        <div class="cb-upsell-carousel-container">
          <div id="cbUpsellProducts" class="cb-upsell-products">
            <!-- Dynamic products will be loaded here via JavaScript -->
          </div>
        </div>
        
        <button class="cb-upsell-nav-btn cb-upsell-nav-next" aria-label="Next products">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- END app snippet -->
{%- endif -%}

{% schema %}
{
  "name": "ConversionBox Upsell",
  "target": "section",
  "settings": [
    {
      "type": "text",
      "id": "upsell_title",
      "label": "Upsell Title",
      "default": "You may also like"
    },
    {
      "type": "checkbox",
      "id": "show_subtitle",
      "label": "Show subtitle",
      "default": true
    },
    {
      "type": "text",
      "id": "upsell_subtitle",
      "label": "Upsell Subtitle",
      "default": "Customers also bought"
    },
    {
      "type": "range",
      "id": "max_products",
      "label": "Maximum products to show",
      "min": 1,
      "max": 10,
      "step": 1,
      "default": 4
    },
    {
      "type": "range",
      "id": "products_per_view",
      "label": "Products visible at once",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 4
    },
    {
      "type": "checkbox",
      "id": "show_quantity_selector",
      "label": "Show quantity selector",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_add_to_cart",
      "label": "Show add to cart button",
      "default": true
    },
    {
      "type": "color",
      "id": "button_color",
      "label": "Button color",
      "default": "#007cba"
    },
    {
      "type": "color",
      "id": "button_hover_color",
      "label": "Button hover color",
      "default": "#005a87"
    }
  ],
  "stylesheet": "upsell.css",
  "javascript": "upsell.js"
}
{% endschema %}