tsv08kulmbach-website/app/components/hero.php

<?php

declare(strict_types=1);

/**
 * Vollflächiger Hero mit Hintergrundbild/-video, Titel, Intro und CTAs.
 * Props: $hero (array aus home.json: title, text, image, video?, ctas, align?, compact?,
 *               display?, kicker?, scroll_target?), $upcoming (optional, s. home.php:
 *               die nächsten Termine aus upcoming_highlights() — Spiele und Vereins-Events
 *               gemischt, gerendert über die hero-upcoming-Komponente)
 * align-Varianten: 'center' (mittig zentriert, Konvention für alle Unterseiten seit 27.07.2026),
 * 'bottom-left' (ältere Variante, technischer Fallback — für neue Seiten nicht mehr verwenden).
 * compact: true → niedrigere Variante für Unterseiten-Header.
 * display: true → großer Editorial-Look (Riesen-Titel, Outline-Tagline, Kicker, Scroll-Cue).
 *
 * KONVENTION (siehe CLAUDE.md → Hero-Regel): display + kicker + tagline + video sind der
 * Startseite vorbehalten. Unterseiten-Heros sind einheitlich „Überschrift + Teaser":
 * nur title + text, dazu compact: true und align: 'center'. Kein kicker/tagline,
 * ctas nur als Ausnahme.
 *
 * Liegt mindestens ein Termin in $upcoming, läuft der Display-Hero zweispaltig statt
 * zentriert („hero--duo"): links Titel/Text/CTAs linksbündig, rechts die Termin-Karte als
 * Live-Aufhänger. Ohne Termine (Sommerpause) bleibt es beim zentrierten Hero ohne Karte.
 */
$align = in_array($hero['align'] ?? '', ['center', 'bottom-left'], true) ? $hero['align'] : 'center';
$compact = !empty($hero['compact']);
$display = !empty($hero['display']);
$upcoming = $upcoming ?? [];
$duo = $display && $upcoming !== [];
?>
        <section class="hero<?= $duo ? '' : ($align === 'center' ? ' hero--center' : '') ?><?= $compact ? ' hero--compact' : '' ?><?= $display ? ' hero--display' : '' ?><?= $duo ? ' hero--duo' : '' ?>">
            <div class="hero__media" aria-hidden="true">
<?php component('img', ['image' => $hero['image'], 'sizes' => '100vw', 'eager' => true, 'class' => 'hero__img']); ?>
<?php if (!empty($hero['video'])): ?>
                <?php /* Bild bleibt Poster/Fallback; reduced-motion blendet das Video per CSS aus */ ?>
                <video class="hero__video" src="<?= e(asset($hero['video'])) ?>" autoplay muted loop playsinline preload="none" tabindex="-1"></video>
<?php endif; ?>
            </div>
            <div class="container hero__content<?= $duo ? ' hero__content--duo' : '' ?>">
<?php if ($duo): ?>
                <div class="hero__primary">
<?php if (!empty($hero['kicker'])): ?>
                    <p class="hero__kicker"><?= e($hero['kicker']) ?></p>
<?php endif; ?>
                    <h1 class="hero__title"><?= e($hero['title']) ?><?php if (!empty($hero['tagline'])): ?> <span class="hero__tagline"><?= e($hero['tagline']) ?></span><?php endif; ?></h1>
<?php if (!empty($hero['text'])): ?>
                    <p class="hero__text"><?= e($hero['text']) ?></p>
<?php endif; ?>
<?php if (!empty($hero['ctas'])): ?>
                    <div class="hero__actions">
<?php foreach ($hero['ctas'] as $cta): ?>
<?php component('cta', ['cta' => $cta]); ?>
<?php endforeach; ?>
                    </div>
<?php endif; ?>
                </div>
<?php component('hero-upcoming', ['items' => $upcoming]); ?>
<?php else: ?>
<?php if (!empty($hero['kicker'])): ?>
                <p class="hero__kicker"><?= e($hero['kicker']) ?></p>
<?php endif; ?>
                <h1 class="hero__title"><?= e($hero['title']) ?><?php if (!empty($hero['tagline'])): ?> <span class="hero__tagline"><?= e($hero['tagline']) ?></span><?php endif; ?></h1>
<?php if (!empty($hero['text'])): ?>
                <p class="hero__text"><?= e($hero['text']) ?></p>
<?php endif; ?>
<?php if (!empty($hero['ctas'])): ?>
                <div class="hero__actions">
<?php foreach ($hero['ctas'] as $cta): ?>
<?php component('cta', ['cta' => $cta]); ?>
<?php endforeach; ?>
                </div>
<?php endif; ?>
<?php endif; ?>
            </div>
<?php if ($display): ?>
            <a class="hero__scroll-cue" href="#<?= e($hero['scroll_target'] ?? 'aktuelles') ?>">
                <?= icon('chevron-down') ?><span class="visually-hidden">Zum Inhalt scrollen</span>
            </a>
<?php endif; ?>
        </section>