<div class="{{ block.settings.visibility }}"
  {{ block.shopify_attributes }}
  id="variant-text-{{ section.id }}-{{ block.id }}"
  style="--margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;--margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;"
>
  <div
    class="product__text-container product__text-container--{{ block.settings.alignment }}{% if block.settings.mobile_alignment != blank %} product__text-container--mobile-{{ block.settings.mobile_alignment }}{% endif %} product__text-container--horizontal product__text-container--{{ block.settings.width }}{% if block.settings.enable_bg %} product__text-container--background{% endif %}{% if block.settings.width == 'full_negative' %} side-margins-negative{% endif %}"
    style="--mobile-text-size: {{ block.settings.mobile_text_size | divided_by: 10.0 }}rem;--desktop-text-size: {{ block.settings.desktop_text_size | divided_by: 10.0 }}rem;--padding:{{ block.settings.padding | divided_by: 7.0 }}em;--bg-color:{{ block.settings.bg_color }};--corner-radius:{{ block.settings.corner_radius | divided_by: 100.0 }}em;--border-size:{{ block.settings.border_size }}px;--border-color:{{ block.settings.border_color }};{% if block.settings.dashedborder %}border-style: dashed;{% endif %}{% if block.settings.enable_bg and block.settings.bg_color != blank %}background-color: {{ block.settings.bg_color }};{% endif %}{% if block.settings.corner_radius > 0 %}border-radius: {{ block.settings.corner_radius | divided_by: 100.0 }}em;{% endif %}{% if block.settings.border_size > 0 %}border: {{ block.settings.border_size }}px {% if block.settings.dashedborder %}dashed{% else %}solid{% endif %} {{ block.settings.border_color }};{% endif %}{% if block.settings.padding > 0 %}padding: {{ block.settings.padding | divided_by: 7.0 }}em;{% endif %}"
    id="text-container-{{ section.id }}-{{ block.id }}"
  >
  </div>
</div>

<script>
(function() {
  function initVariantText() {
    const variantTextBlock = document.getElementById('variant-text-{{ section.id }}-{{ block.id }}');
    if (!variantTextBlock) return;
    
    const textContainer = document.getElementById('text-container-{{ section.id }}-{{ block.id }}');
    if (!textContainer) return;
    
    // Define default text
    const defaultText = `{{ block.settings.text_1 | escape }}`;
    
    // Define variant text sets
    const variantTexts = [
      {% for i in (1..5) %}
        {% assign variant_option_name = 'variant_' | append: i | append: '_option_name' %}
        {% assign variant_option_value = 'variant_' | append: i | append: '_option_value' %}
        {% assign variant_text = 'variant_' | append: i | append: '_text' %}
        
        {% assign option_name = block.settings[variant_option_name] %}
        {% assign option_value = block.settings[variant_option_value] %}
        {% assign text_content = block.settings[variant_text] %}
        
        {% if option_name != blank and option_value != blank and text_content != blank %}
        {
          optionName: '{{ option_name | downcase | strip }}',
          optionValue: '{{ option_value | downcase | strip }}',
          text: '{{ text_content | escape }}'
        }{% unless forloop.last %},{% endunless %}
        {% endif %}
      {% endfor %}
    ];
    
    function createTextHTML(text) {
      if (!text) return '';
      
      return `
        <p
          class="product__text product__text-{{ block.settings.alignment }}{% if block.settings.mobile_alignment != blank %} product__text-mobile-{{ block.settings.mobile_alignment }}{% endif %}"
          style="--text-color:{{ block.settings.text_color }}; color: {{ block.settings.text_color }};"
        >
          <span>${text}</span>
        </p>
      `;
    }
    
    function updateVariantText() {
      let matchFound = false;
      let textToShow = '';
      
      // Check for variant matches
      for (const variantText of variantTexts) {
        if (!variantText.optionName || !variantText.optionValue) continue;
        
        let selectedValue = null;
        
        // Try multiple selector patterns to find the selected variant
        const selectors = [
          `select[name="options[${variantText.optionName}]"]`,
          `select[name="${variantText.optionName}"]`,
          `input[type="radio"][name="options[${variantText.optionName}]"]:checked`,
          `input[type="radio"][name="${variantText.optionName}"]:checked`
        ];
        
        for (let selector of selectors) {
          const element = document.querySelector(selector);
          if (element && element.value) {
            selectedValue = element.value.toLowerCase().trim();
            break;
          }
        }
        
        // Also try to find by looking in variant container
        if (!selectedValue) {
          const variantContainer = document.querySelector('#variant-selects-{{ section.id }}');
          if (variantContainer) {
            const allCheckedInputs = variantContainer.querySelectorAll('input:checked');
            allCheckedInputs.forEach(function(input) {
              if (input.name && input.name.toLowerCase().includes(variantText.optionName.toLowerCase())) {
                selectedValue = input.value.toLowerCase().trim();
              }
            });
          }
        }
        
        // Check if the selected value matches our target value
        if (selectedValue && selectedValue === variantText.optionValue) {
          textToShow = variantText.text;
          matchFound = true;
          break;
        }
      }
      
      // Use default text if no variant match
      if (!matchFound) {
        textToShow = defaultText;
      }
      
      // Update the text container
      textContainer.innerHTML = createTextHTML(textToShow);
    }
    
    // Initial check
    updateVariantText();
    
    // Listen for variant changes
    const variantSelector = document.querySelector('#variant-selects-{{ section.id }}');
    if (variantSelector) {
      variantSelector.addEventListener('change', updateVariantText);
    }
    
    // Listen for any form changes in the product form
    const productForm = document.querySelector('form[action*="/cart/add"]');
    if (productForm) {
      productForm.addEventListener('change', updateVariantText);
    }
    
    // Listen for custom variant change events
    document.addEventListener('variant:change', updateVariantText);
    
    // For Shopify theme editor compatibility
    if (window.Shopify && window.Shopify.designMode) {
      document.addEventListener('shopify:section:load', function(event) {
        if (event.detail.sectionId === '{{ section.id }}') {
          setTimeout(updateVariantText, 100);
        }
      });
      
      document.addEventListener('shopify:block:select', function(event) {
        if (event.detail.sectionId === '{{ section.id }}') {
          setTimeout(updateVariantText, 100);
        }
      });
    }
  }
  
  // Initialize on DOM ready
  document.addEventListener('DOMContentLoaded', initVariantText);
  
  // Also initialize immediately if DOM is already ready
  if (document.readyState === 'complete' || document.readyState === 'interactive') {
    initVariantText();
  }
})();
</script>