<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration Pending Review | RestPO</title>
    <meta name="description" content="Your registration is under review. Thank you for choosing RestPO.">
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        *{font-family:'Outfit',sans-serif;margin:0;padding:0;box-sizing:border-box}
        body{background:#f8fafc;color:#475569;overflow-x:hidden}
        h1, h2, h3, h4, h5, h6 { color: #0f172a !important; }
        .text-slate-300, .text-slate-400 { color: #64748b !important; }
        
        .mesh{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0}
        .mesh-1{width:500px;height:500px;background:radial-gradient(circle,rgba(139,92,246,.12),transparent 70%);top:-100px;left:-100px;animation:drift1 15s ease-in-out infinite alternate}
        .mesh-2{width:500px;height:500px;background:radial-gradient(circle,rgba(6,182,212,.1),transparent 70%);bottom:-100px;right:-100px;animation:drift2 18s ease-in-out infinite alternate}
        @keyframes drift1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(40px,30px) scale(1.1)}}
        @keyframes drift2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-30px,40px) scale(1.15)}}

        .glass-card{background:rgba(255,255,255,0.85);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid rgba(0,0,0,0.06);box-shadow:0 20px 50px -15px rgba(0,0,0,0.08)}
        
        .pulse-icon{animation:pulseGlow 2.5s infinite ease-in-out}
        @keyframes pulseGlow {
            0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(139,92,246,0.15)); }
            50% { transform: scale(1.05); filter: drop-shadow(0 0 15px rgba(139,92,246,0.3)); }
        }
    </style>
</head>
<body class="min-h-screen flex flex-col justify-between relative">
    <!-- Gradient Meshes -->
    <div class="mesh mesh-1"></div>
    <div class="mesh mesh-2"></div>

    <!-- Top Navigation -->
    <header class="w-full max-w-7xl mx-auto px-6 py-6 flex justify-between items-center relative z-10">
        <a href="/restpo" class="flex items-center gap-2.5 text-2xl font-extrabold tracking-tight text-slate-900">
            <?php if (!empty($websiteLogo)): ?>
                <img src="<?php echo htmlspecialchars($websiteLogo); ?>" alt="Logo" class="h-9 object-contain rounded-lg">
            <?php else: ?>
                <span class="bg-gradient-to-r from-violet-600 to-indigo-600 bg-clip-text text-transparent">Rest</span>PO
            <?php endif; ?>
        </a>
    </header>

    <!-- Main Content -->
    <main class="w-full max-w-2xl mx-auto px-6 py-12 relative z-10 flex-1 flex flex-col justify-center">
        <div class="glass-card rounded-3xl overflow-hidden shadow-2xl p-8 md:p-12 text-center space-y-8">
            <!-- Pulsing Hourglass/Check icon -->
            <div class="flex justify-center">
                <div class="w-24 h-24 rounded-full bg-violet-500/10 border border-violet-500/30 flex items-center justify-center pulse-icon">
                    <i class="fas fa-clock text-4xl text-violet-400"></i>
                </div>
            </div>

            <!-- Content -->
            <div class="space-y-4">
                <span class="px-3.5 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider bg-amber-500/10 text-amber-600 border border-amber-500/20">Application Pending Approval</span>
                <h1 class="text-3xl md:text-4xl font-extrabold text-slate-900 mt-4 tracking-tight">We are reviewing your workspace request!</h1>
                <p class="text-slate-650 text-sm md:text-base leading-relaxed max-w-lg mx-auto">
                    Thank you for registering with RestPO. Your registration request has been submitted to the Super Administrator team.
                </p>
                <p class="text-slate-500 text-xs md:text-sm leading-relaxed max-w-lg mx-auto">
                    Once the team validates your details, they will activate your restaurant space and assign the selected plan. A notification with a generated login password will be sent automatically to your admin email address.
                </p>
            </div>

            <!-- Flow details card -->
            <div class="bg-white/40 border border-slate-200/80 rounded-2xl p-5 text-left text-xs md:text-sm text-slate-600 space-y-3 shadow-inner">
                <div class="flex items-start gap-3">
                    <div class="w-6 h-6 rounded-full bg-violet-500/10 border border-violet-500/20 flex items-center justify-center flex-shrink-0 text-violet-600 font-bold text-xs">1</div>
                    <p class="mt-0.5"><strong class="text-slate-800">Review Process:</strong> Super admin reviews workspace slug/subdomain and restaurant credentials (typically within 1-2 hours).</p>
                </div>
                <div class="flex items-start gap-3">
                    <div class="w-6 h-6 rounded-full bg-violet-500/10 border border-violet-500/20 flex items-center justify-center flex-shrink-0 text-violet-600 font-bold text-xs">2</div>
                    <p class="mt-0.5"><strong class="text-slate-800">Credentials Dispatch:</strong> A secure auto-generated password will be emailed to your admin address.</p>
                </div>
                <div class="flex items-start gap-3">
                    <div class="w-6 h-6 rounded-full bg-violet-500/10 border border-violet-500/20 flex items-center justify-center flex-shrink-0 text-violet-600 font-bold text-xs">3</div>
                    <p class="mt-0.5"><strong class="text-slate-800">Login & Setup:</strong> Login to `/login` using your admin email and password to start configuring floors, tables, and your menu.</p>
                </div>
            </div>

            <!-- Back to home CTA -->
            <div class="pt-4 flex flex-col md:flex-row justify-center gap-4">
                <a href="/restpo" class="px-8 py-3.5 rounded-xl font-bold bg-violet-600 text-white hover:bg-violet-700 shadow-lg hover:shadow-violet-600/15 transition duration-200 flex items-center justify-center gap-2">
                    <i class="fas fa-home"></i> Back to Homepage
                </a>
                <a href="mailto:support@restpo.com" class="px-8 py-3.5 rounded-xl font-bold bg-slate-100 border border-slate-200 hover:border-slate-350 text-slate-600 hover:text-slate-900 transition duration-200 flex items-center justify-center gap-2">
                    <i class="fas fa-headset"></i> Contact Support
                </a>
            </div>
        </div>
    </main>

    <!-- Footer -->
    <footer class="w-full max-w-7xl mx-auto px-6 py-6 text-center text-xs text-slate-600 relative z-10">
        &copy; <?php echo date('Y'); ?> RestPO. All Rights Reserved.
    </footer>
</body>
</html>
