/* Product card — 3 styles driven by prop `variant` */

const ProductCard = ({ product, onNavigate, onAdd, variant = 'industrial', specStyle = 'pills-filled', priceStyle = 'stacked', priority, cardImage = 'clean', cardSpecs = 'show', cardHover = 'lift', cardPrice = 'stacked' }) => {
  const { ARS } = window.RC_DATA;
  const [hovering, setHovering] = React.useState(false);
  const [adding, setAdding] = React.useState(false);
  const discount = product.was ? Math.round((product.was - product.price) / product.was * 100) : 0;
  // Format: remove voltage (220v / 380V), lowercase, capitalize first letter,
  // uppercase brand "Powerclean" and product codes (e.g. LT590, K-160, NX180).
  const formatName = (raw) => {
    if (!raw) return '';
    let s = raw.replace(/\b\d{2,3}\s*v\b/gi, '').replace(/\s+/g, ' ').trim();
    s = s.toLowerCase();
    s = s.charAt(0).toUpperCase() + s.slice(1);
    s = s.replace(/\bpowerclean\b/gi, 'Powerclean');
    // alphanumeric codes: letters+digits OR digits+letters, optional hyphen
    s = s.replace(/\b[a-z]+\d+[a-z0-9-]*\b/gi, (m) => m.toUpperCase());
    s = s.replace(/\b\d+[a-z]+[a-z0-9-]*\b/gi, (m) => m.toUpperCase());
    return s;
  };
  const displayName = formatName(product.name);

  const handleAdd = (e) => {
    e.preventDefault();e.stopPropagation();
    onAdd(product);
    setAdding(true);
    setTimeout(() => setAdding(false), 1500);
    const btn = e?.currentTarget;
    if (btn?.animate) {
      btn.animate(
        [
          { transform: 'scale(1)', offset: 0 },
          { transform: 'scale(1.3)', offset: 0.4 },
          { transform: 'scale(0.94)', offset: 0.7 },
          { transform: 'scale(1)', offset: 1 },
        ],
        { duration: 800, easing: 'cubic-bezier(.34, 1.56, .64, 1)' }
      );
    }
  };

  // Key technical specs (fallback to realistic dummies based on category)
  const specs = product.specs || {};
  const voltaje = specs['Voltaje'] || specs['Tensión'] || specs['Alimentación'] || '220V';
  const bares = specs['Presión'] || specs['Bares'] || specs['Presion'] || '150 bar';
  const caudal = specs['Caudal'] || specs['Flujo'] || '450 L/h';
  const transferPrice = Math.round(product.price * 0.85); // 10% descuento por transferencia

  /* ───── SITE (matches current rcpowerclean.com.ar) ───── */
  if (variant === 'site') {
    const isBestseller = product.badges?.some((b) => /más vendido|top/i.test(b));
    return (
      <a href="#" onClick={(e) => {e.preventDefault();onNavigate(`/producto/${product.id}`);}}
      onMouseEnter={() => setHovering(true)} onMouseLeave={() => setHovering(false)}
      style={{
        display: 'flex', flexDirection: 'column',
        background: '#EEEEF6',
        borderRadius: 14,
        padding: 18,
        transition: 'transform .25s ease, box-shadow .25s ease',
        transform: hovering ? 'translateY(-3px)' : 'translateY(0)',
        boxShadow: hovering ? '0 16px 36px rgba(10,26,47,0.12)' : '0 1px 0 rgba(10,26,47,0.02)',
        position: 'relative',
        minHeight: 470
      }}>
        {/* Top badges row */}
        <div style={{ position: 'absolute', top: 14, left: 14, right: 14, display: 'flex', justifyContent: 'space-between', zIndex: 2 }}>
          {isBestseller ?
          <span style={{ background: '#0B1220', color: '#fff', fontSize: 11, fontWeight: 600, padding: '4px 10px', borderRadius: 4 }}>Más vendido</span> :
          <span />}
          {product.was &&
          <span style={{ background: 'var(--accent)', color: '#fff', fontSize: 11, fontWeight: 600, padding: '4px 10px', borderRadius: 4 }}>Oferta</span>
          }
        </div>

        {/* Product photo area */}
        <div style={{
          aspectRatio: '1/1', background: '#FFFFFF',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          marginBottom: 14, marginTop: 14,
          position: 'relative', borderRadius: 10, overflow: 'hidden'
        }}>
          {/* Centered placeholder fallback */}
          <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', color: 'rgba(11,18,32,0.3)', pointerEvents: 'none' }}>
            <Icon name="pressure" size={48} strokeWidth={1.2} />
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: 8 }}>{product.brand}</span>
          </div>
          {product.image &&
          <img src={product.image} alt="" loading="lazy" onError={(e) => {e.currentTarget.style.display = 'none';}}
          style={{ position: 'relative', maxWidth: '90%', maxHeight: '90%', objectFit: 'contain', objectPosition: 'center', transition: 'transform .3s', transform: hovering ? 'scale(1.04)' : 'scale(1)' }} />
          }
          {/* Voltaje chip bottom-right */}
          <span className="mono" style={{
            position: 'absolute', bottom: 8, right: 8,
            background: 'rgba(11,18,32,0.88)', color: '#fff',
            fontSize: 10, fontWeight: 600, letterSpacing: '0.05em',
            padding: '4px 8px', borderRadius: 4
          }}>{voltaje}</span>
        </div>

        {/* Spec row: BAR · CAUDAL · VOLT */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
          background: '#fff', border: '1px solid rgba(10,26,47,0.08)',
          borderRadius: 8, padding: '8px 4px', marginBottom: 12
        }}>
          {[
          { label: 'Presión', value: bares },
          { label: 'Caudal', value: caudal },
          { label: 'Tensión', value: voltaje }].
          map((s, i) =>
          <div key={s.label} style={{
            padding: '2px 8px',
            borderRight: i < 2 ? '1px solid rgba(10,26,47,0.08)' : 'none',
            textAlign: 'center'
          }}>
              <div className="mono" style={{ fontSize: 9, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-4)' }}>{s.label}</div>
              <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink)', marginTop: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{s.value}</div>
            </div>
          )}
        </div>

        {/* Info */}
        <h3 style={{
          fontSize: 15, fontWeight: 700,
          lineHeight: 1.3, color: 'var(--ink)',
          display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
          overflow: 'hidden', minHeight: 40,
          letterSpacing: '-0.005em'
        }}>
          {displayName}
        </h3>
        <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 6 }}>
          {product.sub || product.brand}
        </div>

        <div style={{ marginTop: 'auto', paddingTop: 6 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, flexWrap: 'wrap' }}>
            <div style={{ fontSize: 20, fontWeight: 800, color: 'var(--ink)', letterSpacing: '-0.01em' }}>
              {ARS(product.price)}
            </div>
            {product.was &&
            <div style={{ fontSize: 12, color: 'var(--ink-4)', textDecoration: 'line-through' }}>
                {ARS(product.was)}
              </div>
            }
          </div>
          {/* Transferencia */}
          <div style={{
            marginTop: 4,
            display: 'inline-flex', alignItems: 'baseline', gap: 6,
            fontSize: 12
          }}>
            <span style={{ fontWeight: 700, color: '#a00e0c' }}>{ARS(transferPrice)}</span>
            <span className="mono" style={{ fontSize: 10, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>transferencia −15%</span>
          </div>
          <div style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 2 }}>
            ó 6 x {ARS(Math.round(product.price / 6))} sin interés
          </div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 10 }}>
            <button onClick={handleAdd} className={adding ? 'btn-add-zoom' : ''} style={{
              fontSize: 11, fontWeight: 600, color: 'var(--ink-3)',
              display: 'inline-flex', alignItems: 'center', gap: 6
            }}>
              <Icon name="cart" size={13} /> {adding ? 'Agregado' : 'Agregar'}
            </button>
            <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--accent)', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
              Ver más <Icon name="arrowRight" size={13} />
            </span>
          </div>
        </div>
      </a>);

  }

  if (variant === 'editorial') {
    // Editorial: no-border, larger image, emphasis on type
    return (
      <a href="#" onClick={(e) => {e.preventDefault();onNavigate(`/producto/${product.id}`);}}
      onMouseEnter={() => setHovering(true)} onMouseLeave={() => setHovering(false)}
      style={{ display: 'block' }}>
        <div style={{
          aspectRatio: '1/1',
          background: 'var(--bg-2)',
          borderRadius: 'var(--r-md)',
          position: 'relative',
          overflow: 'hidden',
          transition: 'transform .4s ease',
          transform: hovering ? 'scale(1.01)' : 'scale(1)'
        }}>
          {/* Centered placeholder fallback */}
          <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', color: 'var(--ink-4)', opacity: 0.5, pointerEvents: 'none' }}>
            <Icon name="pressure" size={56} strokeWidth={1.2} />
            <span className="mono" style={{ fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: 10 }}>{product.brand}</span>
          </div>
          {product.image &&
          <img src={product.image} alt="" loading="lazy" onError={(e) => {e.currentTarget.style.display = 'none';}}
          style={{ position: 'absolute', inset: '10%', width: '80%', height: '80%', objectFit: 'contain', objectPosition: 'center', transition: 'transform .4s ease', transform: hovering ? 'scale(1.05)' : 'scale(1)' }} />
          }
          <div style={{ position: 'absolute', top: 12, left: 12, display: 'flex', flexDirection: 'column', gap: 6, zIndex: 2 }}>
            {product.badges?.map((b) => <Badge key={b} variant={b.includes('%') ? 'red' : 'dark'}>{b}</Badge>)}
          </div>
          <button onClick={handleAdd} className={adding ? 'btn-add-zoom' : ''}
          style={{
            position: 'absolute', bottom: 12, right: 12,
            padding: '10px 14px', background: 'var(--ink)', color: '#fff',
            borderRadius: 6, fontSize: 12, fontWeight: 600,
            display: 'flex', alignItems: 'center', gap: 6,
            opacity: hovering ? 1 : 0, transform: hovering ? 'scale(1)' : 'scale(0.6)',
            transformOrigin: 'center',
            transition: 'opacity .2s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1)'
          }}>
            {adding ? <><Icon name="check" size={13} /> Agregado</> : <><Icon name="cart" size={13} /> Agregar</>}
          </button>
        </div>
        <div style={{ padding: '14px 4px 0' }}>
          <h3 style={{ fontSize: 16, fontWeight: 500, marginTop: 4, lineHeight: 1.3, color: 'var(--ink)', letterSpacing: '-0.01em' }}>
            {displayName}
          </h3>
          <div style={{ marginTop: 10, display: 'flex', alignItems: 'baseline', gap: 8 }}>
            <span style={{ fontSize: 18, fontWeight: 700 }}>{ARS(product.price)}</span>
            {product.was && <span className="t-xs" style={{ textDecoration: 'line-through' }}>{ARS(product.was)}</span>}
          </div>
        </div>
      </a>);

  }

  // INDUSTRIAL (default): clean Mercado Libre-style card
  const imageBg = cardImage === 'tinted' ? '#F1F2F4' : cardImage === 'soft' ? '#FAF8F5' : '#FFFFFF';
  const hoverLift = cardHover === 'lift' && hovering;
  const hoverZoom = cardHover === 'zoom' && hovering;
  return (
    <a href="#" onClick={(e) => {e.preventDefault();onNavigate(`/producto/${product.id}`);}}
    onMouseEnter={() => setHovering(true)} onMouseLeave={() => setHovering(false)}
    style={{
      display: 'block', background: 'var(--surface)', borderRadius: 'var(--r-md)',
      overflow: 'hidden',
      transition: 'box-shadow .2s, transform .2s',
      transform: hoverLift ? 'translateY(-3px)' : 'translateY(0)',
      boxShadow: hovering && cardHover !== 'none' ? '0 6px 22px rgba(10,26,47,0.10)' : '0 1px 0 rgba(10,26,47,0.04)'
    }}>
      {/* Image */}
      <div style={{ aspectRatio: '1/1', position: 'relative', background: imageBg, overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {/* Centered placeholder fallback */}
        <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: 24, color: 'var(--ink-4)', pointerEvents: 'none' }}>
          <Icon name="pressure" size={42} strokeWidth={1.2} />
          <div className="mono" style={{ fontSize: 9, letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: 8, opacity: 0.6 }}>{product.brand}</div>
        </div>
        {product.image &&
        <img src={product.image} alt="" loading="lazy" onError={(e) => {e.currentTarget.style.display = 'none';}}
        style={{ position: 'relative', maxWidth: '100%', maxHeight: '100%', width: 'auto', height: '100%', objectFit: 'contain', objectPosition: 'center', padding: 16, transition: 'transform .3s', transform: hoverZoom ? 'scale(1.08)' : hoverLift ? 'scale(1.04)' : 'scale(1)' }} />
        }
      </div>

      {/* Info */}
      <div style={{ padding: '0 14px 18px' }}>
        {/* Title — 2-line clamp */}
        <h3 style={{
          fontSize: 14, fontWeight: 400, color: 'var(--ink-2)',
          display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
          overflow: 'hidden', minHeight: 36, letterSpacing: "0.1px", lineHeight: "1.3"
        }}>
          {displayName}
        </h3>

        {/* Tech specs — hidrolavadoras: BAR · L/min · V */}
        {product.cat === 'hidro' && cardSpecs === 'show' && specStyle !== 'hidden' && (() => {
          const items = [
          { v: String(bares).replace(/\s*bar\s*$/i, ''), u: 'BAR' },
          { v: String(caudal).replace(/\s*l\/(min|h)\s*$/i, ''), u: 'L/min' },
          { v: String(voltaje).replace(/v\s*$/i, ''), u: 'V' }];

          if (specStyle === 'inline-dot') {
            return (
              <div style={{ marginTop: 0, marginBottom: 22, fontSize: 13, color: 'var(--ink-2)', display: 'flex', alignItems: 'baseline', gap: 6, flexWrap: 'wrap' }}>
                {items.map((s, i) =>
                <React.Fragment key={s.u}>
                    <span><strong style={{ fontWeight: 700, color: 'var(--ink)' }}>{s.v}</strong>{' '}<span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{s.u}</span></span>
                    {i < items.length - 1 && <span style={{ color: 'var(--ink-4)' }}>·</span>}
                  </React.Fragment>
                )}
              </div>);

          }
          if (specStyle === 'stacked') {
            return (
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, marginTop: 0, marginBottom: 22 }}>
                {items.map((s) =>
                <div key={s.u} style={{
                  background: 'var(--bg-2)', textAlign: 'center',
                  padding: '6px 4px', borderRadius: 6
                }}>
                    <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink)', lineHeight: 1 }}>{s.v}</div>
                    <div className="mono" style={{ fontSize: 9, color: 'var(--ink-3)', letterSpacing: '0.05em', marginTop: 2 }}>{s.u}</div>
                  </div>
                )}
              </div>);

          }
          // pills-filled (default) and pills-outline
          const isOutline = specStyle === 'pills-outline';
          return (
            <div style={{ display: 'flex', gap: 4, marginTop: 0, marginBottom: 22, flexWrap: 'nowrap' }}>
              {items.map((s) =>
              <span key={s.u} style={{
                display: 'inline-flex', alignItems: 'baseline', gap: 2,
                background: isOutline ? 'transparent' : 'var(--bg-2)',
                border: isOutline ? '1px solid var(--line-2)' : '1px solid transparent',
                color: 'var(--ink-2)',
                fontSize: 12, padding: '3px 7px', borderRadius: 4,
                whiteSpace: 'nowrap', flex: '0 0 auto', minWidth: 0
              }}>
                  <strong style={{ fontWeight: 700, color: 'var(--ink)' }}>{s.v}</strong>
                  <span className="mono" style={{ fontSize: 10, letterSpacing: '0.04em', color: 'var(--ink-3)' }}>{s.u}</span>
                </span>
              )}
            </div>);

        })()}

        {/* Price block — variants driven by `priceStyle` */}
        {(() => {
          const installment = Math.round(product.price / 12);
          const wasPrice = product.was;
          const offPct = discount;

          // ── BANK-FIRST: transfer price highlighted as headline
          if (priceStyle === 'bank') {
            return (
              <div>
                {wasPrice && (
                  <div style={{ fontSize: 12, fontWeight: 400, color: 'var(--ink-4)', textDecoration: 'line-through', marginTop: 8 }}>
                    {ARS(wasPrice)}
                  </div>
                )}
                {/* Transfer headline */}
                <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em', color: '#a00e0c', lineHeight: 1.1, marginTop: wasPrice ? 2 : 8 }}>
                  {ARS(transferPrice)}
                </div>
                <div style={{ fontSize: 11, fontWeight: 600, color: '#a00e0c', letterSpacing: '0.04em', textTransform: 'uppercase', marginTop: 2 }}>
                  · Transferencia · 15% OFF
                </div>
                {/* Regular price */}
                <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink-2)', marginTop: 8 }}>
                  Lista: <span style={{ fontWeight: 700, color: 'var(--ink)' }}>{ARS(product.price)}</span>
                </div>
                <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 2 }}>
                  12 cuotas sin interés de {ARS(installment)}
                </div>
              </div>
            );
          }

          // ── TWO-COL: list price (left) | transfer (right) in a card
          if (priceStyle === 'two-col') {
            return (
              <div>
                {wasPrice && (
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 8 }}>
                    <span style={{ fontSize: 13, fontWeight: 400, color: 'var(--ink-4)', textDecoration: 'line-through' }}>{ARS(wasPrice)}</span>
                    {offPct > 0 && <span style={{ fontSize: 13, fontWeight: 500, color: '#a00e0c' }}>{offPct}% OFF</span>}
                  </div>
                )}
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: wasPrice ? 4 : 10, alignItems: 'stretch' }}>
                  <div>
                    <div style={{ fontSize: 10, fontFamily: '"Galano", var(--font-sans)', fontWeight: 500, color: 'var(--ink-3)', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 2 }}>Precio</div>
                    <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--ink)', letterSpacing: '-0.01em', lineHeight: 1.1 }}>{ARS(product.price)}</div>
                  </div>
                  <div style={{ paddingLeft: 10, borderLeft: '1px solid var(--line)' }}>
                    <div style={{ fontSize: 10, fontFamily: '"Galano", var(--font-sans)', fontWeight: 500, color: '#a00e0c', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 2 }}>Transf. −15%</div>
                    <div style={{ fontSize: 18, fontWeight: 700, color: '#a00e0c', letterSpacing: '-0.01em', lineHeight: 1.1 }}>{ARS(transferPrice)}</div>
                  </div>
                </div>
                <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 6 }}>
                  12 cuotas sin interés de {ARS(installment)}
                </div>
              </div>
            );
          }

          // ── MINIMAL: just price + cuotas
          if (priceStyle === 'minimal') {
            return (
              <div>
                <div style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.01em', color: 'var(--ink)', lineHeight: 1.1, marginTop: 8 }}>
                  {ARS(product.price)}
                </div>
                <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 4 }}>
                  12 cuotas sin interés de {ARS(installment)}
                </div>
              </div>
            );
          }

          // ── BIG: oversized price + bold cuotas
          if (priceStyle === 'big') {
            return (
              <div>
                {wasPrice && (
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 6 }}>
                    <span style={{ fontSize: 12, fontWeight: 400, color: 'var(--ink-4)', textDecoration: 'line-through' }}>{ARS(wasPrice)}</span>
                    {offPct > 0 && <span style={{ fontSize: 12, fontWeight: 600, color: '#a00e0c' }}>{offPct}% OFF</span>}
                  </div>
                )}
                <div style={{ fontSize: 30, fontWeight: 800, letterSpacing: '-0.02em', color: 'var(--ink)', lineHeight: 1.05, marginTop: wasPrice ? 0 : 8 }}>
                  {ARS(product.price)}
                </div>
                <div style={{ fontSize: 14, color: '#a00e0c', fontWeight: 600, marginTop: 4 }}>
                  12 cuotas sin interés de {ARS(installment)}
                </div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>
                  ó {ARS(transferPrice)} por transferencia
                </div>
              </div>
            );
          }

          // ── STACKED (default)
          return (
            <div>
              {wasPrice && (
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 8 }}>
                  <span style={{ fontSize: 13, fontWeight: 400, color: 'var(--ink-4)', textDecoration: 'line-through' }}>{ARS(wasPrice)}</span>
                  {offPct > 0 && <span style={{ fontSize: 13, fontWeight: 500, color: '#a00e0c' }}>{offPct}% OFF</span>}
                </div>
              )}
              <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.01em', color: 'var(--ink)', lineHeight: 1.15, marginTop: wasPrice ? 2 : 10 }}>
                {ARS(product.price)}
              </div>
              <div style={{ fontSize: 15, color: '#a00e0c', fontWeight: 400, marginTop: 4 }}>
                12 cuotas sin interés de {ARS(installment)}
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 6, flexWrap: 'wrap' }}>
                <span style={{ fontSize: 13, fontWeight: 400, color: 'var(--ink-4)' }}>{ARS(transferPrice)}</span>
                <span style={{ fontSize: 13, fontWeight: 500, color: '#a00e0c' }}>Transferencia 15% OFF</span>
              </div>
            </div>
          );
        })()}

        {/* Llega gratis hoy badge */}
        <div style={{ marginTop: 10 }}>
          <span style={{
            display: 'inline-block',
            background: '#a00e0c', color: '#fff',
            fontSize: 12, fontWeight: 600,
            padding: '3px 10px', borderRadius: 4
          }}>
            Llega gratis hoy
          </span>
        </div>
      </div>
    </a>);

};

Object.assign(window, { ProductCard });