<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $title ?? 'Pengumuman Kelulusan' ?></title>
    <?php helper('logo'); ?>
    <link rel="icon" type="image/png" href="<?= getLogo('sekolah') ?>">

    <!-- PWA Meta -->
    <meta name="theme-color" content="#0d6efd">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="SIMAK PPDS">
    <link rel="apple-touch-icon" href="/assets/img/icons/icon-192x192.png">
    <link rel="manifest" href="/manifest.json">
    <link rel="stylesheet" href="/css/pwa.css">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet">
    <!-- Bootstrap 5 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

    <style>
        * { box-sizing: border-box; }

        body {
            margin: 0;
            min-height: 100vh;
            font-family: 'Inter', sans-serif;
            background: #0b1120;
            color: #e8ecf1;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow-x: hidden;
        }

        /* ── Animated Background ─────────────────────────────── */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background:
                radial-gradient(ellipse 80% 60% at 20% 10%, rgba(99, 102, 241, 0.18) 0%, transparent 60%),
                radial-gradient(ellipse 60% 50% at 80% 90%, rgba(16, 185, 129, 0.12) 0%, transparent 60%),
                radial-gradient(ellipse 50% 40% at 50% 50%, rgba(245, 158, 11, 0.06) 0%, transparent 70%);
            pointer-events: none;
            z-index: 0;
        }

        /* Floating orbs */
        .orb {
            position: fixed;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.15;
            animation: floatOrb 12s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
        }
        .orb-1 { width: 400px; height: 400px; background: #6366f1; top: -100px; left: -100px; animation-delay: 0s; }
        .orb-2 { width: 300px; height: 300px; background: #10b981; bottom: -80px; right: -80px; animation-delay: -4s; }
        .orb-3 { width: 250px; height: 250px; background: #f59e0b; top: 40%; left: 60%; animation-delay: -8s; }

        @keyframes floatOrb {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33%       { transform: translate(30px, -20px) scale(1.05); }
            66%       { transform: translate(-20px, 30px) scale(0.95); }
        }

        /* ── Layout ──────────────────────────────────────────── */
        .public-wrapper {
            position: relative;
            z-index: 1;
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* ── Header ──────────────────────────────────────────── */
        .pub-header {
            padding: 2rem 1.5rem 1.5rem;
            text-align: center;
        }
        .pub-logo {
            width: auto;
            height: 72px;
            object-fit: contain;
            filter: drop-shadow(0 4px 16px rgba(99,102,241,0.3));
            margin-bottom: 1rem;
        }
        .pub-school-name {
            font-family: 'Playfair Display', serif;
            font-size: clamp(1.1rem, 3vw, 1.5rem);
            font-weight: 700;
            color: #f1f5f9;
            margin: 0;
            letter-spacing: 0.02em;
        }
        .pub-tagline {
            font-size: 0.8rem;
            color: #64748b;
            margin: 4px 0 0;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        /* Divider */
        .pub-divider {
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, #6366f1, #10b981);
            border-radius: 2px;
            margin: 1rem auto;
        }

        /* ── Main Content ─────────────────────────────────────── */
        .pub-content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem 1.5rem 2rem;
        }
        .pub-card {
            background: rgba(255,255,255,0.04);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 20px;
            padding: 2.5rem 2rem;
            width: 100%;
            max-width: 540px;
            box-shadow:
                0 25px 50px rgba(0,0,0,0.4),
                inset 0 1px 0 rgba(255,255,255,0.06);
        }

        /* ── Footer ──────────────────────────────────────────── */
        .pub-footer {
            text-align: center;
            padding: 1.25rem;
            font-size: 0.75rem;
            color: #334155;
            border-top: 1px solid rgba(255,255,255,0.05);
        }
        .pub-footer a { color: #475569; text-decoration: none; }

        /* ── Typography helpers ───────────────────────────────── */
        .text-gold    { color: #f59e0b; }
        .text-emerald { color: #10b981; }
        .text-indigo  { color: #818cf8; }

        /* ── Badge pill ───────────────────────────────────────── */
        .badge-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(99,102,241,0.15);
            color: #818cf8;
            border: 1px solid rgba(99,102,241,0.25);
            border-radius: 999px;
            padding: 5px 14px;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            margin-bottom: 1rem;
        }

        /* ── Form controls override ───────────────────────────── */
        .form-control, .form-select {
            background: rgba(255,255,255,0.06) !important;
            border: 1px solid rgba(255,255,255,0.12) !important;
            border-radius: 12px !important;
            color: #e2e8f0 !important;
            padding: 0.75rem 1rem !important;
            font-size: 0.9rem !important;
            transition: all 0.2s !important;
        }
        .form-control:focus, .form-select:focus {
            border-color: #6366f1 !important;
            box-shadow: 0 0 0 3px rgba(99,102,241,0.2) !important;
            background: rgba(255,255,255,0.08) !important;
        }
        .form-control::placeholder { color: #475569 !important; }
        .form-label {
            color: #94a3b8;
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            margin-bottom: 0.5rem;
        }

        /* ── Buttons ──────────────────────────────────────────── */
        .btn-pub-primary {
            background: linear-gradient(135deg, #6366f1, #4f46e5);
            color: #fff;
            border: none;
            border-radius: 12px;
            padding: 0.8rem 1.5rem;
            font-weight: 600;
            font-size: 0.9rem;
            width: 100%;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 4px 15px rgba(99,102,241,0.4);
        }
        .btn-pub-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(99,102,241,0.5);
        }
        .btn-pub-primary:disabled {
            opacity: 0.7;
            transform: none;
        }
        .btn-pub-success {
            background: linear-gradient(135deg, #10b981, #059669);
            color: #fff;
            border: none;
            border-radius: 12px;
            padding: 0.8rem 1.5rem;
            font-weight: 600;
            font-size: 0.9rem;
            width: 100%;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 4px 15px rgba(16,185,129,0.4);
            text-decoration: none;
            display: block;
            text-align: center;
        }
        .btn-pub-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(16,185,129,0.5);
            color: #fff;
        }

        /* ── Result card ──────────────────────────────────────── */
        .result-card {
            border-radius: 16px;
            padding: 1.5rem;
            margin-top: 1.5rem;
            animation: fadeInUp 0.4s ease;
        }
        .result-lulus {
            background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(16,185,129,0.05));
            border: 1px solid rgba(16,185,129,0.3);
        }
        .result-tidak-lulus {
            background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(239,68,68,0.05));
            border: 1px solid rgba(239,68,68,0.3);
        }
        .result-belum {
            background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.05));
            border: 1px solid rgba(245,158,11,0.3);
        }
        .status-badge-lulus {
            background: linear-gradient(135deg, #10b981, #059669);
            color: #fff;
            border-radius: 999px;
            padding: 8px 24px;
            font-weight: 700;
            font-size: 1.1rem;
            letter-spacing: 0.05em;
            display: inline-block;
        }
        .status-badge-tidak {
            background: linear-gradient(135deg, #ef4444, #dc2626);
            color: #fff;
            border-radius: 999px;
            padding: 8px 24px;
            font-weight: 700;
            font-size: 1.1rem;
            letter-spacing: 0.05em;
            display: inline-block;
        }
        .status-badge-belum {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #fff;
            border-radius: 999px;
            padding: 8px 24px;
            font-weight: 700;
            font-size: 1.1rem;
            letter-spacing: 0.05em;
            display: inline-block;
        }

        /* ── Countdown boxes ──────────────────────────────────── */
        .countdown-wrap {
            display: flex;
            justify-content: center;
            gap: 12px;
            flex-wrap: wrap;
            margin: 1.5rem 0;
        }
        .countdown-box {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 16px;
            padding: 1rem 1.25rem;
            min-width: 72px;
            text-align: center;
        }
        .countdown-num {
            font-size: 2.2rem;
            font-weight: 800;
            line-height: 1;
            background: linear-gradient(135deg, #818cf8, #6366f1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-variant-numeric: tabular-nums;
        }
        .countdown-label {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #64748b;
            margin-top: 4px;
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* Alert info pub */
        .alert-pub {
            background: rgba(99,102,241,0.1);
            border: 1px solid rgba(99,102,241,0.2);
            border-radius: 12px;
            color: #a5b4fc;
            font-size: 0.85rem;
            padding: 0.75rem 1rem;
        }

        /* ── Responsive: HP kecil (< 480px) ───────────────────── */
        @media (max-width: 480px) {
            .pub-header {
                padding: 1.25rem 1rem 0.75rem;
            }
            .pub-logo {
                height: 56px;
                margin-bottom: 0.75rem;
            }
            .pub-content {
                padding: 0.5rem 1rem 1.5rem;
            }
            .pub-card {
                padding: 1.5rem 1.25rem;
                border-radius: 16px;
            }
            .badge-pill {
                font-size: 0.68rem;
                padding: 4px 10px;
            }
            .pub-card h2 {
                font-size: 1.15rem !important;
            }
            .form-control, .form-select {
                padding: 0.65rem 0.85rem !important;
                font-size: 0.85rem !important;
                border-radius: 10px !important;
            }
            .btn-pub-primary, .btn-pub-success {
                padding: 0.7rem 1rem;
                font-size: 0.85rem;
                border-radius: 10px;
            }

            /* Countdown di HP kecil — perkecil ukuran */
            .countdown-box {
                padding: 0.6rem 0.75rem;
                min-width: 60px;
                border-radius: 12px;
            }
            .countdown-num {
                font-size: 1.5rem;
            }
            .countdown-label {
                font-size: 0.55rem;
            }
            .countdown-wrap {
                gap: 8px;
            }

            /* Result card di HP */
            .result-card {
                padding: 1.25rem 1rem;
            }
            .status-badge-lulus,
                .status-badge-tidak,
                .status-badge-belum {
                font-size: 0.95rem;
                padding: 6px 18px;
            }

            .pub-footer {
                font-size: 0.65rem;
                padding: 0.75rem 1rem;
            }
        }

        /* ── HP sangat kecil (< 360px) ─────────────────────────── */
        @media (max-width: 360px) {
            .pub-card {
                padding: 1.25rem 1rem;
            }
            .countdown-box {
                min-width: 52px;
                padding: 0.5rem 0.5rem;
            }
            .countdown-num {
                font-size: 1.2rem;
            }
            .pub-logo {
                height: 48px;
            }
        }

        /* ── HP landscape ──────────────────────────────────────── */
        @media (max-height: 600px) and (orientation: landscape) {
            .pub-header {
                padding: 0.75rem 1rem 0.5rem;
            }
            .pub-logo {
                height: 44px;
                margin-bottom: 0.4rem;
            }
            .pub-content {
                padding: 0.25rem 1rem 0.75rem;
            }
            .pub-card {
                padding: 1rem 1.25rem;
            }
            .pub-school-name {
                font-size: clamp(0.9rem, 2.5vw, 1.2rem) !important;
            }
        }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #0f172a; }
        ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
    </style>
</head>
<body>

<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="orb orb-3"></div>

<div class="public-wrapper">

    <!-- HEADER -->
    <header class="pub-header">
        <img src="<?= getLogo('sekolah') ?>" alt="Logo Sekolah" class="pub-logo">
        <?php
            $schoolNameRow = db_connect()->table('school_settings')
                ->select('school_name')
                ->limit(1)->get()->getRowArray();
            $schoolName = $schoolNameRow['school_name'] ?? 'SEKOLAH';
        ?>
        <h1 class="pub-school-name"><?= strtoupper(esc($schoolName)) ?></h1>
        <p class="pub-tagline">Sistem Pengumuman Kelulusan Online</p>
        <div class="pub-divider"></div>
    </header>

    <!-- CONTENT -->
    <main class="pub-content">
        <?= $this->renderSection('content') ?>
    </main>

    <!-- FOOTER -->
    <footer class="pub-footer">
        &copy; <?= date('Y') ?> <?= esc($schoolName) ?> &bull; Sistem Informasi Manajemen Akademik (SIMAK) v<?= get_app_version() ?>
    </footer>

</div>

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<?= $this->renderSection('scripts') ?>

<!-- PWA -->
<script src="/js/pwa.js"></script>
</body>
</html>
