/**
 * Drone Image Animation with New Background
 * Uses a single image background with the drone flying over the roof
 */
(function() {
    document.addEventListener('DOMContentLoaded', function() {
        // Only run on pages that have a hero section
        const heroSection = document.querySelector('.hero');
        if (heroSection) {
            // Remove any existing backgrounds or animations
            if (heroSection.style.backgroundImage) {
                heroSection.style.backgroundImage = 'none';
            }
            
            // Remove any existing animation containers
            const existingAnimations = heroSection.querySelectorAll('.drone-animation-container, .animation-container, .roof-cleaning-animation');
            existingAnimations.forEach(el => el.remove());
            
            // Create our animation with the new background
            createAnimationWithSingleBackground(heroSection);
        }
    });
    
    function createAnimationWithSingleBackground(container) {
        // Create animation container with more aggressive full-width styling
        const animationContainer = document.createElement('div');
        animationContainer.className = 'drone-animation-container';
        
        // Position absolutely with negative margins to escape any parent padding
        animationContainer.style.position = 'absolute';
        animationContainer.style.top = '0';
        animationContainer.style.left = '0';
        animationContainer.style.right = '0'; // Add right: 0 to ensure full width
        animationContainer.style.width = '100vw'; // Use viewport width
        animationContainer.style.maxWidth = '100vw'; // Override any max-width restrictions
        animationContainer.style.marginLeft = 'calc(50% - 50vw)'; // Center regardless of parent padding
        animationContainer.style.marginRight = 'calc(50% - 50vw)'; // Center regardless of parent padding
        animationContainer.style.height = '100%';
        animationContainer.style.overflow = 'hidden';
        animationContainer.style.pointerEvents = 'none';
        animationContainer.style.zIndex = '1';
        
        // Add CSS to fix any scrollbar issues
        const styleFixForScrollbar = document.createElement('style');
        styleFixForScrollbar.textContent = `
            html, body {
                overflow-x: hidden;
                width: 100%;
                position: relative;
            }
            .hero {
                width: 100%;
                max-width: 100%;
                overflow: hidden;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
        `;
        document.head.appendChild(styleFixForScrollbar);
        
        // Fix mobile white space by adjusting the parent container on mobile
        if (window.innerWidth <= 768) {
            // Remove potential white space in parent container
            container.style.paddingBottom = '0';
            container.style.marginBottom = '0';
        }
        
        // Create background using the new image
        createFullBackground(animationContainer);
        
        // Create drone elements that will fly over the roof
        createFlyingDrones(animationContainer);
        
        // Add everything to the container
        container.appendChild(animationContainer);
        
        // Add animation styles
        addAnimationStyles();
        
        // Add resize listener to adjust for screen size changes
        window.addEventListener('resize', function() {
            adjustForScreenSize(animationContainer);
        });
        
        // Initial adjustment for screen size
        adjustForScreenSize(animationContainer);
        
        // Position the hero content (text) in the sky area
        positionHeroContent(container);
    }
    
    function createFullBackground(container) {
        // Create the full background with enhanced full-width styling
        const backgroundElement = document.createElement('div');
        backgroundElement.className = 'animation-background';
        backgroundElement.style.position = 'absolute';
        backgroundElement.style.top = '0';
        backgroundElement.style.left = '0';
        backgroundElement.style.right = '0'; // Add right: 0
        backgroundElement.style.width = '100vw'; // Use viewport width
        backgroundElement.style.maxWidth = 'none'; // No max width restrictions
        backgroundElement.style.height = '100%';
        backgroundElement.style.backgroundImage = 'url("images/animation_background1.png")';
        backgroundElement.style.backgroundSize = 'cover';
        backgroundElement.style.backgroundPosition = 'center center';
        backgroundElement.style.backgroundRepeat = 'no-repeat';
        backgroundElement.style.backgroundColor = '#75b0cc';
        backgroundElement.style.zIndex = '1';
        
        // Add subtle overlay to improve text visibility
        const overlay = document.createElement('div');
        overlay.style.position = 'absolute';
        overlay.style.top = '0';
        overlay.style.left = '0';
        overlay.style.width = '100%';
        overlay.style.height = '100%';
        overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.1)'; /* Subtle darkening */
        overlay.style.zIndex = '2';
        backgroundElement.appendChild(overlay);
        
        container.appendChild(backgroundElement);
        
        // Add resize event listener for responsive adjustments
        window.addEventListener('resize', function() {
            adjustBackground(backgroundElement);
        });
        
        // Initial adjustment
        adjustBackground(backgroundElement);
    }
    
    function adjustBackground(backgroundElement) {
        const isMobile = window.innerWidth <= 768;
        const isPortrait = window.innerHeight > window.innerWidth;
        
        if (isMobile) {
            if (isPortrait) {
                // Portrait mobile - fix grey area by using cover and adjusting transform
                backgroundElement.style.backgroundSize = 'cover';
                backgroundElement.style.transform = 'translateY(-15%)'; // Move image up instead of using background-position
                backgroundElement.style.height = '100%'; // Ensure full height
            } else {
                // Landscape mobile - also fix using transform
                backgroundElement.style.backgroundSize = 'cover';
                backgroundElement.style.transform = 'translateY(-10%)';
                backgroundElement.style.height = '100%';
            }
        } else {
            // Desktop - standard positioning
            backgroundElement.style.backgroundSize = 'cover';
            backgroundElement.style.transform = 'none';
            backgroundElement.style.backgroundPosition = 'center center';
        }
    }
    
    function positionHeroContent(container) {
        // Get the hero content (text)
        const heroContent = container.querySelector('.hero-content');
        if (heroContent) {
            // Split the content: Title in sky, rest at top of roof
            const headline = heroContent.querySelector('h2');
            const otherContent = document.createElement('div');
            otherContent.className = 'hero-secondary-content';
            
            // Get all other elements except the headline
            const subheading = heroContent.querySelector('p');
            const ctaButton = heroContent.querySelector('.btn-primary');
            
            // Set styles for the main container
            heroContent.style.position = 'relative';
            heroContent.style.zIndex = '5';
            heroContent.style.display = 'flex';
            heroContent.style.flexDirection = 'column';
            heroContent.style.alignItems = 'center';
            heroContent.style.justifyContent = 'space-between';
            heroContent.style.height = '100%';
            heroContent.style.textShadow = '0 2px 4px rgba(0, 0, 0, 0.3)';
            
            // Style headline to be in sky - make consistent across all views
            if (headline) {
                headline.style.color = '#ffffff';
                headline.style.margin = '0 auto 2rem';
                headline.style.maxWidth = '100%'; // Changed from 90% to 100% for better text wrapping
                headline.style.textAlign = 'center';
                headline.style.position = 'relative';
                headline.style.zIndex = '6';
                headline.style.fontSize = window.innerWidth <= 480 ? '1.5rem' : (window.innerWidth <= 768 ? '1.8rem' : '3rem'); // Reduced from 1.7rem to 1.5rem for smallest screens
                headline.style.lineHeight = '1.3'; // Add line height for better text spacing
                headline.style.width = '100%'; // Ensure full width
                headline.style.wordWrap = 'break-word'; // Improve word wrapping
                headline.style.hyphens = 'none'; // Changed from 'auto' to 'none'
                headline.style.wordBreak = 'keep-all'; // Prevent words from breaking
                headline.style.whiteSpace = 'normal'; // Allow normal wrapping but prevent word splitting
                
                // More mobile-friendly initial positioning
                headline.style.marginTop = window.innerWidth <= 768 ? '-3rem' : '-8rem';
            }
            
            // Move other content to a separate container
            if (subheading && ctaButton) {
                // Remove elements from their current position
                subheading.remove();
                ctaButton.remove();
                
                // Add them to the new container
                otherContent.appendChild(subheading);
                otherContent.appendChild(ctaButton);
                
                // Style the subheading
                subheading.style.color = '#ffffff';
                subheading.style.marginBottom = '1.5rem';
                
                // Style the container for other content
                otherContent.style.display = 'flex';
                otherContent.style.flexDirection = 'column';
                otherContent.style.alignItems = 'center';
                otherContent.style.position = 'relative';
                otherContent.style.zIndex = '6';
                
                // Add the container to the hero content
                heroContent.appendChild(otherContent);
            }
            
            // Adjust positions for different screen sizes
            adjustHeroContentPositioning(heroContent, headline, otherContent);
            window.addEventListener('resize', function() {
                adjustHeroContentPositioning(heroContent, headline, otherContent);
            });
        }
    }
    
    function adjustHeroContentPositioning(heroContent, headline, otherContent) {
        const isMobile = window.innerWidth <= 768;
        const isPortrait = window.innerHeight > window.innerWidth;
        const isSmallPhone = window.innerWidth <= 480;
        
        // Apply different positioning based on device type and size
        if (headline) {
            if (isMobile) {
                if (isPortrait) {
                    // Portrait mobile - adjust based on device height
                    const viewportHeight = window.innerHeight;
                    if (viewportHeight <= 600) {
                        // Very small device
                        headline.style.marginTop = '-1rem';
                    } else if (viewportHeight <= 800) {
                        // Medium device
                        headline.style.marginTop = '-2rem';
                    } else {
                        // Larger device
                        headline.style.marginTop = '-3rem';
                    }
                } else {
                    // Landscape mobile
                    headline.style.marginTop = '-2rem';
                }
            } else {
                // Desktop - keep as is
                headline.style.marginTop = '-8rem';
            }
        }
        
        if (otherContent) {
            otherContent.style.marginTop = 'auto';
            
            if (isMobile) {
                if (isPortrait) {
                    // Portrait mobile - adjust based on device height
                    const viewportHeight = window.innerHeight;
                    if (viewportHeight <= 600) {
                        // More compact spacing for small devices
                        otherContent.style.marginBottom = '3rem';
                    } else if (viewportHeight <= 800) {
                        otherContent.style.marginBottom = '4rem';
                    } else {
                        otherContent.style.marginBottom = '5rem';
                    }
                    
                    // Adjust spacing between elements for small devices
                    if (isSmallPhone) {
                        const subheading = otherContent.querySelector('p');
                        if (subheading) {
                            subheading.style.marginBottom = '1rem';
                        }
                    }
                } else {
                    // Landscape mobile
                    otherContent.style.marginBottom = '3rem';
                }
            } else {
                // Desktop
                otherContent.style.marginBottom = '5rem';
            }
        }
    }
    
    function adjustHeroContent(heroContent) {
        // This function is replaced by the more specific positioning function above
        // Keep it for compatibility but it no longer needs to do anything
    }
    
    function createFlyingDrones(container) {
        // Create drone path container
        const dronePathContainer = document.createElement('div');
        dronePathContainer.className = 'drone-path-container';
        dronePathContainer.style.position = 'absolute';
        dronePathContainer.style.top = '0';
        dronePathContainer.style.left = '0';
        dronePathContainer.style.width = '100%';
        dronePathContainer.style.height = '100%';
        dronePathContainer.style.zIndex = '10';
        container.appendChild(dronePathContainer);
        
        // Create drone with responsive sizing
        createDrone(dronePathContainer, 'drone-path-1', 0);
    }
    
    function createDrone(container, pathClass, startDelay = 0, duration = 30) {
        // Create drone element using the specified drone image
        const droneElement = document.createElement('div');
        droneElement.className = `animated-drone ${pathClass}`;
        droneElement.style.position = 'absolute';
        droneElement.style.width = '440px';  // Will be adjusted for mobile
        droneElement.style.height = '300px'; // Will be adjusted for mobile
        droneElement.style.top = '45%';      // Position for new background
        droneElement.style.left = '-450px';
        droneElement.style.zIndex = '15';    // Above all other elements
        droneElement.style.animation = `${pathClass} ${duration}s linear infinite`;
        droneElement.style.animationDelay = `${startDelay}s`;
        
        // Add the drone image
        const droneImage = document.createElement('img');
        droneImage.src = 'images/spraying_drone4.png';
        droneImage.alt = 'Dachreinigungsdrohne';
        droneImage.style.width = '100%';
        droneImage.style.height = 'auto';
        droneImage.style.filter = 'drop-shadow(0 15px 30px rgba(0,0,0,0.25))';
        droneElement.appendChild(droneImage);
        
        container.appendChild(droneElement);
    }
    
    function adjustForScreenSize(container) {
        const isMobile = window.innerWidth <= 768;
        const isPortrait = window.innerHeight > window.innerWidth;
        
        // Fix white space issue on mobile
        if (isMobile) {
            // Adjust parent container (hero section)
            const heroSection = container.closest('.hero');
            if (heroSection) {
                heroSection.style.paddingBottom = '0';
                heroSection.style.marginBottom = '0';
                // Ensure full height to bottom of viewport on mobile
                container.style.minHeight = '100%';
            }
            
            // Adjust the main background element to extend fully
            const backgroundEl = container.querySelector('.animation-background');
            if (backgroundEl) {
                backgroundEl.style.bottom = '0';
                backgroundEl.style.height = '100%';
                // Add extra height to cover any potential gaps
                backgroundEl.style.marginBottom = '-2px';
            }
        }
        
        const drones = container.querySelectorAll('.animated-drone');
        
        // Adjust drone sizes
        drones.forEach(drone => {
            if (isMobile) {
                if (isPortrait) {
                    // Portrait mobile - smaller drone
                    drone.style.width = '150px';
                    drone.style.height = '100px';
                } else {
                    // Landscape mobile
                    drone.style.width = '180px';
                    drone.style.height = '120px';
                }
            } else {
                // Desktop size
                drone.style.width = '440px';
                drone.style.height = '300px';
            }
        });
        
        // Adjust background
        const background = container.querySelector('.animation-background');
        if (background) {
            adjustBackground(background);
        }
        
        // Add headline adjustment on resize
        const headline = document.querySelector('.hero-content h2');
        if (headline) {
            // Adjust font size based on screen width for better text wrapping
            if (window.innerWidth <= 480) {
                headline.style.fontSize = '1.5rem';
                headline.style.lineHeight = '1.3';
                headline.style.maxWidth = '100%';
                headline.style.padding = '0 0.5rem'; // Add padding for smallest screens
                headline.style.hyphens = 'none';
                headline.style.wordBreak = 'keep-all';
                headline.style.whiteSpace = 'normal';
            } else if (window.innerWidth <= 768) {
                headline.style.fontSize = '1.8rem';
                headline.style.lineHeight = '1.3';
                headline.style.maxWidth = '100%';
                headline.style.hyphens = 'none';
                headline.style.wordBreak = 'keep-all';
                headline.style.whiteSpace = 'normal';
            } else {
                headline.style.fontSize = '3rem';
                headline.style.lineHeight = '1.2';
                headline.style.maxWidth = '90%';
                headline.style.hyphens = 'none';
                headline.style.wordBreak = 'keep-all';
                headline.style.whiteSpace = 'normal';
            }
        }
    }
    
    // Add a resize event listener to handle orientation changes
    window.addEventListener('resize', function() {
        const animationContainer = document.querySelector('.drone-animation-container');
        if (animationContainer) {
            adjustForScreenSize(animationContainer);
        }
    });
    
    function addAnimationStyles() {
        // Create style element if it doesn't exist
        if (!document.getElementById('drone-animation-styles')) {
            const styleElement = document.createElement('style');
            styleElement.id = 'drone-animation-styles';
            
            // Add responsive animations with adjusted drone path to match new background
            styleElement.innerHTML = `
                @keyframes drone-path-1 {
                    /* First half - path adjusted for new background */
                    0% { left: -450px; top: 45%; transform: rotate(0deg); }
                    5% { left: 10%; top: 43%; transform: rotate(-5deg); }
                    10% { left: 20%; top: 45%; transform: rotate(0deg); }
                    15% { left: 30%; top: 47%; transform: rotate(5deg); }
                    20% { left: 40%; top: 45%; transform: rotate(0deg); }
                    25% { left: 50%; top: 48%; transform: rotate(-3deg); }
                    30% { left: 60%; top: 50%; transform: rotate(0deg); }
                    35% { left: 70%; top: 52%; transform: rotate(3deg); }
                    40% { left: 80%; top: 50%; transform: rotate(0deg); }
                    45% { left: 90%; top: 48%; transform: rotate(-5deg); }
                    50% { left: 100%; top: 45%; transform: rotate(-10deg); }
                    
                    /* Second half - return path */
                    55% { left: 90%; top: 48%; transform: rotate(-5deg) scaleX(-1); }
                    60% { left: 80%; top: 50%; transform: rotate(0deg) scaleX(-1); }
                    65% { left: 70%; top: 52%; transform: rotate(3deg) scaleX(-1); }
                    70% { left: 60%; top: 50%; transform: rotate(0deg) scaleX(-1); }
                    75% { left: 50%; top: 48%; transform: rotate(-3deg) scaleX(-1); }
                    80% { left: 40%; top: 45%; transform: rotate(0deg) scaleX(-1); }
                    85% { left: 30%; top: 47%; transform: rotate(5deg) scaleX(-1); }
                    90% { left: 20%; top: 45%; transform: rotate(0deg) scaleX(-1); }
                    95% { left: 10%; top: 43%; transform: rotate(-5deg) scaleX(-1); }
                    100% { left: -450px; top: 45%; transform: rotate(0deg) scaleX(-1); }
                }
                
                /* Mobile-specific animations */
                @media (max-width: 768px) {
                    @keyframes drone-path-1 {
                        /* Adjusted path for mobile - fly higher to match the shifted background */
                        0% { left: -220px; top: 45%; transform: rotate(0deg); }
                        20% { left: 30%; top: 43%; transform: rotate(-5deg); }
                        40% { left: 70%; top: 47%; transform: rotate(5deg); }
                        50% { left: 100%; top: 45%; transform: rotate(-5deg); }
                        60% { left: 70%; top: 47%; transform: rotate(5deg) scaleX(-1); }
                        80% { left: 30%; top: 43%; transform: rotate(-5deg) scaleX(-1); }
                        100% { left: -220px; top: 45%; transform: rotate(0deg) scaleX(-1); }
                    }
                }
            `;
            
            document.head.appendChild(styleElement);
        }
    }
})();
