<!DOCTYPE html>
<html lang="<?= htmlspecialchars($config['locale'] ?? 'en', ENT_QUOTES, 'UTF-8') ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, nofollow">
    <title><?php
        $esc = fn(string $v): string => htmlspecialchars($v, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
        echo $esc($config['title'] ?? $mainTitle ?? 'Maintenance');
    ?></title>
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --purple: #8b5cf6;
            --purple-dark: #6d28d9;
            --purple-deep: #1e1b4b;
            --cyan: #06b6d4;
            --cyan-light: #22d3ee;
            --bg: #0f172a;
            --surface: #1e293b;
            --surface-light: #334155;
            --text: #e2e8f0;
            --text-muted: #94a3b8;
            --border: #334155;
            --success: #10b981;
            --warning: #f59e0b;
        }

        html { height: 100%; }

        body {
            min-height: 100%;
            margin: 0;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            color: var(--text);
            background: var(--bg);
            display: flex;
            flex-direction: column;
            -webkit-font-smoothing: antialiased;
        }

        /* Gradient background */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background:
                radial-gradient(ellipse at 20% 0%, rgba(139,92,246,.15) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 100%, rgba(6,182,212,.1) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }

        /* Header */
        .maint-header {
            background: linear-gradient(135deg, var(--purple-deep) 0%, rgba(109,40,217,.4) 50%, rgba(6,182,212,.2) 100%);
            padding: 3rem 1.5rem 2.5rem;
            text-align: center;
            position: relative;
            z-index: 1;
            border-bottom: 1px solid rgba(139,92,246,.3);
        }
        .maint-header::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--cyan), var(--purple), transparent);
        }

        .maint-header__logo {
            max-width: 160px;
            height: auto;
            margin: 0 auto 1.5rem;
            filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(139,92,246,.4));
        }

        .maint-header__badge {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            font-size: .75rem;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--cyan-light);
            margin-bottom: 1rem;
        }
        .maint-dot {
            width: 8px; height: 8px;
            background: var(--cyan);
            border-radius: 50%;
            box-shadow: 0 0 8px rgba(6,182,212,.5);
            animation: pulse 1.8s ease-in-out infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(6,182,212,.5); }
            50% { opacity: .35; box-shadow: 0 0 2px rgba(6,182,212,.2); }
        }

        .maint-header__title {
            font-size: 2.1rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.2;
            margin-bottom: .4rem;
            text-shadow: 0 0 30px rgba(139,92,246,.3);
        }
        .maint-header__subtitle {
            font-size: 1.1rem;
            color: rgba(255,255,255,.7);
        }

        /* Content */
        .maint-wrapper {
            flex: 1;
            max-width: 560px;
            width: 100%;
            margin: -1.5rem auto 0;
            padding: 0 1.5rem 2rem;
            position: relative;
            z-index: 1;
        }
        .maint-card {
            background: var(--surface);
            border-radius: 12px;
            box-shadow: 0 4px 30px rgba(0,0,0,.3), 0 0 1px rgba(139,92,246,.3);
            padding: 2.5rem 2rem;
            text-align: center;
            border: 1px solid var(--border);
        }
        .maint-message {
            font-size: 1rem;
            line-height: 1.7;
            color: var(--text-muted);
            margin-bottom: 2rem;
            white-space: pre-wrap;
            word-break: break-word;
        }

        .maint-section {
            margin-top: 1.25rem;
            padding-top: 1.25rem;
            border-top: 1px solid var(--border);
            text-align: left;
        }
        .maint-section__label {
            font-size: .75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: var(--text-muted);
            margin-bottom: .5rem;
        }
        .maint-section__content {
            font-size: .95rem;
            line-height: 1.5;
            color: var(--text);
        }

        .maint-info--contact {
            background: rgba(139,92,246,.1);
            border-left: 3px solid var(--purple);
            padding: .75rem 1rem;
            border-radius: 6px;
        }
        .maint-info--return {
            background: rgba(16,185,129,.1);
            border-left: 3px solid var(--success);
            padding: .75rem 1rem;
            border-radius: 6px;
        }
        .maint-info--admin {
            background: rgba(245,158,11,.1);
            border-left: 3px solid var(--warning);
            padding: .75rem 1rem;
            border-radius: 6px;
            color: #fbbf24;
        }
        .maint-info--admin code {
            background: rgba(255,255,255,.08);
            padding: .1em .35em;
            border-radius: 3px;
        }

        .maint-status {
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            font-size: .85rem;
            color: var(--text-muted);
        }

        .maint-footer {
            text-align: center;
            padding: 1.5rem;
            font-size: .8rem;
            color: var(--text-muted);
            position: relative;
            z-index: 1;
        }

        @media (max-width: 640px) {
            .maint-header { padding: 2rem 1rem 2rem; }
            .maint-header__title { font-size: 1.6rem; }
            .maint-card { padding: 1.75rem 1.25rem; }
        }
    </style>
</head>
<body>
    <?php
    $showLogo        = $config['show_logo'] ?? true;
    $logoPath        = $config['logo_path'] ?? '';
    $customLogo      = $config['custom_logo'] ?? '';
    $backgroundImage = $config['background_image'] ?? '';
    $title           = $config['title'] ?? $mainTitle ?? 'Maintenance';
    $subtitle        = $config['subtitle'] ?? '';
    $message         = $config['message'] ?? $mainMessage ?? '';
    $contactInfo     = $config['contact_info'] ?? '';
    $returnInfo      = $config['return_info'] ?? '';
    $adminHint       = $config['admin_hint'] ?? false;
    $siteName        = $config['site_name'] ?? $mainSite ?? '';

    $effectiveLogo = '';
    if ($showLogo) {
        if (!empty($customLogo)) {
            $effectiveLogo = '/uploads/' . ltrim($customLogo, '/');
        } elseif (!empty($logoPath)) {
            $effectiveLogo = $logoPath;
        }
    }
    ?>

    <?php if (!empty($backgroundImage)): ?>
    <div style="position:fixed;inset:0;z-index:-1;background:url('/uploads/<?= $esc(ltrim($backgroundImage, '/')) ?>') center/cover no-repeat;"></div>
    <div style="position:fixed;inset:0;z-index:0;background:rgba(15,23,42,.8);"></div>
    <?php endif; ?>

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

        <?php if (!empty($siteName) && empty($effectiveLogo)): ?>
        <p class="maint-header__badge">
            <span class="maint-dot"></span>
            <?= $esc($siteName) ?>
        </p>
        <?php endif; ?>

        <h1 class="maint-header__title"><?= $esc($title) ?></h1>

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

    <div class="maint-wrapper">
        <div class="maint-card">
            <?php if (!empty($message)): ?>
            <div class="maint-message"><?= nl2br($esc($message)) ?></div>
            <?php endif; ?>

            <?php if (!empty($contactInfo)): ?>
            <div class="maint-section">
                <div class="maint-section__label">Contact</div>
                <div class="maint-info--contact maint-section__content"><?= nl2br($esc($contactInfo)) ?></div>
            </div>
            <?php endif; ?>

            <?php if (!empty($returnInfo)): ?>
            <div class="maint-section">
                <div class="maint-section__label">Expected Return</div>
                <div class="maint-info--return maint-section__content"><?= $esc($returnInfo) ?></div>
            </div>
            <?php endif; ?>

            <?php if ($adminHint): ?>
            <div class="maint-section">
                <div class="maint-info--admin maint-section__content">
                    <strong>Administrators:</strong> You can still log in at <code>/admin</code>.
                </div>
            </div>
            <?php endif; ?>

            <div class="maint-status">
                <span class="maint-dot"></span>
                We'll be back shortly
            </div>
        </div>
    </div>

    <div class="maint-footer">
        &copy; <?= date('Y') ?> <?= !empty($siteName) ? $esc($siteName) : 'Website' ?>
    </div>
</body>
</html>
