<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, nofollow">
    <title><?= $mainTitle ?></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --color-bg:         #f4f6f9;
            --color-surface:    #ffffff;
            --color-text:       #1a202c;
            --color-text-muted: #6b7280;
            --color-accent:     #15779b;
            --color-accent-bg:  #eaf4f8;
            --color-border:     #e2e8f0;
            --color-danger:     #f59e0b;
            --radius:           12px;
            --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.06);
            --shadow-md:        0 4px 24px rgba(0, 0, 0, 0.09);
            --shadow-lg:        0 8px 40px rgba(0, 0, 0, 0.12);
        }

        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0;
            background: linear-gradient(135deg, var(--color-bg) 0%, #f0f2f5 100%);
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
            color: var(--color-text);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: 1.6;
        }

        /* Subtle background pattern */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image:
                radial-gradient(circle at 1px 1px, var(--color-border) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
            z-index: -1;
            opacity: 0.4;
        }

        .maint-wrapper {
            width: 100%;
            max-width: 540px;
            padding: 1.5rem;
            margin: auto;
            position: relative;
            z-index: 1;
        }

        .maint-card {
            background: var(--color-surface);
            border-radius: var(--radius);
            box-shadow: var(--shadow-md);
            padding: 3.5rem 2.5rem 2.5rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        /* Subtle accent line */
        .maint-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--color-accent), #0891b2);
        }

        .maint-logo {
            display: block;
            max-width: 160px;
            height: auto;
            margin: 0 auto 1.5rem;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
        }

        .maint-site-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.8125rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--color-accent);
            margin-bottom: 1rem;
        }

        .maint-dot {
            width: 8px;
            height: 8px;
            background: var(--color-danger);
            border-radius: 50%;
            display: inline-block;
            animation: pulse 1.8s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.35;
            }
        }

        .maint-title {
            font-size: 1.875rem;
            font-weight: 700;
            line-height: 1.2;
            margin: 0 0 0.5rem;
            color: var(--color-text);
            word-break: break-word;
        }

        .maint-subtitle {
            font-size: 1.125rem;
            font-weight: 500;
            color: var(--color-accent);
            margin: 0 0 1.5rem;
            line-height: 1.4;
        }

        .maint-message {
            font-size: 1rem;
            line-height: 1.65;
            color: var(--color-text-muted);
            margin: 0 0 1.75rem;
            white-space: pre-wrap;
            word-break: break-word;
        }

        /* Section divider */
        .maint-section {
            margin-top: 1.75rem;
            padding-top: 1.75rem;
            border-top: 1px solid var(--color-border);
        }

        .maint-section:first-child {
            margin-top: 0;
            padding-top: 0;
            border-top: none;
        }

        .maint-section-title {
            font-size: 0.875rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--color-text-muted);
            margin-bottom: 0.75rem;
            display: block;
        }

        .maint-section-content {
            font-size: 0.95rem;
            color: var(--color-text);
            line-height: 1.6;
        }

        .maint-contact-info {
            background: var(--color-accent-bg);
            border-left: 3px solid var(--color-accent);
            padding: 1rem;
            border-radius: 6px;
            margin: 0.75rem 0 0;
            font-size: 0.95rem;
            color: var(--color-text);
        }

        .maint-admin-hint {
            background: #fef3c7;
            border-left: 3px solid #f59e0b;
            padding: 1rem;
            border-radius: 6px;
            margin: 0.75rem 0 0;
            font-size: 0.95rem;
            color: #92400e;
            line-height: 1.5;
        }

        .maint-return-info {
            background: #f0fdf4;
            border-left: 3px solid #10b981;
            padding: 1rem;
            border-radius: 6px;
            margin: 0.75rem 0 0;
            font-size: 0.95rem;
            color: #065f46;
            line-height: 1.5;
        }

        .maint-status-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.875rem;
            color: var(--color-text-muted);
            margin-top: 1.75rem;
            padding-top: 1.75rem;
            border-top: 1px solid var(--color-border);
        }

        .maint-footer {
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--color-border);
            font-size: 0.8125rem;
            color: var(--color-text-muted);
            text-align: center;
        }

        .maint-footer-text {
            line-height: 1.6;
        }

        /* Responsive */
        @media (max-width: 640px) {
            body {
                padding: 1rem 0;
            }

            .maint-wrapper {
                padding: 1rem;
            }

            .maint-card {
                padding: 2.5rem 1.5rem 1.75rem;
            }

            .maint-title {
                font-size: 1.5rem;
            }

            .maint-subtitle {
                font-size: 1rem;
            }

            .maint-message {
                font-size: 0.95rem;
            }
        }

        @media (max-width: 480px) {
            .maint-card {
                padding: 2rem 1.25rem 1.5rem;
            }

            .maint-title {
                font-size: 1.375rem;
            }

            .maint-subtitle {
                font-size: 0.95rem;
                margin-bottom: 1.25rem;
            }

            .maint-message {
                font-size: 0.9rem;
                margin-bottom: 1.5rem;
            }

            .maint-section {
                margin-top: 1.25rem;
                padding-top: 1.25rem;
            }
        }
    </style>
</head>
<body>
    <div class="maint-wrapper">
        <div class="maint-card">
            <?php
            /**
             * HTML escaping helper - standalone for safety
             */
            $esc = fn(string $v): string => htmlspecialchars($v, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');

            /**
             * Safely read maintenance configuration from JSON file
             * The maintenance page is a safety page that must work even if the CMS is broken,
             * so it reads the config directly from the file system without using the framework.
             */
            $configFile = dirname(__DIR__) . '/../storage/.maintenance_mode';
            $config = [];
            if (is_file($configFile)) {
                $raw = @file_get_contents($configFile);
                if ($raw !== false) {
                    $data = json_decode($raw, true);
                    if (is_array($data)) {
                        $config = $data;
                    }
                }
            }

            // Extract configuration with defaults
            $showLogo      = $config['show_logo'] ?? false;
            $logoPath      = $config['logo_path'] ?? '';
            $subtitle      = $config['subtitle'] ?? '';
            $contactInfo   = $config['contact_info'] ?? '';
            $adminHint     = $config['admin_hint'] ?? true;
            $returnInfo    = $config['return_info'] ?? '';
            $siteName      = $config['site_name'] ?? '';
            ?>

            <!-- Logo -->
            <?php if ($showLogo && !empty($logoPath)): ?>
            <img src="<?= $esc($logoPath) ?>" alt="Logo" class="maint-logo">
            <?php endif; ?>

            <!-- Site Badge -->
            <?php if (!empty($siteName)): ?>
            <p class="maint-site-badge">
                <span class="maint-dot"></span>
                <?= $esc($siteName) ?>
            </p>
            <?php endif; ?>

            <!-- Main Title -->
            <h1 class="maint-title"><?= $esc($mainTitle) ?></h1>

            <!-- Subtitle -->
            <?php if (!empty($subtitle)): ?>
            <p class="maint-subtitle"><?= $esc($subtitle) ?></p>
            <?php endif; ?>

            <!-- Main Message -->
            <div class="maint-message"><?= nl2br($esc($mainMessage)) ?></div>

            <!-- Contact Info Section -->
            <?php if (!empty($contactInfo)): ?>
            <div class="maint-section">
                <span class="maint-section-title">Kontakt</span>
                <div class="maint-contact-info">
                    <?= nl2br($esc($contactInfo)) ?>
                </div>
            </div>
            <?php endif; ?>

            <!-- Return Info Section -->
            <?php if (!empty($returnInfo)): ?>
            <div class="maint-section">
                <span class="maint-section-title">Rückkehr</span>
                <div class="maint-return-info">
                    <?= $esc($returnInfo) ?>
                </div>
            </div>
            <?php endif; ?>

            <!-- Admin Hint Section -->
            <?php if ($adminHint): ?>
            <div class="maint-section">
                <div class="maint-admin-hint">
                    <strong>Administratoren:</strong> Sie können sich weiterhin unter <code style="background:#fef3c7;padding:0.125rem 0.375rem;border-radius:3px;">/admin</code> einloggen.
                </div>
            </div>
            <?php endif; ?>

            <!-- Status Badge -->
            <div class="maint-status-badge">
                <span class="maint-dot"></span>
                Wir sind gleich zurück
            </div>

            <!-- Footer -->
            <div class="maint-footer">
                <div class="maint-footer-text">
                    <?php if (!empty($siteName)): ?>
                    © <?= date('Y') ?> <?= $esc($siteName) ?>
                    <?php else: ?>
                    © <?= date('Y') ?> Website
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
