// ScanStep5Payment — payment step placeholder (skipped by default).

function ScanStep5Payment({ onNext, onBack, stepLabel }) {
  const { React } = window;

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

      <div style={{ textAlign: 'center', padding: '40px 0' }}>
        <p style={{ fontSize: '14px', color: 'var(--muted)', marginBottom: '16px' }}>
          payment processing is not yet enabled.
        </p>
        <p style={{ fontSize: '13px', color: 'var(--muted)' }}>
          proceed to authorization — billing will be handled separately.
        </p>
      </div>

      <div className="form-actions">
        <button className="btn-back" onClick={onBack}>← back</button>
        <button className="btn-next" onClick={onNext}>next →</button>
      </div>
    </div>
  );
}

window.ScanStep5Payment = ScanStep5Payment;