<!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;
        }

        /* Background image (when configured) */
        .maint-bg {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            z-index: 0;
        }
        .maint-bg-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.55);
            z-index: 0;
        }

        /* Subtle background pattern (no bg image) */
        body.maint-no-bg::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>
<?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.
 *
 * If $config is already set (e.g. from preview controller), skip the file read.
 */
if (!isset($config) || !is_array($config) || empty($config)) {
    $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'] ?? true;
$logoPath        = $config['logo_path'] ?? '';
$customLogo      = $config['custom_logo'] ?? '';
$backgroundImage = $config['background_image'] ?? '';
$subtitle        = $config['subtitle'] ?? '';
$contactInfo     = $config['contact_info'] ?? '';
$adminHint       = $config['admin_hint'] ?? false;
$returnInfo      = $config['return_info'] ?? '';
$siteName        = $config['site_name'] ?? '';

// Determine which logo to use: custom_logo overrides global logo_path
$effectiveLogo = '';
if ($showLogo) {
    if (!empty($customLogo)) {
        $effectiveLogo = '/uploads/' . ltrim($customLogo, '/');
    } elseif (!empty($logoPath)) {
        $effectiveLogo = $logoPath;
    }
}

$hasBgImage = !empty($backgroundImage);
?>
<body class="<?= $hasBgImage ? '' : 'maint-no-bg' ?>">
    <?php if ($hasBgImage): ?>
    <div class="maint-bg" style="background-image: url('/uploads/<?= $esc(ltrim($backgroundImage, '/')) ?>')"></div>
    <div class="maint-bg-overlay"></div>
    <?php endif; ?>

    <div class="maint-wrapper">
        <div class="maint-card">

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

            <!-- Site Badge (hidden when logo is shown) -->
            <?php if (!empty($siteName) && empty($effectiveLogo)): ?>
            <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)): ?>
                    &copy; <?= date('Y') ?> <?= $esc($siteName) ?>
                    <?php else: ?>
                    &copy; <?= date('Y') ?> Website
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
