// Login screen — Metal Padrão

function LoginScreen({ onLogin }) {
  const [email, setEmail] = React.useState("admin@metalpadrao.com.br");
  const [senha, setSenha] = React.useState("metalpadrao");
  const [loading, setLoading] = React.useState(false);
  const [erro, setErro] = React.useState("");

  const handle = (e) => {
    e.preventDefault();
    setErro("");
    if (!email || !senha) { setErro("Informe e-mail e senha"); return; }
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      onLogin({
        nome: email === "admin@metalpadrao.com.br" ? "Cristiane Schmidt" : email.split("@")[0],
        email,
        perfil: "Gestor",
      });
    }, 600);
  };

  return (
    <div className="login">
      <div className="login__brand">
        <div className="login__brand-top" style={{ position: "relative", zIndex: 1 }}>
          <img src="assets/logo-metal-padrao.png" alt="Metal Padrão" className="login__logo" />
        </div>

        <div className="login__copy">
          <h1>
            Esquadrias, estruturas e <em>fachadas</em> com o padrão Metal Padrão.
          </h1>
          <p>
            Sistema interno de vendas — substituindo a planilha do dia-a-dia.
            Cadastro de projetos, controle de faturamento por CNPJ e entradas financeiras
            tudo num lugar só.
          </p>
        </div>

        <div className="login__meta">
          <span>Blumenau · SC</span>
          <span>v 0.1 — Beta</span>
        </div>
      </div>

      <div className="login__form-wrap">
        <form className="login__form" onSubmit={handle}>
          <h2>Acessar o sistema</h2>
          <p className="sub">Use suas credenciais corporativas para entrar.</p>

          <Field label="E-mail" required>
            <Input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="seu@metalpadrao.com.br" autoFocus />
          </Field>

          <Field label="Senha" required>
            <Input type="password" value={senha} onChange={e => setSenha(e.target.value)} placeholder="••••••••" />
          </Field>

          {erro && <div className="field__error" style={{ marginBottom: 12 }}>{erro}</div>}

          <Button type="submit" variant="primary" full disabled={loading}>
            {loading ? "Entrando..." : "Entrar"}
          </Button>

          <div className="login__demo">
            <b>Demo:</b> qualquer e-mail/senha entra.<br />
            Sugestão: <code>admin@metalpadrao.com.br</code> · <code>metalpadrao</code>
          </div>
        </form>
      </div>
    </div>
  );
}

window.LoginScreen = LoginScreen;