/* Sign-in Concept B — Product grey, in-app feel.
   Floating card on the Apple grey canvas. Quieter than Concept A —
   feels like opening a settings sheet rather than a marketing site. */

function SignInB() {
  return (
    <div className="si grey" data-screen-label="Sign-in · B — Product grey / focused">
      <div className="card">
        <div className="brand">
          <span className="brand-mark">{Icon.mark}</span>
          <span className="brand-name">Ordentus</span>
        </div>
        <h1>Sign in to continue</h1>
        <p className="lede">Your one page is on the other side.</p>

        <form className="form" onSubmit={e => e.preventDefault()}>
          <div className="field">
            <label>Username</label>
            <input type="text" placeholder="peteyparkes" autoComplete="username" />
          </div>
          <div className="field">
            <label>Password</label>
            <input type="password" placeholder="••••••••••" autoComplete="current-password" />
          </div>
          <button className="submit" type="submit">Sign in</button>
        </form>

        <p className="switch">
          Don't have an account? <a>Create one</a>
        </p>

        <p className="receipt">
          <span>no_third_party_trackers</span> ·
          <span>no_ad_networks</span> ·
          <span>no_data_resale</span>
        </p>
      </div>
    </div>
  );
}

window.SignInB = SignInB;