(() => {
  if (!window.location.pathname.includes('/productos/')) return;
  if (LS?.theme?.name === "Patagonia") return;
  
  const buildGocuotasBlock = () => {
    const newContainer = document.createElement('div');
    newContainer.classList.add('col-12','mb-2');

    const newSubContainer = document.createElement('div');
    newSubContainer.classList.add('gocuotas-info-container-product');

    newSubContainer.innerHTML = `
      <div style="display: flex; align-items: center; gap: 6px;">
        <img src="https://f005.backblazeb2.com/file/gocuotas-marketing/tiendanube_sdk/gocuotas-logo-go.svg" alt="Logo GOcuotas" style="height: 25px;">

        <div style="display: inline-flex; align-items: center; gap: 6px;">
          <span style="white-space: nowrap;">Cuotas SIN interés con <strong>DÉBITO</strong></span>
          <button id="gocuotas-learn-more" style="background: none; border: none; text-decoration: none; cursor: pointer; padding: 0;" aria-label="Más información GOcuotas">
            <img src="https://f005.backblazeb2.com/file/gocuotas-marketing/tiendanube_sdk/gocuotas-info.svg" alt="More information" style="height: 20px; width: 15px">
          </button>
        </div>
      </div>

      <!-- Modal -->
      <div id="gocuotas-modal" style="display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); justify-content: center; align-items: center;">
        <div class="gocuotas-modal-content" style=" background: white; padding: 0px 20px 30px 20px; border-radius: 8px; max-width: 400px; text-align: center; position: relative;">
          <span id="gocuotas-modal-close" style=" position: absolute; top: 8px; right: 12px; font-size: 20px; cursor: pointer; color: #1C263F;">&times;</span>

          <img src="https://f005.backblazeb2.com/file/gocuotas-marketing/tiendanube_sdk/gocuotas-header-modal.svg" alt="Header Modal GOcuotas" style="width: 100%;">

          <h3 style="color: #EE2A7B; font-weight: bold; margin-bottom: 15px; line-height: 1.3">
            Comprá en cuotas SIN interés
            con tu 
            <span style="display: inline-block; border-bottom: 2px solid #EE2A7B">DÉBITO</span>
          </h3>

          <div style="display: flex; align-items: start; gap: 8px;">
            <img src="https://f005.backblazeb2.com/file/gocuotas-marketing/tiendanube_sdk/gocuotas-icon-01.svg" alt="Step 1" style="width: 60px;">
            <p style="text-align: start; margin: 8px 0px; color: #1C263F;">Completá tu carrito de compras con <strong>eso que querés.</strong></p>
          </div>

          <div style="display: flex; align-items: start; gap: 8px;">
            <img src="https://f005.backblazeb2.com/file/gocuotas-marketing/tiendanube_sdk/gocuotas-icon-02.svg" alt="Step 2" style="width: 60px;">
            <p style="text-align: start; margin: 8px 0px; color: #1C263F;">Al momento de pagar, elegí hacerlo en <strong>cuotas con tarjeta de débito o prepaga.</strong></p>
          </div>

          <div style="display: flex; align-items: start; gap: 8px;">
            <img src="https://f005.backblazeb2.com/file/gocuotas-marketing/tiendanube_sdk/gocuotas-icon-03.svg" alt="Step 3" style="width: 60px;">
            <p style="text-align: start; margin: 8px 0px; color: #1C263F;">Iniciá sesión o creá tu cuenta (solo con tu DNI) en GOcuotas. <strong>¡Y listo!</strong></p>
          </div>

          <hr style="opacity: 0.25; margin: 20px 0px 10px 0px">

          <button id="gocuotas-site" style="background: none; border: none; color: #EE2A7B; text-decoration: none; cursor: pointer; padding: 0;">
            Ir a GOcuotas 🡒
          </button>
        </div>
      </div>
    `;

    newContainer.appendChild(newSubContainer);
    return newContainer;
  };

  const insertIfNeeded = (targetSelector, position = 'beforeend', after = false) => {
    if (document.querySelector('.gocuotas-info-container-product')) return null;
    const target = document.querySelector(targetSelector);
    if (!target) return null;

    const block = buildGocuotasBlock();
    if (after) {
      target.insertAdjacentElement('afterend', block);
    } else {
      target.insertAdjacentElement(position, block);
    }

    setupModalHandlers(block);
    return block;
  };

  const setupModalHandlers = (block) => {
    if (!block) return;

    const learnMoreButton = block.querySelector('#gocuotas-learn-more');
    const modal = block.querySelector('#gocuotas-modal');
    if (!learnMoreButton || !modal) return;

    const closeModal = block.querySelector('#gocuotas-modal-close');
    const modalContent = block.querySelector('.gocuotas-modal-content');
    const goSiteButton = block.querySelector('#gocuotas-site');

    if (learnMoreButton._gocuotasBound) return;
    learnMoreButton._gocuotasBound = true;

    learnMoreButton.addEventListener('click', (event) => {
      event.preventDefault();
      event.stopPropagation();
      modal.style.display = 'flex';
      return false;
    });

    if (closeModal) {
      closeModal.addEventListener('click', (event) => {
        event.preventDefault();
        event.stopPropagation();
        modal.style.display = 'none';
      });
    }

    modal.addEventListener('click', (event) => {
      if (event.target === modal) {
        event.preventDefault();
        event.stopPropagation();
        modal.style.display = 'none';
      }
    });

    if (modalContent) {
      modalContent.addEventListener('click', (event) => {
        event.stopPropagation();
      });
    }

    if (goSiteButton) {
      goSiteButton.addEventListener('click', (event) => {
        event.preventDefault();
        event.stopPropagation();
        window.open('https://www.gocuotas.com/usuarios', '_blank');
      });
    }
  };

  // Theme Default
  insertIfNeeded('.js-product-payments-container', 'afterbegin', false);
})();