js/main.js

// Team member component
function createTeamMember(name, role, hfUsername, tags) {
    const tagData = {
        'efficiency': { name: 'Efficiency, Costs & Environment', id: 'efficiency' },
        'personal': { name: 'Consent & Personal Interactions', id: 'personal' },
        'rights': { name: 'Rights & Regulation', id: 'rights' },
        'ecosystems': { name: 'Socio-economic & Technical Ecosystems', id: 'ecosystems' }
    };

    const colors = ['blue', 'green', 'purple', 'orange', 'indigo', 'pink'];
    const colorIndex = name.length % colors.length;
    const color = colors[colorIndex];
    
    const initials = name.split(' ').map(n => n[0]).join('');
    
    const tagElements = tags.map(tag => {
        const tagInfo = tagData[tag];
        return `<span class="inline-block px-2 py-0.5 text-xs bg-gray-100 text-gray-700 rounded-full hover:bg-blue-100 hover:text-blue-800 cursor-pointer transition-colors whitespace-nowrap" onclick="scrollToSection('${tagInfo.id}')">${tagInfo.name}</span>`;
    }).join('');

    return `
        <div class="flex items-start space-x-3 p-3 rounded-lg hover:bg-gray-50 transition-colors">
            <div class="flex-shrink-0">
                <div class="w-14 h-14 rounded-full overflow-hidden bg-gradient-to-br from-${color}-400 to-${color}-600 flex items-center justify-center relative">
                    <img 
                        src="images/${hfUsername}.jpeg" 
                        alt="${name}" 
                        class="w-full h-full object-cover"
                        onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
                    />
                    <span class="text-white font-semibold text-base hidden w-full h-full items-center justify-center absolute">${initials}</span>
                </div>
            </div>
            <div class="flex-1 min-w-0">
                <h4 class="font-semibold text-gray-900 text-base">
                    <a href="https://huggingface.co/${hfUsername}" class="hover:text-blue-600 transition-colors" target="_blank">
                        ${name}
                    </a>
                </h4>
                <p class="text-sm text-gray-600 mb-1.5">${role}</p>
                <div class="flex gap-1.5 overflow-x-auto scrollbar-hide">
                    ${tagElements}
                </div>
            </div>
        </div>
    `;
}

// Area card component
function createAreaCard(id, title, description, openness, subAreas, imagePosition = 'left', imageAttribution = null, imageAltText = null, imageSourceUrl = null) {
    const flexDirection = imagePosition === 'left' ? 'lg:flex-row' : 'lg:flex-row-reverse';
    
    const subAreasList = subAreas.map(area => `<li>${area}</li>`).join('');

    // Use provided alt text or fallback to title
    const imgAlt = imageAltText || title;

    // Create attribution text if provided
    const attribution = imageAttribution ? 
        `<p class="text-xs text-gray-500 mt-2 text-center">${imageAttribution}</p>` : '';

    return `
        <div id="${id}" class="bg-white rounded-lg shadow-sm overflow-hidden" style="min-height: 300px;">
            <div class="flex flex-col ${flexDirection}">
                <div class="lg:w-2/3 p-8">
                    <h2 class="text-2xl font-bold text-gray-900 mb-4">${title}</h2>
                    <p class="text-gray-700 mb-6">${description}</p>
                    
                    ${openness ? `
                    <div class="mb-6 px-4 pt-4 pb-6 bg-gradient-to-r from-orange-50 to-yellow-50 border-l-4 border-orange-300 rounded-r-lg">
                        <p class="font-bold text-orange-900 mb-3">The Role of Openness 🤗</p>
                        <p class="text-orange-800 leading-relaxed">${openness}</p>
                    </div>
                    ` : ''}

                    <div class="mb-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-3">Sub-areas</h3>
                        <ul class="list-disc list-inside text-gray-700 space-y-1">
                            ${subAreasList}
                        </ul>
                    </div>
                </div>
                <div class="lg:w-1/3 bg-gray-100">
                    <div class="h-full flex flex-col items-center justify-center p-8">
                        <img src="images/${id}.png" alt="${imgAlt}" class="max-w-full max-h-full object-contain">
                        <a href="${imageSourceUrl}" target="_blank" class="text-xs text-gray-500 mt-2 text-center">${attribution}</a>
                    </div>
                </div>
            </div>
        </div>
    `;
}

// Unified scroll function - used by both team tags and left navigation
function scrollToSection(sectionId) {
    const element = document.getElementById(sectionId);
    if (element) {
        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
}

// Initialize team members
function initializeTeamMembers() {
    const teamContainer = document.getElementById('team-grid');
    if (!teamContainer) return;

    const teamMembers = [
        { name: 'Yacine Jernite', role: 'Head of ML & Society', username: 'yjernite', tags: ['rights', 'ecosystems'] },
        { name: 'Sasha Luccioni', role: 'AI & Climate Lead', username: 'sasha', tags: ['efficiency'] },
        { name: 'Giada Pistilli', role: 'Principal Ethicist', username: 'giadap', tags: ['personal'] },
        { name: 'Lucie-Aimée Kaffee', role: 'Applied Policy Researcher, EU Policy', username: 'frimelle', tags: ['ecosystems', 'rights'] }
    ];

    teamContainer.innerHTML = teamMembers.map(member => 
        createTeamMember(member.name, member.role, member.username, member.tags)
    ).join('');
}

// Initialize area cards
function initializeAreaCards() {
    const areasContainer = document.getElementById('research-areas');
    if (!areasContainer) return;

    const areas = [
        {
            id: 'efficiency',
            title: 'Efficiency, Costs, and Environment',
            description: 'The question of costs is essential to understanding and managing the impact of AI technology; it determines who gets to develop it, use it, and how externalized costs are borne by people who do not choose or benefit from the technology.',
            openness: 'Open development of AI systems greatly facilitates transparency on the training and deployment costs. Users and developers of open models typically have stronger incentives to favor and invest in efficiency.',
            subAreas: [
                'Environmental impact across the supply chains',
                'Measuring energy and financial costs',
                'Making AI less compute-intensive'
            ],
            imagePosition: 'left',
            imageAttribution: 'Hanna Barakat  & Archival Images of AI + AIxDESIGN | BetterImagesOfAI, CC-BY-4.0',
            imageAltText: 'The image shows a surreal landscape with vast green fields extending toward distant mountains under a cloudy sky. Embedded in the fields are digital circuit patterns, resembling an intricate network of blue lines, representing a technological infrastructure. Five large computer monitors with keyboards are placed in a row, each with a Navajo woman sitting in front, weaving the computers. In the far distance, a cluster of teepees is visible.',
            imageSourceUrl: 'https://betterimagesofai.org/images?artist=HannaBarakat&title=WeavingWires2',
        },
        {
            id: 'personal',
            title: 'Consent and Personal Interactions in the Age of AI',
            description: 'Individuals\' experiences of AI systems are shaped both by their personal interactions and by the ways the systems interact with their digital identities - often without our awareness or ability to meaningfully consent.',
            openness: 'Openness at the level of a model\'s training data and of its inputs are necessary to support informed consent, and research on characterizing the different companionship and value dynamics of AI systems enables replicable research into those characteristics.',
            subAreas: [
                'Characterizing personal and parasocial AI interactions',
                'Consent and privacy'
            ],
            imagePosition: 'right',
            imageAttribution: 'Kathryn Conrad | BetterImagesOfAI, CC-BY-4.0',
            imageAltText: 'Students at computers with screens that include a representation of a retinal scanner with pixelation and binary data overlays and a brightly coloured datawave heatmap at the top.',
            imageSourceUrl: 'https://betterimagesofai.org/images?artist=KathrynConrad&title=Datafication',
        },
        {
            id: 'rights',
            title: 'Rights and Regulations',
            description: 'AI is not exempt from regulation; but understanding how new and existing rules apply to technical paradigms involving unprecedented scales of data and automation can present unique challenges.',
            openness: 'Applications of existing regulation as well as the design of new ones to meet the challenges of AI technology require understanding how it works, the trade-offs it entails, and the space of technical interventions that are feasible. Open access to the technology supports independent research from stakeholders with different incentives from those of the largest developers.',
            subAreas: [
                'How does existing regulation apply to AI',
                'Navigating new AI-specific regulation',
                'The place of open-source in regulation'
            ],
            imagePosition: 'left',
            imageAttribution: 'Emily Rand & LOTI | BetterImagesOfAI, CC-BY-4.0',
            imageAltText: 'Building blocks are overlayed with digital squares that highlight people living their day-to-day lives through windows. Some of the squares are accompanied by cursors.',
            imageSourceUrl: 'https://betterimagesofai.org/images?artist=EmilyRand&title=AICity',
        },
        {
            id: 'ecosystems',
            title: 'Socio-economic and Technical Ecosystems',
            description: 'While discussions of the impact of AI often focus on technical characteristics of individual systems, the trajectory and impact of the technology are often better explained by looking to broader dynamics of market power and economic incentives.',
            openness: 'Openness is an important factor in the diffusion of the technology, and enables a greater variety of actors to reliably assess its suitability and to adapt it to their specific contexts and requirements; as well as to understand the role of different resources and the consequences of their concentration among a few actors.',
            subAreas: [
                'Labor impacts of AI',
                'Power, monopolies, and sovereignty',
                'How and where is (open) AI used'
            ],
            imagePosition: 'right',
            imageAttribution: 'Lone Thomasky & Bits&Bäume | BetterImagesOfAI, CC-BY-4.0',
            imageAltText: 'A simplified illustration of urban life near the sea showing groups of people, buildings and bridges, as well as polluting power plants, opencast mining, exploitative work, data centres and wind power stations on a hill. Several small icons indicate destructive processes.',
            imageSourceUrl: 'https://betterimagesofai.org/images?artist=LoneThomasky&title=DigitalSocietyBell',
        }
    ];

    areasContainer.innerHTML = areas.map(area => 
        createAreaCard(area.id, area.title, area.description, area.openness, area.subAreas, area.imagePosition, area.imageAttribution, area.imageAltText, area.imageSourceUrl)
    ).join('');
}

// Initialize left navigation with click handlers
function initializeNavigation() {
    const navLinks = document.querySelectorAll('.page-nav-link');
    
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const href = this.getAttribute('href');
            if (href && href.startsWith('#')) {
                const sectionId = href.substring(1);
                scrollToSection(sectionId);
            }
        });
    });
}

// Main initialization
document.addEventListener('DOMContentLoaded', function() {
    // Initialize components
    initializeTeamMembers();
    initializeAreaCards();
    initializeNavigation();
    
    // Sidebar toggle functionality
    const searchToggle = document.getElementById('search-toggle');
    const searchSidebar = document.getElementById('search-sidebar');
    const searchClose = document.getElementById('search-close');
    const mainContent = document.getElementById('main-content');
    const overlay = document.getElementById('sidebar-overlay');
    // Left sidebar toggle functionality
    const sidebarToggle = document.getElementById('sidebar-toggle');
    const leftSidebar = document.getElementById('left-sidebar');
    const mainContentEl = document.getElementById('main-content');

    function toggleLeftSidebar() {
        const isOpen = !leftSidebar.classList.contains('-translate-x-full');
        
        if (isOpen) {
            // Close sidebar
            leftSidebar.classList.add('-translate-x-full');
            mainContentEl.style.marginLeft = '0';
        } else {
            // Open sidebar
            leftSidebar.classList.remove('-translate-x-full');
            mainContentEl.style.marginLeft = '256px';
        }
    }

    if (sidebarToggle) sidebarToggle.addEventListener('click', toggleLeftSidebar)

    function toggleSearch() {
        const isOpen = !searchSidebar.classList.contains('translate-x-full');
        const leftSidebarOpen = !leftSidebar.classList.contains('-translate-x-full');
        
        if (isOpen) {
            searchSidebar.classList.add('translate-x-full');
            if (leftSidebarOpen) {
                mainContent.style.marginLeft = '256px';
                mainContent.classList.remove('mr-80');
            } else {
                mainContent.style.marginLeft = '0';
                mainContent.classList.remove('mr-80');
            }
            overlay.classList.add('hidden');
        } else {
            searchSidebar.classList.remove('translate-x-full');
            if (leftSidebarOpen) {
                mainContent.style.marginLeft = '256px';
                mainContent.classList.add('mr-80');
            } else {
                mainContent.style.marginLeft = '0';
                mainContent.classList.add('mr-80');
            }
            overlay.classList.remove('hidden');
        }
    }

    if (searchToggle) searchToggle.addEventListener('click', toggleSearch);
    if (searchClose) searchClose.addEventListener('click', toggleSearch);
    if (overlay) overlay.addEventListener('click', toggleSearch);

    // Scroll spy for left navigation
    const sections = document.querySelectorAll('section[id], div[id]');
    const navLinks = document.querySelectorAll('.page-nav-link');

    function updateActiveNavigation() {
        let current = '';
        const scrollPos = window.scrollY + 150;
        
        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.offsetHeight;
            
            if (scrollPos >= sectionTop && scrollPos < sectionTop + sectionHeight) {
                current = section.getAttribute('id');
            }
        });

        navLinks.forEach(link => {
            link.classList.remove('text-blue-600', 'bg-blue-50');
            link.classList.add('text-gray-700');
            
            if (link.getAttribute('href') === `#${current}`) {
                link.classList.remove('text-gray-700');
                link.classList.add('text-blue-600', 'bg-blue-50');
            }
        });
    }

    window.addEventListener('scroll', updateActiveNavigation);
    updateActiveNavigation(); // Initial call
});