// Welcome screen. "Continue with Planning Center" starts the real OAuth flow
// (/api/auth/login) — Planning Center handles sign-in and consent on its own
// pages, then the worker sets the session cookie and returns here.
(function () {
  const { Icon } = window;
  const { safeTop } = window.NLUI;

  function Welcome({ onContinue, error }) {
    return (
      <div style={{ height: '100%', position: 'relative', overflow: 'hidden',
        background: 'linear-gradient(165deg, var(--nl-navy-700) 0%, var(--nl-navy-900) 70%)',
        display: 'flex', flexDirection: 'column' }}>
        {/* soft motif */}
        <div style={{ position: 'absolute', top: -80, right: -90, width: 320, height: 320,
          borderRadius: 999, background: 'radial-gradient(circle, rgba(145,202,65,0.18), transparent 70%)' }} />
        <div style={{ position: 'absolute', top: '34%', left: -120, fontFamily: 'var(--nl-font-serif)',
          fontWeight: 700, fontSize: 340, lineHeight: 1, color: 'rgba(255,255,255,0.035)', userSelect: 'none' }}>”</div>

        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center',
          padding: `${safeTop(48)} 34px 0`, position: 'relative', zIndex: 2 }}>
          <img src="assets/logo-reverse.png" alt="New Life Church" style={{ height: 52, alignSelf: 'flex-start', marginBottom: 4 }} />
          <div style={{ fontFamily: 'var(--nl-font-sans)', fontWeight: 700, fontSize: 12,
            letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--nl-leaf-500)', marginTop: 28 }}>
            New Life Church · Petersburg, MI
          </div>
          <h1 style={{ fontFamily: 'var(--nl-font-serif)', fontWeight: 600, fontSize: 44,
            lineHeight: 1.05, letterSpacing: '-0.02em', color: '#fff', margin: '14px 0 0' }}>
            Loving Down Walls.
          </h1>
          <p style={{ fontFamily: 'var(--nl-font-serif)', fontStyle: 'italic', fontSize: 18,
            lineHeight: 1.5, color: 'rgba(255,255,255,0.78)', margin: '18px 0 0', maxWidth: 300 }}>
            Sermons, photos, Scripture, and the life of our church family — gathered in one place.
          </p>
        </div>

        <div style={{ padding: '0 24px calc(env(safe-area-inset-bottom, 0px) + 40px)', position: 'relative', zIndex: 2 }}>
          {error && (
            <div style={{ marginBottom: 16, background: 'rgba(216,122,91,0.18)', border: '1px solid rgba(216,122,91,0.5)',
              borderRadius: 12, padding: '12px 14px', fontFamily: 'var(--nl-font-sans)', fontSize: 13.5,
              lineHeight: 1.5, color: '#F8DDCE' }}>
              {error}
            </div>
          )}
          <button onClick={onContinue} className="nl-btn nl-btn--accent nl-btn--lg" style={{ width: '100%' }}>
            <Icon name="lock" size={19} strokeWidth={1.9} />
            Continue with Planning Center
          </button>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'center',
            marginTop: 18, color: 'rgba(255,255,255,0.6)' }}>
            <Icon name="users" size={15} />
            <span style={{ fontFamily: 'var(--nl-font-sans)', fontSize: 12.5 }}>
              Members of New Life Church only
            </span>
          </div>
        </div>
      </div>
    );
  }

  window.NLAuth = { Welcome };
})();