tsv08kulmbach-website/app/pages/jugendfussball.php

<?php

declare(strict_types=1);

/**
 * Jugendfußball-Übersichtsseite. Inhalt: data/jugend.json.
 * Komposition: Hero → Intro-Bento (Bild, Mitmachen, Spielort, Altersklassen) →
 * Altersklassen-Karten → FAQ + Ansprechpartner (faq-contact, Slider bei mehreren).
 */
$page = json_load('jugend');

$club = json_load('club');
$addr = $club['address'] ?? [];
$mapsQuery = rawurlencode(trim(($addr['venue'] ?? '') . ', ' . ($addr['street'] ?? '') . ', ' . ($addr['zip'] ?? '') . ' ' . ($addr['city'] ?? ''), ', '));

// Ansprechpartner Jugendfußball aus der Single-Source (mehrere → Slider in faq-contact).
$contacts = array_values(array_filter(
    json_load('ansprechpartner')['persons'] ?? [],
    static fn (array $p): bool => ($p['department'] ?? '') === 'Jugendfußball'
));

$meta = [
    'title'       => 'Jugendfußball in Kulmbach',
    'description' => 'Jugendfußball in Kulmbach beim TSV 08: Teams von der G- bis zur C-Jugend, Trainingszeiten und kostenloses Schnuppertraining. Komm vorbei ins Katzbachtal!',
    'og_image'    => 'img/pages/jugendfussball-hero-1440.jpg',
    'scripts'     => count($contacts) > 1 ? ['contact-slider.js'] : [],
    'schema'      => page_schema(
        [
            ['name' => 'Startseite', 'slug' => ''],
            ['name' => 'Fußball', 'slug' => 'fussball'],
            ['name' => 'Jugendfußball', 'slug' => 'jugendfussball'],
        ],
        $page['faq'] ?? []
    ),
];

component('hero', ['hero' => $page['hero']]);
?>
        <section class="section" id="ueber-uns">
            <div class="container">
                <div class="intro-bento">
                    <div class="bento__tile intro-bento__image">
<?php component('img', ['image' => $page['hero']['image'], 'sizes' => '(max-width: 900px) 100vw, 40vw', 'class' => 'intro-bento__img']); ?>
                    </div>

                    <article class="bento__tile intro-bento__about">
                        <h2><?= e($page['about']['title']) ?></h2>
                        <p><?= e($page['about']['text']) ?></p>
                    </article>

                    <article class="bento__tile intro-bento__venue">
                        <h2 class="bento__heading"><?= icon('geo-alt', 'bento__hicon') ?>Spielort</h2>
                        <p class="bento__address">
<?php if (!empty($addr['venue'])): ?><strong><?= e($addr['venue']) ?></strong><br><?php endif; ?>
                            <?= e($addr['street']) ?>, <?= e($addr['zip']) ?> <?= e($addr['city']) ?>
                        </p>
                        <a class="btn btn--outline intro-bento__route" href="https://www.google.com/maps/search/?api=1&amp;query=<?= e($mapsQuery) ?>" target="_blank" rel="noopener">Route planen<span class="visually-hidden"> (öffnet Google Maps in neuem Tab)</span></a>
                        <span class="bento__deco" aria-hidden="true"><?= icon('geo-alt') ?></span>
                    </article>

                    <article class="bento__tile bento__tile--accent intro-bento__stat">
                        <span class="bento__stat-label">Altersklassen</span>
                        <span class="bento__stat-value">G&nbsp;–&nbsp;C</span>
                    </article>
                </div>
            </div>
        </section>
<?php
component('age-groups', ['groups' => $page['groups'] ?? []]);

component('faq-contact', [
    'faq'          => $page['faq'] ?? [],
    'faqIntro'     => 'Ruf uns direkt an oder schreib uns unkompliziert per WhatsApp. Wir beantworten alle Fragen rund um Schnuppertraining und die passende Altersgruppe.',
    'persons'      => $contacts,
    'contactTitle' => '',
    'anchor'       => 'kontakt',
]);