<?php

declare(strict_types=1);

/**
 * Glas-Karte im Startseiten-Hero: die nächsten Termine des Vereins als
 * automatisch wechselnder Slider. Props:
 *   $items  aus upcoming_highlights() (app/helpers.php) — Spiele und
 *           Vereins-Events chronologisch gemischt, je Eintrag type/label/href/
 *           link_text plus die rohen Daten für die Innenvariante
 *
 * Zwei Innenvarianten, eine Karte: 'spiel' rendert match-feature (Heim über
 * Gast mit Wappen, wie im Matchcenter-Band), 'event' rendert event-feature
 * (Datums-Chip + Titel + Ort). Die Beschriftung („Nächstes Spiel · 1. Mannschaft")
 * kommt fertig aus dem Helper; die Meta-Zeile von match-feature bleibt in der
 * Karte per CSS aus, damit Mannschaft/Liga nicht zweimal dastehen.
 *
 * Antrieb ist der generische assets/js/carousel.js (dieselben data-Hooks wie
 * banner-slider): Crossfade, Fortschrittsring im aktiven Indikator, Pause-Taste
 * (WCAG 2.2.2), Pause bei Hover/Fokus, kein Autoplay bei prefers-reduced-motion.
 * Ohne JS ist nur der nächste Termin sichtbar und verlinkt (die weiteren Folien
 * tragen hidden, die Steuerung bleibt verborgen, weil sie funktionslos wäre).
 *
 * Die Karten-Wurzel ist bewusst ein div und nicht selbst der Link: die
 * Steuer-Buttons liegen in der Karte, verschachtelte interaktive Elemente wären
 * ungültig. Verlinkt ist deshalb der Inhalt jeder Folie.
 */
$items = $items ?? [];
if ($items === []) {
    return;
}
$total = count($items);
?>
                <div class="hero__upcoming"<?= $total > 1 ? ' data-carousel aria-roledescription="Karussell" aria-label="Nächste Termine"' : '' ?>>
                    <ul class="hero__upcoming-track" id="hero-upcoming-track" data-carousel-track aria-live="off">
<?php foreach ($items as $i => $item): ?>
                        <li class="hero__upcoming-slide"<?= $total > 1 ? ' data-carousel-slide role="group" aria-roledescription="Folie" aria-label="' . ($i + 1) . ' von ' . $total . '"' : '' ?><?= $i === 0 ? '' : ' hidden' ?>>
                            <a class="hero__upcoming-link" href="<?= e($item['href']) ?>">
                                <p class="hero__upcoming-label"><?= e($item['label']) ?></p>
<?php if ($item['type'] === 'spiel'): ?>
<?php component('match-feature', [
                                    'match'     => $item['match'],
                                    'team_name' => $item['team_name'],
                                    'league'    => $item['league'],
                                ]); ?>
<?php else: ?>
<?php component('event-feature', ['event' => $item['event']]); ?>
<?php endif; ?>
                                <span class="visually-hidden"><?= e($item['link_text']) ?></span>
                            </a>
                        </li>
<?php endforeach; ?>
                    </ul>
<?php if ($total > 1): ?>
                    <?php /* Ohne JS verborgen (Steuerung wäre funktionslos); carousel.js blendet sie ein. */ ?>
                    <div class="hero__upcoming-controls" data-carousel-controls hidden>
                        <div class="hero__upcoming-indicators" role="group" aria-label="Termin wählen">
<?php foreach ($items as $i => $item): ?>
                            <button class="hero__upcoming-dot" type="button" data-carousel-dot aria-controls="hero-upcoming-track" aria-label="Termin <?= ($i + 1) ?> von <?= $total ?>: <?= e($item['label']) ?>">
                                <span class="hero__upcoming-progress" data-carousel-progress aria-hidden="true"></span>
                            </button>
<?php endforeach; ?>
                        </div>
                        <?php /* Pause/Play — WCAG 2.2.2. Nur bei aktiver Auto-Rotation sichtbar. */ ?>
                        <?php /* Kein btn--sm: dessen 44px kommen über ::after, die Fläche würde
                                 in dieser Reihe den letzten Indikator überlappen (siehe CLAUDE.md). */ ?>
                        <button class="btn btn--icon hero__upcoming-toggle" type="button" data-carousel-toggle aria-pressed="false" aria-controls="hero-upcoming-track" hidden>
                            <?= icon('pause-fill', 'hero__upcoming-toggle-icon hero__upcoming-toggle-icon--pause') ?>
                            <?= icon('play-fill', 'hero__upcoming-toggle-icon hero__upcoming-toggle-icon--play') ?>
                            <span class="visually-hidden" data-carousel-toggle-label>Automatischen Wechsel pausieren</span>
                        </button>
                    </div>
<?php endif; ?>
                </div>
