<?php

declare(strict_types=1);

if (!isset($maintenanceState)) {
    http_response_code(503);

    $maintenanceState = [
        'title' =>
            'Website Sedang Maintenance',
        'message' =>
            'Kami sedang melakukan pemeliharaan sistem. Silakan kembali beberapa saat lagi.',
        'end_at' => '',
    ];
}

$title = htmlspecialchars(
    (string) (
        $maintenanceState[
            'title'
        ] ??
        'Website Sedang Maintenance'
    ),
    ENT_QUOTES,
    'UTF-8'
);

$message = htmlspecialchars(
    (string) (
        $maintenanceState[
            'message'
        ] ??
        ''
    ),
    ENT_QUOTES,
    'UTF-8'
);

$endAt = htmlspecialchars(
    (string) (
        $maintenanceState[
            'end_at'
        ] ?? ''
    ),
    ENT_QUOTES,
    'UTF-8'
);

?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1"
    >

    <meta
        name="robots"
        content="noindex,nofollow"
    >

    <title><?= $title; ?></title>

    <link
        rel="stylesheet"
        href="/assets/maintenance-mode.css?v=1"
    >
</head>

<body>
    <main class="maintenance-shell">
        <section class="maintenance-card">
            <div class="maintenance-icon">
                <span></span>
                <i></i>
            </div>

            <span class="maintenance-kicker">
                SYSTEM MAINTENANCE
            </span>

            <h1><?= $title; ?></h1>

            <p><?= nl2br($message); ?></p>

            <?php if ($endAt !== ''): ?>
                <div class="maintenance-estimate">
                    <span>Perkiraan selesai</span>
                    <strong><?= $endAt; ?></strong>
                </div>
            <?php endif; ?>

            <div class="maintenance-progress">
                <i></i>
            </div>

            <small>
                HTTP 503 · Layanan akan kembali setelah
                pemeliharaan selesai.
            </small>
        </section>
    </main>
</body>
</html>
