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

<?= $this->section('meta_title') ?><?= esc($post['title']) ?> | Mount Kenya Treks Blog<?= $this->endSection() ?>
<?= $this->section('meta_desc') ?><?= esc($post['excerpt']) ?><?= $this->endSection() ?>

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

<div class="bg-light pb-24">
  <div class="container mx-auto px-6 pt-20">
    <!-- Breadcrumb -->
    <nav class="mb-8 text-sm text-muted">
      <a href="<?= base_url('/') ?>" class="hover:text-secondary">Home</a> / 
      <a href="<?= base_url('blog') ?>" class="hover:text-secondary">Blog</a> / 
      <span><?= esc($post['title']) ?></span>
    </nav>

    <!-- Hero -->
    <article class="max-w-4xl mx-auto">
      <header class="mb-12 text-center">
        <time class="text-[10px] font-black uppercase tracking-widest text-muted block mb-4">
          <?= date('F d, Y', strtotime($post['created_at'])) ?>
        </time>
        <h1 class="text-3xl md:text-4xl font-black text-navy leading-tight mb-6">
          <?= esc($post['title']) ?>
        </h1>
      </header>

      <!-- Featured Image -->
      <?php if (!empty($post['image'])): ?>
        <div class="mb-12 rounded-3xl overflow-hidden border border-border">
          <img 
            src="<?= base_url('assets/uploads/blog/' . $post['image']) ?>" 
            alt="<?= esc($post['title']) ?>"
            class="w-full h-auto"
          >
        </div>
      <?php endif; ?>

      <!-- Content -->
      <div class="prose prose-navy max-w-none text-muted leading-relaxed">
        <?= $post['content'] ?>
      </div>

      <!-- Back to Blog -->
      <div class="mt-16 pt-8 border-t border-border text-center">
        <a href="<?= base_url('blog') ?>" class="inline-flex items-center gap-2 text-secondary font-bold uppercase tracking-widest hover:text-accent">
          ← Back to All Stories
        </a>
      </div>
    </article>
  </div>
</div>

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