{% comment %} ShopGenius Recommendations Block (no inline JS) {% endcomment %}
<section
  id="sg-reco-{{ section.id }}"
  class="sg-reco"
  style="--sg-bg: {{ section.settings.bg_color }}; --sg-text: {{ section.settings.text_color }};"
  data-sg-reco
  data-shop-domain="{{ shop.domain | escape }}"
  data-product-id="{{ product.id }}"
  data-max-items="{{ section.settings.max_items }}"
  data-show-price="{{ section.settings.show_price }}"
  data-autoplay="{{ section.settings.autoplay }}"
  data-autoplay-interval="{{ section.settings.autoplay_interval }}"
  data-hide-if-empty="{{ section.settings.hide_if_empty }}"
  data-api-endpoint="recommendations"
  {% if section.settings.strict_same_type %}
    data-extra-query="strict_same_type=1"
  {% else %}
    data-extra-query=""
  {% endif %}
>
  {% if section.settings.heading != blank %}
    <h2 class="sg-reco__heading">{{ section.settings.heading }}</h2>
  {% endif %}

  {%- comment -%}
    Skeleton container — widget.js will populate with .sg-reco__skeleton-item
    and then remove/hide it when data arrives.
  {%- endcomment -%}
  <div class="sg-reco__skeleton" aria-hidden="true"></div>

  <div class="sg-reco__carousel" hidden aria-live="polite">
    <button class="sg-reco__nav sg-reco__nav--prev" aria-label="{{ 'prev_label' | t }}">‹</button>
    <div class="sg-reco__track" role="list"></div>
    <button class="sg-reco__nav sg-reco__nav--next" aria-label="{{ 'next_label' | t }}">›</button>
  </div>

  <p class="sg-reco__empty" hidden>No recommendations yet.</p>
  <p class="sg-reco__error" hidden>Something went wrong. Please try again later.</p>
</section>

{% schema %}
{
  "name": "SG Recommendations",
  "target": "section",
  "templates": ["product"],
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "You may also like" },
    { "type": "range", "id": "max_items", "label": "Max items", "min": 2, "max": 12, "step": 1, "default": 8 },
    { "type": "checkbox", "id": "show_price", "label": "Show price", "default": true },
    { "type": "checkbox", "id": "autoplay", "label": "Autoplay", "default": false },
    { "type": "number", "id": "autoplay_interval", "label": "Autoplay interval (ms)", "default": 4000 },
    { "type": "checkbox", "id": "strict_same_type", "label": "Strict same type", "default": true },
    { "type": "color", "id": "bg_color", "label": "Background color", "default": "#ffffff" },
    { "type": "color", "id": "text_color", "label": "Text color", "default": "#111111" },
    { "type": "checkbox", "id": "hide_if_empty", "label": "Hide section if empty", "default": true }
  ]
}
{% endschema %}