<?php
/**
 * 404 Error Page template.
 *
 * @package pawwell
 */

get_header();
?>

<div id="primary" class="content-area">
    <main id="main-content" class="site-main" role="main">
        <section class="error-404">
            <div class="container error-404__inner">
                <span class="error-404__eyebrow">
                    <span class="dot"></span>
                    <?php esc_html_e( 'Error 404 — Page Lost', 'pawwell' ); ?>
                </span>

                <div class="error-404__code">
                    <span>4</span>
                    <span class="error-404__paw-circle" aria-hidden="true"><span class="paw-emoji">&#x1F43E;</span></span>
                    <span>4</span>
                </div>

                <h1 class="error-404__title">
                    <?php
                    /* translators: %s: italic accent word. */
                    printf( wp_kses_post( __( 'This Page Has <em>Wandered Off</em>', 'pawwell' ) ) );
                    ?>
                </h1>

                <p class="error-404__text">
                    <?php esc_html_e( "Even the best-trained pages sometimes slip their leash. The one you're looking for may have moved, been renamed, or never existed. Let's get you back on the trail.", 'pawwell' ); ?>
                </p>

                <div class="error-404__actions">
                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="error-404__btn error-404__btn--primary">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11 12 4l9 7"/><path d="M5 10v10h14V10"/><path d="M10 20v-6h4v6"/></svg>
                        <?php esc_html_e( 'Back to Home', 'pawwell' ); ?>
                    </a>
                    <a href="javascript:void(0);" onclick="history.length > 1 ? history.back() : window.location.href='<?php echo esc_js( home_url( '/' ) ); ?>'" class="error-404__btn error-404__btn--secondary">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5m6 6-6-6 6-6"/></svg>
                        <?php esc_html_e( 'Go Back', 'pawwell' ); ?>
                    </a>
                </div>
            </div>
        </section>
    </main>
</div>

<?php get_footer(); ?>
