<style>
  .product-recommendations {
    padding: 3rem 1rem 4rem;
    max-width: 1200px;
    margin: 0 auto;
  }

  .product-recommendations__heading {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-text);
    text-align: center;
    margin: 0 0 2rem;
  }

  @media (min-width: 768px) {
    .product-recommendations__heading {
      font-size: 1.75rem;
    }
  }

  .product-recommendations__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  @media (min-width: 768px) {
    .product-recommendations__grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
    }
  }

  .product-recommendations__empty {
    grid-column: 1 / -1;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text);
    opacity: 0.5;
    padding: 2rem 0;
  }
</style>

<section class="product-recommendations" data-reveal data-product-id="{{ product.id }}" data-recommendations-url="{{ routes.product_recommendations_url }}?product_id={{ product.id }}&limit=4&section_id={{ section.id }}">
  {%- if recommendations.performed -%}
    {%- if recommendations.products.size > 0 -%}
      <h2 class="product-recommendations__heading">{{ section.settings.heading }}</h2>
      <div class="product-recommendations__grid">
        {%- for product in recommendations.products -%}
          {% render 'product-card', product: product, index: forloop.index %}
        {%- endfor -%}
      </div>
    {%- endif -%}
  {%- else -%}
    <h2 class="product-recommendations__heading">{{ section.settings.heading }}</h2>
    <div class="product-recommendations__grid">
      <p class="product-recommendations__empty">Loading recommendations...</p>
    </div>
  {%- endif -%}
</section>

<script>
  (function() {
    var el = document.querySelector('[data-recommendations-url]');
    if (!el) return;
    var url = el.getAttribute('data-recommendations-url');
    if (!url) return;

    fetch(url)
      .then(function(res) { return res.text(); })
      .then(function(html) {
        var parser = new DOMParser();
        var doc = parser.parseFromString(html, 'text/html');
        var fresh = doc.querySelector('.product-recommendations');
        if (fresh && fresh.innerHTML.trim().length > 0) {
          el.innerHTML = fresh.innerHTML;
        }
      })
      .catch(function() {});
  })();
</script>

{% schema %}
{
  "name": "Product recommendations",
  "class": "section-product-recommendations",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "You may also like"
    }
  ]
}
{% endschema %}
