<?php
/**
 * The template for displaying 404 (Not Found) pages
 *
 * @package Blog_Over
 */

get_header();
?>

<main id="primary" class="blog-over-site-main blog-over-404-main">
    <div class="blog-over-page-header-container">
        <?php blog_over_page_header(); ?>
    </div>
    <?php if (blog_over_should_render_breadcrumb_container()): ?>
        <div class="blog-over-breadcrumb-container">
            <?php Blog_Over_breadcrumb(); ?>
        </div>
    <?php endif; ?>

    <div class="blog-over-404-section">
        <!-- Floating Particles Background -->
        <div class="blog-over-404-particles" aria-hidden="true">
            <span class="blog-over-particle"></span>
            <span class="blog-over-particle"></span>
            <span class="blog-over-particle"></span>
            <span class="blog-over-particle"></span>
            <span class="blog-over-particle"></span>
            <span class="blog-over-particle"></span>
        </div>

        <div class="blog-over-container">
            <div class="blog-over-404-wrapper">

                <!-- Left: Animated Illustration -->
                <div class="blog-over-404-illustration" aria-hidden="true">
                    <div class="blog-over-404-globe">
                        <div class="blog-over-404-globe-ring blog-over-404-ring-1"></div>
                        <div class="blog-over-404-globe-ring blog-over-404-ring-2"></div>
                        <div class="blog-over-404-globe-ring blog-over-404-ring-3"></div>
                        <div class="blog-over-404-number">
                            <span class="blog-over-404-num">4</span>
                            <span class="blog-over-404-num blog-over-404-num-zero">0</span>
                            <span class="blog-over-404-num">4</span>
                        </div>
                    </div>
                </div>

                <!-- Right: Content Card -->
                <div class="blog-over-404-card">
                    <?php
                    if (!blog_over_has_page_header() || !get_theme_mod('blog_over_page_header_show_title', true)):
                        ?>
                        <div class="blog-over-404-badge">
                            <i class="fas fa-exclamation-triangle"></i>
                            <?php esc_html_e('Error 404', 'blog-over'); ?>
                        </div>
                    <?php endif; ?>

                    <h1 class="blog-over-404-title">
                        <?php esc_html_e('Oops! Page Not Found', 'blog-over'); ?>
                    </h1>

                    <p class="blog-over-404-description">
                        <?php esc_html_e('The page you\'re looking for doesn\'t exist or has been moved. Don\'t worry, let\'s get you back on track.', 'blog-over'); ?>
                    </p>

                    <!-- Suggestions -->
                    <div class="blog-over-404-suggestions">
                        <div class="blog-over-404-suggestion-item">
                            <i class="fas fa-check-circle"></i>
                            <span><?php esc_html_e('Check the URL for typos', 'blog-over'); ?></span>
                        </div>
                        <div class="blog-over-404-suggestion-item">
                            <i class="fas fa-check-circle"></i>
                            <span><?php esc_html_e('Use the search below to find content', 'blog-over'); ?></span>
                        </div>
                        <div class="blog-over-404-suggestion-item">
                            <i class="fas fa-check-circle"></i>
                            <span><?php esc_html_e('Navigate back to the homepage', 'blog-over'); ?></span>
                        </div>
                    </div>

                    <!-- Search -->
                    <div class="blog-over-404-search">
                        <?php get_search_form(); ?>
                    </div>

                    <!-- Action Buttons -->
                    <div class="blog-over-404-actions">
                        <a href="<?php echo esc_url(home_url('/')); ?>"
                            class="blog-over-404-btn blog-over-404-btn-primary">
                            <i class="fas fa-home"></i>
                            <?php esc_html_e('Go to Homepage', 'blog-over'); ?>
                        </a>
                        <button type="button" onclick="history.back()"
                            class="blog-over-404-btn blog-over-404-btn-secondary">
                            <i class="fas fa-arrow-left"></i>
                            <?php esc_html_e('Go Back', 'blog-over'); ?>
                        </button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</main>

<?php
get_footer();
