<?php
http_response_code(404);
$page_title = 'Lehte ei leitud';
$page_description = 'Otsitavat lehte ei leitud.';
$body_class = 'error-page';

include '../includes/header.php';
?>

<main class="error-main">
    <div class="container">
        <div class="error-content">
            <div class="error-icon">
                <i class="icon-search"></i>
            </div>
            <h1 class="error-title">404</h1>
            <h2 class="error-subtitle">Lehte ei leitud</h2>
            <p class="error-description">
                Kahjuks ei õnnestunud otsitavat lehte leida. Võimalik, et see on kustutatud 
                või aadress on vale.
            </p>
            <div class="error-actions">
                <a href="/" class="btn btn-primary">
                    <i class="icon-home"></i>
                    <span>Avalehele</span>
                </a>
                <button onclick="history.back()" class="btn btn-secondary">
                    <span>Tagasi</span>
                </button>
            </div>
        </div>
    </div>
</main>

<style>
.error-main {
    padding: var(--spacing-16) 0;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.error-content {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.error-icon {
    font-size: 4rem;
    color: var(--warning-color);
    margin-bottom: var(--spacing-6);
}

.error-title {
    font-size: 6rem;
    font-weight: 700;
    color: var(--gray-300);
    margin-bottom: var(--spacing-4);
    line-height: 1;
}

.error-subtitle {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin-bottom: var(--spacing-4);
}

.error-description {
    color: var(--gray-600);
    margin-bottom: var(--spacing-8);
    line-height: 1.6;
}

.error-actions {
    display: flex;
    gap: var(--spacing-4);
    justify-content: center;
    flex-wrap: wrap;
}
</style>

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