tsv08kulmbach-website/app/components/section.php

<?php

declare(strict_types=1);

/**
 * Alternierende Bild/Text-Sektion. Props:
 *   $section array{id, title, text, image?, gallery?, flip?, tinted?, polaroid?, cta?} (aus home.json o.ä.)
 *   $level   int Überschriften-Ebene (default 2)
 * tinted: sanft aufgehelltes Panel hinter dem Inhalt (Abgrenzung vom Seitenhintergrund).
 * polaroid: Bild als Polaroid (dicker heller Rahmen, leicht gekippt; flip kippt gegenläufig).
 *   Trägt ein Bild ein optionales caption-Feld, erscheint es als Bildunterschrift
 *   auf dem weißen Unterrand des Rahmens (Abel-Versalien, wie Historie-Captions).
 * gallery: Array von Bildern statt image — erstes Bild groß, weitere darunter
 * halbbreit nebeneinander (Collage). Mit polaroid kippen die Rahmen abwechselnd.
 * text: String oder Liste von Absätzen (mehr als zwei sollten hier nicht stehen —
 * dann ist es keine Bild/Text-Sektion mehr).
 */
$level = $level ?? 2;
$flip = !empty($section['flip']);
$tinted = !empty($section['tinted']);
$polaroid = !empty($section['polaroid']);
// Ohne image UND ohne gallery läuft die Sektion einspaltig („split--plain") —
// für Textabschnitte, für die es (noch) kein Foto gibt, z. B. „Anfahrt und
// Parken" auf einer Veranstaltungs-Seite. Ohne diesen Zweig liefe img.php
// unten auf ein fehlendes Bild.
$hasMedia = !empty($section['image']) || !empty($section['gallery']);
$paragraphs = is_array($section['text']) ? $section['text'] : [$section['text']];
?>
        <section class="section split<?= $flip ? ' split--flip' : '' ?><?= $tinted ? ' section--tinted' : '' ?><?= $polaroid ? ' split--polaroid' : '' ?><?= $hasMedia ? '' : ' split--plain' ?>" id="<?= e($section['id']) ?>">
            <div class="container split__inner">
                <div class="split__text">
                    <h<?= $level ?>><?= e($section['title']) ?></h<?= $level ?>>
<?php foreach ($paragraphs as $paragraph): ?>
                    <p><?= e($paragraph) ?></p>
<?php endforeach; ?>
<?php if (!empty($section['cta'])): ?>
                    <p class="split__cta"><?php component('cta', ['cta' => $section['cta']]); ?></p>
<?php endif; ?>
                </div>
<?php if ($hasMedia): ?>
                <div class="split__media">
<?php if (!empty($section['gallery'])): ?>
                    <div class="split__gallery">
<?php foreach ($section['gallery'] as $i => $galleryImage): ?>
<?php $sizes = $i === 0 ? '(max-width: 992px) 100vw, 50vw' : '(max-width: 992px) 50vw, 25vw'; ?>
<?php if ($polaroid): ?>
                        <figure class="polaroid">
<?php component('img', ['image' => $galleryImage, 'sizes' => $sizes, 'class' => 'split__img']); ?>
<?php if (!empty($galleryImage['caption'])): ?>
                            <figcaption class="polaroid__caption"><?= e($galleryImage['caption']) ?></figcaption>
<?php endif; ?>
                        </figure>
<?php else: ?>
<?php component('img', ['image' => $galleryImage, 'sizes' => $sizes, 'class' => 'split__img']); ?>
<?php endif; ?>
<?php endforeach; ?>
                    </div>
<?php elseif ($polaroid): ?>
                    <figure class="polaroid">
<?php component('img', ['image' => $section['image'], 'sizes' => '(max-width: 992px) 100vw, 50vw', 'class' => 'split__img']); ?>
<?php if (!empty($section['image']['caption'])): ?>
                        <figcaption class="polaroid__caption"><?= e($section['image']['caption']) ?></figcaption>
<?php endif; ?>
                    </figure>
<?php else: ?>
<?php component('img', ['image' => $section['image'], 'sizes' => '(max-width: 992px) 100vw, 50vw', 'class' => 'split__img']); ?>
<?php endif; ?>
                </div>
<?php endif; ?>
            </div>
        </section>