// Login.jsx — first surface the user sees.
function Login({ onSignIn }) {
  const [email, setEmail] = React.useState("edwin@chromatic.design");
  const [password, setPassword] = React.useState("•••••••••••");
  return (
    <div className="login">
      <div className="login__card">
        <div className="login__brand">
          <ChromaticMark size={20}/>
          <span>Chromatic</span>
        </div>
        <div style={{ font: "600 22px/1.2 var(--font-sans)", letterSpacing: "-0.01em", marginBottom: 6 }}>Sign in</div>
        <div className="muted" style={{ fontSize: 13, marginBottom: 20 }}>Continue to your workspace. Theme tokens regenerate on save.</div>

        <form className="col" style={{ gap: 12 }} onSubmit={(e) => { e.preventDefault(); onSignIn(); }}>
          <label className="field">
            <span className="field__label">Email</span>
            <input className="field__input" type="email" value={email} onChange={(e) => setEmail(e.target.value)}/>
          </label>
          <label className="field">
            <span className="field__label">Password</span>
            <input className="field__input" type="password" value={password} onChange={(e) => setPassword(e.target.value)}/>
          </label>
          <button className="btn btn--primary" type="submit" style={{ justifyContent: "center", padding: "11px 14px" }}>
            Continue
            <Icon name="arrow-right" size={14}/>
          </button>
        </form>

        <div className="divider"/>
        <button className="btn btn--secondary" style={{ width: "100%", justifyContent: "center", padding: "10px 14px" }}>
          <Icon name="command" size={14}/>Continue with SSO
        </button>
        <div className="muted" style={{ fontSize: 12, marginTop: 16, textAlign: "center" }}>
          By signing in you accept the gradation laws.
        </div>
      </div>
    </div>
  );
}
window.Login = Login;