<?php
require_once 'includes/config.php';
// Load colors and site name
$whatsapp = getSetting('whatsapp_number') ?? '';
$_primary   = getSetting('color_primary')   ?: '#1a3c8f';
$_secondary = getSetting('color_secondary') ?: '#f5a623';
$_dark      = getSetting('color_dark')      ?: '#0d1f4e';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Device Locked — <?= SITE_NAME ?></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#f5f7fa}
body{font-family:'Segoe UI',sans-serif;display:flex;align-items:center;justify-content:center;padding:20px;min-height:100vh}
.wrap{width:100%;max-width:380px;text-align:center}

/* Lock animation */
.lock-wrap{position:relative;display:inline-block;margin-bottom:24px}
.lock-circle{width:100px;height:100px;background:linear-gradient(135deg,<?= $_dark ?>,<?= $_primary ?>);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto;box-shadow:0 8px 32px <?= $_primary ?>55;animation:pulse 2s ease-in-out infinite}
.lock-icon{font-size:40px;color:white}
@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 8px 32px <?= $_primary ?>55}50%{transform:scale(1.06);box-shadow:0 12px 40px <?= $_primary ?>88}}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.lock-circle.shake{animation:shake 0.5s ease}

.title{font-size:22px;font-weight:800;color:#1a1a2e;margin-bottom:8px}
.subtitle{font-size:14px;color:#888;line-height:1.7;margin-bottom:28px}

.info-box{background:white;border-radius:16px;padding:18px;margin-bottom:20px;box-shadow:0 2px 12px rgba(0,0,0,0.06);text-align:left}
.info-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid #f5f5f5;font-size:13px}
.info-row:last-child{border:none}
.info-ic{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.info-val{font-weight:700;color:#333}

/* WhatsApp button */
.wa-btn{display:flex;align-items:center;justify-content:center;gap:12px;background:#25D366;color:white;padding:16px 24px;border-radius:50px;font-size:15px;font-weight:800;text-decoration:none;box-shadow:0 6px 24px rgba(37,211,102,0.4);transition:0.2s;margin-bottom:12px}
.wa-btn:active{transform:scale(0.97)}
.wa-num{font-size:12px;color:#aaa;margin-bottom:20px}

.reset-link{font-size:13px;color:<?= $_primary ?>;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:6px;margin-top:4px}
.site-name{font-size:13px;color:#aaa;margin-top:20px}

/* Top bar */
.top-bar{background:linear-gradient(135deg,<?= $_dark ?>,<?= $_primary ?>);padding:14px 20px;border-radius:0 0 20px 20px;margin-bottom:28px;display:flex;align-items:center;justify-content:center}
.top-bar-title{color:white;font-size:16px;font-weight:800}
</style>
</head>
<body>
<div class="wrap">
    <div class="top-bar">
        <span class="top-bar-title"><?= htmlspecialchars(SITE_NAME) ?></span>
    </div>

    <div class="lock-wrap">
        <div class="lock-circle" id="lockCircle">
            <i class="fas fa-lock lock-icon"></i>
        </div>
    </div>

    <div class="title">🚫 Device Locked</div>
    <div class="subtitle">
        Your device has been locked.<br>
        You can no longer login from this device.<br>
        Please contact support.
    </div>

    <?php if($whatsapp): ?>
    <a href="https://wa.me/<?= preg_replace('/[^0-9]/','',$whatsapp) ?>?text=<?= urlencode('My device is locked. Please help. App: '.SITE_NAME) ?>"
       target="_blank" class="wa-btn">
        <i class="fab fa-whatsapp" style="font-size:24px"></i>
        WhatsApp Support
    </a>
    <div class="wa-num"><?= htmlspecialchars($whatsapp) ?></div>
    <?php else: ?>
    <div style="background:#fffbeb;border-radius:12px;padding:14px 16px;font-size:13px;color:#744210;margin-bottom:16px">
        <i class="fas fa-info-circle"></i> Please contact the administrator.
    </div>
    <?php endif; ?>

    <a href="device-reset.php" class="reset-link">
        <i class="fas fa-redo"></i> Reset Your Device
    </a>

    <div class="site-name"><?= htmlspecialchars(SITE_NAME) ?></div>
</div>

<script>
// Shake on load
window.addEventListener('load', () => {
    const el = document.getElementById('lockCircle');
    setTimeout(() => {
        el.classList.add('shake');
        setTimeout(() => el.classList.remove('shake'), 500);
    }, 600);
});
</script>
</body>
</html>
