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 = `
        <!-- Top spacing -->
        <div class="mb-8"></div>
        
        <!-- Page Navigation Card -->
        <section class="mb-8 relative z-20 px-4 sm:px-6 lg:px-8">
            <div class="bg-white/70 backdrop-blur-sm shadow-sm rounded-lg px-6 py-4 w-full" style="max-width: min(90%, 1400px); margin: 0 auto;">
                <div class="flex items-center gap-3 overflow-x-auto">
                    <span class="text-gray-600 font-semibold whitespace-nowrap">On this page:</span>
                    <a href="/#about" class="px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors whitespace-nowrap">About</a>
                    <span class="text-gray-300">•</span>
                    <a href="/#recent-works" class="px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors whitespace-nowrap">Recent Works</a>
                    <span class="text-gray-300">•</span>
                    <a href="/#research-areas" class="px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors whitespace-nowrap">Research Areas</a>
                    <span class="text-gray-300">•</span>
                    <a href="/#team" class="px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors whitespace-nowrap">Team Members</a>
                </div>
            </div>
        </section>
        
        <!-- About Section - Responsive Width with Frosted Glass -->
        <section id="about" class="mb-16 relative z-20 px-4 sm:px-6 lg:px-8">
            <div class="bg-white/40 backdrop-blur-sm shadow-sm rounded-lg p-6 md:p-10 w-full" style="max-width: min(90%, 1400px); margin: 0 auto;">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">About</h2>
                
                <!-- Introduction Text - Single column -->
                <div class="mb-8">
                    <div>
                        <p class="text-gray-700 leading-relaxed">
                            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>
                    </div>
                </div>

                <!-- Perspective and Positionality -->
                <div class="px-4 sm:px-6 py-5 bg-gradient-to-r from-orange-50/95 to-yellow-50/95 backdrop-blur-sm border-l-4 border-orange-400 rounded-r-lg">
                    <p class="font-bold text-orange-900 mb-3 text-lg">🤗 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>
        </section>

        <!-- Featured Works Section - Transparent Card -->
        <section id="recent-works" class="mb-16 relative z-20 px-4 sm:px-6 lg:px-8">
            <div class="bg-white/20 backdrop-blur-sm shadow-sm rounded-lg p-6 md:p-10 w-full" style="max-width: min(90%, 1400px); margin: 0 auto;">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Recent & Featured Works</h2>
                <div id="featured-artifacts-carousel" class="overflow-x-auto -mx-2">
                    <!-- Carousel will be inserted here -->
                </div>
            </div>
        </section>

        <!-- Research Areas Section - Transparent Card with 2x2 Grid -->
        <section id="research-areas" class="mb-16 relative z-20 px-4 sm:px-6 lg:px-8">
            <div class="bg-white/20 backdrop-blur-sm shadow-sm rounded-lg p-6 md:p-10 w-full" style="max-width: min(90%, 1400px); margin: 0 auto;">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-8 text-center">Research Areas</h2>
                <div id="research-areas-grid" class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
                    <!-- Area cards will be inserted here by JavaScript -->
                </div>
            </div>
        </section>

        <!-- Team Members Section - Frosted Background -->
        <section id="team" class="mb-16 relative z-20 px-4 sm:px-6 lg:px-8">
            <div class="bg-white/40 backdrop-blur-sm shadow-sm rounded-lg p-6 md:p-10 w-full" style="max-width: min(90%, 1400px); margin: 0 auto;">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Team Members</h2>
                <div id="team-grid" class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mb-6">
                    <!-- Team members will be inserted here by JavaScript -->
                </div>
                <div class="prose max-w-none text-gray-700 pt-4 border-t border-gray-200">
                    <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>
        </section>
    `;

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

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, and adoption dynamics'
    };
    return descriptions[areaId] || '';
}

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

    const areas = Object.values(areasData);
    areasContainer.innerHTML = areas.map(area => createResearchAreaCard(area)).join('');
}

function createResearchAreaCard(area) {
    // Get first sentence of description
    const shortDesc = area.description.split('.')[0] + '.';
    
    // Get topic names and colors from the subAreas - same logic as ArtifactSummaryCard
    const topics = Object.values(area.subAreas).map(subArea => {
        const topicName = subArea.navName || subArea.name;
        let bgColor = 'bg-gray-200';
        let textColor = 'text-gray-700';
        
        // Extract background and text color from the subArea color class
        if (subArea.color) {
            // Match pattern like "bg-emerald-100 text-emerald-800"
            const bgMatch = subArea.color.match(/bg-(\w+)-(\d+)/);
            const textMatch = subArea.color.match(/text-(\w+)-(\d+)/);
            
            if (bgMatch) {
                bgColor = `bg-${bgMatch[1]}-${bgMatch[2]}`;
            }
            if (textMatch) {
                textColor = `text-${textMatch[1]}-700`; // Use consistent 700 shade like artifact cards
            }
        }
        
        return {
            name: topicName,
            bgColor,
            textColor
        };
    });
    
    return `
        <a href="/${area.id}" 
           class="group relative block border border-gray-200 rounded-lg overflow-hidden bg-white hover:shadow-lg transition-all duration-200 h-64">
            
            <!-- Background image with low opacity -->
            ${area.image ? `
            <div class="absolute inset-0 opacity-15 group-hover:opacity-30 transition-opacity">
                <img src="/images/${area.image}" alt="" class="w-full h-full object-cover">
            </div>
            ` : ''}
            
            <!-- Content -->
            <div class="relative p-5 h-full flex flex-col">
                <!-- Header -->
                <div class="flex justify-between items-start mb-3 flex-shrink-0">
                    <h3 class="text-lg font-bold text-gray-900 leading-tight">${area.navTitle}</h3>
                    <svg class="w-5 h-5 text-gray-400 group-hover:text-blue-600 transition-colors flex-shrink-0 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </div>
                
                <!-- Description - scrollable -->
                <div class="text-md text-gray-700 mb-4 flex-grow overflow-y-auto pr-2">
                    <p class="leading-relaxed">${area.description}</p>
                </div>
                
                <!-- Topics with colors from subAreas - same style as artifact cards -->
                <div class="flex-shrink-0">
                    <p class="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-2">Topics:</p>
                    <div class="flex flex-wrap gap-2">
                        ${topics.map(topic => `
                            <span class="inline-block px-2 py-0.5 text-sm ${topic.bgColor} ${topic.textColor} rounded">
                                ${topic.name}
                            </span>
                        `).join('')}
                    </div>
                </div>
                
                <!-- Image Attribution -->
                ${area.imageAttribution ? `
                    <p class="text-xs text-gray-500 mt-3 pt-2 border-t border-gray-100 flex-shrink-0">${area.imageAttribution}</p>
                ` : ''}
            </div>
        </a>
    `;
}

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';
    });
}