<?php
include __DIR__ . '/../layouts/header.php';
?>
<div class="container" style="max-width: 460px; margin: 3rem auto;">
    <div class="login-card" style="background: #fff; border-radius: 20px; padding: 2.5rem; box-shadow: 0 20px 60px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.04);">
        
        <!-- HEADER -->
        <div style="text-align: center; margin-bottom: 2rem;">
            <div style="font-size: 3rem; margin-bottom: 0.5rem;">🔐</div>
            <h2 style="font-size: 1.6rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.3rem;">Masuk ke Akun</h2>
            <p style="color: var(--gray-500); font-size: 0.95rem;">Selamat datang kembali! Silakan login untuk melanjutkan.</p>
        </div>

        <!-- ALERT ERROR -->
        <?php if(isset($error)): ?>
            <div class="alert alert-danger" style="display:flex; align-items:center; gap:0.5rem; background:#fee2e2; color:#991b1b; padding:0.8rem 1.2rem; border-radius:10px; border-left:4px solid #ef4444; margin-bottom:1.5rem;">
                <span style="font-size:1.2rem;">⚠️</span>
                <span><?= $error ?></span>
            </div>
        <?php endif; ?>

        <!-- FORM LOGIN -->
        <form method="POST" action="">
            <!-- EMAIL -->
            <div style="margin-bottom: 1.2rem;">
                <label style="display:block; font-weight:600; font-size:0.9rem; color:var(--gray-700); margin-bottom:0.3rem;">Email</label>
                <div style="position:relative;">
                    <span style="position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:1.1rem; opacity:0.5;">📧</span>
                    <input type="email" name="email" placeholder="email@domain.com" required value="<?= isset($_POST['email']) ? htmlspecialchars($_POST['email']) : '' ?>" style="width:100%; padding:0.8rem 1rem 0.8rem 2.8rem; border:1.5px solid var(--gray-200); border-radius:10px; font-size:1rem; transition:0.2s; background:var(--gray-50);">
                </div>
                <style>
                    input:focus {
                        outline: none;
                        border-color: var(--primary) !important;
                        box-shadow: 0 0 0 4px rgba(15, 59, 94, 0.1);
                        background: #fff !important;
                    }
                </style>
            </div>

            <!-- PASSWORD -->
            <div style="margin-bottom: 1.2rem;">
                <label style="display:block; font-weight:600; font-size:0.9rem; color:var(--gray-700); margin-bottom:0.3rem;">Password</label>
                <div style="position:relative;">
                    <span style="position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:1.1rem; opacity:0.5;">🔑</span>
                    <input type="password" name="password" placeholder="••••••••" required style="width:100%; padding:0.8rem 1rem 0.8rem 2.8rem; border:1.5px solid var(--gray-200); border-radius:10px; font-size:1rem; transition:0.2s; background:var(--gray-50);">
                    <button type="button" onclick="togglePassword()" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:1rem; opacity:0.5; padding:0;">👁️</button>
                </div>
            </div>

            <!-- REMEMBER ME & FORGOT PASSWORD -->
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; flex-wrap:wrap; gap:0.5rem;">
                <label style="display:flex; align-items:center; gap:0.5rem; font-size:0.85rem; color:var(--gray-600); cursor:pointer;">
                    <input type="checkbox" style="width:16px; height:16px; accent-color:var(--primary); cursor:pointer;"> Ingat saya
                </label>
            </div>

            <!-- BUTTON LOGIN -->
            <button type="submit" style="width:100%; padding:0.9rem; background:linear-gradient(135deg, var(--primary), var(--primary-light)); color:#fff; border:none; border-radius:10px; font-size:1rem; font-weight:700; cursor:pointer; transition:0.25s; letter-spacing:0.3px;">
                🚀 Login
            </button>
        </form>

        <!-- DIVIDER -->
        <div style="display:flex; align-items:center; gap:1rem; margin:1.5rem 0;">
            <div style="flex:1; height:1px; background:var(--gray-200);"></div>
            <span style="color:var(--gray-400); font-size:0.85rem;">atau</span>
            <div style="flex:1; height:1px; background:var(--gray-200);"></div>
        </div>

        <!-- REGISTER LINK -->
        <div style="text-align:center;">
            <p style="color:var(--gray-600); font-size:0.95rem;">
                Belum punya akun?
                <a href="?page=register" style="font-weight:700; color:var(--primary); text-decoration:none; transition:0.2s;">
                    Daftar sekarang →
                </a>
            </p>
        </div>

        <!-- BACK TO HOME -->
        <div style="text-align:center; margin-top:1rem;">
            <a href="?page=home" style="color:var(--gray-400); font-size:0.85rem; text-decoration:none; transition:0.2s;">
                ← Kembali ke Beranda
            </a>
        </div>
    </div>
</div>

<script>
    function togglePassword() {
        const input = document.querySelector('input[name="password"]');
        const btn = document.querySelector('button[onclick="togglePassword()"]');
        if (input.type === 'password') {
            input.type = 'text';
            btn.textContent = '🙈';
        } else {
            input.type = 'password';
            btn.textContent = '👁️';
        }
    }
</script>

<?php include __DIR__ . '/../layouts/footer.php'; ?>