// PHP: Hook to add the falling snow effect to sections with the 'falling-snow' class
if ( ! function_exists( 'divibooster_add_falling_snow_to_section' ) ) {

	function divibooster_add_falling_snow_to_section( $output, $render_slug, $module ) {
		
		if ( is_string( $output ) && isset( $module->props['module_class'] ) && in_array( 'falling-snow', explode( ' ', $module->props['module_class'] ) ) ) {

			// Inject a container to hold the falling snow effect that will be managed by JavaScript
			$snow_container = '<div class="falling-snow-container"></div>';

			// Insert our falling snow container HTML just inside the main element
			$output = preg_replace( '/^(<div [^>]*>)/', '$1' . $snow_container, $output, 1 );
		}

		return $output;
	}

	add_filter( 'et_module_shortcode_output', 'divibooster_add_falling_snow_to_section', 10, 3 );

}

// CSS: Basic styles for the falling snow container and snowflakes
if (!function_exists('divibooster_falling_snow_css')) {
function divibooster_falling_snow_css() {
	?>
	<style>
		.falling-snow-container {
			position: absolute; 
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			overflow: hidden; 
			pointer-events: none; 
		}

		.snowflake {
			position: absolute;
			top: -10px;
			color: #fff;
			opacity: 0.8;
			font-size: 1em; /* Adjust size as needed */
			will-change: transform; /* For better performance */
			pointer-events: none; /* Disables events on the snowflakes themselves */
		}
		@keyframes fall-left {
			from { transform: translateY(0) rotateY(0deg); }
			to { transform: translateY(100vh) rotateY(360deg); }
		}		
		@keyframes fall-right {
			from { transform: translateY(0) rotateY(0deg); }
			to { transform: translateY(100vh) rotateY(-300deg); }
		}
	</style>
	<?php
}

add_action( 'wp_head', 'divibooster_falling_snow_css' );
}

if (!function_exists('divibooster_falling_snow_js')) {
function divibooster_falling_snow_js() {
	?>
	<script>
(function() {
	var snowContainers = document.querySelectorAll('.falling-snow-container');
	if (snowContainers.length === 0) {
		return; // Exit if there are no containers
	}

	// Function to create a single snowflake and animate its fall and rotation
	function createSnowflake(container) {
		var snowflake = document.createElement('div');
		snowflake.className = 'snowflake';
		snowflake.innerHTML = '❄'; // Unicode snowflake character
		var snowflakeStyle = snowflake.style;
		snowflakeStyle.left = (Math.random() * 100) + '%';

		/*snowContainer.appendChild(snowflake);*/
		container.appendChild(snowflake);

		// Randomize various style properties
		snowflakeStyle.opacity = Math.random();
		snowflakeStyle.fontSize = (Math.random() * 0.5 + 0.5) + 'em'; 
		
		// Set random duration and rotation speeds for animations
		var fallDuration = (Math.random() * 5 + 5) + 's';
		var spinDirection = Math.random() < 0.5 ? 'left' : 'right';
		snowflakeStyle.animation = 'fall-' + spinDirection + ' ' + fallDuration + ' linear infinite';

		// Remove the snowflake after it has fallen
		setTimeout(() => {
			snowflake.remove();
		}, parseFloat(fallDuration) * 1000); // Convert duration string to milliseconds
	}

	// Create new snowflakes at 300ms intervals inside each container
	snowContainers.forEach(function(container) {
		setInterval(function() {
			createSnowflake(container);
		}, 300);
	});
})();
	</script>
	<?php
}

add_action( 'wp_footer', 'divibooster_falling_snow_js', 100 );
}