{{ 'bs-store.css' | asset_url | stylesheet_tag }}

{%- comment -%}
  Owned replacement for the Builder item-grid: renders the storefront tile grid
  straight from a collection (default 'frontpage', same source the Builder
  version fetched client-side). Order is the collection's manual order.

  Tag conventions carried over from the Builder version:
    marker-preorder -> violet chip   marker-new -> solid black chip
    marker-sale / marker-replacement -> hollow chip
    ignore-available -> never show sold-out state
  The Beyond 2 tile price is the configurator's own floor — the cheapest build
  its page can reach (base + cheapest facial interface), from the shared
  bs-config-floor snippet. It used to hand-sum product.price + the Custom-Fit
  Cushion, and drifted to $60 above the product page's "Starting from" the day
  the default cushion flipped to Universal-Fit. On a product with no add-on
  groups the snippet prints plain product.price, so every tile goes through it.
{%- endcomment -%}

{%- assign grid_collection = collections[section.settings.collection_handle] -%}

<section class="bsg-section">
  <div class="bsg-container">
    <div class="bsg-grid">
      {%- for product in grid_collection.products limit: 24 -%}
        {%- liquid
          assign sold_out = false
          unless product.available or product.tags contains 'ignore-available'
            assign sold_out = true
          endunless

          assign tag_class = ''
          assign tag_text = ''
          if product.tags contains 'marker-preorder'
            assign tag_class = 'bsg-tag--signal'
            assign tag_text = 'Pre order'
          elsif product.tags contains 'marker-new'
            assign tag_class = 'bsg-tag--solid'
            assign tag_text = 'New'
          elsif product.tags contains 'marker-sale'
            assign tag_class = 'bsg-tag--hollow'
            assign tag_text = 'Sale'
          elsif product.tags contains 'marker-replacement'
            assign tag_class = 'bsg-tag--hollow'
            assign tag_text = 'Replacement'
          endif
          if sold_out
            assign tag_class = 'bsg-tag--hollow'
            assign tag_text = 'Sold out'
          endif

          capture tile_price_s
            render 'bs-config-floor', floor_product: product
          endcapture
          assign tile_price = tile_price_s | plus: 0

          comment
            Rating on the tile — the SAME metafields the configurator reads
            (Yotpo writes the standard reviews.* pair, falling back to its own
            yotpo.* namespace). Shown only where the count clears reviews_min, so
            the grid gains social proof where it is real (Beyond 2, the strap)
            and stays clean on low-review accessories — a star row on every tile
            is the product-grid clutter the brief rules out. Ours to style, so
            it takes the stage's violet-mono treatment, never Yotpo's orange.
          endcomment
          assign r_count = product.metafields.reviews.rating_count | default: product.metafields.yotpo.reviews_count
          assign r_value = product.metafields.reviews.rating.value.rating | default: product.metafields.yotpo.reviews_average
          assign show_rating = false
          comment
            default: the setting is nil on section instances saved before it
            existed, and `>= nil` would let every rated product through
          endcomment
          assign reviews_min = section.settings.reviews_min | default: 5
          if r_value != blank and r_count != blank and r_count >= reviews_min
            assign show_rating = true
            assign r_shown = r_value | round: 1
            assign r_pct = r_value | times: 20.0
          endif
        -%}
        <a class="bsg-tile{% if sold_out %} bsg-tile--soldout{% endif %}" href="{{ product.url }}"{% if sold_out %} aria-disabled="true" tabindex="-1"{% endif %}>
          <div class="bsg-frame">
            {%- if product.featured_image -%}
              <img
                src="{{ product.featured_image | image_url: width: 800 }}"
                srcset="{{ product.featured_image | image_url: width: 400 }} 400w, {{ product.featured_image | image_url: width: 800 }} 800w, {{ product.featured_image | image_url: width: 1200 }} 1200w"
                sizes="(max-width: 991px) 50vw, 33vw"
                width="{{ product.featured_image.width }}"
                height="{{ product.featured_image.height }}"
                alt="{{ product.featured_image.alt | default: product.title | escape }}"
                loading="lazy">
            {%- endif -%}
            {%- if tag_text != '' -%}
              <span class="bsg-tag {{ tag_class }}">{{ tag_text }}</span>
            {%- endif -%}
          </div>
          <div class="bsg-caption">
            <h3 class="bsg-title">{{ product.title }}<svg class="bsg-arrow" width="17" height="17" viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M12.0016 19.6888L10.3127 17.9999L15.1127 13.1999H4.33496L4.33496 10.8444H15.1127L10.3127 6.04436L12.0016 4.35547L19.6683 12.0221L12.0016 19.6888Z" fill="currentColor"/></svg></h3>
          </div>
          {%- if show_rating -%}
            {%- comment -%} same clipped-fill technique as .bsp-rating: a muted
            base row sizes the box, a violet row clipped to the score sits over
            it. Not a link here — the whole tile already goes to the product. {%- endcomment -%}
            <div class="bsg-rating" aria-label="{{ 'bigscreen.grid.rating_aria' | t: rating: r_shown, count: r_count | escape }}">
              <span class="bsg-rating-stars" style="--bsg-fill: {{ r_pct }}%" aria-hidden="true">
                <span class="bsg-rating-set bsg-rating-off">{% render 'bs-rating-stars' %}</span>
                <span class="bsg-rating-on"><span class="bsg-rating-set">{% render 'bs-rating-stars' %}</span></span>
              </span>
              <span class="bsg-rating-count" aria-hidden="true">{{ r_shown }} &middot; {{ r_count }}</span>
            </div>
          {%- endif -%}
          <p class="bsg-price">{{ tile_price | money_with_currency }}</p>
        </a>
      {%- endfor -%}
    </div>
  </div>
</section>

{% schema %}
{
  "name": "BS Item Grid",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "collection_handle",
      "label": "Collection handle",
      "default": "frontpage",
      "info": "Products and their order come from this collection."
    },
    {
      "type": "text",
      "id": "kicker",
      "label": "Kicker (mono eyebrow, optional)"
    },
    {
      "type": "number",
      "id": "reviews_min",
      "label": "Minimum reviews to show a rating on a tile",
      "default": 5,
      "info": "Tiles with fewer reviews than this hide the rating, so the grid shows social proof only where it is meaningful. Set high to hide ratings everywhere."
    }
  ],
  "presets": [{ "name": "BS Item Grid" }]
}
{% endschema %}