

<div {%- render 'section-attr' -%}>
  <section style='--btn-color: {{ section.settings.btn_color }}; --overlay: {{ section.settings.overlay }}' class='banner-v4'>
    <div class='banner-v4__inner'>
      <xo-tween
        keyframes='
          height: [
            { from: "50%", to: "45%", duration: 1, ease: "inOutCubic" },
            { from: "45%", to: "0%", duration: 1, delay: 0.2, ease: "inOutCubic" }
          ]
        '
      >
        <div class='banner-v4-overlay-above'></div>
      </xo-tween>

      <xo-tween
        from='{ rotate: "-8deg", scale: 0 }'
        to='{ rotate: 0, scale: 1 }'
        ease='outQuint'
        duration='1.5'
        delay='1.3'
      >
        <xo-video-cover
          class='banner-v4__video'
          xo-loop='{{ section.settings.loop }}'
          xo-autoplay='true'
          xo-src='{{ section.settings.video_url }}'
        ></xo-video-cover>
      </xo-tween>

      <xo-tween
        keyframes='
          height: [
            { from: "50%", to: "45%", duration: 1, ease: "inOutCubic" },
            { from: "45%", to: "0%", duration: 1, delay: 0.2, ease: "inOutCubic" }
          ]
        '
      >
        <div class='banner-v4-overlay-below'></div>
      </xo-tween>

      <div class='banner-v4-content'>
        <xo-tween
          target='.banner-v4__text, .banner-v4__btn--inner'
          from='{ y: "100%" }'
          to='{ y: "0%" }'
          duration='0.6'
          ease='k'
          delay='1.5'
          stagger='0.08'
        >
          <div class='banner-v4-content--inner'>
            <div class='banner-v4__text-pr'>
              <div class='banner-v4__text banner-v4__text1'>{{ section.settings.text1 }}</div>
            </div>
            <div class='banner-v4__text-pr'>
              <div class='banner-v4__text banner-v4__text2'>{{ section.settings.text2 }}</div>
            </div>
            <div class='banner-v4__text-pr'>
              <div class='banner-v4__text banner-v4__text3'>{{ section.settings.text3 }}</div>
            </div>
            <div class='banner-v4__btn'>
              <a href='{{ section.settings.url }}' class='banner-v4__btn--inner'>
                <div class='banner-btn__text'>{{ section.settings.text_button }}</div>
                <svg class='banner-v4__arrow' viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'>
                  <path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path>
                </svg>
              </a>
            </div>
          </div>
        </xo-tween>
      </div>
      <div class='banner-v4__small-text'>
        <div class='banner-v4__small-text-1'>{{ section.settings.small_text1 }}</div>
        <xo-tween
          from='{ width: "50%" }'
          to='{ width: "0%" }'
          ease='inOutCubic'
          duration='0.6'
          delay='1.2'
        >
          <div class='banner-v4__small-text-line'></div>
        </xo-tween>
        <div class='banner-v4__small-text-2'>{{ section.settings.small_text2 }}</div>
      </div>
    </div>
  </section>
</div>

{% schema %}
{
  "name": "t:sections.banner_v4.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "color",
      "id": "overlay",
      "label": "t:sections.banner_v4.settings.overlay.label",
      "default": "#D5C7A3"
    },
    {
      "type": "textarea",
      "id": "video_url",
      "label": "t:sections.banner_v4.settings.video_url.label"
    },
    {
      "type": "checkbox",
      "id": "loop",
      "label": "t:sections.banner_v4.settings.loop.label",
      "default": true
    },
    {
      "type": "text",
      "id": "small_text1",
      "label": "t:sections.banner_v4.settings.small_text1.label",
      "default": "FRAME READY"
    },
    {
      "type": "text",
      "id": "small_text2",
      "label": "t:sections.banner_v4.settings.small_text2.label",
      "default": "GEAR UP"
    },
    {
      "type": "text",
      "id": "text1",
      "label": "t:sections.banner_v4.settings.text1.label",
      "default": "FULL PRODUCTION"
    },
    {
      "type": "text",
      "id": "text2",
      "label": "t:sections.banner_v4.settings.text2.label",
      "default": "SERVICES BASED"
    },
    {
      "type": "text",
      "id": "text3",
      "label": "t:sections.banner_v4.settings.text3.label",
      "default": "N PARIS"
    },
    {
      "type": "text",
      "id": "text_button",
      "label": "t:sections.banner_v4.settings.text_button.label",
      "default": "Explore more"
    },
    {
      "type": "color",
      "id": "btn_color",
      "label": "t:sections.banner_v4.settings.btn_color.label",
      "default": "#d2ff00"
    },
    {
      "type": "url",
      "id": "url",
      "label": "t:sections.banner_v4.settings.url.label",
      "default": "/collections/all"
    },
    {
      "type": "header",
      "content": "t:sections.all.heading.content"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.color_scheme.label"
    },
    {
      "type": "select",
      "id": "background_type",
      "label": "t:sections.all.background_type.label",
      "options": [
        {
          "value": "color",
          "label": "t:sections.all.background_type.option__1.label"
        },
        {
          "value": "gradient",
          "label": "t:sections.all.background_type.option__2.label"
        },
        {
          "value": "image",
          "label": "t:sections.all.background_type.option__3.label"
        },
        {
          "value": "video",
          "label": "t:sections.all.background_type.option__4.label"
        }
      ],
      "default": "color"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "t:sections.all.background_color.label",
      "alpha": true,
      "visible_if": "{{ section.settings.background_type == 'color' }}"
    },
    {
      "type": "color_background",
      "id": "background_gradient",
      "label": "t:sections.all.background_gradient.label",
      "visible_if": "{{ section.settings.background_type == 'gradient' }}"
    },
    {
      "type": "number",
      "id": "background_margin",
      "label": "t:sections.all.background_margin.label",
      "default": 0
    },
    {
      "type": "number",
      "id": "padding_top",
      "label": "t:sections.all.padding_top.label",
      "default": 50
    },
    {
      "type": "number",
      "id": "padding_bottom",
      "label": "t:sections.all.padding_bottom.label",
      "default": 50
    }
  ],
  "presets": [
    {
      "name": "t:sections.banner_v4.presets.name"
    }
  ]
}
{% endschema %}
