<?php
defined('BASEPATH') OR exit('No direct script access allowed');
/** BLOG LISTING — Expects: $posts, $pager, $categories, $active_cat. */
?>
<section class="page-hero">
	<div class="container">
		<div class="page-hero-inner" data-reveal>
			<div class="breadcrumb"><a href="<?= base_url() ?>">Home</a> / <span>Journal</span></div>
			<span class="eyebrow">Insights</span>
			<h1>The Bloom Iris <span class="serif-italic text-iris">Journal</span></h1>
			<p>Creative insights, campaign stories and behind-the-scenes moments.</p>
		</div>
	</div>
</section>

<section class="section">
	<div class="container">
		<?php if ($categories): ?>
			<div class="filter-bar" data-reveal>
				<a href="<?= base_url('blog') ?>" class="filter-chip <?= $active_cat ? '' : 'active' ?>">All</a>
				<?php foreach ($categories as $cat): ?>
					<a href="<?= base_url('blog/category/'.url_title($cat)) ?>" class="filter-chip <?= ($active_cat && strtolower($active_cat) === strtolower($cat)) ? 'active' : '' ?>">
						<?= html_escape($cat) ?>
					</a>
				<?php endforeach; ?>
			</div>
		<?php endif; ?>

		<?php if ($posts): ?>
			<div class="card-grid cols-3">
				<?php foreach ($posts as $i => $post): ?>
					<a href="<?= base_url('blog/view/'.$post['slug']) ?>" class="work-card" data-reveal data-delay="<?= ($i % 3) + 1 ?>">
						<div class="work-media" style="aspect-ratio:16/10;">
							<?php if ($post['category']): ?><span class="work-tag"><?= html_escape($post['category']) ?></span><?php endif; ?>
							<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']) ?> · <?= read_time($post['body']) ?> min read</span>
							<h3><?= html_escape($post['title']) ?></h3>
							<p class="brand"><?= html_escape(excerpt($post['excerpt'], 16)) ?></p>
						</div>
					</a>
				<?php endforeach; ?>
			</div>
			<?php if ($pager): ?><div style="margin-top:48px;text-align:center;"><?= $pager ?></div><?php endif; ?>
		<?php else: ?>
			<?= empty_state('No articles published yet — check back soon.') ?>
		<?php endif; ?>
	</div>
</section>
