---
import PageLayout from "../layouts/PageLayout.astro";
import {t} from "astro-i18n";
---

<PageLayout title={t("404.title")}>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
        <!-- 404 Text - heller für besseren Kontrast -->
        <text x="400" y="150" font-family="Arial Black" font-size="120" fill="#ffffff" text-anchor="middle">404</text>

        <!-- Trauriger Roboter - hellere Farben für besseren Kontrast -->
        <!-- Körper -->
        <rect x="350" y="200" width="100" height="120" rx="10" fill="#888888"/>

        <!-- Kopf -->
        <rect x="365" y="160" width="70" height="60" rx="5" fill="#888888"/>

        <!-- Augen -->
        <circle cx="385" cy="185" r="8" fill="#ff6b6b"/>
        <circle cx="415" cy="185" r="8" fill="#ff6b6b"/>

        <!-- Antenne -->
        <line x1="400" y1="160" x2="400" y2="140" stroke="#888888" stroke-width="4"/>
        <circle cx="400" cy="135" r="5" fill="#888888"/>

        <!-- Arme -->
        <rect x="320" y="220" width="30" height="10" rx="5" fill="#888888"/>
        <rect x="450" y="220" width="30" height="10" rx="5" fill="#888888"/>

        <!-- Text unter dem Roboter - heller für besseren Kontrast -->
        <text x="400" y="360" font-family="Arial" font-size="24" fill="#ffffff" text-anchor="middle">Seite nicht gefunden</text>

        <!-- Dekorative Elemente - heller für besseren Kontrast -->
        <circle cx="250" cy="100" r="5" fill="#bbbbbb"/>
        <circle cx="550" cy="150" r="5" fill="#bbbbbb"/>
        <circle cx="200" cy="300" r="5" fill="#bbbbbb"/>
        <circle cx="600" cy="250" r="5" fill="#bbbbbb"/>
    </svg>
</PageLayout>