tsv08kulmbach-website/app/pages/ansprechpartner.php

<?php

declare(strict_types=1);

/**
 * Ansprechpartner — Hero (Vereinsgelände) → zwei zusammengefasste person-grid-
 * Sektionen: Fußball (Herren/Frauen/Jugend) und Turnen, aus data/ansprechpartner.json.
 */
$page = json_load('ansprechpartner');

// Sektionen aus dem "group"-Feld der Personen ableiten (Single Source): eine
// Sektion je Gruppe (Fußball, Turnen), darin die jeweiligen Abteilungen/Disziplinen
// als Karten-Überschrift. Reihenfolge = JSON-Reihenfolge.
$groups = [];
foreach ($page['persons'] ?? [] as $p) {
    $dept = $p['department'] ?? '';
    if ($dept === '') {
        continue;
    }
    $label = $p['group'] ?? $dept;
    if (!in_array($dept, $groups[$label] ?? [], true)) {
        $groups[$label][] = $dept;
    }
}

// Eindeutiger Abschnitts-Anker aus dem Bereichsnamen (kein Slug-Helper im Projekt).
$anchor_slug = static function (string $s): string {
    $s = strtolower(strtr($s, ['ä' => 'ae', 'ö' => 'oe', 'ü' => 'ue', 'ß' => 'ss']));
    return trim((string) preg_replace('/[^a-z0-9]+/', '-', $s), '-');
};

$meta = [
    'title'       => 'Ansprechpartner',
    'description' => 'Alle Ansprechpartner des TSV 08 Kulmbach auf einen Blick: Herren-, Frauen- und Jugendfußball sowie Turnen, mit Telefonnummer oder E-Mail. Sprich uns direkt an!',
    'scripts'     => ['persons-tabs.js'],
    'schema'      => page_schema([
        ['name' => 'Startseite', 'slug' => ''],
        ['name' => 'Der Verein', 'slug' => 'verein'],
        ['name' => 'Ansprechpartner', 'slug' => 'ansprechpartner'],
    ]),
];
component('hero', ['hero' => [
    'compact' => true,
    'align'   => 'center',
    'title'   => 'Ansprechpartner',
    'text'    => $page['intro'] ?? '',
    'image'   => [
        'base'   => 'img/pages/vereinsgelaende',
        'widths' => [1000, 1600],
        'alt'    => '',
    ],
]]);

?>
        <?php /* EINE Sektion für beide Bereiche, Tab-Leiste direkt über den
                 Karten (assets/js/persons-tabs.js schaltet um und spiegelt den
                 aktiven Bereich in die URL — #kontakt-turnen ist teilbar).
                 Ohne JS bleibt die Leiste hidden und beide Panels stehen mit
                 ihren Überschriften untereinander. */ ?>
        <section class="section section--tinted" id="kontakt" data-persons-tabs>
            <div class="container">
                <div class="filter-bar persons-tabs__bar" role="group" aria-label="Bereich wählen" hidden data-persons-tabs-bar>
<?php $i = 0; foreach (array_keys($groups) as $label): ?>
                    <button type="button" class="tab filter-bar__tab" data-tab-target="kontakt-<?= e($anchor_slug($label)) ?>" aria-pressed="<?= $i++ === 0 ? 'true' : 'false' ?>"><?= e($label) ?></button>
<?php endforeach; ?>
                </div>
<?php
foreach ($groups as $label => $depts) {
    component('person-grid', [
        'departments' => $depts,
        'title'       => $label,
        'anchor'      => 'kontakt-' . $anchor_slug($label),
        'embedded'    => true,
    ]);
}
?>
            </div>
        </section>
<?php