// Sign-in
function AuthScreen({ nav, onSignIn }) {
  return (
    <section className="auth-page">
      <div className="auth-card">
        <div className="wordmark"><Brand variant="stacked" /></div>
        <h1>Sign in to continue</h1>
        <p className="sub">Use the same account you used to buy, and your library will be here.</p>

        <button className="auth-btn is-last" onClick={onSignIn}>
          <Icon.Google /> Continue with Google
        </button>
        <button className="auth-btn" onClick={onSignIn}>
          <Icon.Apple /> Continue with Apple
        </button>

        <div className="auth-hint">You last signed in with <strong>Google</strong>.</div>
        <div className="auth-fine">
          By continuing, you agree to the <a>Terms</a> and <a>Privacy Policy</a>.
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { AuthScreen });