<?php
// login.php
session_start();

$valid_username = 'admin';
$valid_password_hash = '$2y$10$KIhA8PfAgWNnFjYqpftF.edWk/w7wV8IlBUFQhMt1JnzjMxTwCF.G';

if (isset($_SESSION['logged_in']) && $_SESSION['logged_in'] === true) {
    header('Location: dashboard.php');
    exit;
}

$error = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = isset($_POST['username']) ? trim($_POST['username']) : '';
    $password = isset($_POST['password']) ? $_POST['password'] : '';

    if ($username === $valid_username && password_verify($password, $valid_password_hash)) {
        session_regenerate_id(true);
        $_SESSION['logged_in'] = true;
        header('Location: dashboard.php');
        exit;
    } else {
        sleep(1);
        $error = 'Invalid username or password. Please try again.';
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<title>Login | TrackNest</title>
<style>
:root{--bg:#f7f9fc;--card:#fff;--ink:#14213d;--muted:#5b6b85;--brand:#2563eb;--brand2:#0ea5a4;--line:#e3e9f2;--soft:#eaf1ff}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
a{color:var(--brand);text-decoration:none}
.side{background:linear-gradient(140deg,var(--brand),var(--brand2));color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:space-between}
.logo{font-weight:800;font-size:24px;letter-spacing:-.5px}
.side h2{font-size:36px;line-height:1.2;letter-spacing:-.8px;margin-bottom:14px}
.side p{opacity:.92;max-width:420px;margin-bottom:26px}
.pts{list-style:none;display:grid;gap:12px}
.pts li{padding-left:30px;position:relative;font-size:15px}
.pts li:before{content:"\2713";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:12px;font-weight:700}
.side small{opacity:.8}
.main{display:grid;place-items:center;padding:30px}
.box{width:100%;max-width:400px}
.box h1{font-size:28px;letter-spacing:-.6px;margin-bottom:6px}
.box .sub{color:var(--muted);margin-bottom:26px}
label{display:block;font-size:14px;font-weight:600;margin:14px 0 6px}
.field{position:relative}
input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:15px;outline:none;transition:.15s}
input:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--soft)}
.toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;font-weight:600}
.btn{width:100%;margin-top:22px;padding:13px;background:var(--brand);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:.15s}
.btn:hover{background:#1d4ed8}
.err{background:#fff1f1;border:1px solid #ffd0d0;color:#b42318;padding:11px 14px;border-radius:10px;font-size:14px;margin-bottom:6px}
.back{display:block;text-align:center;margin-top:22px;font-size:14px;color:var(--muted)}
.back:hover{color:var(--brand)}
@media(max-width:820px){body{grid-template-columns:1fr}.side{display:none}}
</style>
</head>
<body>
<div class="side">
    <div class="logo">TrackNest</div>
    <div>
        <h2>Your campaigns, one clean dashboard.</h2>
        <p>Build tracking links, watch clicks come in and keep every redirect transparent.</p>
        <ul class="pts">
            <li>Generate links in one click</li>
            <li>See clicks for every offer</li>
            <li>Private, login protected data</li>
        </ul>
    </div>
    <small>&copy; 2026 TrackNest</small>
</div>

<div class="main">
    <div class="box">
        <h1>Welcome back</h1>
        <p class="sub">Log in to manage your tracking links.</p>

        <?php if ($error !== ''): ?>
            <div class="err"><?php echo htmlspecialchars($error); ?></div>
        <?php endif; ?>

        <form method="POST" autocomplete="off">
            <label for="username">Username</label>
            <input type="text" id="username" name="username" placeholder="Enter username" required autofocus>

            <label for="password">Password</label>
            <div class="field">
                <input type="password" id="password" name="password" placeholder="Enter password" required>
                <button type="button" class="toggle" onclick="togglePass()" id="tg">Show</button>
            </div>

            <button type="submit" class="btn">Log in</button>
        </form>
        <a class="back" href="/">&larr; Back to homepage</a>
    </div>
</div>

<script>
function togglePass(){
    var p=document.getElementById('password'),t=document.getElementById('tg');
    if(p.type==='password'){p.type='text';t.textContent='Hide';}
    else{p.type='password';t.textContent='Show';}
}
</script>
</body>
</html>
