<?php
// Safely extract tour data
$title = esc($tour['title'] ?? 'Expedition');
$description = esc(strip_tags($tour['description'] ?? 'Join a professionally guided Mount Kenya expedition.'));
$route = esc($tour['route'] ?? 'Mount Kenya');
$duration = esc($tour['duration_days'] ?? '7');
$price = (float) ($tour['price_usd'] ?? 0);
$difficulty = $tour['difficulty'] ?? 'intermediate';
$slug = $tour['slug'] ?? '';
$images = !empty($tour['images']) ? json_decode($tour['images'], true) : [];
$firstImage = !empty($images) ? $images[0] : null;

$diff = strtolower($difficulty);
$difficultyLabel = match($diff) {
    'beginner' => 'Standard',
    'intermediate' => 'Challenging',
    'advanced' => 'Elite',
    default => 'Standard'
};

if (empty($tour) || empty($slug)): ?>
  <?php $this->extend('App\Modules\Frontend\Views\_layout') ?>
  <?php $this->section('content') ?>
  <div class="container mx-auto px-6 py-24 text-center">
    <h1 class="text-3xl font-black text-navy mb-4">Expedition Not Found</h1>
    <p class="text-muted mb-8">The requested Mount Kenya trek could not be located.</p>
    <a href="<?= base_url('tours') ?>" class="inline-flex items-center justify-center px-8 py-4 bg-secondary text-white font-bold text-[12px] uppercase tracking-widest rounded-full hover:bg-accent transition-colors shadow-lg hover:shadow-xl">
      Browse All Expeditions
    </a>
  </div>
  <?php $this->endSection() ?>
  <?php return; ?>
<?php endif; ?>

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

<?php $this->section('meta_title') ?>
<?= $title ?> | Mount Kenya Treks & Safaris
<?php $this->endSection() ?>

<?php $this->section('meta_desc') ?>
<?= $description ?>
<?php $this->endSection() ?>

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

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "TouristTrip",
  "name": "<?= $title ?>",
  "description": "<?= $description ?>",
  "url": "<?= current_url() ?>",
  "offers": {
    "@type": "Offer",
    "price": "<?= $price ?>",
    "priceCurrency": "USD"
  }
}
</script>

<div class="bg-light pb-24">
  <?php if ($firstImage): ?>
    <div class="relative w-full h-[50vh] md:h-[60vh] overflow-hidden">
      <img 
        src="<?= base_url('assets/uploads/tours/' . $firstImage) ?>" 
        alt="<?= $title ?> on <?= $route ?> Route — Mount Kenya Treks"
        class="w-full h-full object-cover"
      >
      <div class="absolute inset-0 bg-gradient-to-t from-navy/90 via-navy/20 to-transparent pointer-events-none"></div>
      <div class="absolute bottom-12 left-6 text-white max-w-2xl z-10">
        <span class="inline-block mb-2 px-3 py-1 bg-secondary/90 backdrop-blur-sm text-[10px] font-black uppercase tracking-widest rounded-full">
          <?= $route ?> • <?= $difficultyLabel ?>
        </span>
        <h1 class="text-3xl md:text-5xl font-black leading-tight max-w-3xl"><?= $title ?></h1>
      </div>
    </div>
  <?php else: ?>
    <div class="bg-primary h-64 flex items-center justify-center">
      <span class="text-white text-xl">Expedition Image</span>
    </div>
  <?php endif; ?>

  <div class="container mx-auto px-6 -mt-8 relative z-20">
    <nav aria-label="Breadcrumb" class="flex text-[10px] font-black uppercase tracking-widest text-white/80 mb-8">
      <a href="<?= base_url('/') ?>" class="hover:text-secondary transition-colors">Home</a>
      <span class="mx-2">/</span>
      <a href="<?= base_url('tours') ?>" class="hover:text-secondary transition-colors">Tours</a>
      <span class="mx-2">/</span>
      <span class="text-white"><?= $title ?></span>
    </nav>

    <div class="grid lg:grid-cols-3 gap-10">
      <div class="lg:col-span-2">
        <div class="bg-surface rounded-3xl border border-border p-8 shadow-sm">
          <p class="text-lg text-muted leading-relaxed mb-8">
            <?= nl2br(esc($description)) ?>
          </p>

          <div>
            <h2 class="text-xl font-black text-navy mb-4">What’s Included</h2>
            <ul class="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <?php foreach ([
                'KWS Park Permits',
                'Professional Guide Team',
                'Porter Support (4:1 ratio)',
                'All Meals (Basecamp to Summit)',
                'Emergency Oxygen & First Aid',
                'Group Camping Equipment'
              ] as $item): ?>
                <li class="flex items-start gap-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-secondary mt-0.5 flex-shrink-0">
                    <polyline points="20 6 9 17 4 12"></polyline>
                  </svg>
                  <span class="text-muted"><?= $item ?></span>
                </li>
              <?php endforeach; ?>
            </ul>
          </div>
        </div>
      </div>

      <div class="relative">
        <div class="lg:sticky lg:top-32 bg-surface rounded-3xl border border-border p-6 shadow-sm">
          <div class="text-center mb-6">
            <div class="text-[11px] font-black text-muted uppercase tracking-widest mb-1">Starting From</div>
            <div class="text-3xl font-black text-navy">USD <?= number_format($price) ?></div>
            <div class="text-[11px] text-muted mt-1">All-inclusive</div>
          </div>

          <div class="space-y-4 mb-8 text-sm">
            <div class="flex justify-between">
              <span class="text-muted">Duration</span>
              <span class="font-bold"><?= $duration ?> Days</span>
            </div>
            <div class="flex justify-between">
              <span class="text-muted">Difficulty</span>
              <span class="font-bold text-secondary"><?= $difficultyLabel ?></span>
            </div>
            <div class="flex justify-between">
              <span class="text-muted">Group Size</span>
              <span class="font-bold">Max 8</span>
            </div>
          </div>

          <a 
            href="<?= base_url('booking?tour=' . $slug) ?>" 
            class="w-full block py-4 bg-secondary text-white font-black text-[12px] uppercase tracking-widest rounded-xl hover:bg-accent transition-all shadow-lg hover:shadow-xl text-center relative z-30"
          >
            Book This Expedition
          </a>

          <p class="text-[10px] text-center text-muted mt-4">
            KWS Licensed • Fully Insured
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="fixed bottom-0 left-0 right-0 p-4 bg-surface/80 backdrop-blur-md border-t border-border z-50 lg:hidden">
  <div class="flex items-center justify-between gap-4 max-w-md mx-auto">
    <div>
       <span class="text-[10px] block font-black text-muted uppercase tracking-tighter">Total Price</span>
       <span class="text-lg font-black text-navy">USD <?= number_format($price) ?></span>
    </div>
    <a 
      href="<?= base_url('booking?tour=' . $slug) ?>" 
      class="flex-1 py-4 bg-secondary text-white font-black text-[11px] uppercase tracking-widest rounded-xl text-center shadow-lg active:scale-95 transition-transform"
    >
      Book Now
    </a>
  </div>
</div>

<?php $this->endSection() ?>