<?php
$pageTitle = '404 - ' . __('page_not_found');
include 'header.php';
?>

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-6 text-center">
            <div class="error-404">
                <div class="error-number mb-4">
                    <span class="display-1 fw-bold text-primary">4</span>
                    <span class="display-1 fw-bold text-secondary">0</span>
                    <span class="display-1 fw-bold text-primary">4</span>
                </div>

                <h2 class="mb-4"><?= __('page_not_found') ?? 'Page Not Found' ?></h2>

                <p class="lead text-muted mb-4">
                    <?= __('page_not_found_description') ?? 'Sorry, the page you are looking for could not be found.' ?>
                </p>

                <div class="d-flex gap-3 justify-content-center flex-wrap">
                    <a href="/" class="btn btn-primary">
                        <i class="fas fa-home me-2"></i><?= __('back_to_home') ?? 'Back to Home' ?>
                    </a>
                    <a href="javascript:history.back()" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i><?= __('go_back') ?? 'Go Back' ?>
                    </a>
                </div>

                <div class="mt-5">
                    <h5><?= __('popular_pages') ?? 'Popular Pages' ?></h5>
                    <div class="list-group list-group-flush">
                        <a href="/?route=external" class="list-group-item list-group-item-action">
                            <i class="fas fa-globe me-2"></i><?= __('external_blog') ?>
                        </a>
                        <a href="/?route=internal" class="list-group-item list-group-item-action">
                            <i class="fas fa-lock me-2"></i><?= __('internal_blog') ?>
                        </a>
                        <a href="/?route=documentation" class="list-group-item list-group-item-action">
                            <i class="fas fa-book me-2"></i><?= __('documentation') ?>
                        </a>
                        <a href="/admin/" class="list-group-item list-group-item-action">
                            <i class="fas fa-user-shield me-2"></i><?= __('admin_panel') ?? 'Admin Panel' ?>
                        </a>
                    </div>
                </div>

                <div class="mt-4">
                    <p class="text-muted small">
                        <?= __('need_help') ?? 'Need help?' ?>
                        <button class="btn btn-link btn-sm p-0" onclick="toggleChat()">
                            <?= __('chat_with_ai') ?? 'Chat with our AI assistant' ?>
                        </button>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.error-404 {
    animation: fadeIn 1s ease-in;
}

.error-number span {
    display: inline-block;
    animation: bounce 2s infinite;
}

.error-number span:nth-child(2) {
    animation-delay: 0.2s;
}

.error-number span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}
</style>

<?php include 'footer.php'; ?>