/* global React, t, PATREON_LOGIN_URL */

function LoginPage({ setPage }) {
  return (
    <div className="container fade-in" style={{ maxWidth: 440 }}>
      <div className="card" style={{ padding: 32, marginTop: 32 }}>
        <div className="eyebrow" style={{ color: 'var(--pink)' }}>{t('login.eyebrow')}</div>
        <h2 className="h-display" style={{ fontSize: 28, marginTop: 8 }}>{t('login.title')}</h2>
        <p style={{ color: 'var(--muted)', marginTop: 10 }}>{t('login.sub')}</p>

        <div style={{ display: 'grid', gap: 8, marginTop: 22 }}>
          <button
            className="btn btn--primary btn--lg btn--full"
            style={{ background: 'rgba(255,88,66,0.10)', borderColor: 'rgba(255,120,95,0.3)' }}
            onClick={() => { window.location.href = PATREON_LOGIN_URL; }}
          >
            {t('login.with_patreon')}
          </button>
        </div>

        <p style={{ color: 'var(--subtle)', marginTop: 16, fontSize: 12, lineHeight: 1.45 }}>
          We only use Patreon authentication to verify your account and sync your Shaste progress.
        </p>

        <button
          onClick={() => setPage('home')}
          style={{ background: 'transparent', border: 0, color: 'var(--subtle)', marginTop: 14, fontSize: 12, cursor: 'pointer' }}
        >
          {t('action.back_to_hub')}
        </button>
      </div>
    </div>
  );
}