about-us.js

document.addEventListener('DOMContentLoaded', function() {
    // Team member data
    const teamMembers = [
        // Founders (2)
        {
            initials: 'AS',
            name: 'Alex Smith',
            position: 'Founder & CEO',
            bio: 'Visionary leader with expertise in sustainable economic models and innovation strategies. Alex founded Econovation with the mission to transform how we approach economic challenges in the 21st century.',
            gradient: 'from-blue-400 to-purple-500',
            experience: '15+ years',
            specialty: 'Economic Innovation',
            color: 'text-blue-600'
        },
        {
            initials: 'JL',
            name: 'Jamie Lee',
            position: 'Co-Founder & CRO',
            bio: 'Economics PhD with focus on behavioral economics and market analysis. Jamie leads our research initiatives and ensures our solutions are backed by solid economic theory and empirical evidence.',
            gradient: 'from-green-400 to-blue-500',
            experience: '12 years',
            specialty: 'Behavioral Economics',
            color: 'text-green-600'
        },
        
        // Club Leaders (2)
        {
            initials: 'MK',
            name: 'Morgan Kim',
            position: 'Technology Director',
            bio: 'Expert in fintech solutions and economic modeling software. Morgan bridges the gap between economic theory and practical technological implementation, creating tools that make economic concepts accessible.',
            gradient: 'from-yellow-400 to-orange-500',
            experience: '10 years',
            specialty: 'Fintech Solutions',
            color: 'text-yellow-600'
        },
        {
            initials: 'RP',
            name: 'Riley Patel',
            position: 'Marketing Strategist',
            bio: 'Creative mind behind our brand messaging and outreach campaigns. Riley ensures our economic solutions reach the audiences who need them most, translating complex concepts into compelling narratives.',
            gradient: 'from-red-400 to-pink-500',
            experience: '8 years',
            specialty: 'Brand Strategy',
            color: 'text-red-600'
        },
        
        // SMM Team (5)
        {
            initials: 'TJ',
            name: 'Taylor Johnson',
            position: 'Data Scientist',
            bio: 'Specializes in economic forecasting and predictive analytics. Taylor transforms complex economic data into actionable insights for our clients and partners, helping them navigate economic uncertainties.',
            gradient: 'from-purple-400 to-indigo-500',
            experience: '9 years',
            specialty: 'Predictive Analytics',
            color: 'text-purple-600'
        },
        {
            initials: 'SN',
            name: 'Sam Nguyen',
            position: 'Community Manager',
            bio: 'Builds relationships with partners and manages our growing community. Sam ensures our economic solutions create real impact in communities worldwide, fostering collaboration across sectors.',
            gradient: 'from-indigo-400 to-blue-500',
            experience: '7 years',
            specialty: 'Community Building',
            color: 'text-indigo-600'
        },
        {
            initials: 'EW',
            name: 'Ellis Wong',
            position: 'Financial Analyst',
            bio: 'Oversees financial planning and investment strategies for our initiatives. Ellis ensures our economic solutions are not just innovative but financially sustainable and viable in diverse market conditions.',
            gradient: 'from-pink-400 to-red-500',
            experience: '11 years',
            specialty: 'Investment Strategy',
            color: 'text-pink-600'
        },
        {
            initials: 'JR',
            name: 'Jordan Rivera',
            position: 'Sustainability Coordinator',
            bio: 'Ensures our economic solutions align with environmental sustainability goals. Jordan brings expertise in green economics and circular economic models, helping clients transition to more sustainable practices.',
            gradient: 'from-teal-400 to-green-500',
            experience: '6 years',
            specialty: 'Green Economics',
            color: 'text-teal-600'
        },
        {
            initials: 'CB',
            name: 'Casey Blake',
            position: 'Content Creator',
            bio: 'Talented content creator who specializes in translating complex economic concepts into engaging digital content. Casey helps our audience understand economic principles through creative storytelling.',
            gradient: 'from-blue-400 to-cyan-500',
            experience: '5 years',
            specialty: 'Digital Content',
            color: 'text-blue-600'
        },
        {
            initials: 'LP',
            name: 'Lorem Ipsum',
            position: 'Dolor Sit Amet',
            bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.',
            gradient: 'from-blue-400 to-purple-500',
            experience: '5 years',
            specialty: 'Consectetur Adipiscing',
            color: 'text-blue-600'
        },
        {
            initials: 'CD',
            name: 'Consectetur Dolor',
            position: 'Adipiscing Elit',
            bio: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.',
            gradient: 'from-green-400 to-blue-500',
            experience: '8 years',
            specialty: 'Sed Do Eiusmod',
            color: 'text-green-600'
        },
        {
            initials: 'SE',
            name: 'Sed Eiusmod',
            position: 'Tempor Incididunt',
            bio: 'Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.',
            gradient: 'from-yellow-400 to-orange-500',
            experience: '6 years',
            specialty: 'Ut Labore Et Dolore',
            color: 'text-yellow-600'
        },
        {
            initials: 'UL',
            name: 'Ut Labore',
            position: 'Et Dolore Magna',
            bio: 'Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam.',
            gradient: 'from-red-400 to-pink-500',
            experience: '9 years',
            specialty: 'Aliqua Ut Enim',
            color: 'text-red-600'
        },
        {
            initials: 'AV',
            name: 'Aliqua Veniam',
            position: 'Nostrud Exercitation',
            bio: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi.',
            gradient: 'from-purple-400 to-indigo-500',
            experience: '4 years',
            specialty: 'Ullamco Laboris',
            color: 'text-purple-600'
        },
        {
            initials: 'UL',
            name: 'Ullamco Laboris',
            position: 'Nisi Ut Aliquip',
            bio: 'Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.',
            gradient: 'from-indigo-400 to-blue-500',
            experience: '7 years',
            specialty: 'Ex Ea Commodo',
            color: 'text-indigo-600'
        },
        {
            initials: 'EC',
            name: 'Ex Commodo',
            position: 'Consequat Duis',
            bio: 'Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.',
            gradient: 'from-pink-400 to-red-500',
            experience: '11 years',
            specialty: 'Aute Irure Dolor',
            color: 'text-pink-600'
        },
        {
            initials: 'AI',
            name: 'Aute Irure',
            position: 'Dolor In Reprehenderit',
            bio: 'Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est.',
            gradient: 'from-teal-400 to-green-500',
            experience: '6 years',
            specialty: 'In Voluptate Velit',
            color: 'text-teal-600'
        },
        {
            initials: 'VE',
            name: 'Voluptate Esse',
            position: 'Cillum Dolore Eu',
            bio: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error.',
            gradient: 'from-blue-400 to-cyan-500',
            experience: '5 years',
            specialty: 'Fugiat Nulla Pariatur',
            color: 'text-blue-600'
        }
    ];
    
    // Get DOM elements
    const teamCards = document.querySelectorAll('.team-card');
    const memberDetails = document.getElementById('memberDetails');
    const detailsOverlay = document.getElementById('detailsOverlay');
    const closeDetails = document.getElementById('closeDetails');
    
    let isModalTransitioning = false;
    
    // Add click event to each team card
    teamCards.forEach(card => {
        card.addEventListener('click', function() {
            if (isModalTransitioning) return;
            
            const index = parseInt(this.getAttribute('data-member'));
            const member = teamMembers[index];
            
            // If modal is already open, close it first then open the new one
            if (memberDetails.classList.contains('active')) {
                isModalTransitioning = true;
                closeMemberDetailsWithCallback(() => {
                    showMemberDetails(member);
                    isModalTransitioning = false;
                });
            } else {
                showMemberDetails(member);
            }
        });
    });
    
    function showMemberDetails(member) {
        // Update member details modal with member info
        document.querySelector('.member-initials').textContent = member.initials;
        document.querySelector('.member-name').textContent = member.name;
        
        const positionElement = document.querySelector('.member-position');
        positionElement.textContent = member.position;
        positionElement.className = `member-position text-xl font-medium mb-4 ${member.color}`;
        
        document.querySelector('.member-bio').textContent = member.bio;
        document.querySelector('.member-experience').textContent = member.experience;
        document.querySelector('.member-specialty').textContent = member.specialty;
        
        // Update gradient
        document.querySelector('.member-gradient').className = 
            `w-full h-full member-gradient bg-gradient-to-br ${member.gradient} flex items-center justify-center`;
        
        // Show the details modal
        memberDetails.classList.remove('hidden');
        setTimeout(() => {
            memberDetails.classList.add('active');
        }, 10);
        
        // Prevent scrolling
        document.body.style.overflow = 'hidden';
    }
    
    // Close modal when X button or overlay is clicked
    closeDetails.addEventListener('click', () => closeMemberDetails());
    detailsOverlay.addEventListener('click', () => closeMemberDetails());
    
    function closeMemberDetails() {
        memberDetails.classList.remove('active');
        
        // Delay the modal hiding to allow for animations
        setTimeout(() => {
            memberDetails.classList.add('hidden');
            document.body.style.overflow = ''; // Re-enable scrolling
        }, 300);
    }
    
    function closeMemberDetailsWithCallback(callback) {
        memberDetails.classList.remove('active');
        
        // Delay the modal hiding to allow for animations
        setTimeout(() => {
            memberDetails.classList.add('hidden');
            if (callback) callback();
        }, 300);
    }
    
    // Close modal with Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && !memberDetails.classList.contains('hidden')) {
            closeMemberDetails();
        }
    });
});

// Department tabs functionality
document.addEventListener('DOMContentLoaded', function() {
    const tabs = document.querySelectorAll('.department-tab');
    const nav = document.getElementById('mainNav');
    
    // Tab switching functionality
    tabs.forEach(tab => {
        tab.addEventListener('click', function() {
            // Remove active class from all tabs
            tabs.forEach(t => t.classList.remove('active'));
            
            // Add active class to clicked tab
            this.classList.add('active');
            
            // Hide all sections
            const sections = document.querySelectorAll('.department-section');
            sections.forEach(section => section.classList.remove('active'));
            
            // Show the target section
            const targetSection = document.getElementById(this.dataset.target);
            targetSection.classList.add('active');
        });
    });
    
    // Navbar scroll effect
    window.addEventListener('scroll', function() {
        if (window.scrollY > 10) {
            nav.classList.add('scrolled');
        } else {
            nav.classList.remove('scrolled');
        }
    });
});