// Login Page — minimal, centered card on warm gradient
function LoginPage({ onNav, onLogin }) {
  return (
    <main className="login-page">
      <div className="login-bg" aria-hidden="true"></div>
      <div className="login-card">
        <BloomMark size={26} />
        <div className="login-label">Ambassador Portal</div>
        <button className="btn btn-x" onClick={() => window._api.login()}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" /></svg>
          Sign in with X
        </button>
        <a href="#/program" className="login-link" onClick={(e) => {e.preventDefault();onNav('program');}}>
          New here? Learn about The Field <Icon name="arrow-right" size={14} />
        </a>
      </div>
      <div className="login-foot mono">
        <span></span>
      </div>
    </main>);

}
window.LoginPage = LoginPage;