<?php

declare(strict_types=1);

/**
 * Die Plakate einer Veranstaltung (Ankündigung, Programm, …) als große,
 * anklickbare Bilder. Props:
 *   $plakate array [{base, widths, alt, source?}, …] (script-verwaltet)
 *   $title   string (optional, Default 'Plakate')
 *   $compact bool   (optional) — kleinere Variante für den Rückblick
 *
 * Die Überschrift ist sichtbar, WENN die Plakate klein und nachgestellt sind
 * (Rückblick): nach einer langen Fotogalerie brauchen zwei kleine Bilder am
 * Seitenende eine Beschriftung. Als Hauptblock einer Ankündigung erklären sie
 * sich dagegen selbst, dort bleibt die Überschrift visually-hidden — im Markup
 * steht sie trotzdem, damit die Headings-Hierarchie keine Lücke hat (gleiche
 * Lösung wie in stadionzeitung-cards).
 *
 * Warum eine eigene Komponente und nicht die Fotogalerie: ein Plakat ist kein
 * Foto vom Fest, sondern trägt Informationen (Termine, Uhrzeiten, Ort). Es
 * gehört nach vorne statt in den Rückblick und braucht Hochformat statt
 * beschnittener Raster-Kacheln. Vergrößern läuft aber über dieselbe Lightbox —
 * gerade bei einem Programmplakat will man das lesen können.
 *
 * Ohne JS ist jedes Plakat ein normaler Link auf die größte Variante.
 */
$plakate = $plakate ?? [];
$title = $title ?? 'Plakate';
$compact = $compact ?? false;

if ($plakate === []) {
    return;
}
?>
        <section class="section veranstaltung-plakate<?= $compact ? ' veranstaltung-plakate--compact' : '' ?>" id="plakate" data-lightbox-gallery>
            <div class="container">
                <h2<?= $compact ? '' : ' class="visually-hidden"' ?>><?= e($title) ?></h2>
                <ul class="veranstaltung-plakate__grid">
<?php foreach ($plakate as $i => $plakat): ?>
                    <li class="veranstaltung-plakate__item">
                        <a class="veranstaltung-plakate__link" href="<?= e(asset($plakat['base'] . '-' . max($plakat['widths']) . '.jpg')) ?>" data-lightbox="<?= $i ?>">
<?php component('img', [
    'image' => $plakat,
    'sizes' => count($plakate) > 1 ? '(max-width: 768px) 92vw, 44vw' : '(max-width: 768px) 92vw, 30vw',
    'eager' => $i === 0 && !$compact,
    'class' => 'veranstaltung-plakate__img',
]); ?>
                            <span class="visually-hidden">(größer ansehen)</span>
                        </a>
                    </li>
<?php endforeach; ?>
                </ul>
            </div>
<?php component('lightbox-overlay', ['label' => $title, 'count' => count($plakate)]); ?>
        </section>
