// Global Huellitas en Acción modal
(function () {
  const { useState, useEffect } = React;

  var _setOpen = null;

  window.openHuellitasModal = function () {
    if (_setOpen) _setOpen(true);
  };

  function HuellitasModal() {
    const [open, setOpen] = useState(false);

    useEffect(function () {
      _setOpen = setOpen;
      return function () { _setOpen = null; };
    }, []);

    useEffect(function () {
      function onKey(e) { if (e.key === 'Escape') setOpen(false); }
      if (open) {
        document.addEventListener('keydown', onKey);
        document.body.style.overflow = 'hidden';
      } else {
        document.body.style.overflow = '';
      }
      return function () {
        document.removeEventListener('keydown', onKey);
        document.body.style.overflow = '';
      };
    }, [open]);

    if (!open) return null;

    return (
      <div
        onClick={function () { setOpen(false); }}
        style={{
          position: 'fixed', inset: 0,
          background: 'rgba(0,0,0,.78)',
          zIndex: 99999,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: '20px',
          animation: 'hm-fade-in .18s ease'
        }}
      >
        <style>{`
          @keyframes hm-fade-in { from { opacity:0 } to { opacity:1 } }
          @keyframes hm-slide-in { from { opacity:0; transform:scale(.94) } to { opacity:1; transform:scale(1) } }
        `}</style>

        <div
          onClick={function (e) { e.stopPropagation(); }}
          style={{
            position: 'relative',
            maxWidth: 680,
            width: '100%',
            maxHeight: '90vh',
            overflowY: 'auto',
            borderRadius: 16,
            background: 'white',
            boxShadow: '0 24px 64px rgba(0,0,0,.5)',
            animation: 'hm-slide-in .22s ease'
          }}
        >
          {/* Close button */}
          <button
            onClick={function () { setOpen(false); }}
            style={{
              position: 'sticky', top: 10, float: 'right', marginRight: 10,
              zIndex: 2,
              background: 'rgba(0,0,0,.55)', border: 'none', borderRadius: '50%',
              width: 34, height: 34, color: 'white', fontSize: 20, fontWeight: 300,
              cursor: 'pointer', lineHeight: '34px', textAlign: 'center',
              fontFamily: 'inherit', display: 'flex', alignItems: 'center', justifyContent: 'center'
            }}
          >×</button>

          <img
            src={(window.__resources && window.__resources.huellitasImg) || "uploads/4. BENEFICIOS ANIMAL ASSYST.png"}
            alt="Huellitas en Acción"
            style={{ width: '100%', display: 'block', borderRadius: '16px 16px 0 0' }}
          />

          {/* Donation section */}
          <DonationSection />
        </div>
      </div>
    );
  }

  function DonationSection() {
    const [copied, setCopied] = useState(false);

    function copyNumber() {
      var number = '3059234214';
      // Método robusto con fallback
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(number).then(function () {
          setCopied(true);
          setTimeout(function () { setCopied(false); }, 2200);
        }).catch(function () { fallbackCopy(number); });
      } else {
        fallbackCopy(number);
      }
    }

    function fallbackCopy(text) {
      var ta = document.createElement('textarea');
      ta.value = text;
      ta.style.position = 'fixed';
      ta.style.top = '-9999px';
      ta.style.left = '-9999px';
      document.body.appendChild(ta);
      ta.focus();
      ta.select();
      try {
        document.execCommand('copy');
        setCopied(true);
        setTimeout(function () { setCopied(false); }, 2200);
      } catch (err) {
        alert('Copia el número manualmente: ' + text);
      }
      document.body.removeChild(ta);
    }

    var whatsappMsg = encodeURIComponent('Hola, acabo de hacer una donación a Huellitas en Acción 🐾');
    var whatsappUrl = 'https://wa.me/qr/ENHY757VLOMSB1?text=' + whatsappMsg;

    return (
      <div style={{
        padding: '24px 28px 28px',
        background: 'white',
        borderRadius: '0 0 16px 16px',
        borderTop: '1px solid #EEF2F7'
      }}>
        {/* Nequi donation box */}
        <div style={{
          border: '2px solid #1A56C4',
          borderRadius: 14,
          padding: '20px 22px',
          background: 'linear-gradient(135deg, #f0f5ff 0%, #fff 100%)',
          display: 'flex',
          flexDirection: 'column',
          gap: 14
        }}>
          {/* Header */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            {/* Nequi logo */}
            <div style={{
              width: 52, height: 52, borderRadius: 12, flexShrink: 0,
              background: 'white',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 2px 10px rgba(108,10,201,.18)',
              border: '1.5px solid #ede9fe',
              overflow: 'hidden'
            }}>
              <img
                src={(window.__resources && window.__resources.nequiImg) || "uploads/pasted-1781317152274-0.png"}
                alt="Nequi"
                style={{ width: 44, height: 44, objectFit: 'contain' }}
              />
            </div>
            <div>
              <div style={{ fontWeight: 700, fontSize: 20, color: '#1A56C4', lineHeight: 1.2 }}>
                Dona a Huellitas en Acción
              </div>
              <div style={{ fontSize: 16, color: '#64748b', marginTop: 4 }}>Transferencia por Nequi</div>
            </div>
          </div>

          {/* Number + copy button */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10,
            background: '#EEF2F7', borderRadius: 10, padding: '12px 16px'
          }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#1A56C4" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
              <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8 19.79 19.79 0 01.1 2.18 2 2 0 012.07.1h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 14.92z"/>
            </svg>
            <span style={{ fontWeight: 700, fontSize: 21, color: '#1e293b', letterSpacing: '0.04em', flex: 1 }}>
              305 923 4214
            </span>
            <button
              onClick={copyNumber}
              style={{
                background: copied ? '#22c55e' : '#F5A623',
                border: 'none', borderRadius: 8,
                padding: '9px 16px', cursor: 'pointer',
                fontFamily: 'inherit', fontWeight: 700, fontSize: 14,
                color: copied ? 'white' : '#1e293b',
                transition: 'background .2s, color .2s',
                display: 'flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap'
              }}
            >
              {copied
                ? <><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg> ¡Copiado!</>
                : <><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> Copiar número</>
              }
            </button>
          </div>

          {/* Important note */}
          <div style={{
            display: 'flex', gap: 8, alignItems: 'flex-start',
            background: '#fffbeb', border: '1px solid #fcd34d',
            borderRadius: 9, padding: '10px 14px'
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#d97706" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 1 }}>
              <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
            </svg>
            <p style={{ fontSize: 15, color: '#92400e', lineHeight: 1.6, margin: 0 }}>
              <strong>Importante:</strong> al hacer tu transferencia, coloca en la descripción/concepto:{' '}
              <strong>Donación Huellitas</strong> — para que podamos identificar tu aporte.
            </p>
          </div>
        </div>

        {/* WhatsApp comprobante card */}
        <div style={{
          marginTop: 16,
          borderRadius: 14,
          overflow: 'hidden',
          border: '2px solid #25D366',
          background: 'linear-gradient(155deg, #f0fff6 0%, #fff 60%)'
        }}>
          {/* Green header bar */}
          <div style={{
            background: 'linear-gradient(90deg, #128C7E 0%, #25D366 100%)',
            padding: '13px 18px',
            display: 'flex', alignItems: 'center', gap: 10
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: '50%',
              background: 'rgba(255,255,255,.18)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0
            }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
                <path d="M12 0C5.373 0 0 5.373 0 12c0 2.123.554 4.115 1.522 5.845L.057 23.427a.75.75 0 00.916.916l5.582-1.465A11.945 11.945 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.75a9.71 9.71 0 01-4.95-1.355l-.354-.212-3.668.963.98-3.576-.23-.368A9.712 9.712 0 012.25 12C2.25 6.615 6.615 2.25 12 2.25S21.75 6.615 21.75 12 17.385 21.75 12 21.75z"/>
              </svg>
            </div>
            <div>
              <div style={{ fontWeight: 700, color: 'white', fontSize: 16, lineHeight: 1.2 }}>Envía tu comprobante</div>
              <div style={{ color: 'rgba(255,255,255,.85)', fontSize: 13, marginTop: 3 }}>Confirma tu donación por WhatsApp 🐾</div>
            </div>
          </div>

          {/* Body: QR centrado */}
          <div style={{ padding: '20px 22px 22px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>

            {/* QR code */}
            <div style={{
              width: 290, height: 290,
              borderRadius: 18,
              overflow: 'hidden',
              border: '4px solid #25D366',
              boxShadow: '0 10px 32px rgba(37,211,102,.32)',
              background: 'white',
              padding: 10
            }}>
              <img
                src={(window.__resources && window.__resources.qrWhatsapp) || "uploads/pasted-1781317193605-0.png"}
                alt="QR WhatsApp ASSYST"
                style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }}
              />
            </div>

            {/* Instruction text */}
            <div style={{ textAlign: 'center' }}>
              <p style={{ fontSize: 16, color: '#1e293b', fontWeight: 700, lineHeight: 1.5, margin: 0 }}>
                Escanea el código QR para enviar tu comprobante
              </p>
              <p style={{ fontSize: 15, color: '#64748b', marginTop: 8, lineHeight: 1.55 }}>
                o escribe al número <strong style={{ color: '#128C7E', fontSize: 16 }}>305 923 4214</strong>
              </p>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.HuellitasModal = HuellitasModal;
})();