{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

<div
  class="section-{{ section.id }}-padding paralax-btf-section animate--hidden {{ section.settings.visibility }} animate-section"
  data-content="#shopify-section-{{ section.id }}"
>
  <div class="desktop">
    <div class="tier-content">
      <div class="left-content">
        <div class="left-sub-content">
          <h1 style="font-size:{{ section.settings.headingsize }}px;">{{ section.settings.heading }}</h1>
          <div class="left-items">
            {%- for block in section.blocks -%}
              {% case block.type %}
                {%- when 'icon' -%}
                  <div class="icons-with-text__icon-item icons-with-text__icon-item--{{ section.settings.icon_position }} icons-with-text__icon-item--{{ section.settings.icon_text_alignment }}">
                    {% if section.settings.icon_position != 'next-to-title' %}
                      <div class="icons-with-text__icon__icon icons-with-text__icon__icon--{{ section.settings.icon_size }} color-{{ section.settings.icon_color }}">
                        {%- if block.settings.image != blank -%}
                          <img
                            src="{{ block.settings.image | image_url: width: 300 }}"
                            {% if block.settings.image.alt != blank %}
                              alt="{{ block.settings.image.alt | escape }}"
                            {% else %}
                              role="presentation"
                            {% endif %}
                            height="auto"
                            width="auto"
                            loading="lazy"
                          >
                        {%- elsif block.settings.icon != 'none' -%}
                          {% render 'material-icon', icon: block.settings.icon, filled: block.settings.filled_icon %}
                        {%- endif -%}
                      </div>
                    {% endif %}
                    <div class="icons-with-text__icon__text">
                      <h3 class="icons-with-text__icon__title {{ section.settings.icon_heading_size }}">
                        {% if section.settings.icon_position == 'next-to-title' %}
                          <div class="icons-with-text__icon__icon icons-with-text__icon__icon--title icons-with-text__icon__icon--{{ section.settings.icon_size }} color-{{ section.settings.icon_color }}">
                            {%- if block.settings.image != blank -%}
                              <img
                                src="{{ block.settings.image | image_url: width: 300 }}"
                                {% if block.settings.image.alt != blank %}
                                  alt="{{ block.settings.image.alt | escape }}"
                                {% else %}
                                  role="presentation"
                                {% endif %}
                                height="auto"
                                width="auto"
                                loading="lazy"
                              >
                            {%- elsif block.settings.icon != 'none' -%}
                              {% render 'material-icon',
                                icon: block.settings.icon,
                                filled: block.settings.filled_icon
                              %}
                            {%- endif -%}
                          </div>
                        {% endif %}
                        <span>
                          {{ block.settings.title }}
                        </span>
                      </h3>
                      {%- if block.settings.text != blank -%}
                        <div class="rte">
                          {{ block.settings.text }}
                        </div>
                      {%- endif -%}
                    </div>
                  </div>
              {%- endcase -%}
            {%- endfor -%}
          </div>
        </div>
      </div>

      <div class="right-content">
        <div class="right-items">
          {%- for block in section.blocks -%}
            {% case block.type %}
              {%- when 'imageandtext' -%}
                <div class="right-item">
                  <div>
                    {%- if block.settings.imageandtextimage != blank -%}
                      <img
                        src="{{ block.settings.imageandtextimage | image_url }}"
                        width=""
                        height=""
                        style=""
                        class="shogun-image "
                        loading="eager"
                      >
                    {%- endif -%}
                  </div>

                  <h2 style="color:black;font-size:32px;">{{ block.settings.imageandtextheading }}</h2>
                  <p style="color:black;">{{ block.settings.imageandtexttext }}</p>
                </div>

              {% when 'featuredreview2' %}
                {% render 'new-featured-review-with-image', block: block, margins: false, block_attributes: true %}
            {%- endcase -%}
          {%- endfor -%}
        </div>
      </div>
    </div>
  </div>
</div>

<style>
    .paralax-btf-section .mobile,
    .paralax-btf-section .tablet {
      display: none;
    }

    .paralax-btf-section h1,
    .paralax-btf-section h2,
    .paralax-btf-section h3,
    .paralax-btf-section p1 {
      color: {{ section.settings.textcolor }};
    }

    .new-rte {
    color: {{ section.settings.textcolor }};
  }

    .paralax-btf-section h1,
    .paralax-btf-section h2,
    .paralax-btf-section h3,
    .paralax-btf-section p {
      padding: 0;
      margin: 0;
      letter-spacing: 0;
      line-height: calc(1 + 0.8 / var(--font-body-scale));
    }
    .paralax-btf-section img {
      width: 100%;
    }
    .paralax-btf-section .tier-content {
      display: flex;
      align-items: flex-start;
    }
    .paralax-btf-section .left-content {
      width: 45%;
      background: {{ section.settings.background_color }};
      padding: 0;
      position: sticky;
      top: 104px;
      min-height: calc(100vh - 104px);
      display: flex;
      align-items: center;
      justify-content: center;
      background-size: cover !important;
      background-position: center !important;
    }
    .paralax-btf-section .left-sub-content {
      max-width: 568px;
      margin: auto;
      padding: 20px;
    }
    .paralax-btf-section .left-items {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      row-gap: 60px;
      margin-top: 60px;
    }
    .paralax-btf-section .left-item {
      display: flex;
      align-items: center;
    }
    .paralax-btf-section .left-item .item-image {
      width: 48px;
      margin-right: 16px;
    }
    .paralax-btf-section .left-item .item-content {
      width: calc(100% - 64px);
      max-width: 505px;
    }
    .paralax-btf-section .left-item h3 {
      text-transform: uppercase;
    }
    .paralax-btf-section .right-content {
      width: 50%;
      padding: 60px 10px;
    }
    .paralax-btf-section .right-items {
      margin: auto;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      row-gap: 60px;
      max-width: 538px;
    }
    .paralax-btf-section .right-item {
      width: 100%;
    }
    .paralax-btf-section .right-item h2 {
      margin: 16px 0 10px 0;
      line-height: 1.2;
    }
    .paralax-btf-section .right-item p {
      line-height: calc(1 + 0.8 / var(--font-body-scale));
    }
    @media (max-width: 991px) {
      .paralax-btf-section .desktop {

      }
      .paralax-btf-section .tablet {
        display: block;
      }
      .paralax-btf-section .left-sub-content {
        max-width: 300px;
      }
      .paralax-btf-section .left-items {
        row-gap: 30px;
        margin-top: 30px;
      }
      .paralax-btf-section .left-item .item-image {
        width: 30px;
        margin-right: 8px;
      }
      .paralax-btf-section .left-item .item-content {
        width: calc(100% - 38px);
        max-width: 250px;
      }
      .paralax-btf-section .right-content {
        padding: 30px 10px;
      }
      .paralax-btf-section .right-items {
        row-gap: 30px;
        max-width: 300px;
      }
      .paralax-btf-section .right-item h2 {
        margin: 8px 0 3px 0;
      }
    }
    @media (max-width: 767px) {
      .paralax-btf-section .tablet {
        display: none;
      }
      .paralax-btf-section .mobile {
        display: block;
      }
      .paralax-btf-section .tier-content {
        display: block;
      }
      .paralax-btf-section .left-content {
        width: 100%;
        position: relative;
        padding: 0;
        min-height: unset;
        top: 0;
        padding-top: 20px;
        padding-bottom: 20px;
      }
      .paralax-btf-section .left-sub-content {
        max-width: 326px;
        padding: 16px;
      }
      .paralax-btf-section .left-items {
        row-gap: 25px;
        margin-top: 25px;
      }
      .paralax-btf-section .left-item .item-image {
        width: 40px;
        margin-right: 16px;
      }
      .paralax-btf-section .left-item .item-content {
        width: calc(100% - 56px);
      }
      .paralax-btf-section .right-content {
        width: 100%;
        padding: 0;
        margin-top: 22px;
      }
      .paralax-btf-section .right-items {
        row-gap: 22px;
        max-width: 100%;
      }
      .paralax-btf-section .right-item h2 {
        margin: 16px 0 10px 0;
         margin-left: 10px;
      }

        .paralax-btf-section .right-item p {
         margin-left: 5px;
          padding: 10px;
      }
    }
    .shogun-image {
      max-width: 100%;
      min-height: inherit;
      max-height: inherit;
      display: inline !important;
      border: 0;
      vertical-align: middle;
    }
    .shogun-image {
      max-width: 100%;
      min-height: inherit;
      max-height: inherit;
      display: inline !important;
      border: 0;
      vertical-align: middle;
    }

    .paralax-btf-section .left-item h3 {
      margin-bottom: 10px;
  }
    .right_content_section p {
      line-height: 21px!important;
    }
</style>

{% schema %}
{
  "name": "Sticky image content",
  "settings": [
     {
      "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": "color",
      "id": "background_color",
      "label": "Background color",
       "default": "#F3F3F3"
    },
      {
      "type": "color",
      "id": "textcolor",
      "label": "Left side text color",
       "default": "#000000"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading Text",
      "default": "Heading text"
    },
 {
      "type": "range",
      "id": "headingsize",
      "min": 20,
      "max": 64,
      "step": 1,
      "unit": "px",
      "label": "Heading font size",
      "default": 30
    },
    {
      "type": "header",
      "content": "Icons section"
    },
    {
      "type": "select",
      "id": "icon_size",
      "label": "Icon size",
      "options": [
        {
          "value": "xs",
          "label": "Extra small"
        },
        {
          "value": "s",
          "label": "Small"
        },
        {
          "value": "m",
          "label": "Medium"
        },
        {
          "value": "l",
          "label": "Large"
        },
        {
          "value": "xl",
          "label": "Extra large"
        },
        {
          "value": "xxl",
          "label": "Double extra large"
        }
      ],
      "default": "m"
    },
    {
      "type": "select",
      "id": "icon_position",
      "options": [
        {
          "value": "above",
          "label": "Above title & text"
        },
        {
          "value": "next-to-title",
          "label": "Next to title"
        },
        {
          "value": "next-to-text",
          "label": "Next to text & title"
        }
      ],
      "label": "Icon position",
      "default": "next-to-title"
    },
    {
      "type": "select",
      "id": "icon_color",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "text",
          "label": "Text"
        }
      ],
      "default": "accent-1",
      "label": "Icon color"
    },
    {
      "type": "select",
      "id": "icon_heading_size",
      "options": [
        {
          "value": "h5",
          "label": "Extra small"
        },
        {
          "value": "h4",
          "label": "Small"
        },
        {
          "value": "h3",
          "label": "Medium"
        },
        {
          "value": "h2",
          "label": "Large"
        }
      ],
      "default": "h3",
      "label": "Heading size"
    },
    {
      "type": "select",
      "id": "icon_text_alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "left",
      "label": "Text alignment",
      "info": "Text is automatically centered if the icon position is set to above title & text."
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "blocks": [
     {
      "type": "icon",
      "name": "Icon with text",
      "settings": [
        {
          "type": "text",
          "id": "icon",
          "default": "check_circle",
          "label": "Icon",
          "info": "[View all available icons](https:\/\/fonts.google.com\/icons?icon.set=Material+Symbols&icon.platform=web)."
        },
        {
          "type": "checkbox",
          "id": "filled_icon",
          "default": false,
          "label": "Filled icon"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Custom icon"
        },
        {
          "type": "text",
          "id": "title",
          "default": "Icon with text",
          "label": "Heading"
        },
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Pair text with an icon to focus on your chosen product, collection, or blog post</p>",
          "label": "Text"
        }
      ]
    },

       {
      "type": "imageandtext",
      "name": "Image and text",
      "settings": [
        {
      "type": "image_picker",
      "id": "imageandtextimage",
      "label": "Image"
    },
 {
      "type": "text",
      "id": "imageandtextheading",
      "label": "Heading",
      "default": "Heading"
    },
    {
      "type": "richtext",
      "id": "imageandtexttext",
      "label": "Subheadline",
      "default": "<p>Talk about your product, feature of benefit.</p>"
    }
      ]
    },
    {
      "type": "featuredreview2",
      "name": "Review with image",
      "settings": [

          {
          "type": "image_picker",
          "id": "customerimage",
          "label": "Customer image",
          "info": "Recommended to have your image cropped in a circle."
        },

        {
          "type": "textarea",
          "id": "reviewtext",
          "default": "Enter your review text here",
           "label": "Review text"
        },
          {
          "type": "text",
          "id": "reviewname",
          "default": "Customer name",
             "label": "Customer name"
        },
          {
          "type": "text",
          "id": "verifiedbuyer",
          "default": "Verified Buyer",
          "label": "Verified Buyer"
        },

           {
        "type": "color",
        "id": "checkcolor",
        "label": "Checkmark Color",
        "default": "#000000"
      },
          {
        "type": "color",
        "id": "backgroundcolor",
        "label": "Background Color",
        "default": "#fafafa"
      },
                {
          "type": "header",
          "content": "Font size"
        },
        {
          "type": "range",
          "id": "reviewfontsizemobile",
          "min": 15,
          "max": 18,
          "step": 1,
          "unit": "px",
          "default": 18,
          "label": "Mobile text size"
        },
        {
          "type": "range",
          "id": "reviewfontsize",
          "min": 16,
          "max": 19,
          "step": 1,
          "unit": "px",
          "default": 17,
          "label": "Desktop text size"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Sticky image and text + content",
      "category": "Features",
      "blocks": [
         {
          "type": "icon"
        },
        {
          "type": "icon"
        },
        {
          "type": "icon"
        },
        {
          "type": "imageandtext"
        },
          {
          "type": "imageandtext"
        },
          {
          "type": "imageandtext"
        }
      ]
    }
  ],
  "disabled_on": {
    "groups": ["header", "footer"]
  }
}
{% endschema %}
