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

<?= $this->section('content') ?>
<div class="bg-light min-h-screen py-20">
    <div class="max-w-2xl mx-auto px-6">
        <div class="bg-white rounded-[2.5rem] shadow-xl overflow-hidden border border-border">
            <div class="bg-navy p-10 text-center text-white relative">
                <div class="w-20 h-20 bg-secondary rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
                    <svg class="w-10 h-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                    </svg>
                </div>
                <h1 class="text-3xl font-black uppercase tracking-tighter">Expedition Secured</h1>
                <p class="text-white/60 text-sm mt-2 font-medium">Your Mount Kenya journey starts here.</p>
            </div>

            <div class="p-10">
                <?php if (session()->getFlashdata('success')): ?>
                    <div class="bg-green-50 border border-green-100 text-green-800 px-6 py-4 rounded-2xl mb-8 text-sm font-bold text-center">
                        <?= session()->getFlashdata('success') ?>
                    </div>
                <?php endif; ?>

                <div class="bg-light rounded-3xl p-8 border border-border mb-10 text-center">
                    <span class="text-[10px] font-black uppercase tracking-[0.2em] text-muted block mb-2">Official Invoice Reference</span>
                    <h2 class="text-4xl font-black text-navy tracking-tighter"><?= esc($invoice_ref ?? 'MKT-2026-001') ?></h2>
                    <div class="mt-4 inline-flex items-center gap-2 px-4 py-2 bg-white rounded-full border border-border">
                        <span class="w-2 h-2 bg-secondary rounded-full"></span>
                        <span class="text-[10px] font-black uppercase tracking-widest text-navy">Invoice Sent to Email</span>
                    </div>
                </div>

                <div class="space-y-6">
                    <h3 class="text-xs font-black uppercase tracking-[0.3em] text-secondary text-center">Next Steps</h3>
                    
                    <div class="grid gap-4">
                        <div class="flex gap-4 items-start p-4 rounded-2xl border border-border hover:bg-light/50 transition-colors">
                            <span class="w-8 h-8 rounded-lg bg-navy text-white flex items-center justify-center font-black shrink-0">01</span>
                            <div>
                                <p class="font-black text-navy text-sm uppercase">Check your Inbox</p>
                                <p class="text-muted text-xs">We've sent your PDF invoice and trek requirements. Please check your spam folder just in case.</p>
                            </div>
                        </div>

                        <div class="flex gap-4 items-start p-4 rounded-2xl border border-border hover:bg-light/50 transition-colors">
                            <span class="w-8 h-8 rounded-lg bg-navy text-white flex items-center justify-center font-black shrink-0">02</span>
                            <div>
                                <p class="font-black text-navy text-sm uppercase">Submit Documents</p>
                                <p class="text-muted text-xs">Reply to the email with a clear copy of your Passport for KWS permit processing.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-12 flex flex-col sm:flex-row gap-4">
                    <a href="<?= base_url('/') ?>" class="flex-1 text-center py-4 bg-navy text-white font-black uppercase tracking-widest rounded-xl text-[11px] hover:bg-navy/90 transition-all">
                        Return Home
                    </a>
                    <a href="https://wa.me/254700000000" class="flex-1 text-center py-4 border border-border text-navy font-black uppercase tracking-widest rounded-xl text-[11px] hover:bg-light transition-all flex items-center justify-center gap-2">
                        WhatsApp Support
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<?= $this->endSection() ?>