<?= $this->extend('App\Modules\Frontend\Views\_layout') ?>

<?= $this->section('meta_title') ?>Mount Kenya Treks Blog<?= $this->endSection() ?>
<?= $this->section('meta_desc') ?>Expedition journals, climbing tips, gear reviews, and summit stories from Mount Kenya.<?= $this->endSection() ?>

<?= $this->section('content') ?>

<section class="py-24 bg-light">
  <div class="container mx-auto px-6">
    <div class="max-w-3xl mx-auto text-center mb-20">
      <div class="flex items-center justify-center gap-2 mb-6">
        <span class="w-10 h-1 bg-secondary rounded-full"></span>
        <span class="text-secondary font-black uppercase tracking-[0.3em] text-xs">The Explorer's Journal</span>
      </div>
      <h1 class="text-4xl md:text-5xl font-black text-navy tracking-tighter">
        Summit Stories & <span class="text-secondary">Field Notes</span>
      </h1>
    </div>

    <?php if (empty($blogPosts)): ?>
      <div class="text-center py-20">
        <i data-lucide="mountain" class="w-16 h-16 text-muted mx-auto mb-6"></i>
        <p class="text-muted text-lg">No posts published yet.</p>
      </div>
    <?php else: ?>
      <div class="grid gap-12 md:grid-cols-2 lg:grid-cols-3">
        <?php foreach ($blogPosts as $post): ?>
          <article class="group bg-surface rounded-3xl overflow-hidden border border-border hover:shadow-lg transition-shadow">
            <?php if (!empty($post['image'])): ?>
              <img 
                src="<?= base_url('assets/uploads/blog/' . $post['image']) ?>" 
                alt="<?= esc($post['title']) ?>"
                class="w-full h-56 object-cover"
                loading="lazy"
              >
            <?php endif; ?>
            <div class="p-6">
              <time class="text-[10px] font-black uppercase tracking-widest text-muted block mb-2">
                <?= date('M d, Y', strtotime($post['created_at'])) ?>
              </time>
              <h2 class="text-xl font-black text-navy mb-3"><?= esc($post['title']) ?></h2>
              <p class="text-muted text-sm mb-4"><?= esc($post['excerpt']) ?></p>
              <a href="<?= base_url('blog/' . $post['slug']) ?>" class="text-secondary font-bold text-sm uppercase tracking-widest">
                Read Article →
              </a>
            </div>
          </article>
        <?php endforeach; ?>
      </div>
    <?php endif; ?>
  </div>
</section>

<script> lucide?.createIcons(); </script>
<?= $this->endSection() ?>