<?php

declare(strict_types=1);

/**
 * Mitglied werden (Hub). Inhalt: data/mitglied-werden.json + data/club.json.
 * Struktur: Hero → Abteilungs-Auswahl → Info-Band → Fußball (Beiträge + Online-Formular)
 * → Turnen (Hinweise + Beiträge + PDF) → FAQ.
 */
$page = json_load('mitglied-werden');
$club = json_load('club');

// Beitragsklassen für das Formular aus der Beitragstabelle ableiten (Single Source).
// Muss identisch in app/actions/membership-submit.php gebildet werden (Whitelist).
$feeOptions = array_map(
    static fn (array $r): string => $r['label'] . ' — ' . $r['price'],
    $page['fussball']['fees']['rows'] ?? []
);

$meta = [
    'title'       => 'Mitglied werden',
    'description' => 'Mitglied werden beim TSV 08 Kulmbach: Fußball online anmelden oder Turnen per Aufnahmeantrag. Alle Beiträge und Infos für deinen Vereinsbeitritt.',
    'og_image'    => 'img/hero/hero-1600.jpg',
    'scripts'     => ['form.js'],
    'schema'      => page_schema(
        [
            ['name' => 'Startseite', 'slug' => ''],
            ['name' => 'Mitglied werden', 'slug' => 'mitglied-werden'],
        ],
        $page['faq'] ?? []
    ),
];

component('hero', ['hero' => $page['hero']]);

// Titel nur für Screenreader: der Hero sagt bereits „Wähle deine Abteilung", und die
// beiden Karten sprechen optisch für sich. Die h2 bleibt für die Heading-Kette stehen.
component('department-choice', ['choice' => $page['choice'], 'anchor' => 'abteilung', 'title_hidden' => true]);
?>
        <section class="section membership-signup" id="anmeldung-fussball">
            <div class="container membership-signup__inner">
                <header class="membership-signup__head">
                    <h2><?= e($page['fussball']['title']) ?></h2>
                    <p class="membership-signup__intro"><?= e($page['fussball']['intro']) ?></p>
                </header>
                <div class="membership-card">
<?php component('fee-table', ['fees' => $page['fussball']['fees']]); ?>
<?php component('membership-form', ['fee_options' => $feeOptions]); ?>
                </div>
            </div>
        </section>

        <section class="section section--tinted membership-signup" id="anmeldung-turnen">
            <div class="container membership-signup__inner">
                <header class="membership-signup__head">
                    <h2><?= e($page['turnen']['title']) ?></h2>
                    <p class="membership-signup__intro"><?= e($page['turnen']['intro']) ?></p>
                </header>
<?php if (!empty($page['turnen']['notes'])): ?>
                <ul class="membership-notes" role="list">
<?php foreach ($page['turnen']['notes'] as $note): ?>
                    <li class="membership-notes__item">
<?php if (!empty($note['icon'])): ?>
                        <span class="membership-notes__icon"><?= icon($note['icon']) ?></span>
<?php endif; ?>
                        <div class="membership-notes__body">
                            <h3 class="membership-notes__title"><?= e($note['title']) ?></h3>
                            <p><?= e($note['text']) ?></p>
                        </div>
                    </li>
<?php endforeach; ?>
                </ul>
<?php endif; ?>
                <div class="membership-download">
                    <a class="btn membership-download__btn" href="<?= e(asset($page['turnen']['download']['file'])) ?>" download>
                        <?= icon('download', 'membership-download__icon') ?><?= e($page['turnen']['download']['label']) ?>
                    </a>
                    <p class="membership-download__hint"><?= e($page['turnen']['download']['hint']) ?></p>
                    <p class="membership-download__contact">Fragen zur Turnabteilung? Schreib an <a href="mailto:<?= e($club['email_turnen']) ?>"><?= e($club['email_turnen']) ?></a>.</p>
                </div>
            </div>
        </section>
<?php
component('faq', ['faq' => $page['faq'] ?? []]);
