<?php

declare(strict_types=1);

/**
 * Momente-Seite der Stadionzeitung (Live-Seite, Heft-Abschluss) — die vier
 * neuesten Fotos aus unserem Instagram-Cache als 2×2-Galerie plus
 * „Folge uns"-Ticket mit QR aufs Profil. Pflegt sich selbst: im Entwurf
 * immer die aktuellsten Bilder, beim Veröffentlichen eingefroren
 * (stadionzeitung_build_snapshot(), app/helpers.php).
 *
 * Props: $items  stadionzeitung_live_data()['momente'] — image/alt je Foto.
 * Profil-URL aus club.json → social.instagram (geteilte Quelle), QR:
 * geteilter qr-instagram.png (bin/stadionzeitung-add.php).
 */
$items = $items ?? [];
$instagramUrl = (string) (json_load('club')['social']['instagram'] ?? '');
$instagramHandle = '@' . trim((string) parse_url($instagramUrl, PHP_URL_PATH), '/');
$momenteQr = is_file(PUBLIC_PATH . '/assets/img/stadionzeitung/qr-instagram.png')
    ? 'img/stadionzeitung/qr-instagram.png'
    : null;
?>
<div class="stadionzeitung-momente">
    <header class="stadionzeitung-page__head">
        <p class="stadionzeitung-page__kicker">Instagram</p>
        <h2 class="stadionzeitung-page__heading">Aktuelles von Instagram</h2>
    </header>
<?php /* Bewusst ohne Trennlinie und mit verdichteten Abständen: jeder
         gewonnene Millimeter geht in die Fotogröße (Felix, 29.07.2026). */ ?>
<?php if ($items === []): ?>
    <p class="text-muted">Folge uns auf Instagram für alle Momente rund um den Verein.</p>
<?php else: ?>
    <div class="stadionzeitung-momente__galerie">
<?php foreach ($items as $item): ?>
        <img class="stadionzeitung-momente__foto" src="<?= e(asset((string) $item['image'])) ?>" alt="<?= e((string) $item['alt']) ?>" loading="lazy" decoding="async">
<?php endforeach; ?>
    </div>
<?php endif; ?>
    <div class="stadionzeitung-page__cta">
        <div class="stadionzeitung-page__cta-text">
            <p class="stadionzeitung-page__cta-label">Mehr online</p>
            <p class="stadionzeitung-page__cta-title">Folge uns auf Instagram</p>
            <p class="stadionzeitung-page__cta-link"><?= e($instagramHandle) ?></p>
        </div>
<?php if ($momenteQr !== null): ?>
        <div class="stadionzeitung-page__cta-abriss">
            <img class="stadionzeitung-page__cta-qr" src="<?= e(asset($momenteQr)) ?>" alt="" width="60" height="60" loading="lazy" decoding="async">
            <span class="stadionzeitung-page__cta-scan">Scan mich</span>
        </div>
<?php endif; ?>
    </div>
</div>
