<?php
/**
 * 404 Page Template
 *
 * @package Navier_Instruments
 */

get_header();
?>

<div class="page-header">
    <div class="container">
        <h1 class="page-title"><?php esc_html_e('404 - Page Not Found', 'navier-instruments'); ?></h1>
    </div>
</div>

<div class="page-content">
    <div class="container" style="text-align: center; max-width: 600px;">
        <div style="margin-bottom: var(--spacing-2xl);">
            <svg width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="var(--navier-primary)" stroke-width="1.5" style="opacity: 0.5;">
                <circle cx="12" cy="12" r="10"></circle>
                <path d="M16 16s-1.5-2-4-2-4 2-4 2"></path>
                <line x1="9" y1="9" x2="9.01" y2="9"></line>
                <line x1="15" y1="9" x2="15.01" y2="9"></line>
            </svg>
        </div>

        <h2><?php esc_html_e('Oops! This page doesn\'t exist.', 'navier-instruments'); ?></h2>
        <p style="color: var(--navier-gray-500); margin-bottom: var(--spacing-xl);">
            <?php esc_html_e('The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.', 'navier-instruments'); ?>
        </p>

        <div style="display: flex; gap: var(--spacing-md); justify-content: center; flex-wrap: wrap;">
            <a href="<?php echo esc_url(home_url('/')); ?>" class="btn btn--primary">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                    <polyline points="9 22 9 12 15 12 15 22"></polyline>
                </svg>
                <?php esc_html_e('Back to Home', 'navier-instruments'); ?>
            </a>
            <a href="<?php echo esc_url(home_url('/#contact')); ?>" class="btn btn--secondary">
                <?php esc_html_e('Contact Us', 'navier-instruments'); ?>
            </a>
        </div>

        <div style="margin-top: var(--spacing-3xl);">
            <h3><?php esc_html_e('Search our site', 'navier-instruments'); ?></h3>
            <?php get_search_form(); ?>
        </div>
    </div>
</div>

<?php
get_footer();
