<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($title ?? 'Verify Certificate') ?> — Gmind Institute</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, sans-serif;
        }
        .verify-card {
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            padding: 50px 40px;
            max-width: 600px;
            margin: 80px auto;
        }
        .logo-area { text-align: center; margin-bottom: 30px; }
        .logo-area h1 {
            font-size: 32px;
            color: #2c1e4a;
            margin: 0;
            font-weight: 700;
        }
        .logo-area p {
            color: #6c3fe8;
            font-size: 14px;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-top: 5px;
        }
        .search-icon {
            font-size: 80px;
            color: #6c3fe8;
            margin-bottom: 20px;
        }
        .form-control-lg {
            border-radius: 12px;
            padding: 15px;
            border: 2px solid #e0e0e0;
            font-size: 16px;
        }
        .form-control-lg:focus {
            border-color: #6c3fe8;
            box-shadow: 0 0 0 0.2rem rgba(108, 63, 232, 0.25);
        }
        .btn-primary {
            background: linear-gradient(135deg, #6c3fe8, #4a2db8);
            border: none;
            padding: 15px;
            font-size: 16px;
            font-weight: 600;
            border-radius: 12px;
        }
        .btn-primary:hover {
            background: linear-gradient(135deg, #4a2db8, #2c1e4a);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="verify-card">
            <div class="logo-area">
                <i class="fas fa-shield-alt search-icon"></i>
                <h1>GMIND INSTITUTE</h1>
                <p>Certificate Verification</p>
            </div>

            <h4 class="text-center mb-4">Verify Your Certificate / Marksheet</h4>

            <form method="POST" action="<?= BASE_PATH ?>/verify">
                <div class="mb-3">
                    <label class="form-label">Enter Certificate / Marksheet Number</label>
                    <input type="text" name="document_number" class="form-control form-control-lg"
                           placeholder="e.g., GMIND-2026-00008 or MS-2026-00009"
                           required>
                </div>
                <button type="submit" class="btn btn-primary w-100">
                    <i class="fas fa-search"></i> Verify Now
                </button>
            </form>

            <hr class="my-4">
            <p class="text-muted text-center small mb-0">
                <i class="fas fa-info-circle"></i>
                You can also scan the QR code on your certificate to verify automatically.
            </p>
        </div>
    </div>
</body>
</html>
