{% doc %}
  @prompt
    Eine zweis-spaltige promotion für:
    https://shop.linumiq.com/products/linumiq-smart-home-starter-kit-lite
    und
    https://shop.linumiq.com/products/linumiq-all-in-one-smart-home-starter-kit-1, zentriere das Element auf der website
{% enddoc %}
{% assign ai_gen_id = block.id | replace: '_', '' | downcase %}

{% style %}
  .ai-two-column-promo-{{ ai_gen_id }} {
    display: block;
    /* Uses the setting value, which we've defaulted to 50 */
    width: {{ block.settings.desktop_width_percent }}%;
    max-width: 100%;
    padding: {{ block.settings.section_padding }}px 0;
    /* This centers the element */
    margin: 0 auto;
  }

  .ai-two-column-promo__container-{{ ai_gen_id }} {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: {{ block.settings.column_gap }}px;
    width: 100%;
  }

  .ai-two-column-promo__column-{{ ai_gen_id }} {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: {{ block.settings.card_background_color }};
    border-radius: {{ block.settings.card_border_radius }}px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
  }

  .ai-two-column-promo__image-wrapper-{{ ai_gen_id }} {
    position: relative;
    width: 100%;
    padding-bottom: {{ block.settings.image_aspect_ratio }}%;
    overflow: hidden;
  }

  .ai-two-column-promo__image-{{ ai_gen_id }} {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }

  .ai-two-column-promo__image-wrapper-{{ ai_gen_id }} .card__badge.bottom.left {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 3;
    pointer-events: none;
  }

  .ai-two-column-promo__content-{{ ai_gen_id }} {
    padding: {{ block.settings.content_padding }}px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
  }

  .ai-two-column-promo__title-{{ ai_gen_id }} {
    margin: 0;
    font-size: {{ block.settings.title_size }}px;
    font-weight: 600;
    color: {{ block.settings.text_color }};
    line-height: 1.2;
  }

  .ai-two-column-promo__description-{{ ai_gen_id }} {
    margin: 0;
    font-size: {{ block.settings.description_size }}px;
    color: {{ block.settings.text_color }};
    line-height: 1.5;
  }

  .ai-two-column-promo__price-{{ ai_gen_id }} {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: {{ block.settings.price_size }}px;
    font-weight: 600;
    color: {{ block.settings.price_color }};
    margin-top: auto;
  }

  .ai-two-column-promo__compare-price-{{ ai_gen_id }} {
    font-size: {{ block.settings.price_size | times: 0.75 }}px;
    font-weight: 400;
    color: {{ block.settings.text_color }};
    opacity: 0.7;
    text-decoration: line-through;
    white-space: nowrap;
  }

  .ai-two-column-promo__button-{{ ai_gen_id }} {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background-color: {{ block.settings.button_background_color }};
    color: {{ block.settings.button_text_color }};
    border: none;
    border-radius: {{ block.settings.button_border_radius }}px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    margin-top: 8px;
  }

  .ai-two-column-promo__button-{{ ai_gen_id }}:hover {
    background-color: {{ block.settings.button_hover_color }};
  }

  .ai-two-column-promo__badge-{{ ai_gen_id }} {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: {{ block.settings.badge_background_color }};
    color: {{ block.settings.badge_text_color }};
    padding: 6px 12px;
    border-radius: {{ block.settings.badge_border_radius }}px;
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
  }

  @media screen and (max-width: 749px) {
    .ai-two-column-promo-{{ ai_gen_id }} {
      /* Forces 100% width on mobile devices */
      width: 100%;
    }

    .ai-two-column-promo__container-{{ ai_gen_id }} {
      grid-template-columns: 1fr;
      gap: {{ block.settings.column_gap | times: 0.75 }}px;
    }

    .ai-two-column-promo__title-{{ ai_gen_id }} {
      font-size: {{ block.settings.title_size | times: 0.85 }}px;
    }

    .ai-two-column-promo__description-{{ ai_gen_id }} {
      font-size: {{ block.settings.description_size | times: 0.9 }}px;
    }
  }
{% endstyle %}

<two-column-promo-{{ ai_gen_id }} class="ai-two-column-promo-{{ ai_gen_id }}" {{ block.shopify_attributes }}>
  <div class="ai-two-column-promo__container-{{ ai_gen_id }}">
    <a href="{{ block.settings.product_1.url }}" class="ai-two-column-promo__column-{{ ai_gen_id }}">
      {% assign product_1_variant = block.settings.product_1.selected_or_first_available_variant %}
      {% if block.settings.show_badge_1 and block.settings.badge_text_1 != blank %}
        <div class="ai-two-column-promo__badge-{{ ai_gen_id }}">
          {{ block.settings.badge_text_1 }}
        </div>
      {% endif %}

      <div class="ai-two-column-promo__image-wrapper-{{ ai_gen_id }}">
        {% if product_1_variant and product_1_variant.compare_at_price > product_1_variant.price %}
          <div class="card__badge bottom left">
            <span id="NoMediaStandardBadge-{{ ai_gen_id }}-product-1" class="badge badge--bottom-left color-scheme-4">Sale</span>
          </div>
        {% endif %}
        {% if block.settings.product_1.featured_image %}
          <img
            src="{{ block.settings.product_1.featured_image | image_url: width: 800 }}"
            alt="{{ block.settings.product_1.featured_image.alt | escape }}"
            loading="lazy"
            width="800"
            height="{{ 800 | times: block.settings.image_aspect_ratio | divided_by: 100 }}"
            class="ai-two-column-promo__image-{{ ai_gen_id }}"
          >
        {% else %}
          <div class="ai-two-column-promo__image-{{ ai_gen_id }}">
            {{ 'product-1' | placeholder_svg_tag }}
          </div>
        {% endif %}
      </div>

      <div class="ai-two-column-promo__content-{{ ai_gen_id }}">
        {% if block.settings.product_1.title %}
          <h3 class="ai-two-column-promo__title-{{ ai_gen_id }}">
            {{ block.settings.product_1.title }}
          </h3>
        {% else %}
          <h3 class="ai-two-column-promo__title-{{ ai_gen_id }}">
            Produkt 1
          </h3>
        {% endif %}

        {% if block.settings.custom_description_1 != blank %}
          <p class="ai-two-column-promo__description-{{ ai_gen_id }}">
            {{ block.settings.custom_description_1 }}
          </p>
        {% elsif block.settings.product_1.description %}
          <p class="ai-two-column-promo__description-{{ ai_gen_id }}">
            {{ block.settings.product_1.description | strip_html | truncate: 120 }}
          </p>
        {% endif %}

        {% if block.settings.product_1.price %}
          <div class="ai-two-column-promo__price-{{ ai_gen_id }}">
            <span>{{ block.settings.product_1.price | money }}</span>
            {% if product_1_variant and product_1_variant.compare_at_price > product_1_variant.price %}
              <span class="ai-two-column-promo__compare-price-{{ ai_gen_id }}">
                {{ product_1_variant.compare_at_price | money }}
              </span>
            {% endif %}
          </div>
        {% endif %}

        {% if block.settings.show_button %}
          <span class="ai-two-column-promo__button-{{ ai_gen_id }}">
            {{ block.settings.button_text }}
          </span>
        {% endif %}
      </div>
    </a>

    <a href="{{ block.settings.product_2.url }}" class="ai-two-column-promo__column-{{ ai_gen_id }}">
      {% assign product_2_variant = block.settings.product_2.selected_or_first_available_variant %}
      {% if block.settings.show_badge_2 and block.settings.badge_text_2 != blank %}
        <div class="ai-two-column-promo__badge-{{ ai_gen_id }}">
          {{ block.settings.badge_text_2 }}
        </div>
      {% endif %}

      <div class="ai-two-column-promo__image-wrapper-{{ ai_gen_id }}">
        {% if product_2_variant and product_2_variant.compare_at_price > product_2_variant.price %}
          <div class="card__badge bottom left">
            <span id="NoMediaStandardBadge-{{ ai_gen_id }}-product-2" class="badge badge--bottom-left color-scheme-4">Sale</span>
          </div>
        {% endif %}
        {% if block.settings.product_2.featured_image %}
          <img
            src="{{ block.settings.product_2.featured_image | image_url: width: 800 }}"
            alt="{{ block.settings.product_2.featured_image.alt | escape }}"
            loading="lazy"
            width="800"
            height="{{ 800 | times: block.settings.image_aspect_ratio | divided_by: 100 }}"
            class="ai-two-column-promo__image-{{ ai_gen_id }}"
          >
        {% else %}
          <div class="ai-two-column-promo__image-{{ ai_gen_id }}">
            {{ 'product-1' | placeholder_svg_tag }}
          </div>
        {% endif %}
      </div>

      <div class="ai-two-column-promo__content-{{ ai_gen_id }}">
        {% if block.settings.product_2.title %}
          <h3 class="ai-two-column-promo__title-{{ ai_gen_id }}">
            {{ block.settings.product_2.title }}
          </h3>
        {% else %}
          <h3 class="ai-two-column-promo__title-{{ ai_gen_id }}">
            Produkt 2
          </h3>
        {% endif %}

        {% if block.settings.custom_description_2 != blank %}
          <p class="ai-two-column-promo__description-{{ ai_gen_id }}">
            {{ block.settings.custom_description_2 }}
          </p>
        {% elsif block.settings.product_2.description %}
          <p class="ai-two-column-promo__description-{{ ai_gen_id }}">
            {{ block.settings.product_2.description | strip_html | truncate: 120 }}
          </p>
        {% endif %}

        {% if block.settings.product_2.price %}
          <div class="ai-two-column-promo__price-{{ ai_gen_id }}">
            <span>{{ block.settings.product_2.price | money }}</span>
            {% if product_2_variant and product_2_variant.compare_at_price > product_2_variant.price %}
              <span class="ai-two-column-promo__compare-price-{{ ai_gen_id }}">
                {{ product_2_variant.compare_at_price | money }}
              </span>
            {% endif %}
          </div>
        {% endif %}

        {% if block.settings.show_button %}
          <span class="ai-two-column-promo__button-{{ ai_gen_id }}">
            {{ block.settings.button_text }}
          </span>
        {% endif %}
      </div>
    </a>
  </div>
</two-column-promo-{{ ai_gen_id }}>

<script>
  (function() {
    if (!customElements.get('two-column-promo-{{ ai_gen_id }}')) {
      class TwoColumnPromo{{ ai_gen_id }} extends HTMLElement {
        constructor() {
          super();
        }

        connectedCallback() {
          this.columns = this.querySelectorAll('.ai-two-column-promo__column-{{ ai_gen_id }}');
          this.setupEventListeners();
        }

        setupEventListeners() {
          this.columns.forEach((column) => {
            column.addEventListener('mouseenter', () => {
              column.style.transform = 'translateY(-4px)';
              column.style.transition = 'transform 0.3s ease';
            });

            column.addEventListener('mouseleave', () => {
              column.style.transform = 'translateY(0)';
            });
          });
        }
      }
      customElements.define('two-column-promo-{{ ai_gen_id }}', TwoColumnPromo{{ ai_gen_id }});
    }
  })();
</script>

{% schema %}
{
  "name": "Zweispaltige Promotion",
  "settings": [
    {
      "type": "header",
      "content": "Produkt 1"
    },
    {
      "type": "product",
      "id": "product_1",
      "label": "Produkt"
    },
    {
      "type": "textarea",
      "id": "custom_description_1",
      "label": "Benutzerdefinierte Beschreibung"
    },
    {
      "type": "checkbox",
      "id": "show_badge_1",
      "label": "Badge anzeigen",
      "default": false
    },
    {
      "type": "text",
      "id": "badge_text_1",
      "label": "Badge-Text",
      "default": "Neu"
    },
    {
      "type": "header",
      "content": "Produkt 2"
    },
    {
      "type": "product",
      "id": "product_2",
      "label": "Produkt"
    },
    {
      "type": "textarea",
      "id": "custom_description_2",
      "label": "Benutzerdefinierte Beschreibung"
    },
    {
      "type": "checkbox",
      "id": "show_badge_2",
      "label": "Badge anzeigen",
      "default": false
    },
    {
      "type": "text",
      "id": "badge_text_2",
      "label": "Badge-Text",
      "default": "Beliebt"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "range",
      "id": "desktop_width_percent",
      "label": "Desktop-Breite",
      "min": 10,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 50
    },
    {
      "type": "range",
      "id": "column_gap",
      "label": "Spaltenabstand",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "default": 24
    },
    {
      "type": "range",
      "id": "section_padding",
      "label": "Abstand oben/unten",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "default": 40
    },
    {
      "type": "range",
      "id": "content_padding",
      "label": "Innenabstand",
      "min": 12,
      "max": 48,
      "step": 4,
      "unit": "px",
      "default": 24
    },
    {
      "type": "range",
      "id": "image_aspect_ratio",
      "label": "Bild-Seitenverhältnis",
      "min": 50,
      "max": 150,
      "step": 5,
      "unit": "%",
      "default": 100
    },
    {
      "type": "header",
      "content": "Typografie"
    },
    {
      "type": "range",
      "id": "title_size",
      "label": "Titelgröße",
      "min": 16,
      "max": 40,
      "step": 2,
      "unit": "px",
      "default": 24
    },
    {
      "type": "range",
      "id": "description_size",
      "label": "Beschreibungsgröße",
      "min": 12,
      "max": 20,
      "step": 1,
      "unit": "px",
      "default": 14
    },
    {
      "type": "range",
      "id": "price_size",
      "label": "Preisgröße",
      "min": 14,
      "max": 28,
      "step": 2,
      "unit": "px",
      "default": 20
    },
    {
      "type": "header",
      "content": "Farben"
    },
    {
      "type": "color",
      "id": "card_background_color",
      "label": "Kartenhintergrund",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Textfarbe",
      "default": "#121212"
    },
    {
      "type": "color",
      "id": "price_color",
      "label": "Preisfarbe",
      "default": "#121212"
    },
    {
      "type": "header",
      "content": "Button"
    },
    {
      "type": "checkbox",
      "id": "show_button",
      "label": "Button anzeigen",
      "default": true
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button-Text",
      "default": "Jetzt kaufen"
    },
    {
      "type": "color",
      "id": "button_background_color",
      "label": "Hintergrundfarbe",
      "default": "#121212"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Textfarbe",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_hover_color",
      "label": "Hover-Farbe",
      "default": "#334fb4"
    },
    {
      "type": "range",
      "id": "button_border_radius",
      "label": "Eckenradius",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "default": 0
    },
    {
      "type": "header",
      "content": "Badge"
    },
    {
      "type": "color",
      "id": "badge_background_color",
      "label": "Hintergrundfarbe",
      "default": "#334fb4"
    },
    {
      "type": "color",
      "id": "badge_text_color",
      "label": "Textfarbe",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "badge_border_radius",
      "label": "Eckenradius",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "default": 40
    },
    {
      "type": "header",
      "content": "Stil"
    },
    {
      "type": "range",
      "id": "card_border_radius",
      "label": "Karten-Eckenradius",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "default": 0
    }
  ],
  "presets": [
    {
      "name": "Zweispaltige Promotion"
    }
  ]
}
{% endschema %}