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

declare(strict_types=1);

/** @var array<string, mixed>|null $featured */
/** @var list<array<string, mixed>> $posts */
?>
<div class="page-below-header md:pt-32">
<section class="section-spacing">
    <div class="container-shell">
        <p class="muted-label">Journal</p>
        <h1 class="cinematic-heading mt-4">Editorial notes on craft, sound, and technology.</h1>
    </div>
</section>

<?php if ($featured): ?>
<section class="section-spacing border-t border-white/10">
    <div class="container-shell grid gap-10 lg:grid-cols-2 lg:items-center">
        <?php $fp = (string) ($featured['cover_path'] ?? ''); $fu = $fp !== '' && str_starts_with($fp, '/') ? url($fp) : default_cover_fallback_url(); ?>
        <a href="<?= e(url('/journal/' . rawurlencode((string) $featured['slug']))) ?>" class="block overflow-hidden rounded-3xl border border-white/10">
            <img src="<?= e($fu) ?>" alt="" class="h-full w-full object-cover" width="1200" height="800" loading="eager">
        </a>
        <div>
            <p class="muted-label">Featured · <?= (int) $featured['reading_time'] ?> min</p>
            <h2 class="mt-4 font-display text-4xl text-white"><a class="hover:text-electric-200" href="<?= e(url('/journal/' . rawurlencode((string) $featured['slug']))) ?>"><?= e((string) $featured['title']) ?></a></h2>
            <p class="mt-6 text-silver-400"><?= e((string) $featured['excerpt']) ?></p>
            <a class="mt-8 inline-block text-xs uppercase tracking-[0.2em] text-electric-300" href="<?= e(url('/journal/' . rawurlencode((string) $featured['slug']))) ?>">Read</a>
        </div>
    </div>
</section>
<?php endif; ?>

<section class="section-spacing">
    <div class="container-shell grid gap-8 md:grid-cols-2 lg:grid-cols-3">
        <?php foreach ($posts as $post): ?>
            <article class="rounded-2xl border border-white/10 bg-charcoal/30 p-6">
                <p class="muted-label"><?= e((string) $post['category']) ?> · <?= (int) $post['reading_time'] ?> min</p>
                <h3 class="mt-4 font-display text-xl text-white"><a href="<?= e(url('/journal/' . rawurlencode((string) $post['slug']))) ?>"><?= e((string) $post['title']) ?></a></h3>
                <p class="mt-3 text-sm text-silver-400"><?= e((string) $post['excerpt']) ?></p>
            </article>
        <?php endforeach; ?>
    </div>
</section>
</div>
