<?php
require_once __DIR__ . '/includes/site_data.php';
?>
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Project Gallery - <?php echo htmlspecialchars($siteSettings['company_name'], ENT_QUOTES, 'UTF-8'); ?> Zirakpur</title>
    <meta name="description" content="Explore real site photographs, master layout views, wide internal road networks, and architectural floor plans of <?php echo htmlspecialchars($siteSettings['company_name'], ENT_QUOTES, 'UTF-8'); ?> Zirakpur.">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<?php if (!empty($siteSettings['header_scripts'])): echo $siteSettings['header_scripts']; endif; ?>
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.png" />
    <link rel="preconnect" href="https://fonts.googleapis.com/">
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,300;0,400;0,500;0,600;0,700&amp;family=Lora:wght@400;500;600;700&amp;display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/plugins/magnific-popup.css" />
    <link rel="stylesheet" href="assets/css/style.css?v=<?php echo time(); ?>" />
    <style>
        .gallery-filter-nav {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin: 0 auto 40px;
            max-width: 900px;
        }
        .gallery-filter-btn {
            background: #ffffff;
            color: #0b2c3d;
            border: 1.5px solid #e2e8f0;
            padding: 10px 22px;
            border-radius: 30px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.25s ease;
            box-shadow: 0 4px 12px rgba(11, 44, 61, 0.05);
        }
        .gallery-filter-btn:hover {
            border-color: #b39359;
            color: #b39359;
            transform: translateY(-2px);
        }
        .gallery-filter-btn.active {
            background: #0b2c3d;
            color: #ffffff;
            border-color: #0b2c3d;
            box-shadow: 0 8px 20px rgba(11, 44, 61, 0.2);
        }
        .medallion-gallery-showcase-grid {
            display: grid;
            grid-template-columns: repeat(1, minmax(0, 1fr));
            gap: 28px;
        }
        @media (min-width: 640px) {
            .medallion-gallery-showcase-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
        @media (min-width: 1024px) {
            .medallion-gallery-showcase-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }
        .showcase-card {
            background: #ffffff;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(11, 44, 61, 0.07);
            border: 1px solid #edf2f7;
            display: flex;
            flex-direction: column;
            transition: all 0.3s ease;
        }
        .showcase-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 42px rgba(11, 44, 61, 0.15);
            border-color: rgba(179, 147, 89, 0.4);
        }
        .showcase-image-holder {
            position: relative;
            overflow: hidden;
            background: #f7fafc;
            aspect-ratio: 16 / 10;
        }
        .showcase-image-holder img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        .showcase-card:hover .showcase-image-holder img {
            transform: scale(1.06);
        }
        .showcase-overlay-icon {
            position: absolute;
            bottom: 14px;
            right: 14px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(11, 44, 61, 0.85);
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transform: scale(0.8);
            transition: all 0.3s ease;
            backdrop-filter: blur(4px);
        }
        .showcase-card:hover .showcase-overlay-icon {
            opacity: 1;
            transform: scale(1);
        }
        .showcase-tag {
            position: absolute;
            bottom: 14px;
            left: 14px;
            background: rgba(255, 255, 255, 0.95);
            color: #0b2c3d;
            font-size: 11px;
            font-weight: 700;
            padding: 5px 11px;
            border-radius: 6px;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
        }
        .showcase-info {
            padding: 22px 24px 26px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }
        .showcase-category-pill {
            color: #b39359;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: 6px;
        }
        .showcase-title {
            color: #0b2c3d;
            font-family: 'Lora', Georgia, serif;
            font-size: 19px;
            font-weight: 700;
            line-height: 1.35;
            margin: 0 0 8px;
            transition: color 0.2s ease;
        }
        .showcase-card:hover .showcase-title {
            color: #b39359;
        }
        .showcase-desc {
            color: #64748b;
            font-size: 13.5px;
            line-height: 1.55;
            margin: 0;
        }
    </style>
</head>
<body class="font-karla text-body text-tiny">
<?php
$galleryItems = [
    // Real Site & Township Progress
    [
        'category' => 'site-progress',
        'category_name' => 'Site & Township',
        'tag' => 'Site Office',
        'title' => 'Site Experience Centre & Landscaped Entry',
        'desc' => 'Welcoming on-site office with stone pathway and manicured green lawns.',
        'image' => 'assets/images/gallery/showcase/site-experience-office.jpg',
    ],
    [
        'category' => 'site-progress',
        'category_name' => 'Site & Township',
        'tag' => 'Road Network',
        'title' => 'Wide Paved Internal Road Network',
        'desc' => 'High-specification internal access road with avenue lighting and parking bays.',
        'image' => 'assets/images/gallery/showcase/wide-internal-road.jpg',
    ],
    [
        'category' => 'site-progress',
        'category_name' => 'Site & Township',
        'tag' => 'Plotted Township',
        'title' => 'On-Site Plotted Township Greenery',
        'desc' => 'Lush open acreage demarcated for residential plotted development.',
        'image' => 'assets/images/gallery/showcase/plotted-landscape-view.jpg',
    ],
    [
        'category' => 'site-progress',
        'category_name' => 'Site & Township',
        'tag' => 'Site Progress',
        'title' => 'On-Site Infrastructure & Cabin Development',
        'desc' => 'Real-time site construction, administrative cabin and surrounding grounds.',
        'image' => 'assets/images/gallery/showcase/site-development-progress.jpg',
    ],
    [
        'category' => 'site-progress',
        'category_name' => 'Site & Township',
        'tag' => 'Township Aerial',
        'title' => 'Aerial Drone Master Township Layout',
        'desc' => 'Panoramic bird’s eye perspective of the planned residential enclave.',
        'image' => 'assets/images/gallery/showcase/township-aerial-drone.jpg',
    ],
    [
        'category' => 'site-progress',
        'category_name' => 'Site & Township',
        'tag' => 'Master Layout',
        'title' => '3D Master Layout & Plotted Avenue Overview',
        'desc' => 'Architectural master render showcasing avenue trees and grand entry gates.',
        'image' => 'assets/images/gallery/showcase/master-layout-aerial.jpg',
    ],
    [
        'category' => 'lifestyle',
        'category_name' => 'Lifestyle & Amenities',
        'tag' => 'Green Boulevard',
        'title' => 'Landscaped Central Boulevard & Green Walkway',
        'desc' => 'Tree-lined pedestrian promenade with decorative flora and garden benches.',
        'image' => 'assets/images/gallery/showcase/landscaped-boulevard-walkway.jpg',
    ],
    [
        'category' => 'lifestyle',
        'category_name' => 'Lifestyle & Amenities',
        'tag' => 'Lifestyle Living',
        'title' => 'Architectural Township Living & Central Park',
        'desc' => 'Modern architectural design integrated with sprawling central open green.',
        'image' => 'assets/images/gallery/showcase/community-lifestyle-view.jpg',
    ],
    [
        'category' => 'lifestyle',
        'category_name' => 'Lifestyle & Amenities',
        'tag' => 'Club Amenity',
        'title' => 'Club & Rooftop Sky Lounge Facility',
        'desc' => 'Exclusive social club, terrace cafeteria, and modern recreational lounge.',
        'image' => 'assets/images/gallery/showcase/rooftop-sky-lounge.jpg',
    ],
    [
        'category' => 'lifestyle',
        'category_name' => 'Lifestyle & Amenities',
        'tag' => 'Commercial Plaza',
        'title' => 'Commercial Promenade & Plaza Elevation',
        'desc' => 'High-street retail and commercial promenade elevation for daily essentials.',
        'image' => 'assets/images/gallery/showcase/commercial-boulevard-elevation.jpg',
    ],

    // Master Plans & Architectural Layouts
    [
        'category' => 'master-plans',
        'category_name' => 'Plans & Layouts',
        'tag' => 'RERA Demarcation',
        'title' => 'RERA Approved Master Layout Demarcation Plan',
        'desc' => 'Statutory approved layout blueprint showing exact plot dimensions and road widths.',
        'image' => 'assets/images/gallery/showcase/rera-master-layout-blueprint.jpg',
    ],
    [
        'category' => 'master-plans',
        'category_name' => 'Plans & Layouts',
        'tag' => 'Ground Floor & Roads',
        'title' => 'Ground Floor Commercial Layout (100\', 60\' & 40\' Roads)',
        'desc' => 'Wide road connectivity, vehicular circulation, and ground-level suites.',
        'image' => 'assets/images/gallery/showcase/ground-floor-road-network.jpg',
    ],
    [
        'category' => 'master-plans',
        'category_name' => 'Plans & Layouts',
        'tag' => '3D Office Plan',
        'title' => '3D Commercial Office & Workstation Layout',
        'desc' => 'Modern 3D architectural plan with 6\' wide corridors and multi-desk suites.',
        'image' => 'assets/images/gallery/showcase/office-floor-plan-3d.jpg',
    ],
    [
        'category' => 'master-plans',
        'category_name' => 'Plans & Layouts',
        'tag' => 'Recreation & Work',
        'title' => 'Food Court, Gym & Innovation Hub Layout',
        'desc' => 'Comprehensive amenity floor including food court, gym, and meeting rooms.',
        'image' => 'assets/images/gallery/showcase/food-court-coworking-plan.jpg',
    ],
    [
        'category' => 'master-plans',
        'category_name' => 'Plans & Layouts',
        'tag' => 'Unit Plan',
        'title' => 'Studio & SOHO Suites Architectural Layout',
        'desc' => 'Optimized living & work-from-home suites with private balconies.',
        'image' => 'assets/images/gallery/showcase/studio-soho-unit-plan.jpg',
    ],
    [
        'category' => 'master-plans',
        'category_name' => 'Plans & Layouts',
        'tag' => 'Commercial Corridor',
        'title' => 'Commercial Suites & 10\' Wide Corridor (Units 101-130)',
        'desc' => 'Detailed floor blueprint featuring commercial units 101 to 130 and central atrium.',
        'image' => 'assets/images/gallery/showcase/commercial-corridor-units.jpg',
    ],
    [
        'category' => 'master-plans',
        'category_name' => 'Plans & Layouts',
        'tag' => 'Terrace Units',
        'title' => 'Terrace Level Commercial Suites (Units 501-528)',
        'desc' => 'Upper floor corporate units with 6\' wide outdoor balconies and elevators.',
        'image' => 'assets/images/gallery/showcase/terrace-units-layout.jpg',
    ],
    [
        'category' => 'master-plans',
        'category_name' => 'Plans & Layouts',
        'tag' => 'Corporate Suites',
        'title' => 'Executive Commercial Suites (Unit 1 & Unit 2)',
        'desc' => 'Large open-plan commercial corporate floors with expansive terraces.',
        'image' => 'assets/images/gallery/showcase/executive-commercial-suites.jpg',
    ],
    [
        'category' => 'master-plans',
        'category_name' => 'Plans & Layouts',
        'tag' => 'Rooftop Pergola',
        'title' => 'Terrace Deck & Pergola Rooftop Layout',
        'desc' => 'Architectural rooftop terrace design with pergola structures and service cores.',
        'image' => 'assets/images/gallery/showcase/terrace-deck-pergola.jpg',
    ],
    [
        'category' => 'master-plans',
        'category_name' => 'Plans & Layouts',
        'tag' => 'Infrastructure',
        'title' => 'Infrastructure & Services Level Plan',
        'desc' => 'Comprehensive building utilities, fire egress stairs, and central lift lobby.',
        'image' => 'assets/images/gallery/showcase/services-floor-plan.jpg',
    ],
];
?>
        <!-- Header start -->
        <div class="medallion-header-wrapper absolute top-0 left-0 w-full z-[35]">
            <header id="sticky-header" class="medallion-header-bar secondary-sticky">
                <div class="container">
                    <div class="grid grid-cols-12">
                        <div class="col-span-12">
                            <div class="flex items-center justify-between w-full">
                                <!-- Logo on Left -->
                                <a href="./" class="block py-1 shrink-0">
                                    <img src="assets/images/logo/medallion-brochure-logo-white.svg" alt="Medallion Aero Park" class="medallion-header-logo drop-shadow-md" style="height: 58px; width: auto; max-width: 270px; object-fit: contain; display: block;">
                                </a>

                                <!-- Menu Centrally Aligned -->
                                <nav class="medallion-nav-center">
                                    <ul class="medallion-nav-links font-lora">
                                        <li><a href="./">Home</a></li>
                                        <li><a href="about">About</a></li>
                                        <li><a href="plots">Plots</a></li>
                                        <li><a href="amenities">Amenities</a></li>
                                        <li><a href="blog">Blog</a></li>
                                        <li><a href="contact">Contact</a></li>
                                    </ul>
                                </nav>

                                <!-- Enquire Button and Mobile Toggle on Right -->
                                <div class="flex items-center gap-3 shrink-0">
                                    <a href="contact" class="medallion-enquire-btn before:rounded-md before:block before:absolute before:left-auto before:right-0 before:inset-y-0 before:-z-[1] before:bg-[#b89558] before:w-0 hover:before:w-full hover:before:left-0 hover:before:right-auto before:transition-all leading-none px-[20px] xl:px-[24px] py-[13px] capitalize font-medium text-white text-[14px] xl:text-[16px] relative after:block after:absolute after:inset-0 after:-z-[2] after:bg-[#a3824f] after:rounded-md after:transition-all shadow-md">Enquire Now</a>
                                    <a href="#offcanvas-mobile-menu" class="offcanvas-toggle flex lg:hidden text-white hover:text-secondary p-1">
                                        <svg width="24" height="24" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                            <path d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z" />
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
        </div>
        <!-- offcanvas-overlay start -->
        <div class="offcanvas-overlay hidden fixed inset-0 bg-black opacity-50 z-50"></div>
        <!-- offcanvas-overlay end -->
        <!-- offcanvas-mobile-menu start -->
        <div id="offcanvas-mobile-menu" class="offcanvas left-0 transform -translate-x-full fixed font-normal text-sm top-0 z-50 h-screen xs:w-[300px] lg:w-[380px] transition-all ease-in-out duration-300 bg-white">
            <div class="py-12 pr-5 h-[100vh] overflow-y-auto">
                <button class="offcanvas-close text-primary text-[25px] w-10 h-10 absolute right-0 top-0 z-[1]" aria-label="offcanvas">x</button>
                <nav class="offcanvas-menu mr-[20px]">
                    <ul>
                        <li class="relative block border-b-primary border-b first:border-t first:border-t-primary"><a href="./" class="block capitalize font-normal text-black hover:text-secondary text-base my-2 py-1 px-5">Home</a></li>
                        <li class="relative block border-b-primary border-b"><a href="about" class="block capitalize font-normal text-black hover:text-secondary text-base my-2 py-1 px-5">About</a></li>
                        <li class="relative block border-b-primary border-b"><a href="plots" class="block capitalize font-normal text-black hover:text-secondary text-base my-2 py-1 px-5">Plots</a></li>
                        <li class="relative block border-b-primary border-b"><a href="amenities" class="block capitalize font-normal text-black hover:text-secondary text-base my-2 py-1 px-5">Amenities</a></li>
                        <li class="relative block border-b-primary border-b"><a href="blog" class="block capitalize font-normal text-black hover:text-secondary text-base my-2 py-1 px-5">Blog</a></li>
                        <li class="relative block border-b-primary border-b"><a href="contact" class="block capitalize font-normal text-black hover:text-secondary text-base my-2 py-1 px-5">Contact</a></li>
                    </ul>
                </nav>
                <div class="px-5 flex flex-wrap mt-3 sm:hidden">
                    <a href="tel:+917837335599" class="bg-[#0b2c3d] text-white px-5 py-3 rounded-md font-medium text-center w-full block">Call +91 78373 35599</a>
                </div>
            </div>
        </div>
        <!-- offcanvas-mobile-menu end -->
        <!-- Header end -->

        <!-- Inner Page Hero Section Start -->
        <section class="medallion-inner-hero">
            <div class="absolute inset-0 w-full h-full pointer-events-none z-[1]">
                <img class="w-full h-full object-cover object-center" src="assets/images/gallery/showcase/master-layout-aerial.jpg" alt="Medallion Aero Park Gallery">
            </div>
            <div class="medallion-inner-hero-overlay"></div>
            <div class="container relative z-[5]">
                <div class="grid grid-cols-12">
                    <div class="col-span-12 lg:col-span-10 text-left">
                        <span class="medallion-inner-hero-tag">M E D A L L I O N&nbsp;&nbsp; A E R O&nbsp;&nbsp; P A R K</span>
                        <h1 class="medallion-inner-hero-title">
                            Project Gallery &amp; Visuals
                        </h1>
                        <p class="medallion-inner-hero-desc">
                            Actual on-site photographs, wide internal road infrastructure, master layouts, and architectural blueprints.
                        </p>
                    </div>
                </div>
            </div>
        </section>
        <!-- Inner Page Hero Section End -->

        <!-- Main Gallery Showcase Section -->
        <section class="gallery-page-section bg-[#f8fafc] py-[70px] lg:py-[100px]">
            <div class="container">
                <!-- Filter Category Tabs -->
                <div class="gallery-filter-nav">
                    <button type="button" class="gallery-filter-btn active" data-filter="all">All Visuals (<?php echo count($galleryItems); ?>)</button>
                    <button type="button" class="gallery-filter-btn" data-filter="site-progress">Site &amp; Township (6)</button>
                    <button type="button" class="gallery-filter-btn" data-filter="master-plans">Plans &amp; Layouts (10)</button>
                    <button type="button" class="gallery-filter-btn" data-filter="lifestyle">Lifestyle &amp; Amenities (4)</button>
                </div>

                <!-- Gallery Cards Grid -->
                <div class="medallion-gallery-showcase-grid">
                    <?php foreach ($galleryItems as $item): ?>
                        <article class="showcase-card gallery-item" data-category="<?php echo htmlspecialchars($item['category']); ?>">
                            <a href="<?php echo htmlspecialchars($item['image']); ?>?v=<?php echo time(); ?>" class="showcase-image-holder gallery-image" title="<?php echo htmlspecialchars($item['title']); ?>">
                                <img src="<?php echo htmlspecialchars($item['image']); ?>?v=<?php echo time(); ?>" loading="lazy" alt="<?php echo htmlspecialchars($item['title']); ?>">
                                <span class="showcase-tag"><?php echo htmlspecialchars($item['tag']); ?></span>
                                <span class="showcase-overlay-icon">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <circle cx="11" cy="11" r="8"></circle>
                                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                                        <line x1="11" y1="8" x2="11" y2="14"></line>
                                        <line x1="8" y1="11" x2="14" y2="11"></line>
                                    </svg>
                                </span>
                            </a>
                            <div class="showcase-info">
                                <span class="showcase-category-pill"><?php echo htmlspecialchars($item['category_name']); ?></span>
                                <h3 class="showcase-title">
                                    <a href="<?php echo htmlspecialchars($item['image']); ?>?v=<?php echo time(); ?>" class="gallery-image" title="<?php echo htmlspecialchars($item['title']); ?>">
                                        <?php echo htmlspecialchars($item['title']); ?>
                                    </a>
                                </h3>
                                <p class="showcase-desc"><?php echo htmlspecialchars($item['desc']); ?></p>
                            </div>
                        </article>
                    <?php endforeach; ?>
                </div>
            </div>
        </section>
    </main>

<?php include __DIR__ . '/footer.php'; ?>

    <script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
    <script src="assets/js/plugins/jquery.magnific-popup.min.js"></script>
    <script>
        $(document).ready(function() {
            // Magnific Popup Lightbox
            $(".gallery-image").magnificPopup({
                type: "image",
                gallery: {
                    enabled: true,
                    preload: [0, 2],
                    navigateByImgClick: true,
                    arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>',
                    tPrev: 'Previous',
                    tNext: 'Next',
                    tCounter: '<span class="mfp-counter">%curr% of %total%</span>'
                },
                image: {
                    tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
                    titleSrc: function(item) {
                        return item.el.attr('title') || item.el.find('img').attr('alt') || '';
                    }
                },
                mainClass: 'mfp-fade',
                removalDelay: 300
            });

            // Filter Tabs Interactivity
            $(".gallery-filter-btn").on("click", function() {
                $(".gallery-filter-btn").removeClass("active");
                $(this).addClass("active");

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

                if (filter === "all") {
                    $(".gallery-item").fadeIn(300);
                } else {
                    $(".gallery-item").hide();
                    $('.gallery-item[data-category="' + filter + '"]').fadeIn(300);
                }
            });
        });
    </script>
</body>
</html>
