/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'component-image-with-text.css'"
Line 18:0 Unexpected "{"
Line 18:1 Expected identifier but found "%"
Line 19:10 Unexpected "{"
Line 19:19 Expected ":"
Line 19:26 Unexpected "{"
Line 31:12 Unexpected "{"
Line 31:21 Expected ":"
... and 64 more hidden warnings

**/
{{ 'component-image-with-text.css' | asset_url | stylesheet_tag }}

{%- style -%}
.section-{{ section.id }} {
  background-color: #f8f8f8;
  border-radius: 20px;
  box-shadow: 15px 12px rgb(0 158 224);
  margin: 40px auto;
  padding: 40px;
  max-width: 1200px;
  color: #333;
  box-sizing: border-box;
}

@media (max-width: 750px) {
  .section-{{ section.id }} {
    margin: 20px 15px;
    padding: 20px;
    max-width: calc(100% - 30px);
    box-shadow: 9px 12px rgb(0 158 224);
  }
}

.clean-media {
  width: 100%;
  border: none;
  background: none;
}

.clean-media video,
.clean-media iframe,
.clean-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: none;
  object-fit: cover;
}

.image-with-text__content {
  margin-top: 20px;
}
{%- endstyle -%}

<div class="section-{{ section.id }}">
  <div class="image-with-text grid grid--1-col grid--2-col-tablet">
    
    <!-- BLOCO DE MÍDIA -->
    <div class="clean-media grid__item">
      {% if section.settings.video != blank %}
        {%- comment -%} 1️⃣ Upload de vídeo direto no Shopify {%- endcomment -%}
        <video autoplay loop muted playsinline controls>
          <source src="{{ section.settings.video | file_url }}" type="video/mp4">
          Seu navegador não suporta vídeos HTML5.
        </video>

      {% elsif section.settings.video_url != blank %}
        {%- comment -%} 2️⃣ Vídeo via URL (YouTube/Vimeo) {%- endcomment -%}
        {% if section.settings.video_url contains "youtube.com" or section.settings.video_url contains "youtu.be" %}
          <iframe
            src="{{ section.settings.video_url | replace: 'watch?v=', 'embed/' }}"
            frameborder="0"
            allow="autoplay; encrypted-media"
            allowfullscreen
            title="{{ section.settings.description | escape }}">
          </iframe>
        {% elsif section.settings.video_url contains "vimeo.com" %}
          {% assign vimeo_id = section.settings.video_url | split: '/' | last %}
          <iframe
            src="https://player.vimeo.com/video/{{ vimeo_id }}"
            frameborder="0"
            allow="autoplay; fullscreen; picture-in-picture"
            allowfullscreen
            title="{{ section.settings.description | escape }}">
          </iframe>
        {% endif %}

      {% elsif section.settings.image != blank %}
        {%- comment -%} 3️⃣ Caso não haja vídeo, exibe imagem pura {%- endcomment -%}
        <img src="{{ section.settings.image | image_url: width: 1500 }}" alt="{{ section.settings.description | escape }}">
      {% endif %}
    </div>

    <!-- BLOCO DE TEXTO -->
    <div class="image-with-text__content grid__item">
      {% for block in section.blocks %}
        {% case block.type %}
          {% when 'heading' %}
            <h2 class="{{ block.settings.heading_size }}" style="color:#009EE0;">
              {{ block.settings.heading }}
            </h2>
          {% when 'text' %}
            <div class="rte">{{ block.settings.text }}</div>
          {% when 'button' %}
            {% if block.settings.button_label != blank %}
              <a href="{{ block.settings.button_link }}" class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}">
                {{ block.settings.button_label }}
              </a>
            {% endif %}
        {% endcase %}
      {% endfor %}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Video or Image with Text",
  "settings": [
    {
      "type": "video",
      "id": "video",
      "label": "Upload de vídeo"
    },
    {
      "type": "text",
      "id": "video_url",
      "label": "URL do vídeo (YouTube ou Vimeo)",
      "default": ""
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Imagem alternativa"
    },
    {
      "type": "text",
      "id": "description",
      "label": "Descrição para acessibilidade"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "Título",
      "settings": [
        { "type": "inline_richtext", "id": "heading", "default": "Título do bloco", "label": "Título" },
        { "type": "select", "id": "heading_size", "options": [
          { "value": "h1", "label": "H1" },
          { "value": "h2", "label": "H2" },
          { "value": "h3", "label": "H3" }
        ], "default": "h2", "label": "Tamanho do título" }
      ]
    },
    {
      "type": "text",
      "name": "Texto",
      "settings": [
        { "type": "richtext", "id": "text", "default": "<p>Descrição ou texto informativo.</p>", "label": "Texto" }
      ]
    },
    {
      "type": "button",
      "name": "Botão",
      "settings": [
        { "type": "text", "id": "button_label", "default": "Saiba mais", "label": "Texto do botão" },
        { "type": "url", "id": "button_link", "label": "Link do botão" },
        { "type": "checkbox", "id": "button_style_secondary", "default": false, "label": "Estilo secundário (contorno)" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Vídeo ou Imagem com Texto",
      "blocks": [
        { "type": "heading" },
        { "type": "text" },
        { "type": "button" }
      ]
    }
  ]
}
{% endschema %}