script.js

// Load images configuration
let imagesConfig = {};
async function loadImagesConfig() {
    try {
        const response = await fetch('images-config.json');
        imagesConfig = await response.json();
        
        // Set group photo
        const groupPhotoElement = document.getElementById('groupPhoto');
        if (groupPhotoElement && imagesConfig.groupPhoto) {
            let photoUrl = imagesConfig.groupPhoto.url;
            
            // Extract Google Drive file ID if it's a Drive link
            if (photoUrl.includes('drive.google.com')) {
                const fileId = photoUrl.match(/\/d\/(.+?)\//)?.[1] || photoUrl.match(/id=(.+?)(&|$)/)?.[1];
                if (fileId) {
                    photoUrl = `https://drive.google.com/thumbnail?id=${fileId}&sz=w1200`;
                }
            }
            // If it's a local file or direct URL, use as is
            
            groupPhotoElement.src = photoUrl;
            groupPhotoElement.alt = imagesConfig.groupPhoto.alt || 'ExploitX Team';
        }
    } catch (error) {
        console.error('Error loading images config:', error);
    }
}

// Load members from JSON
async function loadMembers() {
    try {
        const response = await fetch('members.json');
        const members = await response.json();
        
        const container = document.getElementById('membersContainer');
        const memberCountElement = document.getElementById('memberCount');
        const memberCountLinkElement = document.getElementById('memberCountLink');
        
        // Update counts
        if (memberCountElement) {
            memberCountElement.textContent = members.length;
        }
        if (memberCountLinkElement) {
            memberCountLinkElement.textContent = `${members.length} Members`;
        }
        
        // Only render cards if container exists (on members page)
        if (container) {
            members.forEach((member, index) => {
                const card = createMemberCard(member, index);
                container.appendChild(card);
            });
        }
    } catch (error) {
        console.error('Error loading members:', error);
    }
}

// Create member card
function createMemberCard(member, index) {
    const card = document.createElement('div');
    card.className = 'member-card';
    card.style.animationDelay = `${index * 0.1}s`;
    
    // Extract photo URL from Google Drive link
    let photoUrl = member.photo;
    if (photoUrl.includes('drive.google.com')) {
        const fileId = photoUrl.match(/\/d\/(.+?)\//)?.[1] || photoUrl.match(/id=(.+?)(&|$)/)?.[1];
        if (fileId) {
            photoUrl = `https://drive.google.com/thumbnail?id=${fileId}&sz=w500`;
        }
    }
    
    card.innerHTML = `
        <div class="card-background" style="background-image: url('${photoUrl}');"></div>
        <div class="card-content">
            <div>
                <h3 class="member-name">${member.Name}</h3>
                ${member.Role ? `<div class="member-role">${member.Role}</div>` : ''}
                <div class="member-tech-role">${member['Tech-Role']}</div>
            </div>
            <div>
                <p class="member-description">${member.Description}</p>
                <div class="member-links">
                    ${member.linkedin && member.linkedin.trim() !== '' && member.linkedin !== ' ' ? 
                        `<a href="${member.linkedin}" class="social-link" target="_blank" title="LinkedIn">
                            <i class="fab fa-linkedin-in"></i>
                        </a>` : ''}
                    ${member.github && member.github.trim() !== '' && member.github !== ' ' ? 
                        `<a href="${member.github}" class="social-link" target="_blank" title="GitHub">
                            <i class="fab fa-github"></i>
                        </a>` : ''}
                    ${member.portfolio && member.portfolio.trim() !== '' && member.portfolio !== ' ' ? 
                        `<a href="${member.portfolio}" class="social-link" target="_blank" title="Portfolio">
                            <i class="fas fa-globe"></i>
                        </a>` : ''}
                </div>
            </div>
        </div>
    `;
    
    return card;
}

// Load events from JSON
async function loadEvents() {
    try {
        const response = await fetch('events.json');
        const events = await response.json();
        
        const container = document.getElementById('eventsContainer');
        const eventCountElement = document.getElementById('eventCount');
        const eventCountLinkElement = document.getElementById('eventCountLink');
        
        // Update counts
        if (eventCountElement) {
            eventCountElement.textContent = events.length;
        }
        if (eventCountLinkElement) {
            eventCountLinkElement.textContent = `${events.length} Events`;
        }
        
        // Only render cards if container exists (on events page)
        if (container) {
            events.forEach((event, index) => {
                const card = createEventCard(event, index);
                container.appendChild(card);
            });
        }
    } catch (error) {
        console.error('Error loading events:', error);
    }
}

// Create event card
function createEventCard(event, index) {
    const card = document.createElement('div');
    card.className = 'event-card';
    card.style.animationDelay = `${index * 0.1}s`;
    
    // Handle event photo - extract from Google Drive if needed
    let photoUrl = event.photo;
    if (photoUrl && photoUrl.includes('drive.google.com')) {
        const fileId = photoUrl.match(/\/d\/(.+?)\//)?.[1] || photoUrl.match(/id=(.+?)(&|$)/)?.[1];
        if (fileId) {
            photoUrl = `https://drive.google.com/thumbnail?id=${fileId}&sz=w800`;
        }
    }
    
    // Add fallback image based on event type if available
    if (!photoUrl && imagesConfig.eventDefaultImages) {
        const eventType = event.type?.toLowerCase();
        photoUrl = imagesConfig.eventDefaultImages[eventType] || imagesConfig.eventDefaultImages.ctf;
    }
    
    card.innerHTML = `
        <div class="card-background" style="background-image: url('${photoUrl}');"></div>
        <div class="card-content">
            <div>
                <div class="event-header">
                    <i class="${event.icon} event-icon"></i>
                    <h3 class="event-title">${event.title}</h3>
                </div>
                <div class="event-date">
                    <i class="fas fa-calendar-alt"></i> ${event.date}
                </div>
                <div class="event-meta">
                    <span class="event-badge">${event.type}</span>
                    <span class="event-badge">${event.mode}</span>
                </div>
            </div>
            <p class="event-description">${event.description}</p>
        </div>
    `;
    
    return card;
}

// Add parallax effect for card backgrounds
function addParallaxEffect() {
    const scrolled = window.pageYOffset;
    const parallaxElements = document.querySelectorAll('.card-background');
    
    parallaxElements.forEach(element => {
        const speed = 0.5;
    });
}

// Initialize
window.addEventListener('DOMContentLoaded', () => {
    // Set current year in footer
    const yearElement = document.getElementById('currentYear');
    if (yearElement) {
        yearElement.textContent = new Date().getFullYear();
    }
    
    // Load images config for all pages
    loadImagesConfig();
});

window.addEventListener('scroll', addParallaxEffect);