<?= $this->extend('front/layout') ?>

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

<!-- Page Header -->
<section class="py-5" style="background-color: var(--primary-green); color: white;">
    <div class="container text-center py-4" data-aos="fade-down">
        <h1 class="display-4 font-serif fw-bold mb-0"><?= !empty($page) && isset($page['title']) ? esc($page['title']) : 'Page Not Found' ?></h1>
    </div>
</section>

<!-- Page Content -->
<section class="section-padding">
    <div class="container">
        <?php if(!empty($page)): ?>
            <?php if(!empty($page['heading'])): ?>
                <div class="text-center mb-5" data-aos="fade-up">
                    <h5 style="color: var(--accent-gold); font-weight: 600;">DISCOVER</h5>
                    <h2 class="font-serif" style="color: var(--primary-green);"><?= esc($page['heading']) ?></h2>
                </div>
            <?php endif; ?>
            
            <div class="row justify-content-center">
                <div class="col-lg-10" data-aos="fade-up" data-aos-delay="100">
                    <div class="page-content" style="line-height: 1.8; font-size: 1.1rem; color: #4a4a4a;">
                        <?= $page['content'] ?>
                    </div>
                </div>
            </div>
        <?php else: ?>
            <div class="text-center py-5">
                <h3>The page you are looking for does not exist.</h3>
                <a href="<?= base_url() ?>" class="btn btn-primary-custom mt-3">Return Home</a>
            </div>
        <?php endif; ?>
    </div>
</section>

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