// ScanStep5Payment — final step: pay & start. Submits the order, then
// redirects to Stripe Checkout (the server returns checkoutUrl).

function ScanStep5Payment({ data, onBack, onSubmit, submitting, error, stepLabel }) {
  const { React } = window;

  const PRICING = window.ScanPricing || {};
  const plan = PRICING[data.scanType] || {};

  return (
    <div className="form-step">
      <div className="form-step-heading">{stepLabel}</div>

      <div className="review-section">
        <div className="success-summary">
          <div className="summary-row">
            <span className="summary-key">{plan.label || data.scanType}</span>
            <span className="summary-val">${plan.price || '—'} one-time</span>
          </div>
        </div>
      </div>

      <p style={{ fontSize: '13px', color: 'var(--muted)', margin: '16px 0 24px', lineHeight: '1.6' }}>
        you'll be redirected to Stripe to complete payment securely — we never see
        your card details. after payment{data.scanType === 'sast'
          ? ' your scan is queued immediately'
          : " you'll verify domain ownership, then the scan starts automatically"}.
        if we can't complete your scan, you get a full automatic refund.
      </p>

      {error && <div className="submit-error">{error}</div>}

      <div className="form-actions">
        <button className="btn-back" onClick={onBack} disabled={submitting}>← back</button>
        <button className={`btn-submit${submitting ? ' is-submitting' : ''}`}
          onClick={() => onSubmit()} disabled={submitting}>
          {submitting ? 'starting checkout…' : `pay $${plan.price || ''} & start scan →`}
        </button>
      </div>
    </div>
  );
}

window.ScanStep5Payment = ScanStep5Payment;