<?php

declare(strict_types=1);

/**
 * Artikelkörper einer News-Detailseite. Props:
 *   $image  array (optional) — Aufmacher {base, widths, alt}, above the fold
 *   $blocks array — data/news.json → artikel[], Blöcke mit `typ`:
 *           text          {absaetze: string[]}   Fließtext
 *           zwischentitel {text}                 h2 (h1 steht im detail-head)
 *           bild          {base, widths, alt, caption?}
 *           zitat         {text, quelle?}
 *
 * Ein unbekannter `typ` wird stillschweigend übersprungen; gemeldet wird er von
 * bin/preflight.php, damit ein Tippfehler vor dem Deploy auffällt und nicht erst
 * durch einen fehlenden Absatz auf der Seite.
 *
 * Fließtext läuft durch inline_links_html(): interne Deeplinks [Label](slug)
 * werden zu <a>, alles andere escaped. Kein rohes HTML in der JSON.
 *
 * Bilder sind wie bei den Veranstaltungen ohne JS normale Links auf die größte
 * Variante; mit JS fängt assets/js/lightbox.js den Klick ab. Das Overlay kommt
 * nur dazu, wenn der Artikel überhaupt Bilder hat.
 */
$image = $image ?? null;
$blocks = $blocks ?? [];

$bilder = array_values(array_filter(
    $blocks,
    static fn (array $b): bool => ($b['typ'] ?? '') === 'bild' && !empty($b['base']) && !empty($b['widths'])
));
$bildAnzahl = count($bilder);
$bildIndex = 0;
?>
        <article class="section news-article"<?= $bildAnzahl > 0 ? ' data-lightbox-gallery' : '' ?>>
            <div class="container">
<?php if (!empty($image['base'])): ?>
                <figure class="news-article__lead">
<?php component('img', [
    'image' => $image,
    'sizes' => '(max-width: 768px) 100vw, 72ch',
    'class' => 'news-article__lead-img',
    'eager' => true,
]); ?>
                </figure>
<?php endif; ?>
                <div class="news-article__body prose">
<?php foreach ($blocks as $block): ?>
<?php $typ = $block['typ'] ?? ''; ?>
<?php if ($typ === 'text'): ?>
<?php foreach ($block['absaetze'] ?? [] as $absatz): ?>
                    <p><?= inline_links_html((string) $absatz) ?></p>
<?php endforeach; ?>
<?php elseif ($typ === 'zwischentitel' && !empty($block['text'])): ?>
                    <h2 class="news-article__heading"><?= e($block['text']) ?></h2>
<?php elseif ($typ === 'bild' && !empty($block['base']) && !empty($block['widths'])): ?>
                    <figure class="news-article__figure">
                        <a class="news-article__figure-link" href="<?= e(asset($block['base'] . '-' . max($block['widths']) . '.jpg')) ?>" data-lightbox="<?= $bildIndex++ ?>">
<?php component('img', [
    'image' => $block,
    'sizes' => '(max-width: 768px) 100vw, 72ch',
    'class' => 'news-article__img',
]); ?>
                            <span class="visually-hidden">(größer ansehen)</span>
                        </a>
<?php if (!empty($block['caption'])): ?>
                        <figcaption class="news-article__caption"><?= e($block['caption']) ?></figcaption>
<?php endif; ?>
                    </figure>
<?php elseif ($typ === 'zitat' && !empty($block['text'])): ?>
                    <figure class="news-article__quote">
                        <blockquote><p><?= e($block['text']) ?></p></blockquote>
<?php if (!empty($block['quelle'])): ?>
                        <figcaption class="news-article__quote-source"><?= e($block['quelle']) ?></figcaption>
<?php endif; ?>
                    </figure>
<?php endif; ?>
<?php endforeach; ?>
                </div>
            </div>
<?php if ($bildAnzahl > 0): ?>
<?php component('lightbox-overlay', ['label' => 'Bild aus dem Artikel', 'count' => $bildAnzahl]); ?>
<?php endif; ?>
        </article>
