Bricks Builder templates with unmatched quality

document.addEventListener('DOMContentLoaded', function() {
    // Verificar si estamos en la página principal
    if (window.location.pathname === '/' || window.location.pathname === '/index.php') {
        const styles = `
            .bf-installment-banner {
                position: fixed;
                top: 24px;
                left: 24px;
                background: rgba(20, 20, 20, 0.95);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                border-radius: 14px;
                padding: 12px 18px;
                color: white;
                font-family: 'Inter', sans-serif;
                z-index: 1000;
                opacity: 0;
                transform: translateY(-120%);
                transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
                display: flex;
                flex-direction: column;
                gap: 8px;
                width: fit-content;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
                visibility: hidden;
            }

            .bf-installment-banner.show {
                transform: translateY(0);
                opacity: 1;
                visibility: visible;
            }

            .bf-installment-banner-content {
                display: flex;
                align-items: center;
                gap: 10px;
                white-space: nowrap;
                padding-right: 16px;
            }

            .bf-new-badge {
                background: #10B981;
                padding: 2px 8px;
                border-radius: 6px;
                font-size: 11px;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 0.03em;
                color: white;
                display: inline-flex;
                align-items: center;
                height: 18px;
            }

            .bf-message-wrapper {
                display: inline-flex;
                align-items: center;
                gap: 8px;
            }

            .bf-installment-text {
                font-size: 14px;
                font-weight: 400;
                letter-spacing: -0.01em;
                color: rgba(255, 255, 255, 0.95);
                font-family: 'Inter', sans-serif;
            }

            .bf-close-button {
                position: absolute;
                right: 12px;
                top: 50%;
                transform: translateY(-50%);
                width: 20px;
                height: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                border-radius: 50%;
                background: transparent;
                transition: all 0.2s ease;
                border: none;
                padding: 0;
                color: rgba(255, 255, 255, 0.9);
            }

            .bf-close-button:hover {
                background: rgba(255, 255, 255, 0.15);
                color: white;
            }

            .bf-close-button svg {
                width: 14px;
                height: 14px;
                stroke: currentColor;
                stroke-width: 2.5;
            }

            .bf-progress-bar {
                width: 100%;
                height: 2px;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 1px;
                overflow: hidden;
            }

            .bf-progress-bar-fill {
                width: 100%;
                height: 100%;
                background: #10B981;
                transform-origin: left;
                animation: shrink 20s linear forwards;
                will-change: transform;
            }

            @keyframes shrink {
                from { transform: scaleX(1); }
                to { transform: scaleX(0); }
            }

            @media (max-width: 768px) {
                .bf-installment-banner {
                    left: 16px;
                    right: 16px;
                    top: auto;
                    bottom: 24px;
                    transform: translateY(120%);
                    padding: 10px 14px;
                    width: calc(100% - 32px);
                    max-width: calc(100% - 32px);
                }

                .bf-installment-banner.show {
                    transform: translateY(0);
                }

                .bf-installment-text {
                    font-size: 13px;
                }

                .bf-new-badge {
                    padding: 1px 6px;
                    font-size: 10px;
                }
            }
        `;

        // Inyectar estilos de forma segura
        const styleSheet = document.createElement('style');
        styleSheet.textContent = styles;
        document.head.appendChild(styleSheet);

        // Create banner HTML
        const bannerHTML = `
            <div class="bf-installment-banner">
                <div class="bf-installment-banner-content">
                    <div class="bf-message-wrapper">
                        <span class="bf-new-badge">New</span>
                        <span class="bf-installment-text">Monthly payments available</span>
                    </div>
                    <button class="bf-close-button" aria-label="Close notification">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M18 6L6 18M6 6l12 12"/>
                        </svg>
                    </button>
                </div>
                <div class="bf-progress-bar">
                    <div class="bf-progress-bar-fill"></div>
                </div>
            </div>
        `;

        // Asegurar que los estilos están cargados antes de mostrar el banner
        requestAnimationFrame(() => {
            document.body.insertAdjacentHTML('beforeend', bannerHTML);
            const banner = document.querySelector('.bf-installment-banner');
            
            // Asegurar que el DOM está actualizado antes de mostrar
            requestAnimationFrame(() => {
                setTimeout(() => {
                    banner.classList.add('show');
                }, 500);
            });

            // Close button functionality
            const closeButton = banner.querySelector('.bf-close-button');
            closeButton.addEventListener('click', () => {
                banner.style.transition = 'transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease';
                banner.style.opacity = '0';
                banner.style.transform = `translateY(${window.innerWidth <= 768 ? '120%' : '-120%'})`;
                
                setTimeout(() => {
                    banner.remove();
                }, 500);
            });

            // Auto-remove after 20 seconds
            setTimeout(() => {
                if (banner.isConnected) {
                    banner.style.transition = 'transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease';
                    banner.style.opacity = '0';
                    banner.style.transform = `translateY(${window.innerWidth <= 768 ? '120%' : '-120%'})`;
                    
                    setTimeout(() => {
                        if (banner.isConnected) {
                            banner.remove();
                        }
                    }, 500);
                }
            }, 20000);
        });
    }
});

/**
 * FadeFlow Carousel v1.0.0
 * An automatic scrolling carousel component for Bricks Builder
 * Created by BricksFusion - https://bricksfusion.com
 */
(function() {
  class FadeFlowCarousel {
    constructor() {
      this.config = {
        speed: 30,
        direction: "left",
        imageGap: 20,
        borderRadius: 8,
        blurTheme: "dark",
        fadeWidth: 15,
        fadeOpacity: 0.95,
        overlayEnabled: true,
        overlayColor: "#000000",
        overlayOpacity: 0.8,
        heightMode: "custom",
        customHeight: 60,
        verticalPosition: "bottom"
      };
      
      this.init();
    }
    
    init() {
      // Initialize all carousels when DOM is ready
      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => this.findCarousels());
      } else {
        this.findCarousels();
      }
      
      // Resize carousels when window size changes
      window.addEventListener('resize', () => {
        this.carousels.forEach(carousel => {
          this.updateItemWidths(carousel);
        });
      });
    }
    
    findCarousels() {
      this.carousels = [];
      // Find all elements with data-fadeflow attribute
      document.querySelectorAll('[data-fadeflow]').forEach(container => {
        // Store original styles to preserve them
        const originalPosition = window.getComputedStyle(container).position;
        
        // Only set position relative if it's not already positioned
        if (originalPosition === 'static') {
          container.style.position = 'relative';
        }
        
        // Create carousel
        this.createCarousel(container);
        this.carousels.push(container);
      });
    }
    
    createCarousel(container) {
      // Create HTML structure if it doesn't exist
      if (!container.querySelector('.fadeflow-container')) {
        // Get configured images
        let images = [];
        
        // First try to get images from data-fadeflow-images attribute
        const imagesAttr = container.getAttribute('data-fadeflow-images');
        if (imagesAttr) {
          try {
            images = JSON.parse(imagesAttr);
          } catch (e) {
            console.error('Error parsing data-fadeflow-images:', e);
            // If there's an error, use default images
            images = ["https://images.pexels.com/photos/2662116/pexels-photo-2662116.jpeg?auto=compress&cs=tinysrgb&w=800","https://images.pexels.com/photos/1366957/pexels-photo-1366957.jpeg?auto=compress&cs=tinysrgb&w=800","https://images.pexels.com/photos/2559941/pexels-photo-2559941.jpeg?auto=compress&cs=tinysrgb&w=800","https://images.pexels.com/photos/2387873/pexels-photo-2387873.jpeg?auto=compress&cs=tinysrgb&w=800"];
          }
        } else {
          // If no attribute, use default images
          images = ["https://images.pexels.com/photos/2662116/pexels-photo-2662116.jpeg?auto=compress&cs=tinysrgb&w=800","https://images.pexels.com/photos/1366957/pexels-photo-1366957.jpeg?auto=compress&cs=tinysrgb&w=800","https://images.pexels.com/photos/2559941/pexels-photo-2559941.jpeg?auto=compress&cs=tinysrgb&w=800","https://images.pexels.com/photos/2387873/pexels-photo-2387873.jpeg?auto=compress&cs=tinysrgb&w=800"];
        }
        
        // Create carousel structure
        const fadeflowWrapper = document.createElement('div');
        fadeflowWrapper.className = 'fadeflow-wrapper';
        
        // Set wrapper to be positioned absolutely and cover the entire container
        // This ensures it doesn't affect the layout of other elements
        fadeflowWrapper.style.position = 'absolute';
        fadeflowWrapper.style.top = '0';
        fadeflowWrapper.style.left = '0';
        fadeflowWrapper.style.width = '100%';
        fadeflowWrapper.style.height = '100%';
        fadeflowWrapper.style.zIndex = '0'; // Set to bottom layer
        fadeflowWrapper.style.pointerEvents = 'none'; // Don't capture mouse events
        
        const carouselHTML = `
          <div class="fadeflow-container">
            <div class="fadeflow-lane">
              <div class="fadeflow-track"></div>
            </div>
            <div class="fadeflow-edge-fade left"></div>
            <div class="fadeflow-edge-fade right"></div>
          </div>
        `;
        
        fadeflowWrapper.innerHTML = carouselHTML;
        
        // Insert as first child to ensure it's behind other content
        if (container.firstChild) {
          container.insertBefore(fadeflowWrapper, container.firstChild);
        } else {
          container.appendChild(fadeflowWrapper);
        }
        
        // Apply styles without modifying original container dimensions
        this.applyStyles(container, fadeflowWrapper);
        
        // Create image track
        this.createTrack(container, images);
      }
    }
    
    createTrack(container, images) {
      if (!images || images.length === 0) {
        // If no images, use defaults
        images = ["https://images.pexels.com/photos/2662116/pexels-photo-2662116.jpeg?auto=compress&cs=tinysrgb&w=800","https://images.pexels.com/photos/1366957/pexels-photo-1366957.jpeg?auto=compress&cs=tinysrgb&w=800","https://images.pexels.com/photos/2559941/pexels-photo-2559941.jpeg?auto=compress&cs=tinysrgb&w=800","https://images.pexels.com/photos/2387873/pexels-photo-2387873.jpeg?auto=compress&cs=tinysrgb&w=800"];
      }
      
      const track = container.querySelector('.fadeflow-track');
      if (!track) return;
      
      // Clear track
      track.innerHTML = '';
      
      // Add images to track
      const items = [];
      const promises = [];
      
      images.forEach(url => {
        const item = document.createElement('div');
        item.className = 'fadeflow-item';
        item.style.borderRadius = `${this.config.borderRadius}px`;
        item.style.position = 'relative';
        item.style.pointerEvents = 'none'; // Don't capture mouse events
        
        const img = document.createElement('img');
        img.alt = '';
        img.style.pointerEvents = 'none'; // Don't capture mouse events
        
        // Preload image to verify it loads correctly
        const promise = new Promise(resolve => {
          img.onload = () => resolve(true);
          img.onerror = () => {
            // If image fails, use placeholder
            img.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23555555'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='sans-serif' font-size='24' fill='%23ffffff'%3EImage not found%3C/text%3E%3C/svg%3E";
            resolve(false);
          };
          img.src = url;
        });
        
        promises.push(promise);
        item.appendChild(img);
        
        // Add overlay if enabled
        if (this.config.overlayEnabled) {
          const overlay = document.createElement('div');
          overlay.className = 'fadeflow-overlay';
          overlay.style.position = 'absolute';
          overlay.style.top = '0';
          overlay.style.left = '0';
          overlay.style.width = '100%';
          overlay.style.height = '100%';
          overlay.style.backgroundColor = this.config.overlayColor;
          overlay.style.opacity = this.config.overlayOpacity;
          overlay.style.borderRadius = `${this.config.borderRadius}px`;
          overlay.style.pointerEvents = 'none';
          
          item.appendChild(overlay);
        }
        
        track.appendChild(item);
        items.push(item);
      });
      
      // After all images load or fail
      Promise.all(promises).then(() => {
        // Clone elements for continuous scrolling
        // Create enough clones to ensure smooth scrolling
        const totalClones = Math.max(16, Math.ceil(12 / images.length) * images.length);
        
        for (let i = 0; i < totalClones / images.length; i++) {
          items.forEach(item => {
            track.appendChild(item.cloneNode(true));
          });
        }
        
        // Update element dimensions
        this.updateItemWidths(container);
      });
    }
    
    updateItemWidths(container) {
      const fadeflowWrapper = container.querySelector('.fadeflow-wrapper');
      if (!fadeflowWrapper) return;
      
      const fadeflowContainer = fadeflowWrapper.querySelector('.fadeflow-container');
      const track = fadeflowWrapper.querySelector('.fadeflow-track');
      const items = track?.querySelectorAll('.fadeflow-item');
      if (!items || !items.length) return;
      
      // Get actual container dimensions
      const containerWidth = fadeflowContainer.offsetWidth;
      
      // Calculate container height based on settings
      let containerHeight;
      if (this.config.heightMode === 'custom') {
        containerHeight = (container.offsetHeight * this.config.customHeight) / 100;
      } else {
        containerHeight = fadeflowContainer.offsetHeight;
      }
      
      // Determine how many images to show (2.5 images)
      const imagesPerView = 2.5;
      const gapSize = this.config.imageGap;
      const gapSpace = gapSize * (imagesPerView - 1);
      
      // Calculate optimal width
      const itemWidth = Math.floor((containerWidth / imagesPerView) - (gapSpace / imagesPerView));
      
      // Use calculated height
      const itemHeight = Math.floor(containerHeight);
      
      // Apply dimensions to elements
      items.forEach(item => {
        item.style.width = `${itemWidth}px`;
        item.style.height = `${itemHeight}px`;
        item.style.margin = '0';
        item.style.padding = '0';
      });
      
      // Configure total width and gap
      const totalItems = items.length;
      const totalWidth = (itemWidth * totalItems) + (gapSize * (totalItems - 1));
      track.style.width = `${totalWidth}px`;
      track.style.gap = `${gapSize}px`;
      
      // Configure animation for continuous infinite loop
      const direction = this.config.direction === 'right' ? 'Right' : 'Left';
      
      // Calculate optimal duration based on image count
      const baseDuration = this.config.speed;
      const segmentFactor = Math.max(1, Math.min(items.length / 8, 2));
      const adjustedDuration = baseDuration * segmentFactor;
      
      // Only animate a quarter of the track for smoother looping
      track.style.animation = `scroll${direction} ${adjustedDuration}s linear infinite`;
    }
    
    applyStyles(container, fadeflowWrapper) {
      // Create style element if it doesn't exist
      if (!document.getElementById('fadeflow-styles')) {
        const styleEl = document.createElement('style');
        styleEl.id = 'fadeflow-styles';
        
        const fadeColor = this.config.blurTheme === 'dark'
          ? `rgba(0, 0, 0, ${this.config.fadeOpacity})`
          : `rgba(255, 255, 255, ${this.config.fadeOpacity})`;
        
        const fadeOutColor = this.config.blurTheme === 'dark'
          ? 'rgba(0, 0, 0, 0)'
          : 'rgba(255, 255, 255, 0)';
        
        const css = `
          @keyframes scrollLeft {
            0% { transform: translateX(0); }
            100% { transform: translateX(calc(-100% / 4)); }
          }
          
          @keyframes scrollRight {
            0% { transform: translateX(calc(-100% / 4)); }
            100% { transform: translateX(0); }
          }
          
          /* Estilos basados en el nuevo enfoque con wrapper absoluto */
          .fadeflow-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
            overflow: hidden;
          }
          
          .fadeflow-container {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            border-radius: ${this.config.borderRadius}px;
            margin: 0;
            padding: 0;
          }
          
          .fadeflow-lane {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            overflow: hidden;
            margin: 0;
            padding: 0;
          }
          
          .fadeflow-track {
            display: flex;
            gap: ${this.config.imageGap}px;
            height: 100%;
            min-width: 100%;
            margin: 0;
            padding: 0;
          }
          
          .fadeflow-item {
            height: 100%;
            flex: 0 0 auto;
            overflow: hidden;
            border-radius: ${this.config.borderRadius}px;
            transition: transform 0.3s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            position: relative;
            margin: 0;
            padding: 0;
            pointer-events: none;
          }
          
          .fadeflow-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.3s ease;
            pointer-events: none;
          }
          
          .fadeflow-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: ${this.config.overlayColor};
            opacity: ${this.config.overlayOpacity};
            border-radius: ${this.config.borderRadius}px;
            pointer-events: none;
          }
          
          .fadeflow-edge-fade {
            position: absolute;
            top: 0;
            height: 100%;
            width: ${this.config.fadeWidth}%;
            z-index: 3;
            pointer-events: none;
          }
          
          .fadeflow-edge-fade.left {
            left: 0;
            background: linear-gradient(to right, ${fadeColor} 0%, ${fadeOutColor} 100%);
          }
          
          .fadeflow-edge-fade.right {
            right: 0;
            background: linear-gradient(to left, ${fadeColor} 0%, ${fadeOutColor} 100%);
          }
        `;
        
        styleEl.textContent = css;
        document.head.appendChild(styleEl);
      }
      
      // Apply inline styles for fades
      const leftFade = fadeflowWrapper.querySelector('.fadeflow-edge-fade.left');
      const rightFade = fadeflowWrapper.querySelector('.fadeflow-edge-fade.right');
      
      if (leftFade && rightFade) {
        const fadeColor = this.config.blurTheme === 'dark'
          ? `rgba(0, 0, 0, ${this.config.fadeOpacity})`
          : `rgba(255, 255, 255, ${this.config.fadeOpacity})`;
        
        const fadeOutColor = this.config.blurTheme === 'dark'
          ? 'rgba(0, 0, 0, 0)'
          : 'rgba(255, 255, 255, 0)';
        
        leftFade.style.width = `${this.config.fadeWidth}%`;
        leftFade.style.background = `linear-gradient(to right, ${fadeColor} 0%, ${fadeOutColor} 100%)`;
        
        rightFade.style.width = `${this.config.fadeWidth}%`;
        rightFade.style.background = `linear-gradient(to left, ${fadeColor} 0%, ${fadeOutColor} 100%)`;
      }
      
      const fadeflowContainer = fadeflowWrapper.querySelector('.fadeflow-container');
      
      // Aplicar opciones de altura y posición al contenedor
      if (this.config.heightMode === 'custom') {
        // Para altura personalizada, aplicamos un porcentaje del contenedor original
        const containerHeight = container.offsetHeight;
        const customHeightPx = (containerHeight * this.config.customHeight) / 100;
        
        fadeflowContainer.style.height = `${customHeightPx}px`;
        fadeflowContainer.style.position = 'absolute';
        
        // Ajustar altura y posición correctamente
        switch (this.config.verticalPosition) {
          case 'top':
            fadeflowContainer.style.top = '0';
            fadeflowContainer.style.bottom = 'auto';
            fadeflowContainer.style.transform = 'none';
            break;
          case 'bottom':
            fadeflowContainer.style.bottom = '0';
            fadeflowContainer.style.top = 'auto';
            fadeflowContainer.style.transform = 'none';
            break;
          default: // center
            fadeflowContainer.style.top = '50%';
            fadeflowContainer.style.bottom = 'auto';
            fadeflowContainer.style.transform = 'translateY(-50%)';
            break;
        }
      } else {
        // Para altura completa
        fadeflowContainer.style.height = '100%';
        fadeflowContainer.style.position = 'relative';
        fadeflowContainer.style.transform = 'none';
      }
    }
  }
  
  // Initialize FadeFlow
  new FadeFlowCarousel();
})();