// Giving — hands off to the church's secure online giving page.
// (Native in-app payment is deliberately out of scope: web checkout keeps
// PCI burden and app-store payment review off the table.)
(function () {
  const { Icon } = window;
  const { Screen } = window.NLUI;
  const D = window.NLData;

  function Give() {
    return (
      <Screen header={{ variant: 'large', title: 'Give' }}>
        <div style={{ padding: '0 20px' }}>
          <p style={{ fontFamily: 'var(--nl-font-serif)', fontStyle: 'italic', fontSize: 16, lineHeight: 1.5,
            color: 'var(--nl-ink-600)', margin: '0 0 4px' }}>
            “Each one should give what he has decided in his heart, for God loves a cheerful giver.”
          </p>
          <div style={{ fontFamily: 'var(--nl-font-sans)', fontWeight: 700, fontSize: 11.5, letterSpacing: '0.1em',
            textTransform: 'uppercase', color: 'var(--nl-clay-700)', marginBottom: 22 }}>2 Corinthians 9:7</div>

          <div style={{ borderRadius: 18, overflow: 'hidden', position: 'relative', padding: 24,
            background: 'linear-gradient(150deg, var(--nl-navy-700), var(--nl-navy-900))' }}>
            <div style={{ position: 'absolute', top: -34, right: -6, fontFamily: 'var(--nl-font-serif)', fontWeight: 700,
              fontSize: 170, lineHeight: 1, color: 'rgba(145,202,65,0.12)' }}>”</div>
            <div className="nl-eyebrow" style={{ color: 'var(--nl-leaf-500)' }}>Generosity changes lives</div>
            <h2 style={{ fontFamily: 'var(--nl-font-serif)', fontWeight: 600, fontSize: 26, color: '#fff', margin: '10px 0 8px', lineHeight: 1.15 }}>
              Partner with what God is doing at New Life
            </h2>
            <p style={{ fontFamily: 'var(--nl-font-sans)', fontSize: 14, lineHeight: 1.6, color: 'rgba(255,255,255,0.75)', margin: '0 0 20px' }}>
              Give a one-time gift or set up recurring giving — securely, in about a minute.
            </p>
            <a href={D.config.givingUrl} target="_blank" rel="noopener"
              className="nl-btn nl-btn--accent nl-btn--lg" style={{ width: '100%', boxSizing: 'border-box', textDecoration: 'none' }}>
              <Icon name="heart" size={18} fill="currentColor" /> Give online
            </a>
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 7, justifyContent: 'center', marginTop: 16, color: 'var(--nl-ink-400)' }}>
            <Icon name="lock" size={14} />
            <span style={{ fontFamily: 'var(--nl-font-sans)', fontSize: 12 }}>Opens our secure giving page</span>
          </div>

          <div style={{ marginTop: 26, background: 'var(--nl-white)', border: '1px solid var(--nl-border)', borderRadius: 14, padding: 18 }}>
            <div style={{ fontFamily: 'var(--nl-font-sans)', fontWeight: 600, fontSize: 15, color: 'var(--nl-navy-900)', marginBottom: 6 }}>
              Other ways to give
            </div>
            <p style={{ fontFamily: 'var(--nl-font-sans)', fontSize: 13.5, lineHeight: 1.6, color: 'var(--nl-ink-600)', margin: 0 }}>
              Drop a gift in the offering on Sunday, or mail a check to the church office.
              Every gift, of every size, helps us love our city well.
            </p>
          </div>
        </div>
      </Screen>
    );
  }

  window.NLGive = { Give };
})();