<!DOCTYPE html>
<html lang="<%= lang %>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <% const __status = (typeof statusCode !== 'undefined') ? statusCode : 404; %>
    <title><%= __status %> <%= typeof error !== 'undefined' ? '- Error' : '- Page Not Found' %> | <%= typeof botName !== 'undefined' ? botName : 'Toothless SQB Bot' %></title>
    <link rel="icon" type="image/png" href="/images/transparent_toothlessssss.png">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/output.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="min-h-screen text-white flex items-center justify-center p-6">
    <div class="text-center max-w-2xl">
        <div class="mb-8">
            <img src="/images/toothless_server.gif" alt="Toothless" class="w-24 h-24 mx-auto mb-8 opacity-70">
        </div>
        
        <div class="text-8xl lg:text-9xl font-bold mb-6 bg-gradient-to-r from-accent to-muted bg-clip-text text-transparent">
            <%= __status %>
        </div>
        
        <h1 class="text-3xl lg:text-4xl font-bold text-accent mb-4">
            <%= typeof error !== 'undefined' ? t('errors.error') : t('errors.pageNotFound') %>
        </h1>
        
        <p class="text-lg text-muted mb-8 leading-relaxed">
            <%= typeof error !== 'undefined' ? error : t('errors.oopsNotFound') %>
        </p>
        
        <a href="/" class="btn-primary px-8 py-4 rounded-xl text-base font-bold inline-flex items-center">
            <i class="fas fa-home mr-3"></i>
            <%= t('common.backToHome') %>
        </a>
    </div>
</body>
</html>
