<?php 
$page_title = "Gallery | Rev. Dr. Sally Julie Armah";
$page_description = "A visual journey of the life, ministry, and moments of grace of Rev. Dr. Sally Julie Armah.";
include('includes/header.php'); 
?>

<!-- Page Header -->
<section class="section-padding bg-dark text-white text-center" style="background: linear-gradient(rgba(45, 0, 80, 0.7), rgba(45, 0, 80, 0.7)), url('assets/hero_main.webp'); background-size: cover; background-position: center; padding-top: 150px;">
    <div class="container" data-aos="fade-down">
        <h6 class="text-uppercase text-gold fw-bold mb-3 ls-2">Capturing a Beautiful Legacy</h6>
        <h1 class="font-serif display-3 mb-4">Official Photo Gallery</h1>
    </div>
</section>

<!-- Gallery Grid -->
<section class="section-padding bg-white">
    <div class="container">
        <div class="row g-4">
            <!-- Image 1 -->
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="0">
                <div class="gallery-item shadow">
                    <img src="assets/gallery_1.webp" alt="Gallery Image 1" class="img-fluid rounded">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
            </div>
            <!-- Image 2 -->
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
                <div class="gallery-item shadow">
                    <img src="assets/gallery_2.webp" alt="Gallery Image 2" class="img-fluid rounded">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
            </div>
            <!-- Image 3 -->
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
                <div class="gallery-item shadow">
                    <img src="assets/gallery_3.webp" alt="Gallery Image 3" class="img-fluid rounded">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
            </div>
            <!-- Image 4 -->
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="0">
                <div class="gallery-item shadow">
                    <img src="assets/gallery_4.webp" alt="Gallery Image 4" class="img-fluid rounded">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
            </div>
            <!-- Image 5 -->
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
                <div class="gallery-item shadow">
                    <img src="assets/gallery_5.webp" alt="Gallery Image 5" class="img-fluid rounded">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
            </div>
            <!-- Image 6 -->
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
                <div class="gallery-item shadow">
                    <img src="assets/gallery_6.webp" alt="Gallery Image 6" class="img-fluid rounded">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
            </div>
            <!-- Additional Images would go here -->
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="0">
                <div class="gallery-item shadow">
                    <img src="assets/bio_portrait.jpg" alt="Gallery Image Portrait" class="img-fluid rounded">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
                <div class="gallery-item shadow">
                    <img src="assets/hero_main.webp" alt="Gallery Image Hero" class="img-fluid rounded">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Call to Action -->
<section class="section-padding bg-cream text-center">
    <div class="container">
        <h2 class="font-serif mb-4">Explore Her Life & Legacy</h2>
        <div class="d-flex justify-content-center gap-3">
            <a href="about.php" class="btn btn-primary px-4 py-2 rounded-pill">Read Biography</a>
            <a href="ministry.php" class="btn btn-outline-primary px-4 py-2 rounded-pill">Ministry Details</a>
        </div>
    </div>
</section>

<?php include('includes/footer.php'); ?>
