<?php

declare(strict_types=1);

/**
 * Kader-/Trainerstab-Raster einer Mannschaft. Props:
 *   $roster array{
 *     title?, intro?,
 *     variant?  : 'below' (Name unter dem Foto, Default) | 'overlay' (Name im Foto, Coolvetica),
 *     groups?   : [{ title?, members:[…] }, …]   ODER
 *     members?  : [{ name, role?, image? }, …]    (eine Gruppe ohne Überschrift)
 *   }
 *   $anchor string (optional, Default 'kader')
 * Gruppen mit Titel bekommen eine Zwischenüberschrift (h3); leere Gruppen entfallen.
 * Ohne Foto greift der Platzhalter-Avatar.
 */
$anchor = $anchor ?? 'kader';

// Gruppen normalisieren: entweder explizite groups oder flache members als eine Gruppe.
$groups = $roster['groups'] ?? null;
if ($groups === null) {
    $flat = $roster['members'] ?? [];
    $groups = $flat === [] ? [] : [['title' => '', 'members' => $flat]];
}
// Leere Gruppen rauswerfen.
$groups = array_values(array_filter($groups, static fn ($g): bool => !empty($g['members'])));
if ($groups === []) {
    return;
}

$variant = ($roster['variant'] ?? 'below') === 'overlay' ? 'overlay' : 'below';
$title = $roster['title'] ?? 'Kader';
$intro = $roster['intro'] ?? '';
$cardMod = $variant === 'overlay' ? ' roster-card--overlay' : '';
?>
        <section class="section team-roster" id="<?= e($anchor) ?>">
            <div class="container">
                <h2><?= e($title) ?></h2>
<?php if ($intro !== ''): ?>
                <p class="team-roster__intro text-muted"><?= e($intro) ?></p>
<?php endif; ?>
<?php foreach ($groups as $group): ?>
<?php if (!empty($group['title'])): ?>
                <h3 class="team-roster__group"><?= e($group['title']) ?></h3>
<?php endif; ?>
                <ul class="team-roster__grid">
<?php foreach ($group['members'] as $m): ?>
<?php $src = !empty($m['image']) ? $m['image'] : 'img/persons/platzhalter-spieler.jpg'; ?>
<?php $alt = !empty($m['image']) ? e($m['name']) : ''; ?>
<?php $staffMod = !empty($m['role']) ? ' roster-card--staff' : ''; ?>
                    <li class="roster-card<?= $cardMod . $staffMod ?>">
<?php if ($variant === 'overlay'): ?>
                        <img class="roster-card__img" src="<?= e(asset($src)) ?>" alt="<?= $alt ?>"
                            width="480" height="600" loading="lazy" decoding="async">
                        <div class="roster-card__caption">
<?php if (!empty($m['role'])): ?>
                            <span class="roster-card__role"><?= e($m['role']) ?></span>
<?php endif; ?>
                            <p class="roster-card__name"><?= e($m['name']) ?></p>
                        </div>
<?php else: ?>
                        <div class="roster-card__media">
                            <img src="<?= e(asset($src)) ?>" alt="<?= $alt ?>"
                                width="480" height="600" loading="lazy" decoding="async">
                        </div>
                        <div class="roster-card__body">
<?php if (!empty($m['role'])): ?>
                            <span class="roster-card__role"><?= e($m['role']) ?></span>
<?php endif; ?>
                            <p class="roster-card__name"><?= e($m['name']) ?></p>
                        </div>
<?php endif; ?>
                    </li>
<?php endforeach; ?>
                </ul>
<?php endforeach; ?>
            </div>
        </section>
