<?= $this->extend('App\Modules\Admin\Views\_admin_layout') ?>

<?= $this->section('content') ?>
<div class="container mx-auto px-4 py-8 max-w-7xl">
    
    <div class="mb-10">
        <h1 class="text-3xl font-black text-navy uppercase tracking-tight mb-2">Command Center</h1>
        <p class="text-muted font-medium flex items-center gap-2">
            <span class="w-2 h-2 bg-secondary rounded-full"></span>
            Welcome back, Chief Guide. Here is what's happening on the mountain.
        </p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
        <div class="bg-surface p-6 rounded-[2rem] border border-border shadow-sm group hover:border-secondary transition-all">
            <div class="text-[10px] font-black uppercase tracking-widest text-muted mb-4">Active Treks</div>
            <div class="flex items-end justify-between">
                <span class="text-4xl font-black text-primary leading-none">12</span>
                <div class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center text-primary">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" stroke-width="2"/></svg>
                </div>
            </div>
        </div>

        <div class="bg-surface p-6 rounded-[2rem] border border-border shadow-sm group hover:border-secondary transition-all">
            <div class="text-[10px] font-black uppercase tracking-widest text-muted mb-4">New Bookings</div>
            <div class="flex items-end justify-between">
                <span class="text-4xl font-black text-primary leading-none">08</span>
                <div class="w-10 h-10 bg-success/10 rounded-xl flex items-center justify-center text-success">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-width="2"/></svg>
                </div>
            </div>
        </div>

        <div class="bg-surface p-6 rounded-[2rem] border border-border shadow-sm group hover:border-secondary transition-all">
            <div class="text-[10px] font-black uppercase tracking-widest text-muted mb-4">Published Stories</div>
            <div class="flex items-end justify-between">
                <span class="text-4xl font-black text-primary leading-none">24</span>
                <div class="w-10 h-10 bg-secondary/10 rounded-xl flex items-center justify-center text-secondary">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 10v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2m14 0V9a2 2 0 00-2-2M9 9h2m0 0v2m0-2h2" stroke-width="2"/></svg>
                </div>
            </div>
        </div>

        <div class="bg-surface p-6 rounded-[2rem] border border-border shadow-sm group hover:border-secondary transition-all">
            <div class="text-[10px] font-black uppercase tracking-widest text-muted mb-4">Site Traffic</div>
            <div class="flex items-end justify-between">
                <span class="text-4xl font-black text-primary leading-none">1.2k</span>
                <div class="w-10 h-10 bg-navy/5 rounded-xl flex items-center justify-center text-navy">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" stroke-width="2"/></svg>
                </div>
            </div>
        </div>
    </div>

    <h2 class="text-xs font-black uppercase tracking-[0.3em] text-muted/60 mb-6">Management Modules</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        
        <a href="<?= base_url('admin/tours') ?>" class="group">
            <div class="bg-surface p-8 rounded-[2.5rem] border border-border shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all flex flex-col h-full">
                <div class="w-14 h-14 bg-light rounded-2xl flex items-center justify-center text-primary mb-6 group-hover:bg-primary group-hover:text-white transition-colors">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" stroke-width="2"/><path d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" stroke-width="2"/></svg>
                </div>
                <h3 class="text-xl font-black text-navy mb-2">Expedition Tours</h3>
                <p class="text-sm text-muted mb-6 flex-grow font-medium leading-relaxed">Update routes, adjust pricing, and manage trek itineraries for climbers.</p>
                <div class="flex items-center text-xs font-black uppercase tracking-widest text-secondary group-hover:text-accent">
                    Enter Module <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M17 8l4 4m0 0l-4 4m4-4H3" stroke-width="3"/></svg>
                </div>
            </div>
        </a>

        <a href="<?= base_url('admin/blog') ?>" class="group">
            <div class="bg-surface p-8 rounded-[2.5rem] border border-border shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all flex flex-col h-full">
                <div class="w-14 h-14 bg-light rounded-2xl flex items-center justify-center text-primary mb-6 group-hover:bg-primary group-hover:text-white transition-colors">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" stroke-width="2"/></svg>
                </div>
                <h3 class="text-xl font-black text-navy mb-2">Expedition Blog</h3>
                <p class="text-sm text-muted mb-6 flex-grow font-medium leading-relaxed">Share stories from the summit, trekking tips, and mountain news with your community.</p>
                <div class="flex items-center text-xs font-black uppercase tracking-widest text-secondary group-hover:text-accent">
                    Manage Posts <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M17 8l4 4m0 0l-4 4m4-4H3" stroke-width="3"/></svg>
                </div>
            </div>
        </a>

        <div class="relative group">
            <div class="bg-surface/60 p-8 rounded-[2.5rem] border border-dashed border-border flex flex-col h-full opacity-80">
                <div class="w-14 h-14 bg-light rounded-2xl flex items-center justify-center text-muted mb-6">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2"/></svg>
                </div>
                <h3 class="text-xl font-black text-muted mb-2">Reservations</h3>
                <p class="text-sm text-muted/60 mb-6 flex-grow font-medium leading-relaxed">Booking management system integration is currently in progress.</p>
                <div class="inline-flex py-1 px-3 bg-light rounded-full text-[10px] font-black uppercase tracking-widest text-muted w-fit">
                    Coming Soon
                </div>
            </div>
        </div>

    </div>
</div>
<?= $this->endSection() ?>