{%- liquid
  if section.settings.divider_color == blank
    assign divider_fill = 'rgb(var(--color-foreground))'
  else
    assign divider_fill = section.settings.divider_color
  endif

  assign displayed = true

  if section.settings.hidden_products != blank
    assign hidden_handles = section.settings.hidden_products | split: ','
    for hidden_handle in hidden_handles
      assign handle_strip = hidden_handle | strip
      if handle_strip == product.handle
        assign displayed = false
        break
      endif
    endfor
  endif

  if section.settings.enable_specific_display and section.settings.displayed_products != blank
    assign displayed_handles = section.settings.displayed_products | split: ','
    assign displayed = false
    for displayed_handle in displayed_handles
      assign handle_strip = displayed_handle | strip
      if handle_strip == product.handle
        assign displayed = true
        break
      endif
    endfor
  endif

  if section.settings.hidden_pages != blank and page
    assign hidden_page_handles = section.settings.hidden_pages | split: ','
    for hidden_page_handle in hidden_page_handles
      assign page_handle_strip = hidden_page_handle | strip
      if page_handle_strip == page.handle
        assign displayed = false
        break
      endif
    endfor
  endif

  if section.settings.enable_specific_page_display and section.settings.displayed_pages != blank and page
    assign displayed_page_handles = section.settings.displayed_pages | split: ','
    assign displayed = false
    for displayed_page_handle in displayed_page_handles
      assign page_handle_strip = displayed_page_handle | strip
      if page_handle_strip == page.handle
        assign displayed = true
        break
      endif
    endfor
  endif
-%}

{%- if section.settings.divider_style == 'plateau' -%}
  {%- liquid
    assign plateau_width = section.settings.plateau_width | default: 85
    assign flat_width_px = 1200.0 | times: plateau_width | divided_by: 100
    assign flat_start_x = 1200.0 | minus: flat_width_px | divided_by: 2
    assign ramp_scale = flat_start_x | divided_by: 104.29

    assign rx1 = 3.61 | times: ramp_scale | round: 2
    assign rx2 = 17.59 | times: ramp_scale | round: 2
    assign rx3 = 30.69 | times: ramp_scale | round: 2
    assign rx4 = 38.71 | times: ramp_scale | round: 2
    assign rx5 = 86.94 | times: ramp_scale | round: 2
    assign rx6 = 91.04 | times: ramp_scale | round: 2
    assign rx7 = 97.14 | times: ramp_scale | round: 2
    assign rx8 = flat_start_x | round: 2

    assign lx1 = 1200 | minus: rx1 | round: 2
    assign lx2 = 1200 | minus: rx2 | round: 2
    assign lx3 = 1200 | minus: rx3 | round: 2
    assign lx4 = 1200 | minus: rx4 | round: 2
    assign lx5 = 1200 | minus: rx5 | round: 2
    assign lx6 = 1200 | minus: rx6 | round: 2
    assign lx7 = 1200 | minus: rx7 | round: 2
    assign lx8 = 1200 | minus: rx8 | round: 2

    assign plateau_fill_d = 'M0,120 L' | append: rx1 | append: ',120 C' | append: rx2 | append: ',120 ' | append: rx3 | append: ',111.63 ' | append: rx4 | append: ',97.56 L' | append: rx5 | append: ',13.02 C' | append: rx6 | append: ',5.83 ' | append: rx7 | append: ',0 ' | append: rx8 | append: ',0 L' | append: lx8 | append: ',0 C' | append: lx7 | append: ',0 ' | append: lx6 | append: ',5.83 ' | append: lx5 | append: ',13.02 L' | append: lx4 | append: ',97.56 C' | append: lx3 | append: ',111.63 ' | append: lx2 | append: ',120 ' | append: lx1 | append: ',120 L1200,120 Z'

    assign plateau_stroke_d = 'M' | append: rx1 | append: ',120 C' | append: rx2 | append: ',120 ' | append: rx3 | append: ',111.63 ' | append: rx4 | append: ',97.56 L' | append: rx5 | append: ',13.02 C' | append: rx6 | append: ',5.83 ' | append: rx7 | append: ',0 ' | append: rx8 | append: ',0 L' | append: lx8 | append: ',0 C' | append: lx7 | append: ',0 ' | append: lx6 | append: ',5.83 ' | append: lx5 | append: ',13.02 L' | append: lx4 | append: ',97.56 C' | append: lx3 | append: ',111.63 ' | append: lx2 | append: ',120 ' | append: lx1 | append: ',120'
  -%}
{%- endif -%}

{%- 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;
    }
  }

  .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;
    }
  }

  .color-scheme-{{ section.id }}.color-custom {
    --color-background: {{ section.settings.custom_colors_background.red }}, {{ section.settings.custom_colors_background.green }}, {{ section.settings.custom_colors_background.blue }};
    --gradient-background: {% if section.settings.custom_gradient_background != blank %}{{ section.settings.custom_gradient_background }}{% else %}{{ section.settings.custom_colors_background }}{% endif %};
    --color-foreground: {{ section.settings.custom_colors_text.red }}, {{ section.settings.custom_colors_text.green }}, {{ section.settings.custom_colors_text.blue }};
  }

  #Divider-{{ section.id }} {
    --divider-height: {{ section.settings.height }}px;
    --svg-transform: {% if section.settings.flip_direction %}scaleY(-1){% else %}none{% endif %};
  }

  #Divider-{{ section.id }} .divider-svg-wrap {
    line-height: 0;
    transform: var(--svg-transform);
  }

  #Divider-{{ section.id }} svg {
    width: 100%;
    height: var(--divider-height);
    display: block;
  }

  {% if section.settings.use_gradient %}
  #Divider-{{ section.id }} .divider-svg-wrap {
    background: {{ section.settings.gradient_background }};

    {% case section.settings.divider_style %}
      {% when 'cloud' %}
        -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M-5,90 Q 100,20 250,90 Q 400,50 550,90 Q 750,-20 950,70 Q 1100,40 1205,90 L 1205,120 L -5,120 Z" fill="black"/></svg>');
                mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M-5,90 Q 100,20 250,90 Q 400,50 550,90 Q 750,-20 950,70 Q 1100,40 1205,90 L 1205,120 L -5,120 Z" fill="black"/></svg>');
      {% when 'wavy' %}
        -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,60 Q300,120 600,60 T1200,60 V120 H0 Z" fill="black"/></svg>');
                mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,60 Q300,120 600,60 T1200,60 V120 H0 Z" fill="black"/></svg>');
      {% when 'diagonal' %}
        -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,120 L1200,90 V120 H0 Z" fill="black"/></svg>');
                mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,120 L1200,90 V120 H0 Z" fill="black"/></svg>');
      {% when 'gradient' %}
        -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><rect x="0" y="0" width="1200" height="120" fill="black"/></svg>');
                mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><rect x="0" y="0" width="1200" height="120" fill="black"/></svg>');
      {% when 'arrow' %}
        -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,60 L600,0 L1200,60 V120 H0 Z" fill="black"/></svg>');
                mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,60 L600,0 L1200,60 V120 H0 Z" fill="black"/></svg>');
      {% when 'arch' %}
        -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,120 Q600,-20 1200,120 Z" fill="black"/></svg>');
                mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,120 Q600,-20 1200,120 Z" fill="black"/></svg>');
      {% when 'arch_inward' %}
        -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0 Q600,140 1200,0 V120 H0 Z" fill="black"/></svg>');
                mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0 Q600,140 1200,0 V120 H0 Z" fill="black"/></svg>');
      {% when 'plateau' %}
        -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="{{ plateau_fill_d }}" fill="black"/></svg>');
                mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="{{ plateau_fill_d }}" fill="black"/></svg>');
    {% endcase %}

    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
  }

  #Divider-{{ section.id }} .divider-svg-wrap svg {
    opacity: 0;
    pointer-events: none;
  }
  {% endif %}

  #Divider-{{ section.id }} svg path,
  #Divider-{{ section.id }} svg rect {
    {% if section.settings.use_gradient %}
      fill: black;
    {% else %}
      fill: {{ divider_fill }};
    {% endif %}
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  {% if section.settings.show_border %}
  #Divider-{{ section.id }} [data-divider-stroke] {
    stroke: {{ section.settings.border_color }};
    stroke-width: {{ section.settings.border_width }};
    vector-effect: non-scaling-stroke;
    {% case section.settings.border_style %}
      {% when 'dashed' %} stroke-dasharray: 10 5;
      {% when 'dotted' %} stroke-dasharray: 2 3;
    {% endcase %}
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }
  {% endif %}
{%- endstyle -%}

{% if displayed %}

<div
  id="Divider-{{ section.id }}"
  class="color-scheme-{{ section.id }} color-{{ section.settings.color_scheme }} gradient section-{{ section.id }}-margin"
>
  <div class="section-{{ section.id }}-padding">
    <div class="divider-svg-wrap">
      {%- case section.settings.divider_style -%}
        {%- when 'cloud' -%}
          <svg
            viewBox="0 0 1200 120"
            {% unless section.settings.keep_proportion %}preserveAspectRatio="none"{% endunless %}
            role="presentation"
            aria-hidden="true"
            focusable="false"
          >
            <path d="M-5,90 Q 100,20 250,90 Q 400,50 550,90 Q 750,-20 950,70 Q 1100,40 1205,90 L 1205,120 L -5,120 Z"></path>
            {%- if section.settings.show_border -%}
              <path data-divider-stroke d="M-5,90 Q 100,20 250,90 Q 400,50 550,90 Q 750,-20 950,70 Q 1100,40 1205,90"></path>
            {%- endif -%}
          </svg>

        {%- when 'wavy' -%}
          <svg
            viewBox="0 0 1200 120"
            {% unless section.settings.keep_proportion %}preserveAspectRatio="none"{% endunless %}
            role="presentation"
            aria-hidden="true"
            focusable="false"
          >
            <path d="M0,60 Q300,120 600,60 T1200,60 V120 H0 Z"></path>
            {%- if section.settings.show_border -%}
              <path data-divider-stroke d="M0,60 Q300,120 600,60 T1200,60"></path>
            {%- endif -%}
          </svg>

        {%- when 'diagonal' -%}
          <svg
            viewBox="0 0 1200 120"
            {% unless section.settings.keep_proportion %}preserveAspectRatio="none"{% endunless %}
            role="presentation"
            aria-hidden="true"
            focusable="false"
          >
            <path d="M0,120 L1200,90 V120 H0 Z"></path>
            {%- if section.settings.show_border -%}
              <path data-divider-stroke d="M0,120 L1200,90"></path>
            {%- endif -%}
          </svg>

        {%- when 'gradient' -%}
          <svg
            viewBox="0 0 1200 120"
            {% unless section.settings.keep_proportion %}preserveAspectRatio="none"{% endunless %}
            role="presentation"
            aria-hidden="true"
            focusable="false"
          >
            <rect x="0" y="0" width="1200" height="120"></rect>
            {%- if section.settings.show_border -%}
              <rect data-divider-stroke x="0" y="0" width="1200" height="120"></rect>
            {%- endif -%}
          </svg>

        {%- when 'arrow' -%}
          <svg
            viewBox="0 0 1200 120"
            {% unless section.settings.keep_proportion %}preserveAspectRatio="none"{% endunless %}
            role="presentation"
            aria-hidden="true"
            focusable="false"
          >
            <path d="M0,60 L600,0 L1200,60 V120 H0 Z"></path>
            {%- if section.settings.show_border -%}
              <path data-divider-stroke d="M0,60 L600,0 L1200,60"></path>
            {%- endif -%}
          </svg>

        {%- when 'arch' -%}
          <svg
            viewBox="0 0 1200 120"
            {% unless section.settings.keep_proportion %}preserveAspectRatio="none"{% endunless %}
            role="presentation"
            aria-hidden="true"
            focusable="false"
          >
            <path d="M0,120 Q600,-20 1200,120 Z"></path>
            {%- if section.settings.show_border -%}
              <path data-divider-stroke d="M0,120 Q600,-20 1200,120"></path>
            {%- endif -%}
          </svg>

        {%- when 'arch_inward' -%}
          <svg
            viewBox="0 0 1200 120"
            {% unless section.settings.keep_proportion %}preserveAspectRatio="none"{% endunless %}
            role="presentation"
            aria-hidden="true"
            focusable="false"
          >
            <path d="M0,0 Q600,140 1200,0 V120 H0 Z"></path>
            {%- if section.settings.show_border -%}
              <path data-divider-stroke d="M0,0 Q600,140 1200,0"></path>
            {%- endif -%}
          </svg>

          {%- when 'plateau' -%}
          <svg
            viewBox="0 0 1200 120"
            {% unless section.settings.keep_proportion %}preserveAspectRatio="none"{% endunless %}
            role="presentation"
            aria-hidden="true"
            focusable="false"
          >
            <path d="{{ plateau_fill_d }}"></path>
            {%- if section.settings.show_border -%}
              <path data-divider-stroke d="{{ plateau_stroke_d }}"></path>
            {%- endif -%}
          </svg>

      {%- endcase -%}
    </div>
  </div>
</div>

{% endif %}

{% schema %}
{
  "name": "Section divider V2",
  "tag": "section",
  "class": "section section-divider",
  "disabled_on": {
    "groups": ["header"]
  },
  "settings": [
    {
      "type": "select",
      "id": "divider_style",
      "label": "Style",
      "options": [
        { "value": "cloud",       "label": "Cloud" },
        { "value": "wavy",        "label": "Wavy" },
        { "value": "diagonal",    "label": "Diagonal" },
        { "value": "gradient",    "label": "Gradient rectangle" },
        { "value": "arrow",       "label": "Arrow" },
        { "value": "arch",        "label": "Arch" },
        { "value": "arch_inward", "label": "Arch (inward)" },
        { "value": "plateau",     "label": "Plateau" }
      ],
      "default": "wavy"
    },
    {
      "type": "range",
      "id": "plateau_width",
      "min": 40,
      "max": 95,
      "step": 5,
      "unit": "%",
      "label": "Plateau width",
      "default": 85,
      "info": "Only applies to the Plateau divider style.",
      "visible_if": "{{ section.settings.divider_style == 'plateau' }}"
    },
    {
      "type": "range",
      "id": "height",
      "min": 10,
      "max": 200,
      "step": 5,
      "unit": "px",
      "label": "Height",
      "default": 50
    },
    {
      "type": "color",
      "id": "divider_color",
      "label": "Divider color",
      "info": "Leave blank to use the color scheme foreground color."
    },
    {
      "type": "checkbox",
      "id": "flip_direction",
      "label": "Flip vertically",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "keep_proportion",
      "label": "Keep SVG proportions",
      "default": false,
      "info": "Prevents stretching on extreme aspect ratios."
    },
    {
      "type": "header",
      "content": "Border"
    },
    {
      "type": "checkbox",
      "id": "show_border",
      "label": "Show border",
      "default": false
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Border color",
      "default": "#e0e0e0"
    },
    {
      "type": "range",
      "id": "border_width",
      "min": 1,
      "max": 10,
      "step": 1,
      "unit": "px",
      "label": "Border width",
      "default": 1
    },
    {
      "type": "select",
      "id": "border_style",
      "label": "Border style",
      "options": [
        { "value": "solid",  "label": "Solid" },
        { "value": "dashed", "label": "Dashed" },
        { "value": "dotted", "label": "Dotted" }
      ],
      "default": "solid"
    },
    {
      "type": "header",
      "content": "Gradient fill"
    },
    {
      "type": "checkbox",
      "id": "use_gradient",
      "label": "Use gradient fill",
      "default": false,
      "info": "Overrides the divider color with a custom gradient."
    },
    {
      "type": "color_background",
      "id": "gradient_background",
      "label": "Gradient",
      "default": "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
    },
    {
      "type": "header",
      "content": "Visibility",
      "info": "Use this to display or hide this section on certain product or normal page(s)."
    },
    {
      "type": "text",
      "id": "hidden_products",
      "label": "Product pages to hide the section on",
      "info": "Handles of products to hide the section on, split with a comma."
    },
    {
      "type": "text",
      "id": "hidden_pages",
      "label": "Normal pages to hide the section on",
      "info": "Handles of pages to hide the section on, split with a comma."
    },
    {
      "type": "checkbox",
      "id": "enable_specific_display",
      "label": "Display the section on specific product pages only",
      "default": false
    },
    {
      "type": "text",
      "id": "displayed_products",
      "label": "Specific product pages to display the section on",
      "info": "Applied if the checkbox above is checked. Handles of products to only display the section on, split with a comma."
    },
    {
      "type": "checkbox",
      "id": "enable_specific_page_display",
      "label": "Display the section on specific normal pages only",
      "default": false
    },
    {
      "type": "text",
      "id": "displayed_pages",
      "label": "Specific normal pages to display the section on",
      "info": "Applied if the checkbox above is checked. Handles of pages to only display the section on, split with a comma."
    },
    {
      "type": "header",
      "content": "Color scheme"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "label": "Color scheme",
      "info": "Custom color scheme is edited at the bottom of section settings.",
      "options": [
        { "value": "accent-1",     "label": "Accent 1" },
        { "value": "accent-2",     "label": "Accent 2" },
        { "value": "background-1", "label": "Background 1" },
        { "value": "background-2", "label": "Background 2" },
        { "value": "inverse",      "label": "Inverse" },
        { "value": "custom",       "label": "Custom" }
      ],
      "default": "background-1"
    },
    {
      "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": 20
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 0
    },
    {
      "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": "Custom color scheme",
      "info": "Applied if Color scheme is set to Custom."
    },
    {
      "type": "color",
      "id": "custom_colors_background",
      "label": "Background color",
      "default": "#FFFFFF"
    },
    {
      "type": "color_background",
      "id": "custom_gradient_background",
      "label": "Gradient background",
      "info": "If added, replaces Background color when applicable."
    },
    {
      "type": "color",
      "id": "custom_colors_text",
      "label": "Text color",
      "default": "#2E2A39"
    }
  ],
  "presets": [{ "name": "Section divider V2", "category": "Layout" }]
}
{% endschema %}