function renderPeople(people, reviews = []) {
    const grid = document.getElementById('people-grid');
    if (!grid) return; // Veiligheid voor als de grid niet gevonden wordt

    const trusted = [];
    const unknowns = [];
    const shadowZone = [];

    people.forEach(p => {
        let score = 0; // De neutrale startlijn
        
        // 1. Haal reviews op voor deze persoon
        const pReviews = reviews.filter(r => r.to_user === p.name);
        
        // 2. Definieer de "Red Flags" (Spaties of SCHREEUWEN)
        const hasSpaces = p.name.trim().includes(' ');
        const isScreaming = p.name === p.name.toUpperCase() && p.name.length > 5;
        const isWarned = p.trust_level === 'warned';
        const isVerified = p.trust_level === 'verified';

        // LOGICA: De Shadow-zone (-1 tot -100)
        if (hasSpaces || isScreaming || isWarned) {
            score = isWarned ? -100 : (isScreaming ? -75 : -50);
            p.calculatedScore = score;
            shadowZone.push(p);
        } 
        // LOGICA: Trusted (+1 tot +100)
        else if (pReviews.length > 0 || isVerified) {
            score = (pReviews.length * 10) + (isVerified ? 30 : 0);
            p.calculatedScore = Math.min(100, score);
            trusted.push(p);
        } 
        // LOGICA: Unknown (Exact 0)
        else {
            p.calculatedScore = 0;
            unknowns.push(p);
        }
    });

    // Sorteren: Beste bovenaan, ergste onderaan in de Shame-list
    trusted.sort((a, b) => b.calculatedScore - a.calculatedScore);
    shadowZone.sort((a, b) => a.calculatedScore - b.calculatedScore);

    // Bouw de HTML
    let html = '';

    // Eerst de goeie mensen en de nieuwkomers met goede namen
    [...trusted, ...unknowns].forEach(p => {
        html += createCardHTML(p, false);
    });

    // Dan de Hall of Shame (onderaan, inklapbaar)
    if (shadowZone.length > 0) {
        html += `
            <div class="shame-separator"></div>
            <details class="hall-of-shame">
                <summary>⚠️ Hall of Shame (${shadowZone.length} onbereikbare/verdachte accounts)</summary>
                <div class="shame-grid">
                    ${shadowZone.map(p => createCardHTML(p, true)).join('')}
                </div>
            </details>
        `;
    }

    grid.innerHTML = html;
}

function createCardHTML(p, isShadow) {
    const shadowClass = isShadow ? 'shadow-card' : '';
    // Icoontjes op basis van score
    let icon = '🌱'; // Unknown
    if (p.calculatedScore > 0) icon = '🌳'; 
    if (p.calculatedScore < 0) icon = '🍂';
    if (p.calculatedScore >= 80) icon = '🌟';

    return `
        <div class="person-card ${shadowClass}">
            <div class="trust-badge" style="font-size: 0.7rem; color: #888;">
                Trust Score: ${p.calculatedScore} ${icon}
            </div>
            <h3 style="margin: 5px 0;">${p.name}</h3>
            <p><strong>Biedt:</strong> ${p.offerings || '—'}</p>
            <p><strong>Zoekt:</strong> ${p.needs || '—'}</p>
            ${isShadow ? '<p class="warning-text">⚠️ Geen geldige alias of verdacht gedrag.</p>' : ''}
        </div>
    `;
}