{%- liquid
  assign mt = block.settings.margin_top | divided_by: 10.0
  assign mb = block.settings.margin_bottom | divided_by: 10.0

  if block.settings.bg_type == 'gradient'
    assign card_bg = block.settings.bg_gradient
  else
    assign card_bg = block.settings.bg_color
  endif

  if block.settings.divider_type == 'gradient'
    assign divider_val = block.settings.divider_gradient
  else
    assign divider_val = block.settings.divider_color
  endif
-%}

<style>
  .pdp-benefit-results {
    margin-top: var(--margin-top, 1rem);
    margin-bottom: var(--margin-bottom, 1rem);
    padding: 18px 20px 14px;
    background: var(--br-bg, linear-gradient(180deg, #FAF7F4 0%, #F5F0EB 100%));
    border: var(--br-border-width, 1px) solid var(--br-border-color, rgba(80,0,11,0.06));
    border-radius: var(--br-border-radius, 14px);
    {% if block.settings.show_shadow %}
      box-shadow: 0 2px 8px rgba(80,0,11,0.03);
    {% endif %}
  }
  .pdp-benefit-results__heading {
    font-size: var(--br-heading-size, 18px);
    font-weight: 700;
    color: var(--br-heading-color, #1a1a1a);
    margin: 0 0 16px;
    letter-spacing: -0.4px;
  }
  .pdp-benefit-results__row {
    display: flex;
    align-items: center;
    gap: var(--br-row-gap, 12px);
    padding: 8px 0;
    border-bottom: 1px solid var(--br-divider, rgba(0,0,0,0.04));
  }
  .pdp-benefit-results__row:last-child {
    border-bottom: none;
  }
  .pdp-benefit-results__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
  }
  .pdp-benefit-results__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .pdp-benefit-results__text {
    flex: 1;
    min-width: 0;
  }
  .pdp-benefit-results__text strong {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--br-label-color, #1a1a1a);
    display: block;
    margin-bottom: -1px;
    letter-spacing: -0.2px;
    line-height: 1.2;
  }
  .pdp-benefit-results__text span {
    font-size: 11.5px;
    color: var(--br-sublabel-color, #50000b);
    line-height: 1.2;
  }
  .pdp-benefit-results__pct {
    font-size: 15px;
    font-weight: 800;
    color: var(--br-pct-color, #50000b);
    letter-spacing: -0.5px;
    flex-shrink: 0;
  }
  @media (max-width: 749px) {
    .pdp-benefit-results { padding: 14px 16px 10px; }
    .pdp-benefit-results__row { gap: 10px; }
    .pdp-benefit-results__icon { width: 32px; height: 32px; font-size: 15px; border-radius: 9px; }
    .pdp-benefit-results__text strong { font-size: 12px; }
    .pdp-benefit-results__text span { font-size: 10px; }
    .pdp-benefit-results__pct { font-size: 13px; }
    .pdp-benefit-results__heading { font-size: calc(var(--br-heading-size, 18px) * 0.83); }
  }
</style>

<div
  class="pdp-benefit-results {{ block.settings.visibility }}"
  {{ block.shopify_attributes }}
  style="
    --margin-top: {{ mt }}rem;
    --margin-bottom: {{ mb }}rem;
    --br-bg: {{ card_bg }};
    --br-border-color: {{ block.settings.border_color }};
    --br-border-width: {{ block.settings.border_width }}px;
    --br-border-radius: {{ block.settings.border_radius }}px;
    --br-heading-color: {{ block.settings.heading_color }};
    --br-heading-size: {{ block.settings.heading_size }}px;
    --br-label-color: {{ block.settings.label_color }};
    --br-sublabel-color: {{ block.settings.sublabel_color }};
    --br-pct-color: {{ block.settings.pct_color }};
    --br-divider: {{ divider_val }};
    --br-row-gap: {{ block.settings.row_gap }}px;
  "
>
  {%- if block.settings.heading != blank -%}
    <h3 class="pdp-benefit-results__heading" style="text-align: {{ block.settings.heading_alignment }};">
      {{ block.settings.heading | escape }}
    </h3>
  {%- endif -%}

  {%- for i in (1..6) -%}
    {%- liquid
      case i
        when 1
          assign enabled = block.settings.row_1_enabled
          assign icon_type = block.settings.row_1_icon_type
          assign emoji = block.settings.row_1_emoji
          assign img = block.settings.row_1_image
          assign label = block.settings.row_1_label
          assign sub = block.settings.row_1_sublabel
          assign pct = block.settings.row_1_pct
          assign icon_bg_type = block.settings.row_1_icon_bg_type
          assign icon_bg_color = block.settings.row_1_icon_bg_color
          assign icon_bg_gradient = block.settings.row_1_icon_bg_gradient
        when 2
          assign enabled = block.settings.row_2_enabled
          assign icon_type = block.settings.row_2_icon_type
          assign emoji = block.settings.row_2_emoji
          assign img = block.settings.row_2_image
          assign label = block.settings.row_2_label
          assign sub = block.settings.row_2_sublabel
          assign pct = block.settings.row_2_pct
          assign icon_bg_type = block.settings.row_2_icon_bg_type
          assign icon_bg_color = block.settings.row_2_icon_bg_color
          assign icon_bg_gradient = block.settings.row_2_icon_bg_gradient
        when 3
          assign enabled = block.settings.row_3_enabled
          assign icon_type = block.settings.row_3_icon_type
          assign emoji = block.settings.row_3_emoji
          assign img = block.settings.row_3_image
          assign label = block.settings.row_3_label
          assign sub = block.settings.row_3_sublabel
          assign pct = block.settings.row_3_pct
          assign icon_bg_type = block.settings.row_3_icon_bg_type
          assign icon_bg_color = block.settings.row_3_icon_bg_color
          assign icon_bg_gradient = block.settings.row_3_icon_bg_gradient
        when 4
          assign enabled = block.settings.row_4_enabled
          assign icon_type = block.settings.row_4_icon_type
          assign emoji = block.settings.row_4_emoji
          assign img = block.settings.row_4_image
          assign label = block.settings.row_4_label
          assign sub = block.settings.row_4_sublabel
          assign pct = block.settings.row_4_pct
          assign icon_bg_type = block.settings.row_4_icon_bg_type
          assign icon_bg_color = block.settings.row_4_icon_bg_color
          assign icon_bg_gradient = block.settings.row_4_icon_bg_gradient
        when 5
          assign enabled = block.settings.row_5_enabled
          assign icon_type = block.settings.row_5_icon_type
          assign emoji = block.settings.row_5_emoji
          assign img = block.settings.row_5_image
          assign label = block.settings.row_5_label
          assign sub = block.settings.row_5_sublabel
          assign pct = block.settings.row_5_pct
          assign icon_bg_type = block.settings.row_5_icon_bg_type
          assign icon_bg_color = block.settings.row_5_icon_bg_color
          assign icon_bg_gradient = block.settings.row_5_icon_bg_gradient
        when 6
          assign enabled = block.settings.row_6_enabled
          assign icon_type = block.settings.row_6_icon_type
          assign emoji = block.settings.row_6_emoji
          assign img = block.settings.row_6_image
          assign label = block.settings.row_6_label
          assign sub = block.settings.row_6_sublabel
          assign pct = block.settings.row_6_pct
          assign icon_bg_type = block.settings.row_6_icon_bg_type
          assign icon_bg_color = block.settings.row_6_icon_bg_color
          assign icon_bg_gradient = block.settings.row_6_icon_bg_gradient
      endcase

      if icon_bg_type == 'gradient'
        assign icon_bg = icon_bg_gradient
      else
        assign icon_bg = icon_bg_color
      endif
    -%}

    {%- if enabled -%}
      <div class="pdp-benefit-results__row">
        {%- if icon_type != 'none' -%}
          <div class="pdp-benefit-results__icon" style="background: {{ icon_bg }};">
            {%- if icon_type == 'emoji' -%}
              {{- emoji -}}
            {%- elsif icon_type == 'image' and img != blank -%}
              <img
                src="{{ img | image_url: width: 76 }}"
                alt="{{ img.alt | escape }}"
                width="38"
                height="38"
                loading="lazy"
              >
            {%- endif -%}
          </div>
        {%- endif -%}

        <div class="pdp-benefit-results__text">
          {%- if label != blank -%}
            <strong>{{ label | escape }}</strong>
          {%- endif -%}
          {%- if sub != blank -%}
            <span>{{ sub | escape }}</span>
          {%- endif -%}
        </div>

        {%- if pct != blank -%}
          <span class="pdp-benefit-results__pct">{{ pct | escape }}</span>
        {%- endif -%}
      </div>
    {%- endif -%}
  {%- endfor -%}
</div>
