{%- comment -%}
  Renders the "Clinical Results" block on the product page.
  Usage: {% render 'clinical-results-block', block: block %}
{%- endcomment -%}

{%- comment -%} Load Material Symbols only if any result uses an icon {%- endcomment -%}
{%- liquid
  assign needs_icons = false
  if block.settings.result_1_enabled and block.settings.result_1_icon_type == 'material' and block.settings.result_1_icon != blank
    assign needs_icons = true
  endif
  if block.settings.result_2_enabled and block.settings.result_2_icon_type == 'material' and block.settings.result_2_icon != blank
    assign needs_icons = true
  endif
  if block.settings.result_3_enabled and block.settings.result_3_icon_type == 'material' and block.settings.result_3_icon != blank
    assign needs_icons = true
  endif
  if block.settings.result_4_enabled and block.settings.result_4_icon_type == 'material' and block.settings.result_4_icon != blank
    assign needs_icons = true
  endif
-%}
{%- if needs_icons -%}
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" media="print" onload="this.media='all'">
{%- endif -%}

{%- comment -%} Count enabled results for grid class {%- endcomment -%}
{%- liquid
  assign result_count = 0
  if block.settings.result_1_enabled
    assign result_count = result_count | plus: 1
  endif
  if block.settings.result_2_enabled
    assign result_count = result_count | plus: 1
  endif
  if block.settings.result_3_enabled
    assign result_count = result_count | plus: 1
  endif
  if block.settings.result_4_enabled
    assign result_count = result_count | plus: 1
  endif
-%}

<style>
  #ClinicalResults-{{ block.id }} {
    background: {{ block.settings.bg_color }};
    border-radius: {{ block.settings.border_radius }}px;
    padding: {{ block.settings.padding_v }}px {{ block.settings.padding_h }}px;
    border: {{ block.settings.border_width }}px solid {{ block.settings.border_color }};
    margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;
    margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;
  }

  #ClinicalResults-{{ block.id }} .cpr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: {{ block.settings.header_gap }}px;
    gap: 8px;
  }

  #ClinicalResults-{{ block.id }} .cpr-title {
    font-size: {{ block.settings.title_size }}px;
    font-weight: 600;
    color: {{ block.settings.title_color }};
    margin: 0;
    line-height: 1.2;
  }

  #ClinicalResults-{{ block.id }} .cpr-badge {
    font-size: {{ block.settings.badge_font_size }}px;
    font-weight: 700;
    color: {{ block.settings.badge_text_color }};
    background: {{ block.settings.badge_bg_color }};
    padding: {{ block.settings.badge_padding_v }}px {{ block.settings.badge_padding_h }}px;
    border-radius: {{ block.settings.badge_border_radius }}px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Grid layout */
  #ClinicalResults-{{ block.id }} .cpr-grid {
    display: grid;
    gap: {{ block.settings.grid_gap }}px;
    margin-bottom: {{ block.settings.grid_margin_bottom }}px;
  }

  /* 4 results: 2×2 on mobile → 4-col on desktop */
  #ClinicalResults-{{ block.id }} .cpr-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  @media screen and (min-width: 750px) {
    #ClinicalResults-{{ block.id }} .cpr-grid--4 {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* 3 or fewer: single row */
  #ClinicalResults-{{ block.id }} .cpr-grid--3 { grid-template-columns: repeat(3, 1fr); }
  #ClinicalResults-{{ block.id }} .cpr-grid--2 { grid-template-columns: repeat(2, 1fr); }
  #ClinicalResults-{{ block.id }} .cpr-grid--1 { grid-template-columns: 1fr; }

  /* Item base — left-aligned when an icon/emoji is present */
  #ClinicalResults-{{ block.id }} .cpr-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Centered variant — no icon or emoji */
  #ClinicalResults-{{ block.id }} .cpr-item--centered {
    align-items: center;
    text-align: center;
  }

  #ClinicalResults-{{ block.id }} .cpr-item__top {
    display: flex;
    align-items: center;
    gap: {{ block.settings.emoji_number_gap }}px;
    margin-bottom: {{ block.settings.number_label_gap }}px;
  }

  #ClinicalResults-{{ block.id }} .cpr-item__emoji {
    font-size: {{ block.settings.emoji_size }}px;
    line-height: 1;
  }

  #ClinicalResults-{{ block.id }} .cpr-item__icon {
    font-size: {{ block.settings.icon_size }}px;
    line-height: 1;
    color: {{ block.settings.icon_color }};
    font-variation-settings: 'FILL' {{ block.settings.icon_fill }}, 'wght' {{ block.settings.icon_weight }}, 'GRAD' 0, 'opsz' 24;
    display: inline-flex;
    align-items: center;
  }

  #ClinicalResults-{{ block.id }} .cpr-item__value {
    color: {{ block.settings.number_color }};
    font-size: {{ block.settings.number_size_mobile }}px;
    font-weight: 700;
    line-height: 1;
  }
  @media screen and (min-width: 750px) {
    #ClinicalResults-{{ block.id }} .cpr-item__value {
      font-size: {{ block.settings.number_size_desktop }}px;
    }
  }

  #ClinicalResults-{{ block.id }} .cpr-item__label {
    font-size: {{ block.settings.label_size }}px;
    font-weight: 500;
    color: {{ block.settings.label_color }};
    line-height: 1.3;
  }

  #ClinicalResults-{{ block.id }} .cpr-disclaimer {
    font-size: {{ block.settings.disclaimer_size }}px;
    color: {{ block.settings.disclaimer_color }};
    margin-bottom: {{ block.settings.disclaimer_margin_bottom }}px;
    font-style: italic;
  }

  /* Mobile: footer__left takes full width so certs wrap below toggle.
     Desktop: single row with certs right-aligned. */
  #ClinicalResults-{{ block.id }} .cpr-footer {
    border-top: {{ block.settings.divider_width }}px solid {{ block.settings.divider_color }};
    padding-top: {{ block.settings.footer_padding_top }}px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px 16px;
  }

  #ClinicalResults-{{ block.id }} .cpr-footer__left {
    flex: 1 1 100%;
    min-width: 0;
  }

  @media screen and (min-width: 750px) {
    #ClinicalResults-{{ block.id }} .cpr-footer__left {
      flex: 1 1 0%;
    }
  }


  #ClinicalResults-{{ block.id }} .cpr-toggle-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: {{ block.settings.toggle_font_size }}px;
    font-weight: 500;
    color: {{ block.settings.toggle_color }};
    text-decoration: underline;
    text-underline-offset: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s ease;
  }
  #ClinicalResults-{{ block.id }} .cpr-toggle-btn:hover { opacity: 0.75; }

  #ClinicalResults-{{ block.id }} .cpr-toggle-icon {
    width: 10px; height: 10px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
  }
  #ClinicalResults-{{ block.id }} .cpr-toggle-icon--open { transform: rotate(180deg); }

  #ClinicalResults-{{ block.id }} .cpr-expandable {
    overflow: hidden;
    max-height: 0; opacity: 0; margin-top: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
  }
  #ClinicalResults-{{ block.id }} .cpr-expandable--open {
    max-height: 400px; opacity: 1; margin-top: 8px;
  }
  #ClinicalResults-{{ block.id }} .cpr-expandable p {
    font-size: {{ block.settings.expand_font_size }}px;
    line-height: 1.6;
    color: {{ block.settings.expand_text_color }};
    max-width: 480px; margin: 0;
  }

  #ClinicalResults-{{ block.id }} .cpr-certifications {
    display: flex;
    align-items: center;
    gap: {{ block.settings.cert_gap }}px;
    flex: 0 0 auto;
    margin-top: 8px;
  }

  @media screen and (min-width: 750px) {
    #ClinicalResults-{{ block.id }} .cpr-certifications {
      margin-top: 0;
    }
  }

  #ClinicalResults-{{ block.id }} .cpr-certifications img {
    height: {{ block.settings.cert_height }}px;
    width: auto; object-fit: contain;
    {% if block.settings.cert_invert %}filter: brightness(0) invert(1);{% endif %}
  }
</style>

{%- comment -%} ─── Liquid helper: renders a single result item ─── {%- endcomment -%}
{%- comment -%}
  Called inline for each result. Variables set before each call:
  r_enabled, r_icon_type, r_emoji, r_icon, r_value, r_label
{%- endcomment -%}

<div
  id="ClinicalResults-{{ block.id }}"
  class="clinical-results-block {{ block.settings.visibility }}"
  {{ block.shopify_attributes }}
>

  {%- comment -%} Header {%- endcomment -%}
  <div class="cpr-header">
    <h3 class="cpr-title">{{ block.settings.title }}</h3>
    {%- if block.settings.badge_text != blank -%}
      <span class="cpr-badge">{{ block.settings.badge_text }}</span>
    {%- endif -%}
  </div>

  {%- comment -%} Results grid {%- endcomment -%}
  <div class="cpr-grid cpr-grid--{{ result_count }}">

    {%- comment -%} ── Result 1 ── {%- endcomment -%}
    {%- if block.settings.result_1_enabled -%}
      {%- liquid
        assign r1_has_icon = false
        if block.settings.result_1_icon_type == 'emoji' and block.settings.result_1_emoji != blank
          assign r1_has_icon = true
        endif
        if block.settings.result_1_icon_type == 'material' and block.settings.result_1_icon != blank
          assign r1_has_icon = true
        endif
      -%}
      <div class="cpr-item{% unless r1_has_icon %} cpr-item--centered{% endunless %}">
        <div class="cpr-item__top">
          {%- if block.settings.result_1_icon_type == 'emoji' and block.settings.result_1_emoji != blank -%}
            <span class="cpr-item__emoji" aria-hidden="true">{{ block.settings.result_1_emoji }}</span>
          {%- elsif block.settings.result_1_icon_type == 'material' and block.settings.result_1_icon != blank -%}
            <span class="material-symbols-rounded cpr-item__icon" aria-hidden="true">{{ block.settings.result_1_icon }}</span>
          {%- endif -%}
          <span class="cpr-item__value">{{ block.settings.result_1_value }}</span>
        </div>
        <span class="cpr-item__label">{{ block.settings.result_1_label }}</span>
      </div>
    {%- endif -%}

    {%- comment -%} ── Result 2 ── {%- endcomment -%}
    {%- if block.settings.result_2_enabled -%}
      {%- liquid
        assign r2_has_icon = false
        if block.settings.result_2_icon_type == 'emoji' and block.settings.result_2_emoji != blank
          assign r2_has_icon = true
        endif
        if block.settings.result_2_icon_type == 'material' and block.settings.result_2_icon != blank
          assign r2_has_icon = true
        endif
      -%}
      <div class="cpr-item{% unless r2_has_icon %} cpr-item--centered{% endunless %}">
        <div class="cpr-item__top">
          {%- if block.settings.result_2_icon_type == 'emoji' and block.settings.result_2_emoji != blank -%}
            <span class="cpr-item__emoji" aria-hidden="true">{{ block.settings.result_2_emoji }}</span>
          {%- elsif block.settings.result_2_icon_type == 'material' and block.settings.result_2_icon != blank -%}
            <span class="material-symbols-rounded cpr-item__icon" aria-hidden="true">{{ block.settings.result_2_icon }}</span>
          {%- endif -%}
          <span class="cpr-item__value">{{ block.settings.result_2_value }}</span>
        </div>
        <span class="cpr-item__label">{{ block.settings.result_2_label }}</span>
      </div>
    {%- endif -%}

    {%- comment -%} ── Result 3 ── {%- endcomment -%}
    {%- if block.settings.result_3_enabled -%}
      {%- liquid
        assign r3_has_icon = false
        if block.settings.result_3_icon_type == 'emoji' and block.settings.result_3_emoji != blank
          assign r3_has_icon = true
        endif
        if block.settings.result_3_icon_type == 'material' and block.settings.result_3_icon != blank
          assign r3_has_icon = true
        endif
      -%}
      <div class="cpr-item{% unless r3_has_icon %} cpr-item--centered{% endunless %}">
        <div class="cpr-item__top">
          {%- if block.settings.result_3_icon_type == 'emoji' and block.settings.result_3_emoji != blank -%}
            <span class="cpr-item__emoji" aria-hidden="true">{{ block.settings.result_3_emoji }}</span>
          {%- elsif block.settings.result_3_icon_type == 'material' and block.settings.result_3_icon != blank -%}
            <span class="material-symbols-rounded cpr-item__icon" aria-hidden="true">{{ block.settings.result_3_icon }}</span>
          {%- endif -%}
          <span class="cpr-item__value">{{ block.settings.result_3_value }}</span>
        </div>
        <span class="cpr-item__label">{{ block.settings.result_3_label }}</span>
      </div>
    {%- endif -%}

    {%- comment -%} ── Result 4 ── {%- endcomment -%}
    {%- if block.settings.result_4_enabled -%}
      {%- liquid
        assign r4_has_icon = false
        if block.settings.result_4_icon_type == 'emoji' and block.settings.result_4_emoji != blank
          assign r4_has_icon = true
        endif
        if block.settings.result_4_icon_type == 'material' and block.settings.result_4_icon != blank
          assign r4_has_icon = true
        endif
      -%}
      <div class="cpr-item{% unless r4_has_icon %} cpr-item--centered{% endunless %}">
        <div class="cpr-item__top">
          {%- if block.settings.result_4_icon_type == 'emoji' and block.settings.result_4_emoji != blank -%}
            <span class="cpr-item__emoji" aria-hidden="true">{{ block.settings.result_4_emoji }}</span>
          {%- elsif block.settings.result_4_icon_type == 'material' and block.settings.result_4_icon != blank -%}
            <span class="material-symbols-rounded cpr-item__icon" aria-hidden="true">{{ block.settings.result_4_icon }}</span>
          {%- endif -%}
          <span class="cpr-item__value">{{ block.settings.result_4_value }}</span>
        </div>
        <span class="cpr-item__label">{{ block.settings.result_4_label }}</span>
      </div>
    {%- endif -%}

  </div>

  {%- comment -%} Disclaimer {%- endcomment -%}
  {%- if block.settings.disclaimer_text != blank -%}
    <p class="cpr-disclaimer">{{ block.settings.disclaimer_text }}</p>
  {%- endif -%}

  {%- comment -%} Footer {%- endcomment -%}
  {%- if block.settings.show_footer -%}
    <div class="cpr-footer">

      <div class="cpr-footer__left">
        {%- if block.settings.show_toggle and block.settings.toggle_label != blank -%}
          <button
            class="cpr-toggle-btn"
            type="button"
            aria-expanded="false"
            data-cpr-toggle="{{ block.id }}"
          >
            {{ block.settings.toggle_label }}
            <svg class="cpr-toggle-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="m6 9 6 6 6-6"/>
            </svg>
          </button>
          <div class="cpr-expandable" id="CprExpand-{{ block.id }}" aria-hidden="true">
            <p>{{ block.settings.toggle_body }}</p>
          </div>
        {%- endif -%}
      </div>

      {%- if block.settings.cert_image_1 != blank or block.settings.cert_image_2 != blank or block.settings.cert_image_3 != blank -%}
        <div class="cpr-certifications">
          {%- if block.settings.cert_image_1 != blank -%}
            <img src="{{ block.settings.cert_image_1 | image_url: width: 100 }}" alt="{{ block.settings.cert_image_1.alt | default: 'Certification' }}" width="auto" height="{{ block.settings.cert_height }}" loading="lazy">
          {%- endif -%}
          {%- if block.settings.cert_image_2 != blank -%}
            <img src="{{ block.settings.cert_image_2 | image_url: width: 100 }}" alt="{{ block.settings.cert_image_2.alt | default: 'Certification' }}" width="auto" height="{{ block.settings.cert_height }}" loading="lazy">
          {%- endif -%}
          {%- if block.settings.cert_image_3 != blank -%}
            <img src="{{ block.settings.cert_image_3 | image_url: width: 100 }}" alt="{{ block.settings.cert_image_3.alt | default: 'Certification' }}" width="auto" height="{{ block.settings.cert_height }}" loading="lazy">
          {%- endif -%}
        </div>
      {%- endif -%}

    </div>
  {%- endif -%}

</div>

<script>
  (function () {
    var btn = document.querySelector('[data-cpr-toggle="{{ block.id }}"]');
    if (!btn) return;
    var panel = document.getElementById('CprExpand-{{ block.id }}');
    var icon  = btn.querySelector('.cpr-toggle-icon');
    btn.addEventListener('click', function () {
      var isOpen = panel.classList.toggle('cpr-expandable--open');
      btn.setAttribute('aria-expanded', String(isOpen));
      panel.setAttribute('aria-hidden', String(!isOpen));
      icon.classList.toggle('cpr-toggle-icon--open', isOpen);
    });
  })();
</script>