<?php
/// file: app/View/journal/show.php

declare(strict_types=1);

/** @var array<string, mixed> $post */
/** @var list<array<string, mixed>> $related */

$p = $post;
$cp = (string) ($p['cover_path'] ?? '');
$cu = $cp !== '' && str_starts_with($cp, '/') ? url($cp) : default_cover_fallback_url();
?>
<div class="page-below-header md:pt-32">
<article>
    <header class="container-shell section-spacing">
        <p class="muted-label"><?= e((string) $p['category']) ?> · <?= (int) $p['reading_time'] ?> min read</p>
        <h1 class="cinematic-heading mt-6 max-w-4xl"><?= e((string) $p['title']) ?></h1>
        <p class="mt-8 max-w-2xl text-lg text-silver-400"><?= e((string) $p['excerpt']) ?></p>
        <div class="mt-10 flex flex-wrap gap-4 text-xs text-silver-500">
            <span>Share</span>
            <a class="hover:text-white" href="#" data-share="copy" data-url="<?= e(url('/journal/' . rawurlencode((string) $p['slug']))) ?>">Copy link</a>
        </div>
    </header>
    <div class="container-shell mb-16">
        <img src="<?= e($cu) ?>" alt="" class="max-h-[70vh] w-full rounded-3xl object-cover" width="1600" height="900">
    </div>
    <div class="container-shell max-w-3xl pb-24 prose prose-invert">
        <?= $p['body'] ?>
    </div>
</article>

<?php if ($related !== []): ?>
<section class="section-spacing border-t border-white/10">
    <div class="container-shell">
        <h2 class="font-display text-2xl text-white">Related</h2>
        <div class="mt-8 grid gap-6 md:grid-cols-3">
            <?php foreach ($related as $r): ?>
                <article class="rounded-2xl border border-white/10 p-6">
                    <h3 class="font-display text-lg text-white"><a href="<?= e(url('/journal/' . rawurlencode((string) $r['slug']))) ?>"><?= e((string) $r['title']) ?></a></h3>
                    <p class="mt-2 text-sm text-silver-500"><?= e((string) $r['excerpt']) ?></p>
                </article>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>
</div>
