<?php

declare(strict_types=1);

/**
 * Mannschafts-Karten, die auf die Team-Unterseiten verlinken. Props:
 *   $teams        array [{name, slug, category, league?, image?{base,widths,alt}}, …]
 *   $title        string (optional, Default 'Unsere Mannschaften')
 *   $title_hidden bool   (optional) — H2 für SEO/A11y im DOM, aber visuell versteckt
 *   $intro        string (optional)
 *   $intro_below  bool   (optional) — Intro als „Klärtext" UNTER die Kacheln statt darüber
 *   $anchor       string (optional, Default 'mannschaften')
 * Ganze Karte ist ein Link. Ohne Bild greift ein Platzhalter.
 */
$title = $title ?? 'Unsere Mannschaften';
$title_hidden = $title_hidden ?? false;
$anchor = $anchor ?? 'mannschaften';
$intro = $intro ?? '';
$intro_below = $intro_below ?? false;
$teams = $teams ?? [];
if ($teams === []) {
    return;
}
?>
        <section class="section team-cards" id="<?= e($anchor) ?>">
            <div class="container">
                <h2<?= $title_hidden ? ' class="visually-hidden"' : '' ?>><?= e($title) ?></h2>
<?php if ($intro !== '' && !$intro_below): ?>
                <p class="team-cards__intro text-muted"><?= e($intro) ?></p>
<?php endif; ?>
                <ul class="team-cards__grid">
<?php foreach ($teams as $t): ?>
                    <li>
                        <a class="team-card" href="<?= e(url($t['slug'])) ?>">
                            <div class="team-card__media">
<?php if (!empty($t['image']['base'])): ?>
<?php component('img', ['image' => $t['image'], 'sizes' => '(max-width: 600px) 100vw, 360px', 'class' => 'team-card__img']); ?>
<?php else: ?>
                                <img class="team-card__img" src="<?= e(asset('img/persons/platzhalter.jpg')) ?>" alt="" width="400" height="300" loading="lazy" decoding="async">
<?php endif; ?>
                            </div>
                            <div class="team-card__body">
                                <h3 class="team-card__name"><?= e($t['name']) ?></h3>
                                <p class="team-card__meta"><?= e(trim($t['category'] . (!empty($t['league']) ? ' · ' . $t['league'] : ''))) ?></p>
                                <span class="team-card__cta">Mehr erfahren <?= icon('arrow-right', 'team-card__arrow') ?></span>
                            </div>
                        </a>
                    </li>
<?php endforeach; ?>
                </ul>
<?php if ($intro !== '' && $intro_below): ?>
                <p class="team-cards__intro team-cards__intro--below text-muted"><?= e($intro) ?></p>
<?php endif; ?>
            </div>
        </section>
