<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoicing Portal - Amboseli Wildebeest Camp</title>
    <link rel="icon" href="assets/img/favicon.png?v=2" type="image/png">
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#FFB81C">
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Marcellus&display=swap"
        rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        :root {
            --gold: #FFB81C;
            --dark: #0f0b0a;
            --glass: rgba(255, 255, 255, 0.03);
            --gold-gradient: linear-gradient(135deg, #FFF5D9 0%, #FFB81C 50%, #D4AF37 100%);
        }

        body {
            background-color: #0f0b0a;
            /* Hardcoded fallback for legacy rendering */
            background-image:
                radial-gradient(circle at 10% 10%, rgba(212, 175, 55, 0.08) 0%, transparent 40%),
                radial-gradient(circle at 90% 90%, rgba(212, 175, 55, 0.08) 0%, transparent 40%),
                url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");
            color: #E8DCC4;
            font-family: 'Marcellus', serif;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            margin: 0;
        }

        .hero-container {
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .portal-card {
            background: var(--glass);
            border: 1px solid rgba(255, 184, 28, 0.15);
            padding: 80px 60px;
            backdrop-filter: blur(20px);
            box-shadow: 0 50px 100px rgba(0, 0, 0, 0.9);
            max-width: 600px;
            width: 90%;
            margin: 0 auto;
            position: relative;
        }

        .portal-card::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 20%;
            right: 20%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--gold), transparent);
        }

        .brand-logo {
            height: 100px;
            margin-bottom: 40px;
            filter: brightness(1.2) drop-shadow(0 0 20px rgba(255, 184, 28, 0.2));
        }

        h1 {
            font-family: 'Cinzel', serif;
            font-size: 32px;
            letter-spacing: 8px;
            margin-bottom: 15px;
            color: #fff;
            text-transform: uppercase;
        }

        .subtitle {
            font-family: 'Cinzel', serif;
            font-size: 12px;
            letter-spacing: 12px;
            color: var(--gold);
            margin-bottom: 50px;
            opacity: 0.9;
        }

        .btn-portal {
            display: inline-block;
            background: var(--gold-gradient);
            color: #000;
            font-weight: 700;
            font-family: 'Cinzel', serif;
            text-decoration: none;
            padding: 18px 50px;
            letter-spacing: 4px;
            transition: all 0.4s ease;
            border: none;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(255, 184, 28, 0.1);
        }

        .btn-portal:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 20px 40px rgba(255, 184, 28, 0.3);
            color: #000;
        }

        .footer-note {
            margin-top: 40px;
            font-family: 'Cinzel', serif;
            font-size: 9px;
            letter-spacing: 4px;
            opacity: 0.4;
            text-transform: uppercase;
        }

        /* Ambient Animation */
        .ambient-glow {
            position: absolute;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
            border-radius: 50%;
            filter: blur(50px);
            z-index: 1;
            animation: pulse 10s infinite alternate;
        }

        @keyframes pulse {
            0% {
                transform: translate(-10%, -10%);
                opacity: 0.5;
            }

            100% {
                transform: translate(10%, 10%);
                opacity: 0.8;
            }
        }
    </style>
</head>

<body>
    <div class="ambient-glow"></div>

    <div class="hero-container">
        <div class="portal-card">
            <img src="assets/img/logo3.png" alt="Amboseli Wildebeest Camp" class="brand-logo">
            <h1>Staff Portal</h1>
            <div class="subtitle">Amboseli Wildebeest Camp</div>

            <div class="features">
                <div class="feature-item">
                    <span class="icon">✦</span>
                    <span>Staff Portal</span>
                </div>
                <div class="feature-item">
                    <span class="icon">✦</span>
                    <span>Invoicing System</span>
                </div>
                <div class="feature-item">
                    <span class="icon">✦</span>
                    <span>Voucher Management</span>
                </div>
            </div>

            <a href="login.html" class="btn-portal">ACCESS SYSTEM</a>

            <div class="mt-4">
                <button id="installBtn" class="btn btn-sm btn-outline-gold"
                    style="font-family: 'Cinzel'; font-size: 10px; letter-spacing: 2px; padding: 10px 20px; display: none;">
                    INSTALL AS PROGRAM
                </button>
            </div>

            <div class="footer-note">
                EST. 2026 | SECURE BILLING & INVOICING
            </div>
        </div>
    </div>

    <script>
        var deferredPrompt;
        var installBtn = document.getElementById('installBtn');

        window.addEventListener('beforeinstallprompt', function (e) {
            e.preventDefault();
            deferredPrompt = e;
            if (installBtn) installBtn.style.display = 'inline-block';
        });

        if (installBtn) {
            installBtn.onclick = function () {
                if (deferredPrompt) {
                    deferredPrompt.prompt();
                    deferredPrompt.userChoice.then(function (choice) {
                        if (choice.outcome === 'accepted') {
                            installBtn.style.display = 'none';
                        }
                        deferredPrompt = null;
                    });
                }
            };
        }

        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('sw.js')
                .then(function () { console.log("PWA Registered"); });
        }
    </script>
</body>

</html>