{%- style -%}
  .section-{{ section.id }}-margin {
    margin-top: {{ section.settings.mobile_margin_top }}px;
    margin-bottom: {{ section.settings.mobile_margin_bottom }}px;
  }
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-margin {
      margin-top: {{ section.settings.desktop_margin_top }}px;
      margin-bottom: {{ section.settings.desktop_margin_bottom }}px;
    }
  }
{%- endstyle -%}

<section
  class="statistics-section animate-section animate--hidden {{ section.settings.visibility }} section-{{ section.id }}-margin"
  style="background-color: {{ section.settings.background_color }}; padding-top: {{ section.settings.padding_top }}px; padding-bottom: {{ section.settings.padding_bottom }}px;"
>
  {% if section.settings.display_id %}
    <copy-button class="section-id-btn button" data-content="#shopify-section-{{ section.id }}" data-success="false">
      <span class="copy-text">Click to copy section ID</span>
      <span class="copy-success">ID copied successfully!</span>
    </copy-button>
  {% endif %}

  <div class="page-width">
    <div class="section-header text-center">
      {% if section.settings.badge_text != blank %}
        <div
          class="section-badge animate-item"
          style="background-color: {{ section.settings.badge_background }}; color: {{ section.settings.badge_text_color }}; border-radius: {{ section.settings.badge_border_radius }}px; font-size: {{ section.settings.badge_text_size }}px;"
        >
          {{ section.settings.badge_text }}
        </div>
      {% endif %}
      <h2
        class="section-title animate-item animate-item"
        style="color: {{ section.settings.heading_color }}; font-size: {{ section.settings.heading_size }}px;"
      >
        {{ section.settings.heading }}
      </h2>

      {% if section.settings.subheading != blank %}
        <div
          class="section-subheading animate-item animate-item"
          style="color: {{ section.settings.subheading_color }}; font-size: {{ section.settings.subheading_size }}px; letter-spacing: var(--letter-spacing-body);"
        >
          {{ section.settings.subheading }}
        </div>
      {% endif %}
    </div>

    {% if section.settings.layout_style == 'lp_stats' %}
      <div class="stats-grid-lp" id="stats-grid-{{ section.id }}">
        {% for block in section.blocks %}
          {% if block.type == 'statistic' %}
            <div class="stat-item-lp animate-item" {{ block.shopify_attributes }}>
              <div class="percentage-lp" style="color: {{ section.settings.percentage_color }};">
                {{ block.settings.percentage }}%
              </div>
              <div class="desc-lp" style="color: {{ section.settings.title_color }};">
                {{ block.settings.title }}
              </div>
              <div class="support-text-lp" style="color: {{ section.settings.description_color }};">
                {{ block.settings.description }}
              </div>
            </div>
          {% endif %}
        {% endfor %}
      </div>

    {% else %}
      <div class="statistics-wrapper {% if section.settings.feature_image != blank %}has-image image-{{ section.settings.image_position_desktop }} mobile-image-{{ section.settings.image_position_mobile }}{% endif %}">
        {% if section.settings.feature_image != blank %}
          <div class="statistics-image-container animate-item">
            <img
              src="{{ section.settings.feature_image | image_url: width: 600 }}"
              srcset="
                {{ section.settings.feature_image | image_url: width: 300 }} 300w,
                {{ section.settings.feature_image | image_url: width: 600 }} 600w,
                {{ section.settings.feature_image | image_url: width: 800 }} 800w
              "
              sizes="(max-width: 749px) 100vw, 50vw"
              alt="{{ section.settings.feature_image.alt | escape }}"
              loading="lazy"
              width="{{ section.settings.feature_image.width }}"
              height="{{ section.settings.feature_image.height }}"
              style="border-radius: {{ section.settings.image_border_radius }}px;"
            >
          </div>
        {% endif %}

        <div class="statistics-grid{% if section.settings.stacked_blocks %} statistics-grid--stacked{% endif %}">
          {% for block in section.blocks %}
            {% if block.type == 'statistic' %}
              <div class="statistic-item animate-item animate-item" {{ block.shopify_attributes }}>
                <div
                  class="statistic-card{% if section.settings.remove_card_background %} statistic-card--no-bg{% endif %}"
                  style="{% unless section.settings.remove_card_background %}background-color: {{ section.settings.card_background }};{% endunless %} border-radius:{{ section.settings.card_border_radius }}px;"
                >
                  {% unless section.settings.hide_progress_circle %}
                    <div class="statistic-circle-container">
                      <div class="statistic-circle" data-percentage="{{ block.settings.percentage }}"
                        {% if section.settings.progress_color_style == 'gradient' %}
                          data-gradient="{{ section.settings.progress_color_gradient | escape }}"
                        {% endif %}
                      >
                        <svg class="circle-svg" viewBox="0 0 120 120">
                          {% if section.settings.progress_color_style == 'gradient' %}
                            <defs>
                              <linearGradient id="circle-gradient-{{ section.id }}-{{ block.id }}" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(90 60 60)">
                                <stop class="gradient-stop-1" offset="0%" stop-opacity="1"/>
                                <stop class="gradient-stop-2" offset="100%" stop-opacity="1"/>
                              </linearGradient>
                            </defs>
                          {% endif %}
                          <circle class="circle-bg" cx="60" cy="60" r="50" style="stroke: {{ section.settings.progress_bg_color }};"></circle>
                          <circle class="circle-progress" cx="60" cy="60" r="50" style="stroke: {% if section.settings.progress_color_style == 'gradient' %}url(#circle-gradient-{{ section.id }}-{{ block.id }}){% else %}{{ section.settings.progress_color }}{% endif %}; stroke-dasharray: 314.159; stroke-dashoffset: 314.159;"></circle>
                        </svg>
                        <div class="percentage-text" style="color: {{ section.settings.percentage_color }};">
                          {{ block.settings.percentage }}%
                        </div>
                      </div>
                    </div>
                  {% else %}
                    <div class="percentage-text-standalone" style="color: {{ section.settings.percentage_color }};">
                      {{ block.settings.percentage }}%
                    </div>
                  {% endunless %}
                  <div class="statistic-content">
                    <h3 class="statistic-title" style="color: {{ section.settings.title_color }};">
                      {{ block.settings.title }}
                    </h3>
                    <div class="statistic-description" style="color: {{ section.settings.description_color }};">
                      {{ block.settings.description }}
                    </div>
                  </div>
                </div>
              </div>
            {% endif %}
          {% endfor %}
        </div>
      </div>
    {% endif %}
  </div>
</section>

<style>
      .statistics-section {
        text-align: center;
      }

      .section-header {
        margin-bottom: 40px;
      }

      .section-title {
        margin-bottom: 15px;
      }

      .section-badge {
        display: inline-block;
        padding: 4px 28px;
        margin-bottom: 8px;
        font-weight: 500;
        line-height: 1.4;
      }

      .section-badge + .section-title {
        margin-top: 0;
      }

      .section-subheading {
        max-width: 600px;
        margin: 0 auto;
      }

      /* =====================
         LP STATS LAYOUT
         ===================== */
      #stats-grid-{{ section.id }} {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 28px;
      }

      #stats-grid-{{ section.id }} .stat-item-lp {
        background-color: {{ section.settings.card_background }};
        border-radius: {{ section.settings.card_border_radius }}px;
        padding: 16px 38px 23px;
        text-align: left;
      }

      #stats-grid-{{ section.id }} .percentage-lp {
        font-weight: 500;
        font-size: {{ section.settings.percentage_font_size_desktop }}px;
        line-height: 1.06;
        margin-bottom: 8px;
      }

      #stats-grid-{{ section.id }} .desc-lp {
        font-weight: 700;
        font-size: 19px;
        line-height: 23px;
        margin-bottom: 8px;
      }

      #stats-grid-{{ section.id }} .support-text-lp {
        font-weight: 400;
        font-size: 18px;
        line-height: 22px;
      }

      @media screen and (max-width: 749px) {
        #stats-grid-{{ section.id }} {
          grid-template-columns: 1fr;
          gap: 15px;
        }

        #stats-grid-{{ section.id }} .stat-item-lp {
          padding: 13px 25px 19px;
          border-radius: 5px;
        }

        #stats-grid-{{ section.id }} .percentage-lp {
          font-size: {{ section.settings.percentage_font_size_mobile }}px;
          line-height: 1.05;
          margin-bottom: 7px;
        }

        #stats-grid-{{ section.id }} .desc-lp {
          font-size: 16px;
          line-height: 19px;
          margin-bottom: 7px;
        }

        #stats-grid-{{ section.id }} .support-text-lp {
          font-size: 15px;
          line-height: 18px;
          max-width: 256px;
        }
      }

      /* =====================
         DEFAULT LAYOUT
         ===================== */
      .statistics-wrapper {
        display: flex;
        align-items: center;
        gap: 30px;
        max-width: 1200px;
        margin: 0 auto;
      }

      .statistics-wrapper:not(.has-image) {
        display: block;
      }

      .statistics-image-container {
        flex: 0 0 48%;
        max-width: 550px;
      }

      .statistics-image-container img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
      }

      .statistics-grid {
        display: grid;
        {% assign columns = 4 %}
        {% if section.blocks.size < 4 %}
          {% assign columns = section.blocks.size %}
        {% endif %}
        grid-template-columns: repeat({{ columns }}, 1fr);
        grid-auto-rows: 1fr;
        gap: 8px;
        margin-top: 30px;
        max-width: 900px;
        width: 100%;
      }

  .statistics-grid--stacked,
  .statistics-grid--stacked.statistics-grid {
    grid-template-columns: 1fr !important;
    max-width: 700px;
    gap: 16px !important;
  }

  @media screen and (max-width: 749px) {
    .statistics-grid--stacked {
      max-width: 100%;
      gap: 12px !important;
    }
  }

  .statistics-grid--stacked .statistic-item,
  .statistics-grid--stacked .statistic-card {
    aspect-ratio: unset !important;
    height: auto !important;
    max-width: 100%;
  }

  .statistics-grid--stacked .statistic-card {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    text-align: left;
    justify-content: flex-start;
  }

  .statistics-grid--stacked .statistic-circle-container {
    flex: 0 0 auto;
    width: 80px;
    margin-bottom: 0;
  }

  .statistics-grid--stacked .statistic-content {
    text-align: left;
    align-items: flex-start;
  }

  .statistics-grid--stacked .percentage-text-standalone {
    margin-bottom: 4px;
  }

  @media screen and (max-width: 749px) {
    .statistics-grid--stacked {
      max-width: 100%;
    }

    .statistics-grid--stacked .statistic-card {
      padding: 14px 16px;
      gap: 14px;
    }

    .statistics-grid--stacked .statistic-circle-container {
      width: 65px;
    }
  }

      .statistics-wrapper.image-right {
        flex-direction: row-reverse;
      }

      @media (min-width: 990px) {
        .statistics-wrapper.has-image .statistics-grid {
          grid-template-columns: repeat(2, 1fr);
          flex: 1;
          max-width: none;
          margin-top: 0;
          gap: 2px;
        }

        .statistics-wrapper.has-image .statistic-item {
          max-width: none;
          aspect-ratio: 1/0.95;
        }

        .statistics-wrapper.has-image .statistic-card {
          padding: 18px 12px;
          aspect-ratio: 1/0.95;
        }

        .statistics-wrapper.has-image .statistic-circle-container {
          width: 48%;
          max-width: 90px;
          margin-bottom: 10px;
        }

        .statistics-wrapper.has-image .percentage-text {
          font-size: 20px;
        }

        .statistics-wrapper.has-image .statistic-title {
          font-size: 16px;
          margin-bottom: 4px;
        }

        .statistics-wrapper.has-image .statistic-description {
          font-size: 13px;
          line-height: 1.35;
        }
      }

      @media (min-width: 1024px) {
        .statistics-grid {
          margin-left: auto;
          margin-right: auto;
        }

        .statistics-wrapper:not(.has-image) .statistics-grid {
          margin-left: auto;
          margin-right: auto;
        }
      }

      .statistic-item {
        aspect-ratio: 1/1.15;
        max-width: 220px;
      }

      .statistic-card {
        padding: 17.5px 15px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        width: 100%;
        height: 100%;
        aspect-ratio: 1/1.15;
        max-width: 100%;
        max-height: none;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
      }

      .statistic-card--no-bg {
        background-color: transparent !important;
        box-shadow: none;
      }

      .statistic-circle-container {
        margin-bottom: 5px;
        width: 50%;
        max-width: 100px;
      }

      .statistic-circle {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
      }

      .circle-svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
      }

      .circle-bg {
        fill: none;
        stroke-width: 10;
      }

      .circle-progress {
        fill: none;
        stroke-width: 10;
        stroke-linecap: round;
        stroke-dasharray: 314.159;
        stroke-dashoffset: 314.159;
        transition: stroke-dashoffset 1s ease-in-out;
      }

      .percentage-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 22px;
        font-weight: var(--font-weight-semibold) !important;
      }

      .percentage-text-standalone {
        font-size: {{ section.settings.percentage_font_size_desktop }}px;
        font-weight: var(--font-weight-semibold) !important;
        margin-bottom: 8px;
        line-height: 1.1;
      }

      .statistic-title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 6px;
        letter-spacing: var(--letter-spacing-body)
      }

      .statistic-description {
        font-size: 14px;
        line-height: 1.4;
      }

      .statistic-content {
        width: 100%;
        text-align: center;
        flex-grow: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
      }

      {% if section.settings.hide_progress_circle %}
        .statistic-item,
        .statistic-card {
          aspect-ratio: unset;
          height: auto;
        }
      {% endif %}

      @media screen and (max-width: 989px) and (min-width: 750px) {
        .statistics-wrapper.has-image {
          flex-direction: column;
          gap: 30px;
        }

        .statistics-wrapper.has-image.mobile-image-bottom {
          flex-direction: column;
        }

        .statistics-wrapper.has-image.mobile-image-top {
          flex-direction: column-reverse;
        }

        .statistics-image-container {
          flex: none;
          max-width: 450px;
          width: 100%;
        }

        .statistics-wrapper.has-image .statistics-grid {
          grid-template-columns: repeat(2, 1fr);
          max-width: 500px;
        }

        .statistics-grid {
          max-width: 500px;
          grid-auto-rows: 1fr;
          grid-template-columns: repeat(2, 1fr);
          margin-left: auto;
          margin-right: auto;
        }

        .statistic-item {
          max-width: 245px;
        }

        .statistics-wrapper.has-image .statistic-item {
          max-width: none;
        }

        .statistic-circle-container {
          width: 55%;
        }

        .percentage-text {
          font-size: 22px;
        }

        .statistic-title {
          font-size: 17px;
        }

        .statistic-description {
          font-size: 13px;
        }

        .statistic-item,
        .statistic-card {
          aspect-ratio: {% if section.settings.hide_progress_circle %}unset{% else %}1/1.15{% endif %};
          {% if section.settings.hide_progress_circle %}height: auto;{% endif %}
        }
      }

      @media screen and (max-width: 749px) and (min-width: 500px) {
        .statistics-wrapper.has-image {
          flex-direction: column;
          gap: 25px;
        }

        .statistics-wrapper.has-image.mobile-image-bottom {
          flex-direction: column;
        }

        .statistics-wrapper.has-image.mobile-image-top {
          flex-direction: column-reverse;
        }

        .statistics-image-container {
          flex: none;
          max-width: 400px;
          width: 100%;
        }

        .statistics-wrapper.has-image .statistics-grid {
          grid-template-columns: repeat({{ section.settings.mobile_columns }}, 1fr);
          max-width: 500px;
        }

        .statistics-grid {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 8px;
          max-width: 500px;
          margin-left: auto;
          margin-right: auto;
        }

        {% if section.settings.mobile_columns == '1' %}
          .statistic-item {
            width: 80%;
            max-width: 300px;
            margin-left: auto;
            margin-right: auto;
          }

          .statistics-wrapper.has-image .statistic-item {
            width: 80%;
            max-width: none;
            margin-left: auto;
            margin-right: auto;
          }

          .statistic-item:last-child:nth-child(odd) {
            width: 80%;
            max-width: 300px;
            margin-left: auto;
            margin-right: auto;
          }
        {% else %}
          .statistic-item {
            width: calc(50% - 4px);
            max-width: 245px;
          }

          .statistics-wrapper.has-image .statistic-item {
            max-width: none;
            width: calc(50% - 4px);
          }

          .statistic-item:last-child:nth-child(odd) {
            width: 80%;
            max-width: 300px;
          }

          .statistics-wrapper.has-image .statistic-item:last-child:nth-child(odd) {
            width: calc(50% - 1px);
            max-width: none;
          }
        {% endif %}

        .statistic-card {
          max-width: none;
          max-height: none;
          padding: 14.5px 8px;
        }

        .statistic-circle-container {
          width: 60%;
          margin-bottom: 0px;
        }

        .percentage-text {
          font-size: 20px;
        }

        .percentage-text-standalone {
          font-size: {{ section.settings.percentage_font_size_mobile }}px;
        }

        .statistic-title {
          font-size: 15px;
          margin-bottom: 4px;
        }

        .statistic-description {
          font-size: 12px;
          line-height: 1.3;
        }

        .statistic-item,
        .statistic-card {
          aspect-ratio: {% if section.settings.hide_progress_circle %}unset{% else %}1/1.15{% endif %};
          {% if section.settings.hide_progress_circle %}height: auto;{% endif %}
        }
      }

      @media screen and (max-width: 499px) {
        .statistics-wrapper.has-image {
          flex-direction: column;
          gap: 20px;
        }

        .statistics-wrapper.has-image.mobile-image-bottom {
          flex-direction: column;
        }

        .statistics-wrapper.has-image.mobile-image-top {
          flex-direction: column-reverse;
        }

        .statistics-image-container {
          flex: none;
          max-width: 100%;
          width: 100%;
        }

        .statistics-wrapper.has-image .statistics-grid {
          grid-template-columns: repeat({{ section.settings.mobile_columns }}, 1fr);
          max-width: 95%;
        }

        .statistics-grid {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 8px;
          max-width: 95%;
        }

        {% if section.settings.mobile_columns == '1' %}
          .statistic-item {
            width: 80%;
            max-width: 300px;
            margin-left: auto;
            margin-right: auto;
          }

          .statistics-wrapper.has-image .statistic-item {
            width: 80%;
            max-width: none;
            margin-left: auto;
            margin-right: auto;
          }

          .statistic-item:last-child:nth-child(odd) {
            width: 80%;
            max-width: 300px;
            margin-left: auto;
            margin-right: auto;
          }
        {% else %}
          .statistic-item {
            width: calc(50% - 4px);
            max-width: none;
          }

          .statistics-wrapper.has-image .statistic-item {
            width: calc(50% - 4px);
            max-width: none;
          }

          .statistic-item:last-child:nth-child(odd) {
            width: 80%;
            max-width: 300px;
          }

          .statistics-wrapper.has-image .statistic-item:last-child:nth-child(odd) {
            width: calc(50% - 1px);
            max-width: none;
          }
        {% endif %}

        .statistic-circle-container {
          width: 65%;
        }

        .percentage-text {
          font-size: 24px;
        }

        .percentage-text-standalone {
          font-size: {{ section.settings.percentage_font_size_mobile }}px;
        }

        .statistic-title {
          font-size: 14px;
        }

        .statistic-description {
          font-size: 11px;
        }
      }
</style>

<script src="{{ 'results-horizontal.js' | asset_url }}" defer="defer"></script>

<script>
  (function() {
    function applyCircleGradients() {
      document.querySelectorAll('#shopify-section-{{ section.id }} .statistic-circle[data-gradient]').forEach(function(circle) {
        var gradientStr = circle.getAttribute('data-gradient');
        if (!gradientStr) return;
        var colorMatches = gradientStr.match(/#[0-9a-fA-F]{3,8}|rgba?\([^)]+\)/g);
        if (!colorMatches || colorMatches.length < 2) return;
        var stop1 = circle.querySelector('.gradient-stop-1');
        var stop2 = circle.querySelector('.gradient-stop-2');
        if (stop1) stop1.setAttribute('stop-color', colorMatches[0]);
        if (stop2) stop2.setAttribute('stop-color', colorMatches[colorMatches.length - 1]);
      });
    }
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', applyCircleGradients);
    } else {
      applyCircleGradients();
    }
  })();
</script>

{% schema %}
{
  "name": "Results horizontal",
  "class": "statistics-section",
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "info": "ID is used in the Sections group section to merge 2 sections. ID can also be put inside any button link and the button will scroll to this section.",
      "default": false
    },
    {
      "type": "select",
      "id": "visibility",
      "options": [
        {
          "value": "desktop-hidden",
          "label": "Mobile only"
        },
        {
          "value": "mobile-hidden",
          "label": "Desktop only"
        },
        {
          "value": "always-display",
          "label": "All devices"
        }
      ],
      "label": "Display on",
      "default": "always-display"
    },
    {
      "type": "header",
      "content": "Section Settings"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#FFFFFF"
    },
    {
      "type": "header",
      "content": "Badge"
    },
    {
      "type": "text",
      "id": "badge_text",
      "label": "Badge Text",
      "info": "Leave blank to hide the badge"
    },
    {
      "type": "color",
      "id": "badge_background",
      "label": "Badge Background Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "badge_text_color",
      "label": "Badge Text Color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "badge_border_radius",
      "label": "Badge Border Radius",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 100
    },
    {
      "type": "range",
      "id": "badge_text_size",
      "label": "Badge Text Size",
      "min": 10,
      "max": 24,
      "step": 1,
      "unit": "px",
      "default": 14
    },
    {
      "type": "header",
      "content": "Heading"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Real Results"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading Color",
      "default": "#2F465F"
    },
    {
      "type": "range",
      "id": "heading_size",
      "label": "Heading Size",
      "min": 20,
      "max": 60,
      "step": 2,
      "unit": "px",
      "default": 36
    },
    {
      "type": "header",
      "content": "Subheading"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Subheading Text",
      "default": "*Studies based on a sample size of 100 customers*"
    },
    {
      "type": "color",
      "id": "subheading_color",
      "label": "Subheading Color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "subheading_size",
      "label": "Subheading Size",
      "min": 10,
      "max": 24,
      "step": 1,
      "unit": "px",
      "default": 14
    },
    {
      "type": "header",
      "content": "Layout Options"
    },
    {
      "type": "select",
      "id": "layout_style",
      "label": "Layout Style",
      "info": "LP Stats: left-aligned text, 2 columns desktop, 1 column mobile — matches LP stat block design.",
      "options": [
        {
          "value": "default",
          "label": "Default (centered cards)"
        },
        {
          "value": "lp_stats",
          "label": "LP Stats (left-aligned, 2-col)"
        }
      ],
      "default": "default"
    },
    {
      "type": "select",
      "id": "mobile_columns",
      "label": "Mobile Columns (Default layout only)",
      "info": "Number of columns on mobile devices. LP Stats layout is always 1 column on mobile.",
      "options": [
        {
          "value": "1",
          "label": "1 Column"
        },
        {
          "value": "2",
          "label": "2 Columns"
        }
      ],
      "default": "2"
    },
    {
      "type": "checkbox",
      "id": "stacked_blocks",
      "label": "Stack blocks vertically",
      "info": "Display each statistic as a full-width row instead of side by side (Default layout only)",
      "default": false,
      "visible_if": "{{ section.settings.layout_style == 'default' }}"
    },
    {
      "type": "header",
      "content": "Feature Image (Default layout only)"
    },
    {
      "type": "image_picker",
      "id": "feature_image",
      "label": "Feature Image",
      "info": "When added, statistics will display in 2 columns on desktop"
    },
    {
      "type": "select",
      "id": "image_position_desktop",
      "label": "Image Position (Desktop)",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "right"
    },
    {
      "type": "select",
      "id": "image_position_mobile",
      "label": "Image Position (Mobile)",
      "options": [
        {
          "value": "top",
          "label": "Below statistics"
        },
        {
          "value": "bottom",
          "label": "Above statistics"
        }
      ],
      "default": "top"
    },
    {
      "type": "range",
      "id": "image_border_radius",
      "label": "Image Border Radius",
      "min": 0,
      "max": 30,
      "step": 1,
      "unit": "px",
      "default": 10
    },
    {
      "type": "header",
      "content": "Card Options"
    },
    {
      "type": "checkbox",
      "id": "remove_card_background",
      "label": "Remove Card Background",
      "info": "Hide the card background and shadow behind statistics (Default layout only)",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "hide_progress_circle",
      "label": "Hide Progress Circle",
      "info": "Remove the circular progress indicator (Default layout only — LP Stats never shows circles)",
      "default": false
    },
    {
      "type": "range",
      "id": "percentage_font_size_desktop",
      "label": "Percentage Font Size - Desktop",
      "info": "Used for LP Stats layout and Default layout when Hide Progress Circle is enabled",
      "min": 20,
      "max": 80,
      "step": 2,
      "unit": "px",
      "default": 48
    },
    {
      "type": "range",
      "id": "percentage_font_size_mobile",
      "label": "Percentage Font Size - Mobile",
      "info": "Used for LP Stats layout and Default layout when Hide Progress Circle is enabled",
      "min": 16,
      "max": 60,
      "step": 2,
      "unit": "px",
      "default": 36
    },
    {
      "type": "header",
      "content": "Statistics Styling"
    },
    {
      "type": "color",
      "id": "card_background",
      "label": "Card Background Color",
      "info": "For LP Stats, use a dark color like #101010 to match the LP design",
      "default": "#ffffff"
    },
    {
      "type": "select",
      "id": "progress_color_style",
      "label": "Progress circle color style",
      "options": [
        { "value": "solid", "label": "Solid" },
        { "value": "gradient", "label": "Gradient" }
      ],
      "default": "solid"
    },
    {
      "type": "color",
      "id": "progress_color",
      "label": "Progress circle color",
      "default": "#2F465F",
      "visible_if": "{{ section.settings.progress_color_style == 'solid' }}"
    },
    {
      "type": "color_background",
      "id": "progress_color_gradient",
      "label": "Progress circle gradient",
      "default": "linear-gradient(180deg, #ff8354 0%, #ffdb9e 100%)",
      "visible_if": "{{ section.settings.progress_color_style == 'gradient' }}"
    },
    {
      "type": "color",
      "id": "progress_bg_color",
      "label": "Progress Circle Background",
      "default": "#F2F2F2"
    },
    {
      "type": "color",
      "id": "percentage_color",
      "label": "Percentage Text Color",
      "default": "#2F465F"
    },
    {
      "type": "color",
      "id": "title_color",
      "label": "Statistic Title Color",
      "default": "#2F465F"
    },
    {
      "type": "color",
      "id": "description_color",
      "label": "Statistic Description Color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "card_border_radius",
      "label": "Card radius",
      "min": 0,
      "max": 20,
      "step": 1,
      "unit": "px",
      "default": 10
    },
    {
      "type": "header",
      "content": "Section margin"
    },
    {
      "type": "range",
      "id": "mobile_margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Mobile top margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Mobile bottom margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Desktop top margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Desktop bottom margin",
      "default": 0
    },
    {
      "type": "header",
      "content": "Section padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding Top",
      "min": 0,
      "max": 100,
      "step": 5,
      "unit": "px",
      "default": 60
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding Bottom",
      "min": 0,
      "max": 100,
      "step": 5,
      "unit": "px",
      "default": 60
    }
  ],
  "blocks": [
    {
      "type": "statistic",
      "name": "Statistic",
      "limit": 8,
      "settings": [
        {
          "type": "range",
          "id": "percentage",
          "label": "Percentage Value",
          "min": 0,
          "max": 100,
          "step": 1,
          "default": 75
        },
        {
          "type": "text",
          "id": "title",
          "label": "Statistic Title",
          "default": "Statistic Title"
        },
        {
          "type": "textarea",
          "id": "description",
          "label": "Statistic Description",
          "default": "Brief description about this statistic."
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Results horizontal",
      "category": "Stats / Results",
      "blocks": [
        {
          "type": "statistic",
          "settings": {
            "percentage": 75,
            "title": "First Statistic",
            "description": "Brief description about the first statistic."
          }
        },
        {
          "type": "statistic",
          "settings": {
            "percentage": 41,
            "title": "Second Statistic",
            "description": "Brief description about the second statistic."
          }
        },
        {
          "type": "statistic",
          "settings": {
            "percentage": 68,
            "title": "Third Statistic",
            "description": "Brief description about the third statistic."
          }
        },
        {
          "type": "statistic",
          "settings": {
            "percentage": 90,
            "title": "Fourth Statistic",
            "description": "Brief description about the fourth statistic."
          }
        }
      ]
    }
  ],
  "disabled_on": {
    "groups": ["header", "footer"]
  }
}
{% endschema %}