<?php

get_header();

status_header(404);
nocache_headers();

get_template_part('template-parts/common/common_hero_section');
?>

<section class="section xl:py-20 py-10 overflow-hidden bg-gradient-op-10">
    <div class="container">

        <div data-aos="fade-up" data-aos-duration="500" class="mb-4 text-center xl:mb-10 md:mb-6">
            <p class="heading xl:text-h4 text-body3 text-black-900">
                Meanwhile, you can explore:
            </p>
        </div>

        <?php
        $explore_items = get_field('404_explore_pages', 'option');
        ?>

        <?php if (!empty($explore_items)) : ?>

            <div class="indicator overflow-hidden">
                <div class="explore-wrapper">

                    <!-- Desktop Grid (≥1024px) -->
                    <div class="hidden lg:grid grid-cols-4 gap-8">
                        <?php foreach ($explore_items as $item) : ?>
                            <a href="<?php echo esc_url($item['page_link']); ?>"
                               class="block rounded-lg overflow-hidden group relative h-[360px]">

                                <?php if (!empty($item['feature_image'])): ?>
                                    <img src="<?php echo esc_url($item['feature_image']['url']); ?>"
                                         alt="<?php echo esc_attr($item['page_name']); ?>"
                                         class="absolute inset-0 w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
                                <?php endif; ?>

                                <div class="absolute inset-0 bg-black/20"></div>

                                <p class="heading xl:text-body4 text-body5 absolute bottom-6 w-full text-center text-white z-[2]">
                                    <?php echo esc_html($item['page_name']); ?>
                                </p>
                            </a>
                        <?php endforeach; ?>
                    </div>

                    <!-- Mobile/Tablet Slider (<1024px) -->
                    <div class="explore-slider lg:hidden">
                        <?php foreach ($explore_items as $item) : ?>
                            <div class="explore-item">
                                <a href="<?php echo esc_url($item['page_link']); ?>">
                                    <div class="relative md:h-[300px] h-[450px] rounded-lg overflow-hidden">

                                        <?php if (!empty($item['feature_image'])): ?>
                                            <img src="<?php echo esc_url($item['feature_image']['url']); ?>"
                                                 alt="<?php echo esc_attr($item['page_name']); ?>"
                                                 class="absolute inset-0 w-full h-full object-cover transition-transform duration-300 hover:scale-105">
                                        <?php endif; ?>

                                        <div class="absolute inset-0 bg-black/20"></div>

                                        <p class="heading text-body5 absolute bottom-6 w-full text-center text-white z-[2]">
                                            <?php echo esc_html($item['page_name']); ?>
                                        </p>

                                    </div>
                                </a>
                            </div>
                        <?php endforeach; ?>
                    </div>

                </div>
            </div>

        <?php endif; ?>

    </div>
</section>

<?php get_footer(); ?>