<div class='tw-container-sm {% render 'fn.get_section_padding', section: section %}'>
  <div
    class='
      tw-flex tw-flex-col tw-justify-between tw-gap-[40px]
      {% if section.settings.reversed -%} lg:tw-flex-row-reverse {%- else -%} lg:tw-flex-row {% endif %}
    '
  >
    <div class='relative order-1 w-full rounded-3xl lg:tw-w-1/2'>
      {% if section.settings.image != blank %}
        {{
          section.settings.image
          | image_url: width: 1200
          | image_tag:
            loading: 'eager',
            width: section.settings.icon.width,
            height: section.settings.image.height,
            sizes: image_sizes,
            class: 'tw-w-full tw-h-full tw-object-cover tw-object-center tw-rounded-[20px]'
        }}
      {% endif %}
    </div>

    <div class='tw-order-2 tw-flex tw-w-full lg:tw-w-1/2 tw-flex-col tw-gap-5 lg:tw-max-w-[512px] lg:tw-py-[100px]'>
      {%- for block in section.blocks -%}
        {%- case block.type -%}
          {% when 'title' %}
            <h2 class='tw-text-[32px] lg:tw-text-[48px] tw-font-sans tw-leading-[1.16em] tw-mb-[16px] tw-font-bold tw-text-zinc-900'>
              {{ block.settings.title }}
            </h2>
          {% when 'content' %}
            <div class='tw-text-[18px] tw-mb-[16px] tw-leading-normal tw-text-zinc-600'>
              {{ block.settings.content }}
            </div>
          {% when 'checklist' %}
            {%- liquid
              assign lines = block.settings.content | strip | replace: '<ul>', '' | replace: '</ul>', '' | replace: '</p>', '' | replace: '</p>', '' | replace: '<li>', '' | split: '</li>' | compact
            -%}
            <div class='tw-flex tw-flex-col tw-gap-[8px] tw-mt-[24px]'>
              {% for line in lines %}
                <div class='tw-flex tw-items-top tw-gap-[10px]'>
                  {% render 'icons.checkmark' %}
                  <div class='tw-text-[16px] tw-leading-normal tw-tracking-normal tw-font-bold tw-text-zinc-900'>
                    {{ line }}
                  </div>
                </div>
              {% endfor %}
            </div>
        {%- endcase -%}
      {%- endfor -%}
    </div>
  </div>
</div>
{% schema %}
{
  "name": "Content / Image",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "image"
    },
    {
      "type": "checkbox",
      "id": "reversed",
      "label": "Reverse"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "select",
      "id": "padding_top",
      "label": "Padding top",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "sm",
          "label": "Small"
        },
        {
          "value": "base",
          "label": "Normal"
        },
        {
          "value": "lg",
          "label": "Large"
        }
      ],
      "default": "base"
    },
    {
      "type": "select",
      "label": "Padding bottom",
      "id": "padding_bottom",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "sm",
          "label": "Small"
        },
        {
          "value": "base",
          "label": "Normal"
        },
        {
          "value": "lg",
          "label": "Large"
        }
      ],
      "default": "base"
    }
  ],
  "blocks": [
    {
      "type": "title",
      "name": "t:sections.rich-text.blocks.heading.name",
      "limit": 3,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "title",
          "default": "Talk about your brand",
          "label": "t:sections.rich-text.blocks.heading.settings.heading.label"
        }
      ]
    },
    {
      "type": "content",
      "name": "Content",
      "limit": 3,
      "settings": [
        {
          "type": "richtext",
          "id": "content",
          "default": "<p>Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store.</p>",
          "label": "t:sections.rich-text.blocks.text.settings.text.label"
        }
      ]
    },
    {
      "type": "checklist",
      "name": "Checklist",
      "limit": 3,
      "settings": [
        {
          "type": "richtext",
          "id": "content",
          "default": "<ul><li>Check</li><li>Check 2</li><li>Check 3</li></ul>",
          "label": "Content"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Content / Image",
      "blocks": [
        {
          "type": "title"
        },
        {
          "type": "content"
        }
      ]
    }
  ]
}
{% endschema %}