// MISLAK — Auth (login only) — visual only, non-functional
function AuthPage() {
  window.useLang();

  return (
    <section className="auth-wrap">
      <div className="container">
        <div className="auth-card">
          <a href="#/" className="auth-brand">
            <img src="assets/mislak-logo-purple.png" alt="مسلاك · MISLAK" />
          </a>

          <h1 className="auth-title">
            {window.L("تسجيل الدخول إلى حسابك", "Sign in to your account")}
          </h1>
          <p className="auth-sub">
            {window.L("أهلاً بعودتك. أدخل بياناتك للمتابعة.", "Welcome back. Enter your details to continue.")}
          </p>

          <form className="auth-form" onSubmit={(e) => e.preventDefault()}>
            <label className="auth-field">
              <span>{window.L("البريد الإلكتروني", "Email")}</span>
              <input type="email" placeholder="name@company.com" dir="ltr" />
            </label>
            <label className="auth-field">
              <span>{window.L("كلمة المرور", "Password")}</span>
              <input type="password" placeholder="••••••••" dir="ltr" />
            </label>

            <div className="auth-row">
              <label className="auth-check">
                <input type="checkbox" />
                <span>{window.L("تذكرني", "Remember me")}</span>
              </label>
              <a href="#/login" className="auth-link">{window.L("نسيت كلمة المرور؟", "Forgot password?")}</a>
            </div>

            <button type="submit" className="btn btn-primary auth-submit">
              {window.L("تسجيل الدخول", "Sign in")}
            </button>
          </form>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { AuthPage });