<?php

declare(strict_types=1);

/**
 * Eine Ehrenamtsstelle als aufklappbare Karte (Seite /mitmachen). Props:
 *   $position array{id, group?, area?, icon?, title, summary?, description?, tasks?[], commitment?, requirements?[]}
 *   $contact  array|null — aufgelöster Ansprechpartner (Shape wie person-card erwartet)
 * Natives <details>/<summary> → ohne JS bedienbar (FAQ-Mechanik). Eingeklappt zeigt die
 * Karte nur Bereich + Titel; Details und Ansprechpartner erscheinen beim Aufklappen.
 * Das JobPosting-Schema liefert die Seite über $meta['schema'] (helpers: job_posting_schema).
 * Heading-Outline: Titel h3 (in der summary), Ansprechpartner (person-card) h4.
 */
$contact = $contact ?? null;
?>
                    <details class="position-card" id="<?= e($position['id']) ?>" data-group="<?= e($position['group'] ?? '') ?>">
                        <summary class="position-card__head">
<?php if (!empty($position['icon'])): ?>
                            <span class="position-card__icon" aria-hidden="true"><?= icon($position['icon']) ?></span>
<?php endif; ?>
                            <span class="position-card__heading">
<?php if (!empty($position['area'])): ?>
                                <span class="position-card__area"><?= e($position['area']) ?></span>
<?php endif; ?>
                                <h3 class="position-card__title"><?= e($position['title']) ?></h3>
                            </span>
                            <?= icon('chevron-down', 'position-card__chevron') ?>
                        </summary>
                        <div class="position-card__body">
                            <div class="position-card__main">
<?php if (!empty($position['summary'])): ?>
                                <p class="position-card__summary"><?= e($position['summary']) ?></p>
<?php endif; ?>
<?php if (!empty($position['tasks'])): ?>
                                <ul class="position-card__tasks" role="list">
<?php foreach ($position['tasks'] as $task): ?>
                                    <li><?= icon('check2', 'position-card__check') ?><span><?= e($task) ?></span></li>
<?php endforeach; ?>
                                </ul>
<?php endif; ?>
<?php if (!empty($position['commitment']) || !empty($position['requirements'])): ?>
                                <dl class="position-card__meta">
<?php if (!empty($position['commitment'])): ?>
                                    <div class="position-card__meta-row">
                                        <dt><?= icon('clock-history', 'position-card__meta-icon') ?>Zeitaufwand</dt>
                                        <dd><?= e($position['commitment']) ?></dd>
                                    </div>
<?php endif; ?>
<?php if (!empty($position['requirements'])): ?>
                                    <div class="position-card__meta-row">
                                        <dt><?= icon('check2', 'position-card__meta-icon') ?>Das brauchst du</dt>
                                        <dd><?= e(implode(' · ', $position['requirements'])) ?></dd>
                                    </div>
<?php endif; ?>
                                </dl>
<?php endif; ?>
                            </div>
<?php if ($contact !== null): ?>
                            <div class="position-card__contact">
<?php component('person-card', ['person' => $contact, 'level' => 'h4']); ?>
                            </div>
<?php endif; ?>
                        </div>
                    </details>
