// Premium Theme Effects
document.addEventListener('DOMContentLoaded', () => {
    createParticles();
    initializePremiumEffects();
});

function createParticles() {
    const particlesContainer = document.getElementById('particles');
    if (!particlesContainer) return;

    // Create 50 particles
    for (let i = 0; i < 50; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';

        // Random position
        particle.style.left = Math.random() * 100 + '%';
        particle.style.top = Math.random() * 100 + '%';

        // Random size
        const size = Math.random() * 3 + 1;
        particle.style.width = size + 'px';
        particle.style.height = size + 'px';

        // Random color
        const colors = ['#00f3ff', '#b967ff', '#ff2d75', '#2ed573'];
        particle.style.background = colors[Math.floor(Math.random() * colors.length)];

        // Random animation delay and duration
        particle.style.animationDelay = Math.random() * 10 + 's';
        particle.style.animationDuration = (Math.random() * 10 + 10) + 's';

        particlesContainer.appendChild(particle);
    }
}

function initializePremiumEffects() {
    // Add ripple effect to buttons
    document.querySelectorAll('button.premium').forEach(button => {
        button.addEventListener('click', function (e) {
            const ripple = document.createElement('span');
            const rect = this.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);

            ripple.style.width = ripple.style.height = size + 'px';
            ripple.style.left = e.clientX - rect.left - size / 2 + 'px';
            ripple.style.top = e.clientY - rect.top - size / 2 + 'px';
            ripple.classList.add('ripple');

            this.appendChild(ripple);

            setTimeout(() => {
                ripple.remove();
            }, 600);
        });
    });

    // Add hover effects to stats
    document.querySelectorAll('.stat.premium').forEach(stat => {
        stat.addEventListener('mouseenter', () => {
            const value = stat.querySelector('.stat-value');
            if (value) {
                value.style.transform = 'scale(1.1)';
            }
        });

        stat.addEventListener('mouseleave', () => {
            const value = stat.querySelector('.stat-value');
            if (value) {
                value.style.transform = 'scale(1)';
            }
        });
    });
}

// Add CSS for ripple effect
const style = document.createElement('style');
style.textContent = `
  .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none;
  }
  
  @keyframes ripple-animation {
    to {
      transform: scale(4);
      opacity: 0;
    }
  }
  
  button.premium {
    position: relative;
    overflow: hidden;
  }
`;
document.head.appendChild(style);