<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistem Sedang Dalam Pemeliharaan | SMKN 2 Banjarbaru</title>
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Outfit', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    <!-- FontAwesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        .glowing-blob {
            filter: blur(80px);
            opacity: 0.15;
            animation: pulse-blob 8s infinite alternate;
        }
        @keyframes pulse-blob {
            0% { transform: scale(1) translate(0px, 0px); }
            100% { transform: scale(1.2) translate(30px, -50px); }
        }
    </style>
</head>
<body class="bg-slate-950 text-slate-100 font-sans min-h-screen flex items-center justify-center p-6 relative overflow-hidden selection:bg-rose-500 selection:text-white">

    <!-- Ambient Glowing Blobs -->
    <div class="absolute w-[500px] h-[500px] rounded-full bg-rose-500 top-[-10%] left-[-10%] glowing-blob pointer-events-none"></div>
    <div class="absolute w-[400px] h-[400px] rounded-full bg-emerald-500 bottom-[-10%] right-[-10%] glowing-blob pointer-events-none" style="animation-delay: 4s;"></div>

    <!-- Main Container -->
    <div class="max-w-2xl w-full text-center relative z-10">
        <!-- Logo -->
        <div class="flex justify-center items-center gap-3 mb-8">
            <img src="/skendabjb/assets/logo.png" alt="Logo SMKN 2 Banjarbaru" class="h-16 w-auto object-contain drop-shadow-[0_0_15px_rgba(244,63,94,0.15)]" onerror="this.src='https://via.placeholder.com/150/1e293b/ffffff?text=SMKN2BJB'">
            <div class="text-left border-l border-white/20 pl-3">
                <span class="text-white font-extrabold text-xl tracking-wider block leading-tight">SMK NEGERI 2</span>
                <span class="text-rose-500 text-xs tracking-widest uppercase font-bold">Banjarbaru</span>
            </div>
        </div>

        <!-- Glassmorphic Card -->
        <div class="bg-white/[0.03] backdrop-blur-xl border border-white/10 rounded-3xl p-8 md:p-12 shadow-2xl space-y-8 relative overflow-hidden">
            <!-- Decorative Border Glow -->
            <div class="absolute inset-0 bg-gradient-to-tr from-rose-500/10 via-transparent to-emerald-500/10 pointer-events-none"></div>
            
            <!-- Animated Icon Area -->
            <div class="relative flex justify-center">
                <div class="w-24 h-24 rounded-full bg-rose-500/10 flex items-center justify-center text-rose-500 text-4xl border border-rose-500/20 shadow-lg shadow-rose-950/20 relative animate-pulse">
                    <i class="fa-solid fa-screwdriver-wrench animate-spin" style="animation-duration: 8s;"></i>
                </div>
            </div>

            <!-- Content -->
            <div class="space-y-4">
                <span class="inline-block px-4 py-1.5 rounded-full bg-rose-500/10 text-rose-400 text-xs font-bold uppercase tracking-widest">
                    Sistem Pemeliharaan Aktif
                </span>
                <h1 class="text-3xl md:text-4xl font-extrabold text-white leading-tight">
                    Situs Sedang Diperbarui
                </h1>
                <p class="text-slate-400 text-sm md:text-base max-w-lg mx-auto leading-relaxed">
                    Kami sedang melakukan optimalisasi sistem secara berkala guna menghadirkan kualitas layanan informasi sekolah yang lebih stabil dan efisien. Mohon tunggu sejenak, kami akan kembali segera.
                </p>
            </div>

            <!-- School Contacts & Location -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-6 border-t border-white/5 text-left text-xs text-slate-400">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-lg bg-white/5 flex items-center justify-center text-rose-400">
                        <i class="fa-solid fa-phone"></i>
                    </div>
                    <div>
                        <span class="block font-semibold text-white">Hubungi Kami</span>
                        <span>0511-4773452</span>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-lg bg-white/5 flex items-center justify-center text-rose-400">
                        <i class="fa-solid fa-envelope"></i>
                    </div>
                    <div>
                        <span class="block font-semibold text-white">Email Resmi</span>
                        <span>humas@smkn2banjarbaru.sch.id</span>
                    </div>
                </div>
            </div>

        </div>

        <!-- Copyright / Footer -->
        <p class="text-slate-600 text-xs mt-8">
            &copy; 2026 SMK Negeri 2 Banjarbaru. Seluruh Hak Cipta Dilindungi.
        </p>
    </div>

    <!-- Hidden hover zone on the right edge of the screen -->
    <div class="fixed right-0 top-0 bottom-0 w-8 z-50 flex items-center justify-center group pointer-events-auto">
        <!-- Panel that slides in and fades in on hover -->
        <div class="absolute right-0 opacity-0 group-hover:opacity-100 transition-all duration-500 transform translate-x-4 group-hover:translate-x-0 bg-slate-900/90 backdrop-blur-md border-l border-y border-white/10 p-4 rounded-l-3xl shadow-2xl flex flex-col items-center gap-2">
            <a href="/skendabjb/login" class="px-5 py-3 rounded-xl bg-rose-600 hover:bg-rose-500 text-white font-bold text-xs transition-all flex items-center gap-2 whitespace-nowrap shadow-lg shadow-rose-950/20">
                <i class="fa-solid fa-user-lock"></i>
                <span>Portal</span>
            </a>
        </div>
    </div>

</body>
</html>
