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);
        });
    }
});