function Login({ onNav }) {
  const roles = ["Admin", "Project Manager", "Field Team Member", "Contractor", "Finance Team"];
  const [role, setRole] = React.useState("Project Manager");
  const roleId = "login-role";
  const passwordId = "login-password";
  const signIn = (event) => {
    event.preventDefault();
    localStorage.setItem("constructpro.role", role);
    window.ConstructProData.showToast(`Signed in as ${role}.`);
    onNav(role.includes("Field") || role === "Contractor" ? "fieldTeams" : "dashboard");
  };

  return (
    <div className="fade-in mx-auto max-w-3xl">
      <Card className="overflow-hidden" pad="p-0">
        <div className="grid grid-cols-1 md:grid-cols-[.9fr_1.1fr]">
          <div className="bg-slate-900 p-8 text-white">
            <div className="mb-8 flex h-12 w-12 items-center justify-center rounded-xl bg-cta"><Icons.project size={26}/></div>
            <h1 className="text-3xl font-bold">ConstructPro</h1>
            <p className="mt-3 text-sm text-white/70">Role-based access for admin, project, finance, and field workflows.</p>
          </div>
          <form onSubmit={signIn} className="p-8">
            <label className="mb-4 block" htmlFor={roleId}>
              <span className="mb-1 block text-xs font-bold uppercase tracking-wider text-text-muted">Role</span>
              <select id={roleId} value={role} onChange={(event) => setRole(event.target.value)} className="w-full rounded-lg border border-border-light px-3 py-2 transition-colors focus:border-cta">
                {roles.map((item) => <option key={item}>{item}</option>)}
              </select>
            </label>
            <label className="mb-6 block" htmlFor={passwordId}>
              <span className="mb-1 block text-xs font-bold uppercase tracking-wider text-text-muted">Password</span>
              <input id={passwordId} type="password" value="password" readOnly className="w-full rounded-lg border border-border-light px-3 py-2 transition-colors focus:border-cta"/>
            </label>
            <Button type="submit" className="w-full">Enter Workspace</Button>
          </form>
        </div>
      </Card>
    </div>
  );
}

Object.assign(window, { Login });