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

get_header(); ?>

<style>
.error-404-page {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
}

.error-404-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

.error-404-number {
    font-size: 150px;
    font-weight: 900;
    color: #008da6;
    line-height: 1;
    margin-bottom: 20px;
    text-shadow: 3px 3px 0px rgba(0, 168, 232, 0.2);
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.error-404-title {
    font-size: 42px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.error-404-description {
    font-size: 18px;
    color: #666;
    margin-bottom: 40px;
    line-height: 1.6;
}

.error-404-search {
    max-width: 500px;
    margin: 0 auto 40px;
}

.error-404-search form {
    display: flex;
    gap: 10px;
}

.error-404-search input[type="search"] {
    flex: 1;
    padding: 15px 20px;
    border: 2px solid #ddd;
    border-radius: 50px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s;
}

.error-404-search input[type="search"]:focus {
    border-color: #008da6;
}

.error-404-search button {
    padding: 15px 35px;
    background: #008da6;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.error-404-search button:hover {
    background: #008da6;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 168, 232, 0.3);
}

.error-404-links {
    margin-top: 40px;
}

.error-404-links h3 {
    font-size: 24px;
    color: #333;
    margin-bottom: 25px;
    font-weight: 600;
}

.quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.quick-links li a {
    display: inline-block;
    padding: 12px 30px;
    background: #fff;
    color: #333;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 500;
    transition: all 0.3s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.quick-links li a:hover {
    background: #008da6;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0, 168, 232, 0.3);
}

.quick-links li a i {
    margin-right: 8px;
}

.error-404-icon {
    font-size: 100px;
    color: #008da6;
    margin-bottom: 20px;
    animation: shake 3s infinite;
}

@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

@media (max-width: 768px) {
    .error-404-number {
        font-size: 100px;
    }
    
    .error-404-title {
        font-size: 32px;
    }
    
    .error-404-description {
        font-size: 16px;
    }
    
    .error-404-search form {
        flex-direction: column;
    }
    
    .error-404-search button {
        width: 100%;
    }
    
    .quick-links {
        flex-direction: column;
        align-items: center;
    }
    
    .quick-links li a {
        display: block;
        width: 100%;
        max-width: 300px;
        text-align: center;
    }
}
</style>

<div class="error-404-page">
    <div class="error-404-content">
        
        <!-- Large 404 Number -->
        <div class="error-404-number">404</div>
        
        <!-- Icon -->
        <div class="error-404-icon">
            <i class="fas fa-exclamation-triangle"></i>
        </div>
        
        <!-- Title -->
        <h1 class="error-404-title">Oops! Page Not Found</h1>
        
        <!-- Description -->
        <p class="error-404-description">
            We're sorry, but the page you're looking for seems to have wandered off. 
            It might have been moved or deleted, or perhaps you mistyped the URL.
        </p>
        
        <!-- Search Form -->
        <div class="error-404-search">
            <form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>">
                <input type="search" 
                       name="s" 
                       placeholder="Search for what you're looking for..." 
                       value="<?php echo get_search_query(); ?>" 
                       required>
                <button type="submit">
                    <i class="fas fa-search"></i> Search
                </button>
            </form>
        </div>
        
        <!-- Quick Links -->
        <div class="error-404-links">
            <h3>Try these helpful links instead:</h3>
            <ul class="quick-links">
                <li>
                    <a href="<?php echo home_url('/'); ?>">
                        <i class="fas fa-home"></i> Home
                    </a>
                </li>
                <li>
                    <a href="<?php echo home_url('/about'); ?>">
                        <i class="fas fa-info-circle"></i> About Us
                    </a>
                </li>
                <li>
                    <a href="<?php echo home_url('/features'); ?>">
                        <i class="fas fa-star"></i> Features
                    </a>
                </li>
                <li>
                    <a href="<?php echo home_url('/contacts'); ?>">
                        <i class="fas fa-envelope"></i> Contact Us
                    </a>
                </li>
                <li>
                    <a href="<?php echo home_url('/admissions'); ?>">
                        <i class="fas fa-graduation-cap"></i> Admissions
                    </a>
                </li>
            </ul>
        </div>
        
    </div>
</div>

<?php get_footer(); ?>