{{ 'section-banner-v2.css' | asset_url | stylesheet_tag }}

{% liquid
  if section.settings.padding_top != null
    assign padding_top = '--pt: ' | append: section.settings.padding_top | append: ';'
  endif
  if section.settings.padding_bottom != null
    assign padding_bottom = '--pb: ' | append: section.settings.padding_bottom | append: ';'
  endif

  assign title = section.settings.title | split: ''
  assign initial1 = 64
  assign initial2 = 74
  assign step = 1.5
  assign description = section.settings.description
%}

<section style='{{- padding_top -}} {{- padding_bottom }}' class='banner-v2 {%- if section.settings.color_scheme %} color-{{ section.settings.color_scheme }}{% endif %}'>
  <div xo-parallax class='banner-v2'>
    <div class='banner-v2__sticky'>
      <xo-parallax-scroll
        class='banner-v2__pr'
        xo-backface-visibility='visible'
        xo-keyframes="
          {
            '40%': { scale: 1, borderRadius: 0 },
            '60%': { scale: 0.95, borderRadius: 30 },
            '100%': { scale: 0.93, borderRadius: 50 },
          }
        "
      >
        <xo-parallax-scroll
          class='banner-v2__pr-2'
          xo-backface-visibility='visible'
          xo-keyframes="
            {
              '40%': { scale: 1, brightness: '100%' },
              '100%': { scale: 2, brightness: '40%' },
            }
          "
        >
          <xo-animate
            xo-cascade
            xo-type='zoom-out'
            xo-duration='2000'
            class='banner-v2__bg'
            {%- if section.settings.background_image != blank -%}
              style='background-image: url("{{ section.settings.background_image | image_url }}")'
            {%- endif -%}
          ></xo-animate>
        </xo-parallax-scroll>

        <xo-container {% render 'section-layout' %}>
          <div class='banner-v2__body '>
            <div class='banner-v2__content'>
              <xo-animate xo-cascade xo-duration='500'>
                <xo-parallax-scroll xo-keyframes="{ '50%': { y: 0, blur: 0, opacity: 1 }, '70%': { y: -150, blur: 10, opacity: 0 } }">
                  <div class='banner-v2__description'>{{ description }}</div>
                </xo-parallax-scroll>
              </xo-animate>

              <xo-animate xo-cascade xo-constant='150' xo-duration='500'>
                <xo-parallax-scroll xo-keyframes="{ '56%': { y: 0, blur: 0, opacity: 1 }, '76%': { y: -150, blur: 10, opacity: 0 } }">
                  {% render 'button',
                    text: section.settings.button_text,
                    link: section.settings.link_banner,
                    mode: section.settings.button_mode,
                    style: section.settings.button_style,
                    size: section.settings.button_size,
                    radius: section.settings.button_radius,
                    padding: section.settings.button_padding
                  %}
                </xo-parallax-scroll>
              </xo-animate>
            </div>
            <h2 class='banner-v2__title banner-v2__title--1' style='--fontsize:{{section.settings.title_font_size | remove: "rem" }}; '>
              {% for item in title %}
                {%- if item != ' ' -%}
                  {%- liquid
                    assign result1 = initial1 | replace: '.0', ''
                    assign initial1 = initial1 | minus: step
                    assign result2 = initial2 | replace: '.0', ''
                    assign initial2 = initial2 | minus: step
                  -%}

                  <xo-animate xo-cascade xo-duration='1000' xo-type='zoom-out' xo-easing='easeOutExpo'>
                    <xo-parallax-scroll xo-keyframes='{ "{{ result1 }}%" : { y: "0%" } , "{{ result2 }}%" : { y:"100%" } }'>
                      {{ item }}
                    </xo-parallax-scroll>
                  </xo-animate>
                {%- else -%}
                  &nbsp;
                {%- endif -%}
              {% endfor %}
            </h2>
          </div>
        </xo-container>
      </xo-parallax-scroll>
    </div>
  </div>
</section>

{% schema %}
{
  "name": "t:sections.banner_v2.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "select",
      "id": "width",
      "label": "t:sections.all.width.label",
      "default": "box",
      "options": [
        {
          "value": "box",
          "label": "t:sections.all.width.options__1.label"
        },
        {
          "value": "wide",
          "label": "t:sections.all.width.options__2.label"
        },
        {
          "value": "fullwidth",
          "label": "t:sections.all.width.options__3.label"
        }
      ]
    },
    {
      "type": "image_picker",
      "id": "background_image",
      "label": "Background image"
    },
    {
      "type": "text",
      "id": "title",
      "label": "t:sections.banner_v2.settings.title.label",
      "default": "Title"
    },
    {
      "type": "range",
      "id": "title_font_size",
      "min": 16,
      "max": 20,
      "step": 0.2,
      "unit": "rem",
      "label": "t:sections.banner_v2.settings.title_font_size.label",
      "default": 20
    },
    {
      "type": "text",
      "id": "description",
      "label": "t:sections.banner_v2.settings.description.label",
      "default": "Description"
    },
    {
      "type": "header",
      "content": "t:sections.all.button_heading.content"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "t:sections.all.button_text.label",
      "default": "ALL PRODUCTS"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "t:sections.all.button_link.label",
      "default": "/collections/all"
    },
    {
      "type": "select",
      "id": "button_mode",
      "label": "t:sections.all.button_mode.label",
      "options": [
        {
          "value": "light",
          "label": "t:sections.all.button_mode.option__1.label"
        },
        {
          "value": "dark",
          "label": "t:sections.all.button_mode.option__2.label"
        },
        {
          "value": "accent",
          "label": "t:sections.all.button_mode.option__3.label"
        }
      ],
      "default": "light"
    },
    {
      "type": "select",
      "id": "button_style",
      "label": "t:sections.all.button_style.label",
      "options": [
        {
          "value": "primary",
          "label": "t:sections.all.button_style.option__1.label"
        },
        {
          "value": "secondary",
          "label": "t:sections.all.button_style.option__2.label"
        },
        {
          "value": "tertiary",
          "label": "t:sections.all.button_style.option__3.label"
        },
        {
          "value": "link",
          "label": "t:sections.all.button_style.option__4.label"
        }
      ],
      "default": "secondary"
    },
    {
      "type": "select",
      "id": "button_size",
      "label": "t:sections.all.button_size.label",
      "options": [
        {
          "value": "xs",
          "label": "t:sections.all.button_size.option__0.label"
        },
        {
          "value": "sm",
          "label": "t:sections.all.button_size.option__1.label"
        },
        {
          "value": "md",
          "label": "t:sections.all.button_size.option__2.label"
        },
        {
          "value": "lg",
          "label": "t:sections.all.button_size.option__3.label"
        }
      ],
      "default": "sm"
    },
    {
      "type": "range",
      "id": "button_radius",
      "label": "t:sections.all.button_radius.label",
      "max": 4,
      "min": 0,
      "step": 0.2,
      "unit": "rem",
      "default": 0.8
    },
    {
      "type": "range",
      "id": "button_padding",
      "label": "t:sections.all.button_padding.label",
      "info": "t:sections.all.button_padding.info",
      "max": 10,
      "min": 0,
      "step": 0.2,
      "unit": "rem",
      "default": 1.4
    },
    {
      "type": "header",
      "content": "t:sections.banner_v2.settings.color_heading.content"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.banner_v2.settings.color_scheme.label"
    },
    {
      "type": "number",
      "id": "padding_top",
      "label": "t:sections.banner_v2.settings.padding_top.label",
      "default": 50
    },
    {
      "type": "number",
      "id": "padding_bottom",
      "label": "t:sections.banner_v2.settings.padding_bottom.label",
      "default": 50
    }
  ],
  "presets": [
    {
      "name": "t:sections.banner_v2.presets.name"
    }
  ]
}
{% endschema %}
