script.js

// Main JavaScript for CreatorVerse Hub

// Initialize the application
document.addEventListener('DOMContentLoaded', function() {
    initializeApp();
});

function initializeApp() {
    console.log('CreatorVerse Hub initialized');
    
    // Add intersection observer for animations
    setupScrollAnimations();
    
    // Initialize any interactive elements
    setupInteractiveElements();
    
    // Handle mobile navigation
    setupMobileNavigation();
}

// Scroll animations
function setupScrollAnimations() {
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                entry.target.classList.add('fade-in-up');
            }
        });
    }, observerOptions);

    // Observe all elements with the animate-on-scroll class
    document.querySelectorAll('.animate-on-scroll').forEach(function(el) {
        observer.observe(el);
    });
}

// Interactive elements
function setupInteractiveElements() {
    // Add click handlers for creator cards
    const creatorCards = document.querySelectorAll('.creator-card');
    creatorCards.forEach(function(card) {
        card.addEventListener('click', function() {
            const creatorLink = this.querySelector('a').href;
            window.location.href = creatorLink;
        });
    });

    // Setup search functionality
    const searchInput = document.getElementById('searchInput');
    if (searchInput) {
        searchInput.addEventListener('input', debounce(function(e) {
            performSearch(e.target.value);
        }, 300));
    }
}

// Mobile navigation
function setupMobileNavigation() {
    const mobileMenuButton = document.getElementById('mobileMenuButton');
    const mobileMenu = document.getElementById('mobileMenu');

    if (mobileMenuButton && mobileMenu) {
        mobileMenuButton.addEventListener('click', function() {
            mobileMenu.classList.toggle('hidden');
        });
    }
}

// Search functionality
function performSearch(query) {
    if (query.length < 2) return;

    console.log('Searching for:', query);
    
    // In a real implementation, this would make an API call
    // For now, we'll just log and show a notification
    showNotification(`Searching for "${query}"...`);
}

// Notification system
function showNotification(message, type = 'info') {
    // Create notification element
    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 transform transition-transform duration-300 ${
        type === 'error' ? 'bg-red-500' : 
        type === 'success' ? 'bg-green-500' : 'bg-primary'
    } text-white`;
    notification.textContent = message;
    
    document.body.appendChild(notification);
    
    // Remove notification after 3 seconds
    setTimeout(function() {
        notification.style.transform = 'translateX(100%)';
        setTimeout(function() {
            if (notification.parentNode) {
                notification.parentNode.removeChild(notification);
        }, 300);
    }, 3000);
}

// Utility function for debouncing
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = function() {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// API functions for creator data
async function fetchFeaturedCreators() {
    try {
        // In a real implementation, this would fetch from your API
        const response = await fetch('/api/creators/featured');
        const creators = await response.json();
        return creators;
    } catch (error) {
        console.error('Error fetching featured creators:', error);
        return [];
    }
}

// Handle user authentication state
function checkAuthState() {
    const token = localStorage.getItem('authToken');
    if (token) {
        updateUIForLoggedInUser();
    } else {
        updateUIForGuest();
    }
}

function updateUIForLoggedInUser() {
    const authButtons = document.querySelectorAll('.auth-buttons');
    authButtons.forEach(function(container) {
        container.innerHTML = `
            <a href="/profile" class="bg-secondary hover:bg-yellow-500 text-white font-bold py-2 px-6 rounded-full transition duration-300">
                My Profile
            </a>
        `;
    });
}

function updateUIForGuest() {
    const authButtons = document.querySelectorAll('.auth-buttons');
    authButtons.forEach(function(container) {
        container.innerHTML = `
            <a href="/login" class="text-dark hover:text-primary font-semibold transition duration-300">
                Log In
            </a>
            <a href="/signup" class="bg-primary hover:bg-purple-600 text-white font-bold py-2 px-6 rounded-full transition duration-300">
                Sign Up
            </a>
        `;
    });
}

// Export functions for use in other modules
window.CreatorVerse = {
    showNotification,
    fetchFeaturedCreators,
    checkAuthState
};