/* Sign-in Concept A — Marketing register.
   Warm paper canvas, brand-forward, with a midnight bedtime
   pane on the right that previews what the user is about to step into. */

function SignInA() {
  return (
    <div className="si paper" data-screen-label="Sign-in · A — Paper / brand-forward">
      <div className="pane">
        <div className="card">
          <div className="brand">
            <span className="brand-mark">{Icon.mark}</span>
            <span className="brand-name">Ordentus</span>
          </div>
          <div className="eyebrow">Welcome back</div>
          <h1>One page<br/>for your day.</h1>
          <p className="lede">Sign in to see your calendars and your body, beside each other, every morning.</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">
            New here? <a>Create an account</a> · <a>Forgot password</a>
          </p>

          <p className="legal">
            By signing in you agree to the <a>terms</a> and <a>privacy approach</a>.
            We never sell your data and ship without third-party trackers.
          </p>
        </div>
      </div>

      <div className="stage">
        <div className="eyebrow2">Tonight</div>
        <h2><span className="dim">Welcome back. </span>Your page is waiting.</h2>
        <p>Your week, last night's sleep, and tonight's bedtime — beside each other, the moment you open the laptop.</p>
        <div className="preview">
          <div className="bedtime-mini">
            <div>
              <div className="lbl">Tonight's bedtime</div>
              <div className="time">10:30<small> PM</small></div>
              <div className="meta">Based on your 7:15 AM tomorrow</div>
            </div>
            <div className="right">First event<b>CS 240 · 9:00 AM</b></div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.SignInA = SignInA;