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

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

<!-- Premium Page Header -->
<section class="position-relative py-5 overflow-hidden" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('<?= base_url('assets/images/hero_bg.png') ?>'); background-size: cover; background-position: center; color: white; min-height: 40vh; display: flex; align-items: center;">
    <div class="position-absolute top-0 start-0 w-100 h-100" style="background: url('<?= base_url('assets/img/pattern.png') ?>') repeat; opacity: 0.05;"></div>
    <div class="container text-center position-relative z-1 py-5" data-aos="fade-down" data-aos-duration="1000">
        <span class="text-uppercase fw-semibold tracking-wider mb-2 d-block" style="color: var(--accent-gold, #d4af37); letter-spacing: 3px; font-size: 0.85rem;">Curated Excellence</span>
        <h1 class="display-3 font-serif fw-bold mb-3 text-white"><?= !empty($page['title']) ? esc($page['title']) : 'Botanical Gallery' ?></h1>
        <div class="mx-auto mt-4 mb-4" style="width: 60px; height: 2px; background-color: var(--accent-gold, #d4af37);"></div>
        <?php if (!empty($page['heading'])): ?>
            <p class="lead mx-auto" style="max-width: 600px; color: rgba(255,255,255,0.85); font-weight: 300; line-height: 1.8;"><?= esc($page['heading']) ?></p>
        <?php else: ?>
            <p class="lead mx-auto" style="max-width: 600px; color: rgba(255,255,255,0.85); font-weight: 300; line-height: 1.8;">A visual journey through our state-of-the-art facilities and pure, potent phytoextracts.</p>
        <?php endif; ?>
    </div>
</section>

<!-- Dynamic Content -->
<?php if (!empty($page['content'])): ?>
<section class="py-5" style="background-color: #faf9f6;">
    <div class="container">
        <div class="page-content text-center font-serif text-secondary" style="max-width: 800px; margin: 0 auto; font-size: 1.15rem; line-height: 1.9;" data-aos="fade-up" data-aos-duration="1000">
            <?= $page['content'] ?>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- Elegant Gallery Section -->
<section class="py-5" style="background-color: #fdfcfb; min-height: 60vh;">
    <div class="container py-4">
        
        <?php if (!empty($categories) && count($categories) > 0): ?>
            <!-- Elegant Filter Buttons -->
            <div class="d-flex justify-content-center mb-5 gap-3 flex-wrap filter-container" data-aos="fade-up" data-aos-delay="200">
                <button class="filter-btn active" data-filter="all">All</button>
                <?php foreach ($categories as $cat): ?>
                    <button class="filter-btn" data-filter="<?= esc($cat['slug']) ?>"><?= esc($cat['name']) ?></button>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

        <div class="premium-gallery-grid" id="gallery-grid">
            <?php if (!empty($images)): ?>
                <?php foreach ($images as $index => $img): ?>
                <div class="gallery-item" data-category="<?= esc($img['category_slug']) ?>" data-aos="fade-up" data-aos-delay="<?= 100 + (($index % 3) * 100) ?>">
                    <a href="<?= base_url('uploads/gallery/' . $img['image']) ?>" data-fancybox="gallery" data-caption="<?= esc($img['title']) ?>" class="gallery-card d-block">
                        <div class="image-wrapper">
                            <img src="<?= base_url('uploads/gallery/' . $img['image']) ?>" alt="<?= esc($img['title']) ?>" loading="lazy">
                        </div>
                        <div class="gallery-overlay">
                            <div class="overlay-content">
                                <span class="category-label"><?= esc($img['category_name'] ?? 'Gallery') ?></span>
                                <?php if (!empty($img['title'])): ?>
                                    <h4 class="gallery-title"><?= esc($img['title']) ?></h4>
                                <?php endif; ?>
                                <div class="view-icon"><i class="bi bi-zoom-in"></i></div>
                            </div>
                        </div>
                    </a>
                </div>
                <?php endforeach; ?>
            <?php else: ?>
                <div class="col-12 text-center py-5 w-100">
                    <div class="p-5" style="border: 1px dashed rgba(0,0,0,0.1); border-radius: 12px; background: #fff;">
                        <i class="bi bi-images text-muted mb-3" style="font-size: 3rem;"></i>
                        <h4 class="font-serif text-secondary">Awaiting Inspiration</h4>
                        <p class="text-muted mb-0">Our visual collection is currently being curated.</p>
                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>
</section>

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

<?= $this->section('styles') ?>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
<style>
    /* Premium Filter Buttons */
    .filter-btn {
        background: transparent;
        border: none;
        color: #6c757d;
        font-family: 'Inter', sans-serif;
        font-weight: 500;
        font-size: 0.9rem;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 8px 24px;
        border-radius: 30px;
        transition: all 0.4s ease;
        position: relative;
    }
    .filter-btn:hover {
        color: var(--primary-green, #2b5329);
    }
    .filter-btn.active {
        color: #fff;
        background-color: var(--primary-green, #2b5329);
        box-shadow: 0 4px 15px rgba(43, 83, 41, 0.2);
    }

    /* Premium Masonry Grid */
    .premium-gallery-grid {
        column-count: 3;
        column-gap: 1.5rem;
        padding-bottom: 2rem;
    }
    @media (max-width: 992px) {
        .premium-gallery-grid { column-count: 2; }
    }
    @media (max-width: 576px) {
        .premium-gallery-grid { column-count: 1; }
    }

    .gallery-item {
        break-inside: avoid;
        margin-bottom: 1.5rem;
    }

    /* Gallery Card Styling */
    .gallery-card {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.06);
        background: #fff;
        transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
        transform: translateY(0);
    }
    
    .gallery-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    }

    .image-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
        background: #f0f0f0;
    }

    .image-wrapper img {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .gallery-card:hover .image-wrapper img {
        transform: scale(1.08);
    }

    /* Elegant Overlay */
    .gallery-overlay {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
        opacity: 0;
        transition: opacity 0.5s ease;
        display: flex;
        align-items: flex-end;
        padding: 2rem;
    }

    .gallery-card:hover .gallery-overlay {
        opacity: 1;
    }

    .overlay-content {
        width: 100%;
        transform: translateY(20px);
        transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .gallery-card:hover .overlay-content {
        transform: translateY(0);
    }

    .category-label {
        color: var(--accent-gold, #d4af37);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 600;
        margin-bottom: 0.5rem;
        display: block;
    }

    .gallery-title {
        color: #fff;
        font-family: 'Playfair Display', serif;
        font-size: 1.4rem;
        font-weight: 600;
        margin: 0;
        line-height: 1.3;
    }

    .view-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.5);
        color: #fff;
        font-size: 2.5rem;
        opacity: 0;
        transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .gallery-card:hover .view-icon {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }
</style>
<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<!-- Masonry JS for perfectly packed grid if items vary widely in height, though CSS columns usually suffice -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script>
    $(document).ready(function() {
        // Initialize Fancybox
        Fancybox.bind('[data-fancybox="gallery"]', {
            compact: false,
            idle: false,
            animated: false,
            showClass: false,
            hideClass: false,
            dragToClose: false,
            Images: {
                zoom: false,
            },
            Toolbar: {
                display: {
                    left: [],
                    middle: [],
                    right: ['close'],
                },
            },
        });

        // Filtering logic
        $('.filter-btn').on('click', function() {
            $('.filter-btn').removeClass('active');
            $(this).addClass('active');

            var filterValue = $(this).attr('data-filter');

            if (filterValue === 'all') {
                $('.gallery-item').fadeIn(400);
            } else {
                $('.gallery-item').hide();
                $('.gallery-item[data-category="' + filterValue + '"]').fadeIn(400);
            }
        });
    });
</script>
<?= $this->endSection() ?>
