/* SINAIS FIFA — Login screen (GoldeBet credentials) */

const { useState: useS_L } = React;

const Icon = ({ d, size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    {d}
  </svg>
);

const LoginScreen = ({ onLogin }) => {
  const [email, setEmail] = useS_L('');
  const [pwd, setPwd] = useS_L('');
  const [agree, setAgree] = useS_L(false);
  const [busy, setBusy] = useS_L(false);
  const [err, setErr] = useS_L('');

  const ready = email.includes('@') && pwd.length >= 4 && agree;

  const submit = async (e) => {
    e.preventDefault();
    if (!ready) return;
    setBusy(true);
    setErr('');
    try {
      const u = await window.loginRequest(email, pwd, agree);
      onLogin(u);
    } catch (ex) {
      setErr(ex.message || 'falha no login');
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="login-stage gridbg">
      <div className="login-card">
        {/* LEFT — Como Acessar */}
        <div className="login-side left">
          <h1 className="login-h1">Como Acessar o App</h1>
          <p className="login-sub">Siga estes passos simples para ter acesso completo às ferramentas exclusivas</p>

          <div className="steps">
            <div className="step">
              <div className="step-num">1</div>
              <div>
                <div className="step-title">Cadastre-se na GoldeBet</div>
                <div className="step-body">
                  Crie sua conta gratuita na plataforma. É rápido e você ganha acesso ao App, <a href={AFFIL.signupUrl} target="_blank" rel="noreferrer">faça seu cadastro aqui!</a>
                </div>
              </div>
            </div>
            <div className="step">
              <div className="step-num">2</div>
              <div>
                <div className="step-title">Faça seu Primeiro Depósito</div>
                <div className="step-body">
                  Deposite <strong>mínimo R$ 5,00</strong> para ativar sua conta e ter acesso ao aplicativo.
                </div>
              </div>
            </div>
            <div className="step">
              <div className="step-num">3</div>
              <div>
                <div className="step-title">Complete a Verificação KYC</div>
                <div className="step-body">
                  Envie seus documentos para validação e tenha <a>acesso total</a> às funcionalidades.
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* RIGHT — Login form */}
        <div className="login-side">
          <h2 className="login-h2">Login do Aplicativo</h2>
          <div className="login-cap">Entre com suas credenciais da {AFFIL.brand}</div>

          <div className="notice">
            <div>
              <b>Atenção:</b> Use o mesmo email e senha da sua conta {AFFIL.brand} para acessar o aplicativo. <a className="login-link" href={AFFIL.signupUrl} target="_blank" rel="noreferrer">faça seu cadastro aqui!</a>
            </div>
          </div>

          <form onSubmit={submit}>
            <div className="field-l">
              <label htmlFor="email">Email ou Login</label>
              <input id="email" type="text" placeholder="seu@email.com" value={email} onChange={e=>setEmail(e.target.value)} autoComplete="username" />
            </div>
            <div className="field-l">
              <label htmlFor="pwd">Senha</label>
              <input id="pwd" type="password" placeholder="••••••••••••" value={pwd} onChange={e=>setPwd(e.target.value)} autoComplete="current-password" />
            </div>

            <label className="checkrow">
              <input type="checkbox" checked={agree} onChange={e=>setAgree(e.target.checked)} />
              <span>Concordo com os <a className="login-link">termos de uso</a> e as <a className="login-link">políticas de privacidade</a>.</span>
            </label>

            <button className="btn-primary" type="submit" disabled={!ready || busy}>
              {busy ? <>Verificando<span className="loading-dots"><i/><i/><i/></span></> : <>→ Entrar no Aplicativo</>}
            </button>
            {err && <div className="login-err" style={{color:'#ff6b6b', fontSize:12, marginTop:8}}>{err}</div>}
          </form>

          <div className="login-foot">
            Não tem conta? <a className="login-link" href={AFFIL.signupUrl} target="_blank" rel="noreferrer">Cadastre-se na {AFFIL.brand}</a>
          </div>
        </div>
      </div>
    </div>
  );
};

window.LoginScreen = LoginScreen;