<?php
defined('BASEPATH') OR exit('No direct script access allowed');
/** ARTICLE — Expects: $post, $author, $recent. */
$p = $post;
?>
<section class="page-hero">
	<div class="container">
		<div class="page-hero-inner" data-reveal style="max-width:760px;">
			<div class="breadcrumb">
				<a href="<?= base_url() ?>">Home</a> / <a href="<?= base_url('blog') ?>">Journal</a> / <span><?= html_escape($p['category'] ?: 'Article') ?></span>
			</div>
			<?php if ($p['category']): ?><span class="eyebrow"><?= html_escape($p['category']) ?></span><?php endif; ?>
			<h1><?= html_escape($p['title']) ?></h1>
			<div style="display:flex;gap:18px;margin-top:18px;color:rgba(255,255,255,.78);font-size:.9rem;">
				<?php if ($author): ?><span>By <?= html_escape($author['name']) ?></span> · <?php endif; ?>
				<span><?= nice_date($p['publish_at'] ?: $p['created_at'], 'd M Y') ?></span> ·
				<span><?= read_time($p['body']) ?> min read</span>
			</div>
		</div>
	</div>
</section>

<section class="section section--tight">
	<div class="container">
		<div data-reveal style="border-radius:var(--radius-lg);overflow:hidden;background:var(--ink);max-width:920px;margin:0 auto;">
			<img src="<?= upload_url($p['cover_image'], 'img/blog-fallback.jpg') ?>" alt="<?= html_escape($p['title']) ?>" style="width:100%;display:block;">
		</div>
	</div>
</section>

<section class="section section--tight">
	<div class="container">
		<article data-reveal style="max-width:760px;margin:0 auto;font-size:1.08rem;line-height:1.8;color:var(--ink-soft);">
			<?php if ($p['excerpt']): ?>
				<p style="font-family:var(--font-display);font-size:1.3rem;font-style:italic;color:var(--ink);margin-bottom:28px;">
					<?= html_escape($p['excerpt']) ?>
				</p>
			<?php endif; ?>
			<div class="article-body"><?= $p['body'] ?></div>
		</article>
	</div>
</section>

<!-- RECENT -->
<?php if ($recent): ?>
<section class="section section--cream">
	<div class="container">
		<div class="section-head" data-reveal><span class="eyebrow">Keep Reading</span><h2 style="margin-top:14px;">More from the Journal</h2></div>
		<div class="card-grid cols-3">
			<?php foreach ($recent as $i => $post): ?>
				<a href="<?= base_url('blog/view/'.$post['slug']) ?>" class="work-card" data-reveal data-delay="<?= $i + 1 ?>">
					<div class="work-media" style="aspect-ratio:16/10;">
						<img src="<?= upload_url($post['cover_image'], 'img/blog-fallback.jpg') ?>" alt="<?= html_escape($post['title']) ?>" loading="lazy">
					</div>
					<div class="work-body">
						<span class="meta"><?= nice_date($post['publish_at'] ?: $post['created_at']) ?></span>
						<h3><?= html_escape($post['title']) ?></h3>
					</div>
				</a>
			<?php endforeach; ?>
		</div>
	</div>
</section>
<?php endif; ?>
