<?php
require_once __DIR__.'/includes/db.php';
if (session_status() === PHP_SESSION_NONE) session_start();
$msg     = '';
$msgType = 'error';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $u  = trim($_POST['username'] ?? '');
    $p  = trim($_POST['password'] ?? '');
    $st = $mysqli->prepare("SELECT id, username, pass_hash, name FROM users WHERE username=? LIMIT 1");
    $st->bind_param('s', $u);
    $st->execute();
    $rs = $st->get_result();
    if ($row = $rs->fetch_assoc()) {
        if (password_verify($p, $row['pass_hash'])) {
            $_SESSION['uid']  = $row['id'];
            $_SESSION['name'] = $row['name'];
            header('Location: index.php');
            exit;
        } else {
            $msg = 'Password yang Anda masukkan salah.';
        }
    } else {
        $msg = 'Username tidak ditemukan.';
    }
}
?>
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login - Admin Desa Mambu</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.6.0/fonts/remixicon.css" rel="stylesheet">
<style>
/* ============================================================
   LOGIN PAGE �� Desa Mambu Admin
   ============================================================ */
:root {
    --g950: #002818;
    --g900: #003d22;
    --g800: #005530;
    --g700: #047a3d;
    --g600: #09a04f;
    --g500: #15c46a;
    --g400: #35e085;
    --g100: #dcfaee;
    --g50:  #edfff5;
    --yellow: #f5b400;
    --yellow-lt: #ffd234;
    --ink:   #0f1c16;
    --muted: #5e6e67;
    --line:  #daeae1;
    --surface: #ffffff;
}

@keyframes gradient-shift {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}
@keyframes float-y {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0   rgba(21,196,106,.5); }
    70%  { box-shadow: 0 0 0 12px rgba(21,196,106,0); }
    100% { box-shadow: 0 0 0 0   rgba(21,196,106,0); }
}
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(24px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes shake {
    0%,100% { transform: translateX(0); }
    20%,60% { transform: translateX(-6px); }
    40%,80% { transform: translateX(6px); }
}

*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    display: flex;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    background: linear-gradient(135deg, var(--g950) 0%, var(--g800) 50%, var(--g900) 100%);
    background-size: 200% 200%;
    animation: gradient-shift 10s ease infinite;
    position: relative;
    overflow-x: hidden;
}

/* Ambient blobs */
body::before {
    content: '';
    position: fixed;
    top: -120px; left: -120px;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(21,196,106,.14), transparent 70%);
    pointer-events: none;
    animation: float-y 9s ease-in-out infinite;
}
body::after {
    content: '';
    position: fixed;
    bottom: -100px; right: -100px;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,180,0,.10), transparent 70%);
    pointer-events: none;
    animation: float-y 7s ease-in-out infinite reverse;
}

/* Decorative grid pattern */
.bg-pattern {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ============================================================
   LAYOUT �� split: left panel + right card
   ============================================================ */
.login-layout {
    display: flex;
    width: 100%;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

/* Left decorative panel (hidden on mobile) */
.login-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 56px;
    color: #fff;
}

.panel-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 52px;
}

.panel-brand-icon {
    width: 52px; height: 60px;
    display: grid; place-items: center;
    color: #fff;
    background:
        radial-gradient(circle at 50% 30%, var(--yellow-lt) 0 14%, transparent 15%),
        linear-gradient(145deg, var(--g500), var(--g800));
    border: 3px solid var(--yellow);
    border-radius: 9px 9px 22px 22px;
    font-size: 26px;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    animation: pulse-ring 3.5s ease infinite;
}

.panel-brand-icon i { filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }

.panel-brand-copy strong {
    display: block;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
}
.panel-brand-copy span {
    font-size: 11px;
    color: rgba(255,255,255,.65);
}

.panel-headline {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.04em;
    margin-bottom: 18px;
}

.panel-headline em {
    font-style: normal;
    background: linear-gradient(90deg, var(--g400), var(--yellow-lt));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.panel-sub {
    max-width: 380px;
    color: rgba(255,255,255,.72);
    font-size: 14px;
    line-height: 1.75;
    margin-bottom: 40px;
}

/* Feature list */
.panel-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.panel-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,.88);
    font-size: 13px;
    font-weight: 600;
}

.feature-dot {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 10px;
    font-size: 18px;
    flex: 0 0 auto;
}

.feature-dot.green  { background: rgba(53,224,133,.18);  color: var(--g400); }
.feature-dot.yellow { background: rgba(255,210,52,.15);  color: var(--yellow-lt); }
.feature-dot.blue   { background: rgba(96,179,255,.15);  color: #60b3ff; }

/* Panel footer */
.panel-footer {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: 11px;
    color: rgba(255,255,255,.45);
}

/* ============================================================
   RIGHT �� Login card
   ============================================================ */
.login-right {
    width: 460px;
    flex: 0 0 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    background: rgba(255,255,255,.03);
    border-left: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(4px);
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border-radius: 22px;
    box-shadow: 0 32px 72px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.06);
    overflow: hidden;
    animation: fadeInUp .6s ease both;
}

/* Card top accent strip */
.card-accent {
    height: 5px;
    background: linear-gradient(90deg, var(--g500), var(--g700), var(--yellow));
    background-size: 200% 100%;
    animation: gradient-shift 4s ease infinite;
}

.card-body { padding: 34px 32px 32px; }

/* Card header */
.card-header { text-align: center; margin-bottom: 28px; }

.card-logo {
    width: 68px; height: 68px;
    display: grid; place-items: center;
    margin: 0 auto 14px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 30%, var(--yellow-lt) 0 14%, transparent 15%),
        linear-gradient(145deg, var(--g500), var(--g900));
    border: 3px solid var(--yellow);
    border-radius: 14px 14px 28px 28px;
    font-size: 32px;
    box-shadow: 0 8px 24px rgba(4,122,61,.35);
    animation: pulse-ring 3s ease infinite;
}

.card-logo i { filter: drop-shadow(0 2px 5px rgba(0,0,0,.3)); }

.card-header h1 {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--ink);
    margin-bottom: 5px;
}

.card-header p {
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
}

/* Divider */
.card-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.card-divider::before,
.card-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* Alert */
.login-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #991b1b;
    font-size: 12.5px;
    font-weight: 600;
    animation: shake .45s ease both;
}
.login-alert i { font-size: 17px; flex: 0 0 auto; }

/* Form */
.form-group {
    margin-bottom: 16px;
    position: relative;
}

.form-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.form-label i { font-size: 13px; color: var(--g600); }

.input-wrap {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 17px;
    color: var(--muted);
    pointer-events: none;
    transition: color .2s;
}

.form-input {
    width: 100%;
    height: 48px;
    padding: 0 44px 0 44px;
    border: 1.5px solid var(--line);
    border-radius: 11px;
    background: #fafdfb;
    color: var(--ink);
    font: 600 13.5px/1 'Inter', sans-serif;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.form-input:focus {
    border-color: var(--g500);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(21,196,106,.14);
}

.form-input:focus + .input-icon,
.input-wrap:focus-within .input-icon { color: var(--g600); }

/* Password toggle */
.pwd-toggle {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 17px;
    cursor: pointer;
    padding: 4px;
    border-radius: 5px;
    transition: color .2s;
    line-height: 1;
}
.pwd-toggle:hover { color: var(--g700); }

/* Submit */
.btn-login {
    width: 100%;
    height: 50px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #fff;
    background: linear-gradient(135deg, var(--g600), var(--g800));
    background-size: 200% 100%;
    border: 0;
    border-radius: 12px;
    font: 700 14px/1 'Inter', sans-serif;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(4,122,61,.32);
    transition: transform .2s ease, box-shadow .2s ease;
    position: relative;
    overflow: hidden;
}

.btn-login::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--g500), var(--g700));
    opacity: 0;
    transition: opacity .25s;
}
.btn-login:hover::before { opacity: 1; }
.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(4,122,61,.40);
}
.btn-login:active { transform: translateY(0); }

.btn-login i {
    font-size: 19px;
    position: relative; z-index: 1;
    transition: transform .2s;
}
.btn-login:hover i { transform: scale(1.15) rotate(-5deg); }
.btn-login span { position: relative; z-index: 1; }

/* Back to site link */
.back-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted);
    transition: color .2s;
}
.back-link i { font-size: 14px; }
.back-link:hover { color: var(--g700); }

/* Card footer */
.card-footer {
    padding: 14px 32px;
    border-top: 1px solid var(--line);
    background: linear-gradient(135deg, #fafdfb, var(--g50));
    text-align: center;
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.card-footer i { color: var(--g500); font-size: 13px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
    .login-panel { display: none; }
    .login-right  {
        width: 100%;
        flex: 1;
        border-left: 0;
        background: transparent;
    }
}

@media (max-width: 440px) {
    .login-right { padding: 20px 14px; }
    .card-body   { padding: 26px 22px 24px; }
    .card-footer { padding: 12px 22px; }
}

/* Product shell refresh */
:root {
    --g950: #102a43;
    --g900: #193b59;
    --g800: #087353;
    --g700: #0d9f6e;
    --g600: #13ad79;
    --g500: #24ba87;
    --g400: #8be0bc;
    --g100: #dff5eb;
    --g50: #f2faf6;
    --yellow: #f4b942;
    --yellow-lt: #ffd36b;
    --ink: #193047;
    --muted: #6b7d8f;
    --line: #dce7e5;
}
body {
    background: linear-gradient(120deg, #102a43 0%, #17614f 52%, #0d9f6e 100%);
}
.login-panel { padding-left: clamp(28px, 7vw, 96px); }
.panel-headline { letter-spacing: -.025em; }
.login-right { background: rgba(8, 33, 52, .18); }
.login-card { border-radius: 14px; box-shadow: 0 28px 70px rgba(5, 27, 43, .32); }
.card-accent { background: linear-gradient(90deg, var(--g500), var(--yellow)); }
.card-logo, .panel-brand-icon {
    color: var(--g950);
    background: linear-gradient(145deg, var(--yellow-lt), #e99432);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 9px 22px rgba(16,42,67,.22);
}
.form-input { background: #f7faf9; border-color: var(--line); }
.form-input:focus { border-color: var(--g500); box-shadow: 0 0 0 3px rgba(36,186,135,.14); }
.btn-login { background: linear-gradient(135deg, var(--g600), var(--g800)); box-shadow: 0 8px 22px rgba(8,115,83,.28); border-radius: 10px; }
.card-footer { background: var(--g50); }
</style>
</head>
<body>

<div class="bg-pattern"></div>

<div class="login-layout">

    <!-- ======================================
         LEFT PANEL (desktop only)
         ====================================== -->
    <div class="login-panel">

        <div class="panel-brand">
            <span class="panel-brand-icon"><i class="ri-government-fill"></i></span>
            <div class="panel-brand-copy">
                <strong>Desa Mambu</strong>
                <span>Kec. Luyo &middot; Kab. Polewali Mandar &middot; Sulawesi Barat</span>
            </div>
        </div>

        <h1 class="panel-headline">
            Sistem Informasi<br>
            <em>Desa Mambu</em>
        </h1>

        <p class="panel-sub">
            Platform pengelolaan data desa yang terintegrasi dengan
            infografis, APBDes, berita, potensi, dan pelayanan
            masyarakat dalam satu dasbor.
        </p>

        <div class="panel-features">
            <div class="panel-feature">
                <span class="feature-dot green"><i class="ri-shield-check-fill"></i></span>
                Akses terenkripsi & aman
            </div>
            <div class="panel-feature">
                <span class="feature-dot yellow"><i class="ri-bar-chart-box-fill"></i></span>
                Data real-time &amp; transparan
            </div>
            <div class="panel-feature">
                <span class="feature-dot blue"><i class="ri-community-fill"></i></span>
                Pelayanan publik digital
            </div>
        </div>

        <div class="panel-footer">
            &copy; <?= date('Y') ?> Pemerintah Desa Mambu &middot; All rights reserved
        </div>

    </div>

    <!-- ======================================
         RIGHT �� CARD
         ====================================== -->
    <div class="login-right">
        <div class="login-card">

            <div class="card-accent"></div>

            <div class="card-body">

                <!-- Header -->
                <div class="card-header">
                    <span class="card-logo"><i class="ri-government-fill"></i></span>
                    <h1>Masuk ke Admin</h1>
                    <p>Sistem Informasi Desa Mambu</p>
                </div>

                <?php if ($msg): ?>
                <div class="login-alert">
                    <i class="ri-error-warning-fill"></i>
                    <?= esc($msg) ?>
                </div>
                <?php endif; ?>

                <div class="card-divider">Masuk dengan akun Anda</div>

                <form method="post" autocomplete="off" novalidate>

                    <!-- Username -->
                    <div class="form-group">
                        <label class="form-label" for="username">
                            <i class="ri-user-3-fill"></i> Username
                        </label>
                        <div class="input-wrap">
                            <input
                                class="form-input"
                                id="username"
                                name="username"
                                type="text"
                                placeholder="Masukkan username"
                                autocomplete="username"
                                required
                                value="<?= esc($_POST['username'] ?? '') ?>"
                            >
                            <i class="ri-user-line input-icon"></i>
                        </div>
                    </div>

                    <!-- Password -->
                    <div class="form-group">
                        <label class="form-label" for="password">
                            <i class="ri-lock-fill"></i> Password
                        </label>
                        <div class="input-wrap">
                            <input
                                class="form-input"
                                id="password"
                                name="password"
                                type="password"
                                placeholder="Masukkan password"
                                autocomplete="current-password"
                                required
                            >
                            <i class="ri-lock-line input-icon"></i>
                            <button
                                class="pwd-toggle"
                                type="button"
                                id="pwdToggle"
                                aria-label="Tampilkan password"
                            ><i class="ri-eye-line" id="pwdIcon"></i></button>
                        </div>
                    </div>

                    <button class="btn-login" type="submit">
                        <i class="ri-login-box-fill"></i>
                        <span>Masuk ke Dasbor</span>
                    </button>

                </form>

                <a class="back-link" href="/">
                    <i class="ri-arrow-left-line"></i> Kembali ke Website Desa
                </a>

            </div><!-- /card-body -->

            <div class="card-footer">
                <i class="ri-shield-check-fill"></i>
                Koneksi aman &middot; &copy; <?= date('Y') ?> Desa Mambu
            </div>

        </div><!-- /login-card -->
    </div>

</div><!-- /login-layout -->

<script>
(function () {
    /* Password show/hide */
    var btn  = document.getElementById('pwdToggle');
    var inp  = document.getElementById('password');
    var icon = document.getElementById('pwdIcon');

    btn?.addEventListener('click', function () {
        var show = inp.type === 'password';
        inp.type = show ? 'text' : 'password';
        icon.className = show ? 'ri-eye-off-line' : 'ri-eye-line';
        btn.setAttribute('aria-label', show ? 'Sembunyikan password' : 'Tampilkan password');
    });

    /* Auto-focus username (or password if username already filled) */
    var uInp = document.getElementById('username');
    if (uInp) {
        uInp.value.trim() ? document.getElementById('password')?.focus() : uInp.focus();
    }
})();
</script>
</body>
</html>