---
import Layout from '@layouts/Layout.astro';
import { authService } from '@/lib/authService';

// Получаем глобальные настройки сайта из PocketBase
const pb = authService.createClientFromRequest(Astro.request);
const siteSettings = await pb.collection('site_settings').getFirstListItem('');
const siteUrl = siteSettings.site_url;

// Используем статические данные для страницы 404, так как такой записи может не быть в базе
const title = `Seite nicht gefunden | ${siteSettings.site_name}`;
const description = 'Die von Ihnen gesuchte Seite wurde nicht gefunden.';
const canonicalLink = `${siteUrl}/404`;
---

<Layout {title} {description} {canonicalLink}>
    <h1 class="sr-only">Seite nicht gefunden - 404 Fehler</h1>

    <!-- 404 Content -->
    <div class="min-h-screen overflow-hidden bg-gray-900 font-sans text-gray-200 flex flex-col items-center justify-center relative">
        <!-- Animated Background -->
        <div class="absolute inset-0 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 animate-gradient"></div>

        <!-- Numbers Container -->
        <div class="mb-8 flex items-center justify-center relative z-10">
            <div class="number-animation mx-2 text-8xl md:text-10rem font-bold text-gray-50 drop-shadow-glow opacity-0">4</div>
            <div class="number-animation mx-2 text-8xl md:text-10rem font-bold text-gray-50 drop-shadow-glow opacity-0">0</div>
            <div class="number-animation mx-2 text-8xl md:text-10rem font-bold text-gray-50 drop-shadow-glow opacity-0">4</div>
        </div>

        <!-- Content -->
        <div class="text-center relative z-10 opacity-0 content-animation">
            <h2 class="mb-2 text-2xl md:text-4xl font-semibold text-gray-300">
                Seite nicht gefunden
            </h2>
            <p class="mb-8 max-w-md text-base md:text-lg text-gray-400 px-4">
                Es sieht so aus, als wären Sie auf einer Seite gelandet, die nicht
                existiert. Lassen Sie uns Sie wieder auf den richtigen Weg bringen.
            </p>

            <a href="/" class="home-button inline-block cursor-pointer rounded-lg bg-blue-600 px-6 py-3 font-medium text-white shadow-lg shadow-blue-600/40 transition-all duration-200 hover:bg-blue-700">
                Zur Startseite
            </a>
        </div>
    </div>
</Layout>

<style>
    @keyframes gradientShift {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    @keyframes numberEntry {
        0% {
            opacity: 0;
            transform: translateY(-50px) scale(0.8);
        }
        70% {
            transform: translateY(5px) scale(1.05);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

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

    .animate-gradient {
        background-size: 400% 400%;
        animation: gradientShift 10s ease infinite;
    }

    .drop-shadow-glow {
        filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));
    }

    .number-animation {
        animation: numberEntry 0.6s ease-out forwards;
    }

    .number-animation:nth-child(1) {
        animation-delay: 0.3s;
    }

    .number-animation:nth-child(2) {
        animation-delay: 0.6s;
    }

    .number-animation:nth-child(3) {
        animation-delay: 0.9s;
    }

    .content-animation {
        animation: fadeInUp 0.5s ease 1s forwards;
    }

    .home-button {
        transform: scale(1);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .home-button:hover {
        transform: scale(1.05);
        box-shadow: 0 0 25px rgba(59, 130, 246, 0.5);
    }

    .home-button:active {
        transform: scale(0.95);
    }

    .text-10rem {
        font-size: 10rem;
    }

    @media (max-width: 768px) {
        .text-10rem {
            font-size: 8rem;
        }
    }
</style>