{{ 'sd-native-reviews.css' | asset_url | stylesheet_tag }}

{% liquid
  assign sd_reviews_heading = section.settings.heading
  assign sd_reviews_intro = 'Real customer feedback, review details and customer photos from homes using Decor Cedar covers every day.'
  if request.page_type == 'product' and product
    assign sd_reviews_heading = 'Reviews for ' | append: product.title
    assign sd_reviews_intro = 'These reviews are matched to this product so you can see real customer feedback for the cover you are viewing.'
  endif
%}

<section
  {% if request.page_type == 'product' %}id="sofa-decor-product-reviews"{% endif %}
  class="sd-native-reviews"
  data-reviews-json="{{ 'sd-reviews-data.json' | asset_url }}"
  data-review-mode="{{ section.settings.review_mode }}"
  data-fallback="{{ section.settings.fallback_mode }}"
  data-max-reviews="all"
  data-empty="false"
>
  <div class="sd-native-reviews__inner">
    <div class="sd-native-reviews__head">
      <div>
        {% if section.settings.eyebrow != blank %}
          <p class="sd-native-reviews__eyebrow">{{ section.settings.eyebrow }}</p>
        {% endif %}
        <h2 class="sd-native-reviews__title">{{ sd_reviews_heading | escape }}</h2>
        <p class="sd-native-reviews__intro">{{ sd_reviews_intro | escape }}</p>
      </div>
      <div class="sd-native-reviews__summary" aria-live="polite">
        <div class="sd-native-reviews__rating-label">
          <span class="sd-native-reviews__score" data-sd-review-score>4.9</span>
          <span>Excellent</span>
        </div>
        <div class="sd-native-reviews__stars" data-sd-review-stars aria-label="Average customer rating"></div>
        <div class="sd-native-reviews__based">Based on <strong data-sd-review-count>0</strong> customer reviews</div>
        <div class="sd-native-reviews__trust-row">
          <span class="sd-native-reviews__pill">Customer reviews</span>
          <span class="sd-native-reviews__pill">Photo reviews included</span>
        </div>
      </div>
    </div>
    <div class="sd-native-reviews__empty">{{ section.settings.empty_text }}</div>
    <div class="sd-native-reviews__viewport">
      <div class="sd-native-reviews__track" data-sd-reviews-track></div>
    </div>
  </div>
</section>

<script src="{{ 'sd-native-reviews.js' | asset_url }}&sdv=20260623-title-placement-v5" defer></script>

{% schema %}
{
  "name": "Customer reviews",
  "settings": [
    {
      "type": "text",
      "id": "eyebrow",
      "label": "Eyebrow",
      "default": "Verified Decor Cedar customers"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Real reviews from American homes"
    },
    {
      "type": "select",
      "id": "review_mode",
      "label": "Reviews to show",
      "default": "auto",
      "options": [
        { "value": "auto", "label": "Current product when possible" },
        { "value": "product", "label": "Current product only" },
        { "value": "all", "label": "All reviews" }
      ]
    },
    {
      "type": "select",
      "id": "fallback_mode",
      "label": "Fallback when product has no reviews",
      "default": "all",
      "options": [
        { "value": "all", "label": "Show all store reviews" },
        { "value": "none", "label": "Show empty message" }
      ]
    },
    {
      "type": "range",
      "id": "max_reviews",
      "label": "Maximum reviews",
      "info": "Set to 0 to show every matching review in the slider.",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 0
    },
    {
      "type": "text",
      "id": "empty_text",
      "label": "Empty text",
      "default": "Customer reviews for this product are being refreshed."
    }
  ],
  "presets": [{ "name": "Customer reviews" }]
}
{% endschema %}
