class GlassmorphicBackground {
    constructor() {
        this.initialized = new Set();
        this.init();
    }

    init() {
        document.querySelectorAll('[data-glass-bg="true"]').forEach(element => {
            if (this.initialized.has(element)) return;
            
            // Set base styles
            element.style.position = 'relative';
            element.style.overflow = 'hidden';
            
            // Create base gradient
            this.createBaseGradient(element);
            
            // Create mesh overlay
            this.createMeshOverlay(element);
            
            // Create glass orbs
            this.createGlassOrbs(element);
            
            this.initialized.add(element);
        });
    }

    createBaseGradient(container) {
        const gradient = document.createElement('div');
        Object.assign(gradient.style, {
            position: 'absolute',
            inset: '0',
            background: 'linear-gradient(130deg, rgb(49, 46, 129) 0%, rgb(88, 28, 135) 50%, rgb(112, 26, 117) 100%)',
            zIndex: '0'
        });
        container.appendChild(gradient);
    }

    createMeshOverlay(container) {
        const mesh = document.createElement('div');
        Object.assign(mesh.style, {
            position: 'absolute',
            inset: '0',
            background: 'radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%)',
            zIndex: '1'
        });
        container.appendChild(mesh);
    }

    createGlassOrbs(container) {
        const orbsConfig = [
            {
                position: { top: '10%', left: '10%' },
                gradient: 'linear-gradient(130deg, rgba(236, 72, 153, 0.3), rgba(139, 92, 246, 0.3))',
                animation: 'floatOrb1'
            },
            {
                position: { bottom: '10%', right: '10%' },
                gradient: 'linear-gradient(130deg, rgba(59, 130, 246, 0.3), rgba(34, 211, 238, 0.3))',
                animation: 'floatOrb2'
            }
        ];

        orbsConfig.forEach((config, index) => {
            const orb = document.createElement('div');
            Object.assign(orb.style, {
                position: 'absolute',
                width: '300px',
                height: '300px',
                borderRadius: '50%',
                background: config.gradient,
                filter: 'blur(40px)',
                animation: `${config.animation} 20s infinite ease-in-out`,
                zIndex: '1',
                ...config.position
            });
            container.appendChild(orb);
        });
    }
}

// Add animations
const style = document.createElement('style');
style.textContent = `
    @keyframes floatOrb1 {
        0%, 100% { transform: translate(0, 0) scale(1); }
        25% { transform: translate(50px, 20px) scale(1.1); }
        50% { transform: translate(0, 50px) scale(0.95); }
        75% { transform: translate(-30px, 20px) scale(1.05); }
    }

    @keyframes floatOrb2 {
        0%, 100% { transform: translate(0, 0) scale(1); }
        25% { transform: translate(-40px, -20px) scale(1.1); }
        50% { transform: translate(-10px, -40px) scale(0.95); }
        75% { transform: translate(30px, -20px) scale(1.05); }
    }

    [data-glass-bg="true"] {
        background-color: rgb(49, 46, 129);
        transition: background-color 0.3s ease;
    }

    [data-glass-bg="true"] > * {
        position: relative;
        z-index: 2;
    }

    [data-glass-bg="true"]::before {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(
            45deg,
            transparent 0%,
            rgba(255, 255, 255, 0.03) 100%
        );
        z-index: 1;
    }
`;
document.head.appendChild(style);

// Initialize
document.addEventListener('DOMContentLoaded', () => {
    window.glassBg = new GlassmorphicBackground();
});

// Bricks Builder compatibility
if (window.jQuery) {
    jQuery(document).on('bricks-ajax-load-content-complete', () => {
        window.glassBg?.init();
    });
}