tsv08kulmbach-website/app/components/banner-slider.php

<?php

declare(strict_types=1);

/**
 * Werbe-/Sponsoren-Banner-Slider. Daten: data/banners.json (Single Source of Truth).
 * Layout je Slide: 2/3 Titel + Text + CTA, 1/3 Firmenlogo.
 * Pro Slide optional: "variant" (CSS-Modifier, z. B. "house" für Eigenwerbung),
 * "tag" (Badge-Text, Default "Anzeige"), "background" (Bild), "cta.internal"
 * (interner Link ohne target=_blank/rel=sponsored, für eigene Seiten/Anker).
 * Auto-Rotation + Fortschritts-Indikatoren übernimmt assets/js/banner.js
 * (pausiert bei Hover/Fokus, respektiert prefers-reduced-motion).
 * Ohne JS: nur der erste Banner ist sichtbar (Graceful Degradation).
 */
$bannerData = json_load('banners');
$banners = $bannerData['banners'] ?? [];
if ($banners === []) {
    return;
}
$heading = $bannerData['heading'] ?? null;
$subline = $bannerData['subline'] ?? null;
$total = count($banners);
?>
        <section class="section ad-banner" id="anzeigen" aria-roledescription="Karussell" aria-label="Anzeigen unserer Sponsoren und Partner" data-banner>
            <div class="container">
<?php if ($heading !== null): ?>
                <h2><?= e($heading) ?></h2>
<?php else: ?>
                <h2 class="visually-hidden">Anzeigen unserer Sponsoren &amp; Partner</h2>
<?php endif; ?>
<?php if ($subline !== null): ?>
                <p class="text-muted ad-banner__subline"><?= e($subline) ?></p>
<?php endif; ?>
                <ul class="ad-banner__track" id="ad-banner-track" aria-live="off">
<?php foreach ($banners as $i => $banner): ?>
<?php $bg = $banner['background'] ?? null; ?>
<?php $variant = $banner['variant'] ?? null; ?>
                    <li class="ad-banner__slide<?= $bg ? ' ad-banner__slide--bg' : '' ?><?= $variant ? ' ad-banner__slide--' . e($variant) : '' ?>"<?= $bg ? ' style="--banner-bg: url(' . e(asset($bg)) . ')"' : '' ?> data-banner-slide role="group" aria-roledescription="Folie" aria-label="<?= ($i + 1) ?> von <?= $total ?>"<?= $i === 0 ? '' : ' hidden' ?>>
                        <div class="ad-banner__content">
                            <span class="ad-banner__tag"><?= e($banner['tag'] ?? 'Anzeige') ?></span>
                            <p class="ad-banner__title"><?= e($banner['title']) ?></p>
                            <p class="ad-banner__text"><?= e($banner['text']) ?></p>
<?php if (!empty($banner['cta']['url']) && !empty($banner['cta']['label'])): ?>
<?php $ctaInternal = !empty($banner['cta']['internal']); ?>
                            <a class="btn ad-banner__cta" href="<?= e($banner['cta']['url']) ?>"<?= $ctaInternal ? '' : ' target="_blank" rel="noopener sponsored"' ?>><?= e($banner['cta']['label']) ?><?php if (!$ctaInternal): ?><span class="visually-hidden"> (öffnet in neuem Tab)</span><?php endif; ?></a>
<?php endif; ?>
                        </div>
                        <div class="ad-banner__logo">
                            <img src="<?= e(asset($banner['logo'])) ?>" alt="<?= e($banner['company'] ?? $banner['title']) ?>" loading="lazy" decoding="async">
                        </div>
                    </li>
<?php endforeach; ?>
                </ul>
<?php if ($total > 1): ?>
                <?php /* Ohne JS verborgen (Steuerung wäre funktionslos); banner.js blendet sie ein. */ ?>
                <div class="ad-banner__controls" data-banner-controls hidden>
                    <?php /* Explizite Pause/Play-Taste — WCAG 2.2.2. Nur bei aktiver Auto-Rotation sichtbar. */ ?>
                    <button class="ad-banner__toggle" type="button" data-banner-toggle aria-pressed="false" aria-controls="ad-banner-track" hidden>
                        <?= icon('pause-fill', 'ad-banner__toggle-icon ad-banner__toggle-icon--pause') ?>
                        <?= icon('play-fill', 'ad-banner__toggle-icon ad-banner__toggle-icon--play') ?>
                        <span class="visually-hidden" data-banner-toggle-label>Automatischen Wechsel pausieren</span>
                    </button>
                    <div class="ad-banner__indicators" role="group" aria-label="Anzeige wählen">
<?php foreach ($banners as $i => $banner): ?>
                        <button class="ad-banner__dot" type="button" data-banner-dot aria-controls="ad-banner-track" aria-label="Anzeige <?= ($i + 1) ?> von <?= $total ?>: <?= e($banner['company'] ?? $banner['title']) ?>">
                            <span class="ad-banner__progress" aria-hidden="true"></span>
                        </button>
<?php endforeach; ?>
                    </div>
                </div>
<?php endif; ?>
            </div>
        </section>