// IndieVertical — auth pages: signup (role choice) and login (demo personas).

function IvSignup() {
  const { api } = useStore();
  const [email, setEmail] = React.useState("");
  const [pw, setPw] = React.useState("");
  const join = (role) => {
    api.setRole(role, true);
    api.showToast(role === "dev"
      ? "Welcome! You are signed in as Tanglewood Games (demo developer account)."
      : "Welcome! You are signed in as Maren Holt of Pine & Sons (demo scout account).");
    ivGo("#/dashboard");
  };
  return (
    <div className="pp dir-marquee">
      <IvHeader />
      <div className="su-stage" style={{ flex: 1 }}>
        <div className="su-card">
          <h1>Create your free account</h1>
          <div className="f-row">
            <label className="f-label" htmlFor="su-email">Email</label>
            <input id="su-email" className="f-input" type="email" placeholder="you@studio.com" value={email} onChange={(e) => setEmail(e.target.value)} />
          </div>
          <div className="f-row">
            <label className="f-label" htmlFor="su-password">Password</label>
            <input id="su-password" className="f-input" type="password" placeholder="At least 8 characters" value={pw} onChange={(e) => setPw(e.target.value)} />
          </div>
          <div className="su-q">Who are you here as?</div>
          <div className="role2">
            <div className="role-card sel">
              <span className="r-t">I am a developer</span>
              <span className="r-d">I want to build a page for my game and be found by publishers.</span>
              <button type="button" className="btn btn-primary" onClick={() => join("dev")}>Continue as a developer</button>
            </div>
            <div className="role-card">
              <span className="r-t">I am a publisher or scout</span>
              <span className="r-d">I want to browse games and contact developers I am interested in.</span>
              <button type="button" className="btn btn-secondary" onClick={() => join("scout")}>Continue as a publisher or scout</button>
            </div>
          </div>
          <p className="login-note" style={{ marginTop: 18, textAlign: "center" }}>
            Already have an account? <a href="#/login">Log in</a>. This demo signs you into a sample account either way.
          </p>
        </div>
      </div>
      <IvFooter />
    </div>
  );
}

function IvLogin() {
  const { api } = useStore();
  const enter = (role) => {
    api.setRole(role, true);
    api.showToast(role === "dev"
      ? "Welcome back, Tanglewood Games."
      : "Welcome back, Maren.");
    ivGo("#/dashboard");
  };
  return (
    <div className="pp dir-marquee">
      <IvHeader />
      <div className="su-stage" style={{ flex: 1 }}>
        <div className="su-card">
          <h1>Log in</h1>
          <p className="login-note" style={{ textAlign: "center", marginBottom: 18 }}>
            This is a demo, so pick an account to continue as.
          </p>
          <div className="role2">
            <div className="role-card">
              <span className="r-t">Tanglewood Games</span>
              <span className="r-d">Developer account · Hollow Root and Mossback 2.</span>
              <button type="button" className="btn btn-primary" onClick={() => enter("dev")}>Log in as developer</button>
            </div>
            <div className="role-card">
              <span className="r-t">Maren Holt</span>
              <span className="r-d">Scout account · Pine &amp; Sons Publishing.</span>
              <button type="button" className="btn btn-secondary" onClick={() => enter("scout")}>Log in as scout</button>
            </div>
          </div>
          <p className="login-note" style={{ marginTop: 18, textAlign: "center" }}>
            New here? <a href="#/signup">Create a free account</a>.
          </p>
        </div>
      </div>
      <IvFooter />
    </div>
  );
}

Object.assign(window, { IvSignup, IvLogin });