let clickCount = 0;
const button = document.getElementById('dangerButton');
const container = document.querySelector('.container');
const body = document.body;
const clickCountElement = document.getElementById('clickCount');

const effects = [
    // Effect 1: Shake the button
    () => {
        button.classList.add('shake');
        setTimeout(() => button.classList.remove('shake'), 500);
    },
    // Effect 2: Invert colors
    () => {
        body.style.filter = 'invert(1)';
    },
    // Effect 3: Rotate the container
    () => {
        container.style.transform = 'rotate(180deg)';
    },
    // Effect 4: Make text unreadable
    () => {
        const elements = document.querySelectorAll('h1, p');
        elements.forEach(el => {
            el.style.letterSpacing = '5px';
            el.style.fontFamily = 'Wingdings';
        });
    },
    // Effect 5: Make everything spin
    () => {
        document.querySelectorAll('*').forEach(el => {
            el.classList.add('spin');
        });
    },
    // Effect 6: Change background to rainbow
    () => {
        body.style.background = 'linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet)';
        body.style.backgroundSize = '400% 400%';
        body.style.animation = 'rainbow 5s ease infinite';
    },
    // Effect 7: Make everything tiny
    () => {
        container.style.transform = 'scale(0.5)';
    },
    // Effect 8: Flip everything upside down
    () => {
        body.style.transform = 'rotate(180deg)';
    },
    // Effect 9: Make text rainbow
    () => {
        const style = document.createElement('style');
        style.textContent = `
            @keyframes rainbow {
                0% { color: red; }
                20% { color: orange; }
                40% { color: yellow; }
                60% { color: green; }
                80% { color: blue; }
                100% { color: purple; }
            }
            h1, p { animation: rainbow 2s linear infinite; }
        `;
        document.head.appendChild(style);
    },
    // Effect 10: Make everything bouncy
    () => {
        const style = document.createElement('style');
        style.textContent = `
            @keyframes bounce {
                0%, 100% { transform: translateY(0); }
                50% { transform: translateY(-20px); }
            }
            * { animation: bounce 0.5s ease infinite; }
        `;
        document.head.appendChild(style);
    },
    // Effect 11: Matrix rain effect
    () => {
        const canvas = document.createElement('canvas');
        canvas.style.position = 'fixed';
        canvas.style.top = '0';
        canvas.style.left = '0';
        canvas.style.zIndex = '-1';
        canvas.style.opacity = '0.5';
        document.body.appendChild(canvas);
        
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%^&*';
        const charArray = chars.split('');
        const fontSize = 14;
        const columns = canvas.width / fontSize;
        const drops = [];
        
        for(let i = 0; i < columns; i++) {
            drops[i] = 1;
        }
        
        function draw() {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = '#0F0';
            ctx.font = fontSize + 'px monospace';
            
            for(let i = 0; i < drops.length; i++) {
                const text = charArray[Math.floor(Math.random() * charArray.length)];
                ctx.fillText(text, i * fontSize, drops[i] * fontSize);
                if(drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
                    drops[i] = 0;
                }
                drops[i]++;
            }
        }
        
        setInterval(draw, 33);
    },
    // Effect 12: Glitch effect
    () => {
        const style = document.createElement('style');
        style.textContent = `
            @keyframes glitch {
                0% { transform: translate(0); }
                20% { transform: translate(-2px, 2px); }
                40% { transform: translate(-2px, -2px); }
                60% { transform: translate(2px, 2px); }
                80% { transform: translate(2px, -2px); }
                100% { transform: translate(0); }
            }
            * { animation: glitch 0.3s infinite; }
        `;
        document.head.appendChild(style);
    },
    // Effect 13: Random emoji rain
    () => {
        const emojis = ['💥', '🔥', '💣', '⚠️', '🚫', '❌', '💢', '⚡', '💫', '✨'];
        setInterval(() => {
            const emoji = document.createElement('div');
            emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
            emoji.style.position = 'fixed';
            emoji.style.left = Math.random() * window.innerWidth + 'px';
            emoji.style.top = '-20px';
            emoji.style.fontSize = '24px';
            emoji.style.zIndex = '1000';
            document.body.appendChild(emoji);
            
            const animation = emoji.animate([
                { transform: 'translateY(0) rotate(0deg)', opacity: 1 },
                { transform: `translateY(${window.innerHeight}px) rotate(360deg)`, opacity: 0 }
            ], {
                duration: 2000,
                easing: 'linear'
            });
            
            animation.onfinish = () => emoji.remove();
        }, 200);
    },
    // Effect 14: Random cursor trails
    () => {
        const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff'];
        let trail = [];
        
        document.addEventListener('mousemove', (e) => {
            const dot = document.createElement('div');
            dot.style.position = 'fixed';
            dot.style.width = '10px';
            dot.style.height = '10px';
            dot.style.borderRadius = '50%';
            dot.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
            dot.style.left = e.clientX + 'px';
            dot.style.top = e.clientY + 'px';
            dot.style.pointerEvents = 'none';
            document.body.appendChild(dot);
            
            trail.push(dot);
            if (trail.length > 20) {
                trail[0].remove();
                trail.shift();
            }
            
            setTimeout(() => dot.remove(), 1000);
        });
    },
    // Effect 15: Random element explosion
    () => {
        const elements = document.querySelectorAll('*');
        elements.forEach(el => {
            if (el !== button && el !== container) {
                const rect = el.getBoundingClientRect();
                const particles = 10;
                
                for (let i = 0; i < particles; i++) {
                    const particle = document.createElement('div');
                    particle.style.position = 'fixed';
                    particle.style.width = '5px';
                    particle.style.height = '5px';
                    particle.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
                    particle.style.left = rect.left + rect.width/2 + 'px';
                    particle.style.top = rect.top + rect.height/2 + 'px';
                    particle.style.borderRadius = '50%';
                    particle.style.pointerEvents = 'none';
                    document.body.appendChild(particle);
                    
                    const angle = (Math.random() * Math.PI * 2);
                    const velocity = 5 + Math.random() * 5;
                    const vx = Math.cos(angle) * velocity;
                    const vy = Math.sin(angle) * velocity;
                    
                    let posX = rect.left + rect.width/2;
                    let posY = rect.top + rect.height/2;
                    
                    const animate = () => {
                        posX += vx;
                        posY += vy;
                        particle.style.left = posX + 'px';
                        particle.style.top = posY + 'px';
                        particle.style.opacity = parseFloat(particle.style.opacity || 1) - 0.02;
                        
                        if (parseFloat(particle.style.opacity) > 0) {
                            requestAnimationFrame(animate);
                        } else {
                            particle.remove();
                        }
                    };
                    
                    requestAnimationFrame(animate);
                }
            }
        });
    }
];

button.addEventListener('click', () => {
    clickCount++;
    clickCountElement.textContent = clickCount;
    
    // Apply a random effect
    const randomEffect = effects[Math.floor(Math.random() * effects.length)];
    randomEffect();
    
    // Make the button more dangerous looking
    button.style.transform = `scale(${1 + clickCount * 0.1})`;
    button.style.background = `hsl(${clickCount * 20}, 100%, 50%)`;
    
    // Add more chaos as clicks increase
    if (clickCount > 5) {
        button.style.position = 'absolute';
        button.style.left = `${Math.random() * window.innerWidth}px`;
        button.style.top = `${Math.random() * window.innerHeight}px`;
    }
    
    // Make it harder to click after 10 clicks
    if (clickCount > 10) {
        button.style.pointerEvents = 'none';
        setTimeout(() => {
            button.style.pointerEvents = 'auto';
        }, 1000);
    }
});