<?php
/**
 * The template for displaying 404 pages (not found)
 *
 * @package LaraCopilot_V2
 */

get_header();
?>

<main id="primary" class="site-main">
    <section class="error-404-premium" style="padding: clamp(80px, 12vw, 160px) 0; background: linear-gradient(180deg, #fff6f5 0%, #fff 60%); text-align: center; position: relative; overflow: hidden; min-height: 85vh; display: flex; align-items: center; justify-content: center;">

        <!-- Background Decorations -->
        <div style="position: absolute; top: 10%; left: 5%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(220,38,38,0.05) 0%, transparent 70%); z-index: 0;"></div>
        <div style="position: absolute; bottom: 10%; right: 5%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(220,38,38,0.03) 0%, transparent 70%); z-index: 0;"></div>

        <div class="container" style="position: relative; z-index: 1; max-width: 800px; margin: 0 auto; padding: 0 24px; width: 100%;">

            <!-- Error Visual Section -->
            <div class="error-visual" style="margin-bottom: 48px;">
                <!-- Large 404 Text - No longer overlapping to prevent clipping/readability issues -->
                <div style="font-family: 'JetBrains Mono', monospace; font-size: clamp(100px, 18vw, 180px); font-weight: 800; color: #dc2626; margin: 0 0 12px; letter-spacing: -0.05em; line-height: 1;">
                    404
                </div>

                <h1 style="font-family: 'Instrument Sans', sans-serif; font-size: clamp(32px, 6vw, 56px); font-weight: 700; color: #111827; letter-spacing: -0.04em; margin: 0; line-height: 1.2;">Oops! Page Not Found</h1>
            </div>

            <div class="error-content" style="max-width: 560px; margin: 0 auto;">
                <p style="font-family: 'Inter', sans-serif; font-size: clamp(16px, 2vw, 18px); line-height: 1.6; color: #6b7280; margin-bottom: 48px;">
                    The page you're looking for seems to have vanished into the digital void. Don't worry, even the best developers encounter a 404 once in a while.
                </p>

                <div class="error-actions" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;">
                    <a href="<?php echo esc_url(home_url('/')); ?>" class="btn btn-red" style="padding: 16px 36px; border-radius: 14px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; background: #dc2626; color: #fff; box-shadow: 0 8px 20px rgba(220, 38, 38, 0.25); font-size: 16px; transition: transform 0.2s;">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                            <path d="m3 9 9-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>
                        Go Back Home
                    </a>
                    <a href="<?php echo esc_url(home_url('/marketplace')); ?>" class="btn btn-outline" style="padding: 16px 36px; border-radius: 14px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; border: 2px solid #f3f4f6; color: #111827; background: #fff; transition: all 0.2s; font-size: 16px;">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M3 9h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z"></path>
                            <path d="m3 9 2.45-4.9A2 2 0 0 1 7.24 3h9.52a2 2 0 0 1 1.8 1.1L21 9"></path>
                            <path d="M12 3v6"></path>
                        </svg>
                        Explore Marketplace
                    </a>
                </div>
            </div>
        </div>
    </section>
</main>

<style>
    @media (max-width: 480px) {
        .error-actions a {
            width: 100% !important;
            justify-content: center !important;
        }
    }
</style>

<?php
get_footer();