// Sign in / Sign up / Onboarding screens

const AuthScreen = ({ onDone }) => {
  const [mode, setMode] = React.useState("landing"); // landing | signin | signup
  const [email, setEmail] = React.useState("");
  const [pass, setPass] = React.useState("");
  const [name, setName] = React.useState("");

  return (
    <div className="screen" style={{ background: "#05080F", color: "#fff" }}>
      <StatusBar />
      {/* Backdrop blob */}
      <div
        style={{
          position: "absolute",
          top: -80,
          left: -60,
          width: 320,
          height: 320,
          background:
            "radial-gradient(circle, rgba(245,166,35,0.35), transparent 60%)",
          filter: "blur(30px)",
          pointerEvents: "none",
        }}
      />
      <div
        style={{
          position: "absolute",
          top: 180,
          right: -100,
          width: 280,
          height: 280,
          background:
            "radial-gradient(circle, rgba(58,86,176,0.6), transparent 60%)",
          filter: "blur(30px)",
          pointerEvents: "none",
        }}
      />

      <div style={{ padding: "32px 28px 0", position: "relative", zIndex: 1 }}>
        {/* Logo mark */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: 12,
            marginBottom: 48,
            width: 44,
            height: 44,
          }}
        >
          <img
            src="src/logo.png"
            alt="IBMEC"
            style={{ borderRadius: "50%", width: 44, height: 44 }}
          />
        </div>

        {mode === "landing" && (
          <div className="fade-in">
            <h1
              style={{
                fontSize: 44,
                lineHeight: 1,
                margin: "0 0 20px",
                fontWeight: 600,
                letterSpacing: "-0.03em",
              }}
            >
              Forma
              <br />
              <span
                className="serif"
                style={{
                  fontStyle: "italic",
                  fontWeight: 400,
                  color: "#F5A623",
                }}
              >
                Tour
              </span>
            </h1>
            <p
              style={{
                fontSize: 16,
                lineHeight: 1.5,
                color: "rgba(255,255,255,0.6)",
                margin: "0 0 48px",
                maxWidth: 280,
              }}
            >
              Uma semana para decidir o próximo passo. Workshops, talks e um
              campus cheio de gente com as mesmas dúvidas que você.
            </p>

            <div
              style={{
                display: "flex",
                flexDirection: "column",
                gap: 10,
                marginBottom: 32,
              }}
            >
              <button
                className="btn btn-primary"
                onClick={() => setMode("signup")}
              >
                Criar conta
              </button>
              <button
                className="btn btn-ghost"
                onClick={() => setMode("signin")}
              >
                Já tenho cadastro
              </button>
            </div>
          </div>
        )}

        {(mode === "signin" || mode === "signup") && (
          <div className="fade-in">
            <button
              onClick={() => setMode("landing")}
              className="btn btn-nav"
              style={{ marginBottom: 20 }}
            >
              <IconChevronLeft size={18} />
            </button>
            <h2
              style={{
                fontSize: 28,
                margin: "0 0 8px",
                fontWeight: 600,
                letterSpacing: "-0.02em",
              }}
            >
              {mode === "signup" ? "Crie sua conta" : "Bem-vindo de volta"}
            </h2>
            <p
              style={{
                fontSize: 14,
                color: "var(--text-dim)",
                margin: "0 0 28px",
              }}
            >
              {mode === "signup"
                ? "Leva menos de um minuto."
                : "Entre com seu e-mail e senha."}
            </p>

            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {mode === "signup" && (
                <div>
                  <label
                    className="mono"
                    style={{
                      fontSize: 10,
                      color: "var(--text-mute)",
                      letterSpacing: "0.12em",
                      marginBottom: 6,
                      display: "block",
                    }}
                  >
                    NOME COMPLETO
                  </label>
                  <input
                    className="input"
                    placeholder="Ana Beatriz Souza"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                  />
                </div>
              )}
              <div>
                <label
                  className="mono"
                  style={{
                    fontSize: 10,
                    color: "var(--text-mute)",
                    letterSpacing: "0.12em",
                    marginBottom: 6,
                    display: "block",
                  }}
                >
                  E-MAIL
                </label>
                <input
                  className="input"
                  type="email"
                  placeholder="voce@colegio.com.br"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                />
              </div>
              <div>
                <label
                  className="mono"
                  style={{
                    fontSize: 10,
                    color: "var(--text-mute)",
                    letterSpacing: "0.12em",
                    marginBottom: 6,
                    display: "block",
                  }}
                >
                  SENHA
                </label>
                <input
                  className="input"
                  type="password"
                  placeholder="•••••••••"
                  value={pass}
                  onChange={(e) => setPass(e.target.value)}
                />
              </div>

              {mode === "signin" && (
                <button
                  style={{
                    background: "none",
                    border: "none",
                    color: "var(--amber)",
                    textAlign: "right",
                    padding: "4px 2px",
                    font: "inherit",
                    fontSize: 13,
                    cursor: "pointer",
                  }}
                >
                  Esqueci minha senha
                </button>
              )}

              <button
                className="btn btn-primary"
                style={{ marginTop: 12 }}
                onClick={onDone}
              >
                {mode === "signup" ? "Criar conta e continuar" : "Entrar"}
                <IconArrowRight size={18} />
              </button>
            </div>

            {mode === "signup" && (
              <p
                style={{
                  fontSize: 11,
                  color: "var(--text-mute)",
                  lineHeight: 1.5,
                  margin: "20px 0 0",
                  textAlign: "center",
                }}
              >
                Ao criar sua conta você concorda com os{" "}
                <span
                  style={{
                    color: "var(--text-dim)",
                    textDecoration: "underline",
                  }}
                >
                  termos
                </span>{" "}
                e a{" "}
                <span
                  style={{
                    color: "var(--text-dim)",
                    textDecoration: "underline",
                  }}
                >
                  política de privacidade
                </span>{" "}
                do Forma Tour.
              </p>
            )}
          </div>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { AuthScreen });