js/pages/HomePage.js

// pages/HomePage.js - Home page functionality for SPA
import { createTeamMember } from '../main.js';
import { createHomeAreaCard } from '../cards/HomeAreaCard.js';
import { createArtifactCarousel } from '../cards/ArtifactSummaryCard.js';
import { areasData, homeBackgroundImage } from '../data/areas.js';
import { featuredArtifacts } from '../data/artifacts.js';
import { teamMembers } from '../data/team.js';

export function renderHomePage() {
    const content = `
        <!-- Page Background Image for Main Content -->
        <div class="fixed opacity-40 z-0" style="top: 104px; left: 256px; right: 0; bottom: 0;" id="home-background-container">
            <img src="images/${homeBackgroundImage.image}" alt="" class="w-full h-full object-cover pointer-events-none">
            <!-- Attribution Tooltip -->
            <div id="home-bg-attribution" class="absolute bottom-4 right-4 bg-black bg-opacity-75 text-white text-xs px-2 py-1 rounded opacity-0 transition-opacity duration-200 max-w-xs z-50">
                <a href="${homeBackgroundImage.sourceUrl}" target="_blank" class="text-blue-300 hover:text-blue-100">
                    ${homeBackgroundImage.attribution}
                </a>
            </div>
        </div>
        
        <!-- Team Introduction Section -->
        <section id="intro" class="mb-12 relative z-20">
            <!-- Part 1: Team Introduction and Research Areas -->
            <div class="bg-white rounded-lg shadow-sm p-8 mb-6">
                <h3 class="text-3xl font-bold text-gray-900 mb-6">Team Introduction</h3>
        
                <!-- Research Areas Introduction -->
                <div class="mb-8">
                    <p class="text-gray-700 leading-relaxed mb-6">We're a multidisciplinary team working on research and regulatory questions related to AI systems &mdash; their (open) development, governance, and impact on society at large. Our work spans four key inter-connected areas where AI technology intersects with society:</p>
                    
                    <!-- Research Areas Navigation -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                        ${Object.values(areasData).map(area => `
                            <a 
                                href="#${area.id}"
                                class="group p-4 bg-gradient-to-br ${area.colors.gradient} rounded-lg border transition-all duration-200 text-left block no-underline"
                            >
                                <h4 class="font-semibold text-sm mb-1 group-hover:scale-105 transition-transform">${area.title}</h4>
                                <p class="text-xs opacity-80">${getAreaShortDescription(area.id)}</p>
                            </a>
                        `).join('')}
                    </div>

                    <!-- Perspective and Positionality -->
                    <div class="mt-8 px-4 py-4 bg-gradient-to-r from-orange-50 to-yellow-50 border-l-4 border-orange-300 rounded-r-lg">
                        <p class="font-bold text-center text-orange-900 mb-2">🤗 Perspective and Positionality</p>
                        <p class="text-orange-800 italic leading-relaxed">
                            Our work on these topics is shaped by the context of our work at Hugging Face, which is the main platform for open and collaborative development and sharing of Artificial Intelligence artifacts. As a result, much of our work discusses the specific roles of openness and transparency in shaping AI technology into a more equitable and better-governed category of technology.
                        </p>
                    </div>
                </div>

                

                <!-- Recent & Featured Works -->
                <div id="recent-featured-works" class="mb-12 border-t border-gray-200 pt-6">
                    <h4 class="text-lg font-semibold text-gray-900 mb-4">Recent & Featured Works</h4>
                    <div class="mb-8">
                        <div id="featured-artifacts-carousel">
                            <!-- Carousel will be inserted here -->
                        </div>
                    </div>
                </div>


                <!-- Team and Collaborators -->
                <div id="team-members" class="border-t border-gray-200 pt-6">
                    <h4 class="text-lg font-semibold text-gray-900 mb-4">Team Members</h4>
                    <div class="mb-4">
                        <div id="team-grid" class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <!-- Team members will be inserted here by JavaScript -->
                        </div>
                    </div>                            
                    <div class="prose text-gray-700">
                        <p>We also work closely with 
                            <a href="https://huggingface.co/irenesolaiman" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">Irene Solaiman</a> (Chief Policy Officer), 
                            <a href="https://huggingface.co/evijit" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">Avijit Ghosh</a> (Applied Policy Researcher) in the policy team, 
                            and with <a href="https://huggingface.co/meg" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">Meg Mitchell</a> (Chief Ethics Scientist), 
                            and with <a href="https://huggingface.co/brunatrevelin" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">Bruna Trevelin</a> (Legal Counsel)!
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Research Areas Header -->
        <div id="research-areas-header" class="text-center mb-12 relative z-20">
            <h2 class="text-3xl font-bold text-gray-900">Research Areas</h2>
        </div>

        <!-- Research Areas -->
        <section id="research-areas" class="space-y-8 relative z-20">
            <!-- Area cards will be inserted here by JavaScript -->
        </section>
    `;

    return {
        content,
        init: () => {
            initializeTeamMembers();
            initializeHomeAreaCards();
            initializeArtifactCarousels();
            initializeBackgroundAttribution();
        }
    };
}

export function getHomePageSidebar() {
    return `
        <nav class="p-4">
            <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">On This Page</h3>
            <ul class="space-y-1">
                <li><a href="#intro" class="page-nav-link block px-3 py-2 text-sm text-blue-600 bg-blue-50 rounded-md">Team Introduction</a></li>
                <li class="ml-4">
                    <ul class="space-y-1">
                        <li><a href="#recent-featured-works" class="page-nav-link block px-3 py-2 text-xs text-blue-600 bg-blue-50 rounded-md">Recent & Featured Works</a></li>
                        <li><a href="#team-members" class="page-nav-link block px-3 py-2 text-xs text-blue-600 bg-blue-50 rounded-md">Team Members</a></li>        
                    </ul>
                </li>
                <li><a href="#research-areas-header" class="page-nav-link block px-3 py-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-md transition-colors">Research Areas</a></li>
                <li class="ml-4">
                    <ul class="space-y-1">
                        <li><a href="#efficiency" class="page-nav-link block px-3 py-2 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md transition-colors">Efficiency & Environment</a></li>
                        <li><a href="#personal" class="page-nav-link block px-3 py-2 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md transition-colors">Consent & Personal Interactions</a></li>
                        <li><a href="#rights" class="page-nav-link block px-3 py-2 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md transition-colors">Rights & Regulation</a></li>
                        <li><a href="#ecosystems" class="page-nav-link block px-3 py-2 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md transition-colors">Socio-Economic & Technical Ecosystems</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    `;
}

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

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

function getAreaShortDescription(areaId) {
    const descriptions = {
        efficiency: 'Costs, energy, sustainability',
        personal: 'Personal interactions, agency',
        rights: 'Legal frameworks, compliance',
        ecosystems: 'Markets, labor, power dynamics'
    };
    return descriptions[areaId] || '';
}

function initializeHomeAreaCards() {
    const areasContainer = document.getElementById('research-areas');
    if (!areasContainer) return;

    const areas = Object.values(areasData);
    areasContainer.innerHTML = areas.map(area => 
        createHomeAreaCard(area.id, area.title, area.description, area.openness, Object.values(area.subAreas).map(sub => typeof sub === 'string' ? sub : sub.name), area.imagePosition, area.imageAttribution, area.imageAltText)
    ).join('');
}

function initializeArtifactCarousels() {
    const carouselContainer = document.getElementById('featured-artifacts-carousel');
    if (!carouselContainer) return;
    
    createArtifactCarousel(featuredArtifacts, 'featured-artifacts-carousel');
}

function initializeBackgroundAttribution() {
    const backgroundContainer = document.getElementById('home-background-container');
    const attribution = document.getElementById('home-bg-attribution');
    
    if (!backgroundContainer || !attribution) {
        return;
    }

    // Show attribution on hover over the background container
    backgroundContainer.addEventListener('mouseenter', () => {
        attribution.style.opacity = '1';
    });

    backgroundContainer.addEventListener('mouseleave', () => {
        attribution.style.opacity = '0';
    });
}