import { useState } from "react";
import { useNavigate } from "react-router-dom";

function Login() {
  const nav = useNavigate();
  const [u, setU] = useState("");
  const [p, setP] = useState("");

  const login = (e) => {
    e.preventDefault();

    if (u === "admin" && p === "123") {
      localStorage.setItem("user", "logged"); // ✅ session
      nav("/dashboard");
    } else {
      alert("Wrong login");
    }
  };

  return (
    <div className="p" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
      <div className="w" style={{ maxWidth: 1000 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", overflow: "hidden", borderRadius: 32, background: "white", boxShadow: "0 20px 45px rgba(15, 23, 42, 0.18)" }}>
          <div style={{ background: "#0f172a", color: "white", padding: 32 }}>
            <p className="t" style={{ fontSize: 12, textTransform: "uppercase", letterSpacing: "0.3em", color: "#67e8f9" }}>EPMS</p>
            <h1 className="t" style={{ marginTop: 12, fontSize: 36, fontWeight: 700 }}>Employee Payroll Management System</h1>
            <p className="m" style={{ marginTop: 16, color: "#cbd5e1" }}>Simple login, clean pages, and easy record saving for beginners.</p>
            <div style={{ marginTop: 24, padding: 20, borderRadius: 24, background: "rgba(255,255,255,0.1)" }}>
              <p className="text-sm text-slate-200">Use these demo login details:</p>
              <p className="mt-3 font-semibold">Username: admin</p>
              <p className="font-semibold">Password: 123</p>
            </div>
          </div>

          <div style={{ padding: 32 }}>
            <form onSubmit={login}>
              <h2 className="t" style={{ fontSize: 30, fontWeight: 700, color: "#0f172a" }}>Login</h2>
              <p className="m" style={{ marginTop: 8 }}>Enter your username and password to continue.</p>

              <div className="f">
                <input
                  placeholder="Username"
                  onChange={e => setU(e.target.value)}
                  className="i"
                />

                <input
                  type="password"
                  placeholder="Password"
                  onChange={e => setP(e.target.value)}
                  className="i"
                />
              </div>

              <button className="b" style={{ marginTop: 24, width: "100%", background: "#0891b2", color: "white" }}>
                Login
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Login;
