<?php
/**
 * maintenance.php - Tampilan Pengumuman Perbaikan (Premium Design)
 * Dikembangkan oleh: Sikawarsito, S.Kom
 */
session_start();
include 'config/database.php';

// Ambil Nama Aplikasi dari Database
$cfg = mysqli_fetch_assoc(mysqli_query($conn, "SELECT nama_aplikasi, maintenance_mode FROM settings WHERE id = 1"));

// Jika Maintenance tidak aktif, kembalikan ke index agar tidak bisa diakses manual
if ($cfg['maintenance_mode'] == 0) {
    header("Location: index.php");
    exit;
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistem Maintenance | <?= htmlspecialchars($cfg['nama_aplikasi']) ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --glass-bg: rgba(255, 255, 255, 0.8);
        }

        body { 
            background: #f1f5f9;
            background-image: 
                radial-gradient(at 0% 0%, rgba(102, 126, 234, 0.15) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(118, 75, 162, 0.15) 0px, transparent 50%);
            height: 100dvh; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-family: 'Plus Jakarta Sans', sans-serif;
            margin: 0;
            padding: 20px;
        }

        .m-card { 
            background: var(--glass-bg); 
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            padding: 50px 40px; 
            border-radius: 40px; 
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1); 
            text-align: center; 
            max-width: 550px; 
            width: 100%;
            border: 1px solid rgba(255, 255, 255, 0.5); 
            position: relative;
            overflow: hidden;
        }

        /* Dekorasi Lingkaran Halus */
        .m-card::before {
            content: "";
            position: absolute;
            top: -50px;
            right: -50px;
            width: 100px;
            height: 100px;
            background: rgba(102, 126, 234, 0.1);
            border-radius: 50%;
        }

        .icon-wrapper {
            width: 120px;
            height: 120px;
            background: white;
            border-radius: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 30px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.05);
            animation: float 4s ease-in-out infinite;
        }

        .icon-box { 
            font-size: 60px; 
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
        }

        h2 { color: #1e293b; font-weight: 800; letter-spacing: -0.5px; }
        p { color: #64748b; line-height: 1.6; }

        .badge-status {
            background: #fef3c7;
            color: #d97706;
            padding: 8px 16px;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 700;
            display: inline-block;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .dev-footer {
            margin-top: 40px;
            padding-top: 25px;
            border-top: 1px solid rgba(0,0,0,0.05);
        }

        /* Responsive Fix */
        @media (max-width: 480px) {
            .m-card { padding: 40px 25px; border-radius: 30px; }
            .icon-wrapper { width: 100px; height: 100px; }
            .icon-box { font-size: 50px; }
            h2 { font-size: 1.5rem; }
        }
    </style>
</head>
<body>

<div class="m-card shadow-2xl">
    <div class="badge-status">
        <i class="bi bi-info-circle-fill me-1"></i> System Optimization
    </div>
    
    <div class="icon-wrapper">
        <div class="icon-box"><i class="bi bi-gear-wide-connected"></i></div>
    </div>
    
    <h2>Sedang Pemeliharaan</h2>
    <p class="mt-3">
        Mohon maaf, <b><?= htmlspecialchars($cfg['nama_aplikasi']) ?></b> saat ini sedang dalam peningkatan kecerdasan sistem untuk memberikan pengalaman belajar yang lebih baik bagi Anda.
    </p>
    
    <div class="dev-footer">
        <p class="small mb-1">Terima kasih atas kesabaran Anda.</p>
        <div class="fw-bold text-dark small" style="opacity: 0.6;">
            Developed by <span class="text-primary">Sikawarsito, S.Kom</span>
        </div>
    </div>
</div>

</body>
</html>