{#
  Rating overview: average + stars + count, distribution bars, recommendation share,
  per-criteria averages. Reads `aggregation` / `criteriaSummary` / `recommendation`.
  Class hooks (.rvx-average-rating, .rvx-rating-badge, .rvx-aggregation__*, …) are
  targeted by the Customizer and Elementor controls — keep them.
#}
<section class="rvx-review-overview rvx-space-y-space20 rvx-aggregation__summary" aria-label="{{ __('Rating summary', 'reviewx') }}">
  <div class="rvx-grid rvx-gap-space24 md:rvx-grid-cols-[minmax(200px,260px)_1fr] md:rvx-items-center">

    {# ---- Average ---- #}
    <div class="rvx-flex rvx-flex-col rvx-items-center md:rvx-items-start rvx-gap-space8 md:rvx-pe-space24 md:rvx-border-e md:rvx-border-line-subtle">
      <div class="rvx-flex rvx-items-baseline rvx-gap-space5 rvx-leading-none" dir="ltr">
        <span class="rvx-average-rating rvx-rating-out-of rvx-text-[44px] rvx-font-bold rvx-tracking-tight rvx-text-fg" x-text="averageRating.toFixed(1)"></span>
        <span class="rvx-max-rating rvx-rating-total rvx-text-lg rvx-text-fg-subtle">/5</span>
      </div>
      {% include 'storefront/ui/stars.twig' with { value: 'averageRating', size: 22, active_class: 'rvx-aggregation-summary__star-active', inactive_class: 'rvx-aggregation-summary__star-inactive' } %}
      <p class="rvx-total-review rvx-text-base rvx-text-fg-muted">
        <span x-text="formatNumber(totalReviews)"></span>
        <span x-text="totalReviews === 1 ? '{{ __('review', 'reviewx')|e('js') }}' : '{{ __('reviews', 'reviewx')|e('js') }}'"></span>
      </p>
      <template x-if="showBadge">
        <span class="rvx-rating-badge rvx-inline-flex rvx-items-center rvx-gap-[6px] rvx-rounded-pill rvx-bg-success-soft rvx-text-success rvx-border rvx-border-success-line rvx-ps-space8 rvx-pe-space12 rvx-py-[3px] rvx-text-sm rvx-font-semibold">
          {% include 'storefront/ui/icon.twig' with { name: 'check-circle', size: 16, class: 'rvx-rating-badge__icon' } %}
          <span class="rvx-rating-badge__text">{{ __('Highly rated', 'reviewx') }}</span>
        </span>
      </template>
    </div>

    {# ---- Distribution ---- #}
    <div class="rvx-space-y-space8" role="list" aria-label="{{ __('Rating distribution', 'reviewx') }}">
      <template x-for="row in distribution" :key="row.rating">
        <button type="button"
                class="rvx-aggregation__row rvx-group rvx-flex rvx-w-full rvx-items-center rvx-gap-space12 rvx-rounded-control rvx-px-space5 rvx-py-[3px] rvx-text-start rvx-transition rvx-duration-fast hover:rvx-bg-surface-sunken disabled:rvx-cursor-default disabled:hover:rvx-bg-transparent"
                role="listitem"
                :disabled="!canFilterRating || row.total === 0"
                :aria-label="`${row.rating} ${'{{ __('stars', 'reviewx')|e('js') }}'}: ${row.total} (${row.percent}%)`"
                @click="filter.rating = String(row.rating); applyFilters()">
          <span class="rvx-aggregation__rating rvx-flex rvx-items-center rvx-gap-[3px] rvx-w-9 rvx-shrink-0 rvx-text-sm rvx-font-semibold rvx-text-fg">
            <span x-text="row.rating"></span>
            {% include 'storefront/ui/icon.twig' with { name: 'star', size: 14, class: 'rvx-aggregation__rating-icon rvx-text-merchant-star' } %}
          </span>
          <span class="rvx-aggregation__progressbar rvx-relative rvx-h-[8px] rvx-flex-1 rvx-overflow-hidden rvx-rounded-pill rvx-bg-line-subtle">
            <span class="rvx-aggregation__progressbar-inactive rvx-absolute rvx-inset-0 rvx-bg-line-subtle"></span>
            <span class="rvx-aggregation__progressbar-active rvx-absolute rvx-inset-y-0 rvx-start-0 rvx-rounded-pill rvx-bg-merchant rvx-transition-[width] rvx-duration-slow rvx-ease-emphasized" :style="{ width: row.percent + '%' }"></span>
          </span>
          <span class="rvx-aggregation__total-rating rvx-w-8 rvx-shrink-0 rvx-text-end rvx-text-sm rvx-font-semibold rvx-text-fg rvx-tabular-nums" x-text="formatNumber(row.total)"></span>
          <span class="rvx-aggregation__percent rvx-hidden xs:rvx-block rvx-w-14 rvx-shrink-0 rvx-text-end rvx-text-xs rvx-text-fg-subtle rvx-tabular-nums" x-text="`${row.percent}%`"></span>
        </button>
      </template>
    </div>
  </div>

  {# ---- Recommendation ---- #}
  <template x-if="recommendation.show">
    <div class="rvx-recommendation-count rvx-flex rvx-flex-col sm:rvx-flex-row sm:rvx-items-center rvx-gap-space12 rvx-rounded-card rvx-bg-surface-sunken rvx-border rvx-border-line-subtle rvx-px-space16 rvx-py-space12" role="group" aria-label="{{ __('Customer recommendations', 'reviewx') }}">
      <div class="rvx-flex rvx-items-center rvx-gap-space12 rvx-min-w-0 sm:rvx-max-w-[60%]">
        <span class="rvx-recommendation-count__icon rvx-grid rvx-place-items-center rvx-size-9 rvx-rounded-pill rvx-bg-surface rvx-text-merchant rvx-shadow-xs" aria-hidden="true">
          {% include 'storefront/ui/icon.twig' with { name: 'thumb-up', size: 18 } %}
        </span>
        <p class="rvx-recommendation-count__text rvx-min-w-0 rvx-text-base rvx-text-fg">
          <strong class="rvx-font-bold" x-text="`${recommendation.percent}%`"></strong>
          {% if scope|default('product') == 'site' %}{{ __('of customers recommend our products', 'reviewx') }}{% else %}{{ __('of customers recommend this product', 'reviewx') }}{% endif %}
        </p>
      </div>
      <div class="rvx-flex rvx-min-w-0 rvx-flex-1 rvx-items-center rvx-gap-space12">
        <div class="rvx-recommendation-count__track rvx-h-[6px] rvx-min-w-0 rvx-flex-1 rvx-overflow-hidden rvx-rounded-pill rvx-bg-line" role="progressbar" :aria-valuenow="recommendation.percent" aria-valuemin="0" aria-valuemax="100">
          <div class="rvx-recommendation-count__bar rvx-h-full rvx-rounded-pill rvx-bg-merchant rvx-transition-[width] rvx-duration-slow" :style="{ width: recommendation.percent + '%' }"></div>
        </div>
        <span class="rvx-recommendation-count__meta rvx-text-xs rvx-text-fg-subtle rvx-whitespace-nowrap" dir="auto">
          <span x-text="recommendation.count"></span> {{ __('of', 'reviewx') }} <span x-text="recommendation.total"></span>
        </span>
      </div>
    </div>
  </template>

  {# ---- Multi-criteria ---- #}
  <template x-if="criteriaSummary.length">
    <div class="rvx-aggregation-multicriteria rvx-grid rvx-gap-space12 sm:rvx-grid-cols-2 lg:rvx-grid-cols-3">
      <template x-for="c in criteriaSummary" :key="c.key">
        <div class="rvx-aggregation-multicriteria__row-outer rvx-rounded-card rvx-border rvx-border-line-subtle rvx-bg-surface rvx-px-space16 rvx-py-space12">
          <div class="rvx-aggregation-multicriteria__row-inner rvx-flex rvx-items-center rvx-justify-between rvx-gap-space12">
            <span class="rvx-aggregation-multicriteria__name rvx-text-sm rvx-font-semibold rvx-text-fg rvx-truncate"><span x-text="c.name"></span></span>
            <span class="rvx-aggregation-multicriteria__total rvx-flex rvx-items-center rvx-gap-[4px] rvx-text-sm rvx-font-semibold rvx-text-fg rvx-tabular-nums">
              <span x-text="c.value.toFixed(1)"></span>
              {% include 'storefront/ui/icon.twig' with { name: 'star', size: 14, class: 'rvx-aggregation-multicriteria__star rvx-aggregation__rating-icon rvx-text-merchant-star' } %}
            </span>
          </div>
          <div class="rvx-aggregation__progressbar rvx-relative rvx-mt-space8 rvx-h-[6px] rvx-overflow-hidden rvx-rounded-pill rvx-bg-line-subtle">
            <div class="rvx-aggregation__progressbar-inactive rvx-absolute rvx-inset-0 rvx-bg-line-subtle"></div>
            <div class="rvx-aggregation__progressbar-active rvx-absolute rvx-inset-y-0 rvx-start-0 rvx-rounded-pill rvx-bg-merchant" :style="{ width: c.percent + '%' }"></div>
          </div>
        </div>
      </template>
    </div>
  </template>
</section>