<?php require_once __DIR__ . '/../includes/config.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attendance Security - <?= APP_NAME ?></title>
    <link rel="stylesheet" href="<?= APP_URL ?>/assets/css/style.css">
    <script src="https://unpkg.com/lucide@latest"></script>
</head>
<body class="bg-slate-950 text-slate-200 antialiased selection:bg-cyan-500/30 selection:text-cyan-200 min-h-screen">
    <div class="min-h-screen bg-cyber-grid py-12 px-4 flex items-center justify-center relative overflow-hidden font-tech">
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[550px] h-[550px] bg-gradient-to-tr from-cyan-500/20 to-purple-600/20 rounded-full blur-[140px] pointer-events-none"></div>

        <div class="max-w-lg w-full relative z-10">
            <a href="<?= APP_URL ?>/" class="inline-flex items-center gap-2 text-xs font-mono-cyber text-slate-400 hover:text-cyan-400 mb-6 transition-colors">
                <i data-lucide="arrow-left" class="w-4 h-4"></i> [RETURN TO HOME]
            </a>

            <div class="glass-panel p-8 md:p-10 rounded-3xl border border-cyan-500/30 text-center shadow-glow-cyan">
                <div class="w-16 h-16 rounded-full bg-cyan-500/10 border border-cyan-500/30 text-cyan-400 flex items-center justify-center mx-auto mb-4">
                    <i data-lucide="lock" class="w-8 h-8"></i>
                </div>

                <span class="px-3.5 py-1 rounded-full bg-cyan-500/10 text-cyan-400 text-xs font-mono-cyber font-bold uppercase tracking-wider">
                    [VENUE SCAN SECURITY LOCK]
                </span>

                <h2 class="text-2xl sm:text-3xl font-heading-cyber font-bold text-slate-100 mt-3 mb-2">
                    ON-SITE VENUE QR ATTENDANCE ONLY
                </h2>

                <p class="text-slate-300 text-xs sm:text-sm leading-relaxed mb-6">
                    Manual web check-in is disabled to prevent proxy attendance. Attendance check-in is opened live at the venue during competition sessions.
                </p>

                <div class="p-5 rounded-2xl bg-slate-900 border border-cyan-500/30 text-left space-y-3 text-xs font-mono-cyber mb-6">
                    <div class="flex items-center gap-2 text-cyan-400 font-bold">
                        <i data-lucide="qr-code" class="w-4 h-4"></i> HOW TO MARK YOUR ATTENDANCE:
                    </div>
                    <ol class="list-decimal list-inside space-y-2 text-slate-300 font-tech text-xs">
                        <li>Be physically present at the competition venue during the event.</li>
                        <li>Scan the **Official Event QR Code** projected on the stage screen.</li>
                        <li>Complete the instant mobile check-in form on your phone screen.</li>
                    </ol>
                </div>

                <div class="p-4 rounded-xl bg-purple-500/10 border border-purple-500/30 text-purple-300 text-xs flex items-center gap-3 text-left">
                    <i data-lucide="shield-alert" class="w-6 h-6 shrink-0 text-purple-400"></i>
                    <span>Official PDF Merit & Participation Certificates are dispatched directly to your registered email address immediately upon venue QR check-in.</span>
                </div>

                <a href="<?= APP_URL ?>/" class="w-full mt-6 py-3.5 rounded-xl bg-gradient-to-r from-cyan-500 to-purple-600 text-slate-950 font-mono-cyber font-bold text-xs transition-all shadow-glow-cyan flex items-center justify-center gap-2">
                    RETURN TO SUPERNOVA HOME
                </a>
            </div>
        </div>
    </div>
    <script>lucide.createIcons();</script>
</body>
</html>
