// AuthPage.jsx
function AuthPage() {
  return (
    <div style={{ maxWidth: 720, margin: '40px auto', color: '#e6eef8', padding: 20 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
        <div>
          <h1 style={{ margin: 0 }}>MedTech Blockchain Academy</h1>
          <p style={{ marginTop: 6, color: '#9fb0c8' }}>Войдите или зарегистрируйтесь, чтобы продолжить</p>
        </div>
        <div>
          <button className="registration-button" onClick={() => (window.location.hash = '#/login')} style={{ marginRight: 8 }}>
            Войти
          </button>
          <button className="registration-button" onClick={() => (window.location.hash = '#/register')}>
            Зарегистрироваться
          </button>
        </div>
      </div>

      <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <div className="card" style={{ padding: 16 }}>
          <h3>Уже есть аккаунт?</h3>
          <p className="muted">Войдите, чтобы открыть личный кабинет и продолжить обучение.</p>
          <button className="registration-button" onClick={() => (window.location.hash = '#/login')}>Войти</button>
        </div>

        <div className="card" style={{ padding: 16 }}>
          <h3>Новый пользователь</h3>
          <p className="muted">Зарегистрируйтесь — подтвердите email и начните обучение.</p>
          <button className="registration-button" onClick={() => (window.location.hash = '#/register')}>Зарегистрироваться</button>
        </div>
      </div>
    </div>
  );
}