/**
 * Bright Theme Elements and Visual Enhancements
 */
(function() {
    document.addEventListener('DOMContentLoaded', function() {
        // Add clean sky background to hero section
        enhanceHeroSection();
        
        // Add clean visual elements to services section
        enhanceServicesSection();
        
        // Add bright UI enhancements
        applyBrightUIEnhancements();
    });
    
    function enhanceHeroSection() {
        const heroSection = document.querySelector('.hero');
        if (!heroSection) return;
        
        // Create and add sky background with subtle clouds
        heroSection.style.backgroundImage = 'linear-gradient(to bottom, #e6f3ff 0%, #ffffff 100%)';
        heroSection.style.position = 'relative';
        heroSection.style.overflow = 'hidden';
        
        // Add subtle pattern
        const pattern = document.createElement('div');
        pattern.className = 'hero-pattern';
        pattern.style.position = 'absolute';
        pattern.style.top = 0;
        pattern.style.left = 0;
        pattern.style.right = 0;
        pattern.style.bottom = 0;
        pattern.style.opacity = 0.3;
        pattern.style.backgroundImage = 'url("data:image/svg+xml,%3Csvg width=\'100\' height=\'100\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z\' fill=\'%230078d4\' fill-opacity=\'0.1\' fill-rule=\'evenodd\'/%3E%3C/svg%3E")';
        heroSection.insertBefore(pattern, heroSection.firstChild);
        
        // Add animated simple drone icon
        const droneContainer = document.createElement('div');
        droneContainer.className = 'drone-animation';
        droneContainer.style.position = 'absolute';
        droneContainer.style.top = '20%';
        droneContainer.style.right = '10%';
        droneContainer.style.width = '80px';
        droneContainer.style.height = '80px';
        droneContainer.style.zIndex = '1';
        droneContainer.style.animation = 'float 6s ease-in-out infinite';
        
        // Create drone SVG
        droneContainer.innerHTML = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8Z" fill="#0078d4"/>
            <path d="M4 10C5.10457 10 6 9.10457 6 8C6 6.89543 5.10457 6 4 6C2.89543 6 2 6.89543 2 8C2 9.10457 2.89543 10 4 10Z" fill="#0078d4"/>
            <path d="M20 10C21.1046 10 22 9.10457 22 8C22 6.89543 21.1046 6 20 6C18.8954 6 18 6.89543 18 8C18 9.10457 18.8954 10 20 10Z" fill="#0078d4"/>
            <path d="M12 20C13.1046 20 14 19.1046 14 18C14 16.8954 13.1046 16 12 16C10.8954 16 10 16.8954 10 18C10 19.1046 10.8954 20 12 20Z" fill="#0078d4"/>
            <path d="M12 8V16M4 10L10 16M20 10L14 16" stroke="#0078d4" stroke-width="2" stroke-linecap="round"/>
            <animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite" />
        </svg>`;
        
        heroSection.appendChild(droneContainer);
        
        // Add the floating animation
        const style = document.createElement('style');
        style.textContent = `
            @keyframes float {
                0% { transform: translateY(0px) rotate(0deg); }
                50% { transform: translateY(-15px) rotate(2deg); }
                100% { transform: translateY(0px) rotate(0deg); }
            }
        `;
        document.head.appendChild(style);
    }
    
    function enhanceServicesSection() {
        const servicesSection = document.getElementById('services');
        if (!servicesSection) return;
        
        // Add subtle pattern background
        servicesSection.style.backgroundImage = 'linear-gradient(120deg, #ffffff 0%, #f8f9fa 100%)';
        servicesSection.style.position = 'relative';
        
        // Add cleaning icons to service cards
        const serviceCards = document.querySelectorAll('.service-card');
        const icons = [
            '<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 21L12 12M12 12L21 3M12 12L3 3M12 12L21 21" stroke="#0078d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
            '<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="9" stroke="#0078d4" stroke-width="2"/><path d="M12 7V12L15 15" stroke="#0078d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
            '<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3v18M3 12h18" stroke="#0078d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
        ];
        
        serviceCards.forEach((card, index) => {
            const icon = document.createElement('div');
            icon.className = 'service-icon';
            icon.style.marginBottom = '1.5rem';
            icon.innerHTML = icons[index % icons.length];
            card.insertBefore(icon, card.firstChild);
        });
    }
    
    function applyBrightUIEnhancements() {
        // Enhance buttons
        const buttons = document.querySelectorAll('.btn-primary');
        buttons.forEach(button => {
            button.style.background = 'var(--primary-color)';
            button.style.boxShadow = '0 4px 12px rgba(0, 120, 212, 0.2)';
            button.style.border = 'none';
            
            // Add hover effect
            button.addEventListener('mouseenter', function() {
                this.style.background = 'var(--gradient-primary)';
                this.style.transform = 'translateY(-2px)';
            });
            
            button.addEventListener('mouseleave', function() {
                this.style.background = 'var(--primary-color)';
                this.style.transform = 'translateY(0)';
            });
        });
        
        // Add roof-related decorative elements to sections
        const sections = document.querySelectorAll('.section-container');
        sections.forEach(section => {
            // Add subtle top decoration
            const decoration = document.createElement('div');
            decoration.className = 'section-decoration';
            decoration.style.height = '4px';
            decoration.style.width = '100px';
            decoration.style.background = 'var(--gradient-primary)';
            decoration.style.borderRadius = '2px';
            decoration.style.marginBottom = '2rem';
            
            const title = section.querySelector('.section-title');
            if (title) {
                title.style.display = 'flex';
                title.style.flexDirection = 'column';
                title.style.alignItems = 'center';
                title.style.marginBottom = '3rem';
                title.appendChild(decoration);
            }
        });
    }
})();