/* global React */

// ============== JOIN SUCCESS ==============
// Landing page after GoCardless redirects the visitor back from the
// Direct Debit mandate flow. Lives at /join-success (or #join-success in
// the SPA). Keep this page low-key and reassuring — the heavy lift is
// done; we just need to confirm and tell them what happens next.
function JoinSuccessPage({ setPage }) {
  return (
    <main>
      <div className="page-head">
        <div className="wrap" style={{ textAlign: 'center' }}>
          <div
            className="success-tick"
            style={{
              margin: '0 auto 24px',
              width: 72,
              height: 72,
              borderRadius: '50%',
              background: 'var(--na-green-100, #d9f5e3)',
              color: 'var(--na-green-700, #137a3a)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" width="32" height="32">
              <path d="M20 6L9 17l-5-5" />
            </svg>
          </div>
          <div className="crumb">Direct Debit confirmed</div>
          <h1>Thank you — your direct debit is set up.</h1>
          <p className="lede" style={{ maxWidth: '52ch', margin: '0 auto' }}>
            We'll be in touch shortly with next steps — your first training
            date, what to bring, and the safeguarding pack. Confirmation is on
            its way to your inbox.
          </p>
        </div>
      </div>

      <section className="section">
        <div className="wrap" style={{ maxWidth: 720 }}>
          <div className="confirm-card">
            <div className="eyebrow mb-3">What happens next</div>
            <div className="confirm-steps">
              <div className="confirm-step">
                <span className="confirm-step-num">01</span>
                <div>
                  <strong>Welcome email within the hour.</strong>
                  <span className="ink-soft"> Confirmation, safeguarding pack, and the date of your first session.</span>
                </div>
              </div>
              <div className="confirm-step">
                <span className="confirm-step-num">02</span>
                <div>
                  <strong>Coach will be in touch.</strong>
                  <span className="ink-soft"> Your head coach picks up the enquiry from the coach app and reaches out within a few days.</span>
                </div>
              </div>
              <div className="confirm-step">
                <span className="confirm-step-num">03</span>
                <div>
                  <strong>First Direct Debit on the 1st of next month.</strong>
                  <span className="ink-soft"> Protected by the Direct Debit Guarantee. Cancel any time, 30 days notice.</span>
                </div>
              </div>
            </div>

            <div
              className="flex gap-3"
              style={{ marginTop: 24, justifyContent: 'center', flexWrap: 'wrap' }}
            >
              <button className="btn btn-soft" onClick={() => setPage('home')}>Back to home</button>
              <button className="btn btn-accent" onClick={() => setPage('teams')}>See the teams →</button>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

window.JoinSuccessPage = JoinSuccessPage;