script.js

// Main application script for Cooperative Constellation Network

// DOM Ready
document.addEventListener('DOMContentLoaded', function() {
    // Initialize all components and functionality
    initCooperatives();
    initAnimations();
    initEventListeners();
});

// Initialize cooperatives from API
async function initCooperatives() {
    const container = document.getElementById('cooperatives-container');
    if (!container) return;

    try {
        // Using a mock API endpoint - in production, replace with real API
        const cooperatives = await fetchCooperatives();
        displayCooperatives(container, cooperatives.slice(0, 6)); // Show first 6
    } catch (error) {
        console.error('Error loading cooperatives:', error);
        displayFallbackCooperatives(container);
    }
}

// Fetch cooperatives from API (mock version)
async function fetchCooperatives() {
    // Mock data - in production, replace with real API call
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([
                {
                    id: 1,
                    name: "EduCollective North",
                    location: "Toronto, Canada",
                    focus: "Digital Literacy Education",
                    members: 45,
                    established: 2018,
                    description: "Promoting digital inclusion through community-based tech education programs.",
                    image: "http://static.photos/technology/640x360/101"
                },
                {
                    id: 2,
                    name: "Social Impact Educators Co-op",
                    location: "Berlin, Germany",
                    focus: "Sustainable Development",
                    members: 32,
                    established: 2015,
                    description: "Training educators in sustainable development practices for schools and communities.",
                    image: "http://static.photos/nature/640x360/102"
                },
                {
                    id: 3,
                    name: "Community Learning Hub",
                    location: "Nairobi, Kenya",
                    focus: "Early Childhood Education",
                    members: 28,
                    established: 2020,
                    description: "Providing early childhood education resources and teacher training in underserved communities.",
                    image: "http://static.photos/education/640x360/103"
                },
                {
                    id: 4,
                    name: "Indigenous Knowledge Cooperative",
                    location: "Auckland, New Zealand",
                    focus: "Cultural Preservation",
                    members: 36,
                    established: 2016,
                    description: "Integrating indigenous knowledge systems with modern educational frameworks.",
                    image: "http://static.photos/travel/640x360/104"
                },
                {
                    id: 5,
                    name: "Urban Youth Empowerment Co-op",
                    location: "São Paulo, Brazil",
                    focus: "Youth Development",
                    members: 52,
                    established: 2019,
                    description: "Empowering urban youth through vocational training and mentorship programs.",
                    image: "http://static.photos/cityscape/640x360/105"
                },
                {
                    id: 6,
                    name: "Environmental Education Network",
                    location: "Melbourne, Australia",
                    focus: "Environmental Education",
                    members: 41,
                    established: 2017,
                    description: "Connecting environmental educators and developing climate literacy curricula.",
                    image: "http://static.photos/green/640x360/106"
                }
            ]);
        }, 300);
    });
}

// Display cooperatives in container
function displayCooperatives(container, cooperatives) {
    container.innerHTML = '';
    
    cooperatives.forEach((coop, index) => {
        const card = document.createElement('div');
        card.className = 'cooperative-card bg-white rounded-2xl overflow-hidden shadow-lg animate-slide-up';
        card.style.animationDelay = `${index * 0.1}s`;
        
        card.innerHTML = `
            <div class="h-48 overflow-hidden">
                <img src="${coop.image}" alt="${coop.name}" class="w-full h-full object-cover transform hover:scale-110 transition-transform duration-500">
            </div>
            <div class="p-6">
                <div class="flex justify-between items-start mb-4">
                    <h3 class="text-xl font-bold text-gray-800">${coop.name}</h3>
                    <span class="bg-primary-100 text-primary-800 text-xs font-semibold px-3 py-1 rounded-full">
                        ${coop.established}
                    </span>
                </div>
                <div class="flex items-center text-gray-600 mb-3">
                    <i data-feather="map-pin" class="w-4 h-4 mr-2"></i>
                    <span>${coop.location}</span>
                </div>
                <div class="mb-4">
                    <span class="inline-block bg-secondary-100 text-secondary-800 text-sm font-medium px-3 py-1 rounded-full mb-2">
                        ${coop.focus}
                    </span>
                </div>
                <p class="text-gray-600 mb-4">${coop.description}</p>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <i data-feather="users" class="w-4 h-4 mr-2 text-primary-600"></i>
                        <span class="text-sm font-medium">${coop.members} Members</span>
                    </div>
                    <a href="cooperative.html?id=${coop.id}" class="text-primary-600 hover:text-primary-700 font-medium text-sm inline-flex items-center">
                        Learn More
                        <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
                    </a>
                </div>
            </div>
        `;
        
        container.appendChild(card);
    });
    
    feather.replace();
}

// Display fallback cooperatives if API fails
function displayFallbackCooperatives(container) {
    container.innerHTML = `
        <div class="col-span-full text-center py-12">
            <div class="bg-gray-100 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6">
                <i data-feather="users" class="w-10 h-10 text-gray-400"></i>
            </div>
            <h3 class="text-xl font-semibold text-gray-700 mb-2">Network Loading</h3>
            <p class="text-gray-600 mb-4">Our cooperative network is currently connecting...</p>
            <button onclick="initCooperatives()" class="bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-6 rounded-lg transition-colors duration-300">
                Retry Connection
            </button>
        </div>
    `;
    feather.replace();
}

// Create network visualization
function createNetworkVisualization() {
    const container = document.querySelector('.network-visualization');
    if (!container) return;
    
    // Clear container
    container.innerHTML = '';
    
    // Create nodes
    const nodeCount = 15;
    const nodes = [];
    
    for (let i = 0; i < nodeCount; i++) {
        const angle = (i / nodeCount) * Math.PI * 2;
        const radius = Math.random() * 0.7 + 0.1;
        const x = 50 + Math.cos(angle) * radius * 50;
        const y = 50 + Math.sin(angle) * radius * 50;
        
        const node = document.createElement('div');
        node.className = 'network-node';
        node.style.left = `${x}%`;
        node.style.top = `${y}%`;
        node.style.animationDelay = `${i * 0.2}s`;
        node.style.width = `${Math.random() * 8 + 8}px`;
        node.style.height = node.style.width;
        
        node.addEventListener('click', () => {
            showNodeInfo(i);
        });
        
        container.appendChild(node);
        nodes.push({ x, y, element: node });
    }
    
    // Create connections between nodes
    for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
            // Only connect some nodes
            if (Math.random() > 0.7) {
                const node1 = nodes[i];
                const node2 = nodes[j];
                
                const dx = node2.x - node1.x;
                const dy = node2.y - node1.y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                
                // Only connect if not too far apart
                if (distance < 40) {
                    const connection = document.createElement('div');
                    connection.className = 'network-connection';
                    
                    const angle = Math.atan2(dy, dx) * 180 / Math.PI;
                    connection.style.width = `${distance}%`;
                    connection.style.left = `${node1.x}%`;
                    connection.style.top = `${node1.y}%`;
                    connection.style.transform = `rotate(${angle}deg)`;
                    connection.style.opacity = 0.3 - (distance / 100);
                    
                    container.insertBefore(connection, node1.element);
                }
            }
        }
    }
    
    // Add central hub
    const hub = document.createElement('div');
    hub.className = 'network-node animate-pulse-glow';
    hub.style.left = '50%';
    hub.style.top = '50%';
    hub.style.width = '24px';
    hub.style.height = '24px';
    hub.style.background = 'linear-gradient(135deg, #3B82F6, #10B981)';
    hub.style.zIndex = '10';
    
    hub.addEventListener('click', () => {
        showNodeInfo('hub');
    });
    
    container.appendChild(hub);
}

// Show information for a network node
function showNodeInfo(nodeId) {
    const info = [
        "Community Learning Initiative",
        "Educational Resource Hub",
        "Social Impact Project",
        "Teacher Training Center",
        "Youth Mentorship Program",
        "Digital Education Platform",
        "Sustainability Project",
        "Cultural Exchange Network",
        "Vocational Training Cooperative",
        "Early Childhood Program",
        "Environmental Education Center",
        "Technology Access Initiative",
        "Rural Education Network",
        "Urban Development Program",
        "Health Education Cooperative",
        "Network Central Hub"
    ];
    
    const nodeName = info[nodeId] || "Cooperative Node";
    alert(`🌐 ${nodeName}\n\nThis node represents one of the many interconnected cooperatives in our network, each contributing unique expertise and resources to our collective mission.`);
}

// Initialize animations
function initAnimations() {
    // Add scroll reveal animations
    const revealElements = document.querySelectorAll('.reveal-on-scroll');
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    });
    
    revealElements.forEach(element => {
        observer.observe(element);
    });
    
    // Add hover animation to cards
    const cards = document.querySelectorAll('.cooperative-card, .bg-white.shadow-lg');
    cards.forEach(card => {
        card.addEventListener('mouseenter', () => {
            card.style.transform = 'translateY(-8px)';
        });
        
        card.addEventListener('mouseleave', () => {
            card.style.transform = 'translateY(0)';
        });
    });
}

// Initialize event listeners
function initEventListeners() {
    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;
            
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 80,
                    behavior: 'smooth'
                });
            }
        });
    });
    
    // Network visualization refresh
    const refreshBtn = document.getElementById('refresh-network');
    if (refreshBtn) {
        refreshBtn.addEventListener('click', createNetworkVisualization);
    }
}

// Utility function to format numbers
function formatNumber(num) {
    if (num >= 1000000) {
        return (num / 1000000).toFixed(1) + 'M';
    } else if (num >= 1000) {
        return (num / 1000).toFixed(1) + 'K';
    }
    return num.toString();
}

// Global function to load cooperatives (for retry button)
window.loadCooperatives = initCooperatives;

// Export for module usage if needed
if (typeof module !== 'undefined' && module.exports) {
    module.exports = {
        initCooperatives,
        createNetworkVisualization,
        initAnimations
    };
}