// Step6Consent — authorization confirmation and legal consent.

function Step6Consent({ data, update, onBack, onSubmit, submitting, error }) {
  const { React } = window;
  const { useState } = React;

  const [errors, setErrors] = useState({});

  function handleSubmit() {
    const errs = window.IntakeSchema.validateStep6(data);
    setErrors(errs);
    if (Object.keys(errs).length === 0) onSubmit();
  }

  return (
    <div className="form-step">
      <div className="form-step-heading">step 6 of 6 — consent</div>

      <p style={{ fontSize: '13px', color: 'var(--muted)', marginBottom: '24px', lineHeight: '1.5' }}>
        before we begin, we need your explicit authorization and agreement to our terms.
      </p>

      <div className="form-group">
        <div className="consent-group">
          <div
            className={`consent-opt${data.authorizationConfirmed ? ' is-checked' : ''}`}
            onClick={() => update({ authorizationConfirmed: !data.authorizationConfirmed })}
          >
            <div className="consent-box">
              {data.authorizationConfirmed && (
                <svg width="10" height="8" viewBox="0 0 10 8" fill="none">
                  <path d="M1 4l3 3 5-6" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              )}
            </div>
            <div className="consent-text">
              I confirm I am authorized to commission security testing on the targets described above,
              and Sekura is permitted to perform active testing including non-destructive exploitation
              attempts against them.
            </div>
          </div>
          {errors.authorizationConfirmed && (
            <div className="form-error" style={{ marginLeft: '30px' }}>{errors.authorizationConfirmed}</div>
          )}

          <div
            className={`consent-opt${data.termsAccepted ? ' is-checked' : ''}`}
            onClick={() => update({ termsAccepted: !data.termsAccepted })}
          >
            <div className="consent-box">
              {data.termsAccepted && (
                <svg width="10" height="8" viewBox="0 0 10 8" fill="none">
                  <path d="M1 4l3 3 5-6" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              )}
            </div>
            <div className="consent-text">
              I agree to Sekura's{' '}
              <a href="#" onClick={e => e.stopPropagation()}>POC terms</a>{' '}
              and{' '}
              <a href="#" onClick={e => e.stopPropagation()}>privacy policy</a>.
            </div>
          </div>
          {errors.termsAccepted && (
            <div className="form-error" style={{ marginLeft: '30px' }}>{errors.termsAccepted}</div>
          )}

          <div
            className={`consent-opt${data.designPartnerOptIn ? ' is-checked' : ''}`}
            onClick={() => update({ designPartnerOptIn: !data.designPartnerOptIn })}
          >
            <div className="consent-box">
              {data.designPartnerOptIn && (
                <svg width="10" height="8" viewBox="0 0 10 8" fill="none">
                  <path d="M1 4l3 3 5-6" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              )}
            </div>
            <div className="consent-text" style={{ color: 'var(--muted)' }}>
              open to being referenced as a design partner if the POC is successful
              <span style={{ fontSize: '11px', display: 'block', marginTop: '2px', opacity: 0.7 }}>optional</span>
            </div>
          </div>
        </div>
      </div>

      {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={handleSubmit}
          disabled={submitting}
        >
          {submitting ? 'submitting...' : 'submit POC request →'}
        </button>
      </div>
    </div>
  );
}

window.Step6Consent = Step6Consent;