/* ============================================================
   JTSense App — authentication screen
   ============================================================ */
function AuthScreen({ onLogin }) {
  const [email, setEmail] = useState("");
  const [pw, setPw] = useState("");
  const [err, setErr] = useState("");
  const [loading, setLoading] = useState(false);

  function submit(e) {
    e && e.preventDefault();
    setErr("");
    if (!email.trim() || !pw.trim()) { setErr("Enter an email and password to continue."); return; }
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email.trim())) { setErr("That doesn't look like a valid email."); return; }
    setLoading(true);
    setTimeout(() => {
      const name = email.split("@")[0].replace(/[._-]/g, " ").replace(/\b\w/g, c => c.toUpperCase());
      onLogin({ email: email.trim(), name: name || "Analyst" });
    }, 700);
  }

  function demo() {
    setEmail("demo@jtsense.ai");
    setPw("demo1234");
    setErr("");
  }

  return (
    <div className="auth">
      <a className="auth-back" href="index.html">← Back to site</a>
      <div className="auth-bg">
        <div className="grid" />
        <div className="orb o1" /><div className="orb o2" />
      </div>
      <form className="auth-card" onSubmit={submit}>
        <div className="logo-row">
          <img src="assets/favicon.png" alt="JTSense" />
          <span className="wm"><b>JT</b><span>SENSE</span></span>
        </div>
        <h1>Sign in</h1>
        <div className="sub">Access your realtime market intelligence dashboard.</div>

        <div className="field">
          <label>Email</label>
          <input type="email" placeholder="you@domain.com" value={email} onChange={e => setEmail(e.target.value)} autoComplete="username" />
        </div>
        <div className="field">
          <label>Password</label>
          <input type="password" placeholder="••••••••" value={pw} onChange={e => setPw(e.target.value)} autoComplete="current-password" />
        </div>
        {err && <div className="auth-err">{err}</div>}
        <button className="btn btn-primary" type="submit" disabled={loading}>
          {loading ? "Authenticating…" : "Enter JTSense →"}
        </button>
        <div className="auth-demo">No account? <b onClick={demo}>Use demo account</b></div>
        <div className="auth-foot">BUILT ON <b>JTVO</b> · POWERED BY <b>JTVO INFERENCE</b></div>
      </form>
    </div>
  );
}
window.AuthScreen = AuthScreen;