tsv08kulmbach-website/app/components/department-choice.php

<?php

declare(strict_types=1);

/**
 * Abteilungs-Auswahl: gleichwertige Karten, die auf Anker derselben Seite springen.
 * Props:
 *   $choice array{title?, intro?, items: [{kicker?, title, text, label, anchor, image?}]}
 *   $anchor string (optional, Sektions-ID)
 *   $title_hidden bool — Titel nur für Screenreader ausgeben (hält die Heading-Kette
 *          h1 → h2 → h3 intakt, wenn die Karten optisch für sich sprechen)
 * $item['image'] optional: {base, widths, alt} — Bildband oben, wie team-cards.
 * Bewusst eigenes <a href="#…">-Markup (nicht die cta-Komponente): cta() schickt
 * jeden Slug durch url() und würde aus "#anker" ein "/#anker" (Startseite) machen.
 */
$anchor = $anchor ?? null;
$title_hidden = !empty($title_hidden);
if (empty($choice['items'])) {
    return;
}
?>
        <section class="section department-choice"<?= $anchor ? ' id="' . e($anchor) . '"' : '' ?>>
            <div class="container">
<?php if (!empty($choice['title'])): ?>
                <h2 class="<?= $title_hidden ? 'visually-hidden' : 'department-choice__title' ?>"><?= e($choice['title']) ?></h2>
<?php endif; ?>
<?php if (!empty($choice['intro'])): ?>
                <p class="department-choice__intro"><?= e($choice['intro']) ?></p>
<?php endif; ?>
                <ul class="department-choice__grid" role="list">
<?php foreach ($choice['items'] as $item): ?>
                    <li class="department-choice__card">
<?php if (!empty($item['image']['base'])): ?>
                        <div class="department-choice__media">
<?php component('img', ['image' => $item['image'], 'sizes' => '(max-width: 600px) 100vw, 50vw', 'class' => 'department-choice__img']); ?>
                        </div>
<?php endif; ?>
                        <div class="department-choice__body">
                        <h3 class="department-choice__heading"><?= e($item['title']) ?></h3>
<?php if (!empty($item['subtitle'])): ?>
                        <p class="department-choice__subtitle"><?= e($item['subtitle']) ?></p>
<?php endif; ?>
                        <p class="department-choice__text"><?= e($item['text']) ?></p>
                        <a class="btn department-choice__btn" href="#<?= e($item['anchor']) ?>"><?= e($item['label']) ?><?= icon('arrow-right', 'department-choice__arrow') ?></a>
                        </div>
                    </li>
<?php endforeach; ?>
                </ul>
            </div>
        </section>