script.js

// Main JavaScript for MysticVibe Explorer

document.addEventListener('DOMContentLoaded', function() {
    // Initialize Feather Icons
    if (typeof feather !== 'undefined') {
        feather.replace();
    }

    // Generate Insight Button Functionality
    const generateInsightBtn = document.getElementById('generateInsight');
    const insightDisplay = document.getElementById('insightDisplay');
const cosmicInsights = [
    {
        emoji: "🌌",
        text: "Cosmic alignment (87% intensity) enhances manifestation potential. Current planetary index: 9.2/10"
    },
    {
        emoji: "⚡",
        text: "Quantum flux detected at 12.8Hz - ideal for consciousness expansion. Recommended meditation window: 32 minutes"
    },
    {
        emoji: "🌀",
        text: "3 major energy vortices active today - coordinates: 34.5°N, 118.2°W | 19.7°S, 47.8°E | 56.1°N, 10.2°E"
    },
    {
        emoji: "🌠",
        text: "Meteor shower (Eta Lyrids) peaks tonight - cosmic download window opens at 22:34 local time"
    },
    {
        emoji: "💫",
        text: "Sacred geometry patterns detected in solar winds - activating 5D consciousness grid points"
    },
    {
        emoji: "🌙",
        text: "Waning gibbous moon (68% illumination) - optimal for releasing limiting patterns"
    },
    {
        emoji: "☀️",
        text: "Solar activity: M2.4 class flare - amplifying creative frequencies by 22%"
    },
    {
        emoji: "🌪️", 
        text: "Cosmic storm system approaching - expect heightened synchronicities (+47% probability)"
    },
    {
        emoji: "🔭",
        text: "Jupiter-Pluto conjunction exact at 14° Capricorn - transformation energy peaking"
    },
    {
        emoji: "🧿",
        text: "Earth's Schumann resonance spiking at 7.83Hz - global consciousness shift detected"
    }
];
if (generateInsightBtn && insightDisplay) {
        generateInsightBtn.addEventListener('click', function() {
            // Add loading state
            const originalText = this.innerHTML;
            this.innerHTML = '<i data-feather="loader" class="inline mr-2 animate-spin"></i> Generating...';
            this.disabled = true;
            
            if (typeof feather !== 'undefined') {
                feather.replace();
            }

            // Simulate API call with timeout
            setTimeout(() => {
        // Get current hour for time-based insights
        const now = new Date();
        const hour = now.getHours();
        
        // Choose appropriate insight based on time and random factor
        let randomInsight;
        if (hour >= 4 && hour < 8) {
            // Morning insights
            randomInsight = cosmicInsights.filter(i => ['🌙', '☀️', '🌌'].includes(i.emoji))[
                Math.floor(Math.random() * 3)
            ];
        } else if (hour >= 8 && hour < 12) {
            // Midday insights
            randomInsight = cosmicInsights.filter(i => ['⚡', '💫', '🔭'].includes(i.emoji))[
                Math.floor(Math.random() * 3)
            ];
        } else if (hour >= 12 && hour < 16) {
            // Afternoon insights
            randomInsight = cosmicInsights.filter(i => ['🌀', '🌠', '🧿'].includes(i.emoji))[
                Math.floor(Math.random() * 3)
            ];
        } else {
            // Evening/Night insights
            randomInsight = cosmicInsights[Math.floor(Math.random() * cosmicInsights.length)];
        }
// Add fade out effect
                insightDisplay.style.opacity = '0';
                
                setTimeout(() => {
                    insightDisplay.innerHTML = `
                        <div class="text-6xl mb-4 animate-pulse">${randomInsight.emoji}</div>
                        <p class="text-gray-300 text-lg transition-all duration-500">
                            ${randomInsight.text}
                        </p>
                    `;
                    
                    // Add fade in effect
                    insightDisplay.style.opacity = '1';
                    
                    // Reset button
                    this.innerHTML = '<i data-feather="refresh-cw" class="inline mr-2"></i> Generate New Insight';
                    this.disabled = false;
                    
                    if (typeof feather !== 'undefined') {
                        feather.replace();
                    }
                }, 300);
            }, 1500);
        });
    }

    // Image gallery hover effects
    const galleryImages = document.querySelectorAll('.group img');
    galleryImages.forEach(img => {
        img.addEventListener('mouseenter', function() {
            this.style.transform = 'scale(1.1)';
        });
        
        img.addEventListener('mouseleave', function() {
            this.style.transform = 'scale(1)';
        });
    });

    // Smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            const href = this.getAttribute('href');
            
            // Skip if it's just "#"
            if (href === '#') return;
            
            const targetElement = document.querySelector(href);
            if (targetElement) {
                e.preventDefault();
                window.scrollTo({
                    top: targetElement.offsetTop - 80,
                    behavior: 'smooth'
                });
            }
        });
    });

    // Add parallax effect to hero section
    window.addEventListener('scroll', function() {
        const scrolled = window.pageYOffset;
        const hero = document.querySelector('main');
        
        if (hero) {
            hero.style.transform = `translateY(${scrolled * 0.05}px)`;
        }
    });

    // Theme toggle simulation (for future dark/light mode)
    const themeToggle = document.createElement('button');
    themeToggle.className = 'fixed bottom-4 right-4 z-50 w-12 h-12 rounded-full bg-gradient-to-r from-primary-500 to-secondary-500 shadow-lg flex items-center justify-center hover:scale-110 transition-transform duration-300';
    themeToggle.innerHTML = '<i data-feather="moon" class="w-6 h-6"></i>';
    themeToggle.title = 'Toggle theme';
    
    themeToggle.addEventListener('click', function() {
        const icon = this.querySelector('i');
        const currentIcon = icon.getAttribute('data-feather');
        
        if (currentIcon === 'moon') {
            icon.setAttribute('data-feather', 'sun');
            document.body.classList.add('bg-white', 'text-gray-900');
            document.body.classList.remove('bg-gradient-to-br', 'from-gray-900', 'via-black', 'to-gray-900', 'text-white');
        } else {
            icon.setAttribute('data-feather', 'moon');
            document.body.classList.remove('bg-white', 'text-gray-900');
            document.body.classList.add('bg-gradient-to-br', 'from-gray-900', 'via-black', 'to-gray-900', 'text-white');
        }
        
        if (typeof feather !== 'undefined') {
            feather.replace();
        }
    });
    
    document.body.appendChild(themeToggle);
    
    // Initialize Feather Icons again after adding dynamic content
    if (typeof feather !== 'undefined') {
        feather.replace();
    }
});