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

get_header(); ?>

<div class="min-h-screen pt-20 flex items-center justify-center">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <!-- 404 Illustration -->
        <div class="mb-12">
            <div class="relative">
                <!-- Animated 404 -->
                <div class="text-8xl sm:text-9xl font-bold text-red-500/20 mb-8 animate-pulse">
                    404
                </div>
                
                <!-- Floating elements -->
                <div class="absolute top-10 left-10 w-4 h-4 bg-red-500/30 rounded-full animate-float-1"></div>
                <div class="absolute top-20 right-20 w-6 h-6 bg-red-600/30 rounded-full animate-float-2"></div>
                <div class="absolute bottom-10 left-20 w-3 h-3 bg-red-400/30 rounded-full animate-float-3"></div>
                <div class="absolute bottom-20 right-10 w-5 h-5 bg-red-500/30 rounded-full animate-float-1"></div>
            </div>
        </div>

        <!-- Error Message -->
        <div class="mb-12">
            <h1 class="text-4xl sm:text-5xl font-bold text-white mb-6">
                Oops! Page Not Found
            </h1>
            <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
                The page you're looking for seems to have vanished into the digital void. Don't worry, even the best developers encounter 404 errors!
            </p>
        </div>

        <!-- Action Buttons -->
        <div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
            <a href="<?php echo esc_url(home_url('/')); ?>" class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-white bg-gradient-to-r from-red-600 to-red-700 rounded-xl hover:from-red-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 shadow-2xl hover:shadow-red-500/25">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                </svg>
                Go Home
            </a>
            <a href="<?php echo esc_url(home_url('/blog')); ?>" class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-white border-2 border-red-500/50 rounded-xl hover:border-red-500 hover:bg-red-500/10 transition-all duration-300">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
                </svg>
                Browse Blog
            </a>
        </div>

        <!-- Search Form -->
        <div class="max-w-md mx-auto">
            <h3 class="text-white font-semibold mb-4">Or search for what you need:</h3>
            <form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>" class="flex">
                <input type="search" name="s" placeholder="Search..." class="flex-1 px-4 py-3 bg-black/50 border border-red-500/30 rounded-l-lg text-white placeholder-gray-400 focus:outline-none focus:border-red-500">
                <button type="submit" class="px-6 py-3 bg-red-600 text-white rounded-r-lg hover:bg-red-700 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </button>
            </form>
        </div>

        <!-- Popular Links -->
        <div class="mt-16">
            <h3 class="text-white font-semibold mb-6">Popular Pages:</h3>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="<?php echo esc_url(home_url('/features')); ?>" class="text-red-400 hover:text-red-300 transition-colors">Features</a>
                <a href="<?php echo esc_url(home_url('/pricing')); ?>" class="text-red-400 hover:text-red-300 transition-colors">Pricing</a>
                <a href="<?php echo esc_url(home_url('/documentation')); ?>" class="text-red-400 hover:text-red-300 transition-colors">Documentation</a>
                <a href="<?php echo esc_url(home_url('/support')); ?>" class="text-red-400 hover:text-red-300 transition-colors">Support</a>
            </div>
        </div>
    </div>
</div>

<?php get_footer(); ?>