// ScanStep1Identity — customer identity for managed scan (trimmed: 3 fields).

function ScanStep1Identity({ data, update, onNext, stepLabel }) {
  const { React } = window;
  const { useState } = React;

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

  function handleNext() {
    const errs = window.ManagedScanSchema.validateStep1(data);
    setErrors(errs);
    if (Object.keys(errs).length === 0) onNext();
  }

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

      <div className="form-group">
        <label className="form-label">full name</label>
        <input className="form-field" type="text" placeholder="jane smith"
          value={data.fullName || ''} onChange={e => update({ fullName: e.target.value })} />
        {errors.fullName && <div className="form-error">{errors.fullName}</div>}
      </div>

      <div className="form-group">
        <label className="form-label">work email</label>
        <input className="form-field" type="email" placeholder="jane@company.com"
          value={data.workEmail || ''} onChange={e => update({ workEmail: e.target.value })} />
        {errors.workEmail && <div className="form-error">{errors.workEmail}</div>}
        <div style={{ fontSize: '12px', color: 'var(--muted)', marginTop: '6px' }}>
          your report download link is sent here.
        </div>
      </div>

      <div className="form-group">
        <label className="form-label">company</label>
        <input className="form-field" type="text" placeholder="acme corp"
          value={data.company || ''} onChange={e => update({ company: e.target.value })} />
        {errors.company && <div className="form-error">{errors.company}</div>}
      </div>

      <div className="form-actions">
        <span />
        <button className="btn-next" onClick={handleNext}>next <span>→</span></button>
      </div>
    </div>
  );
}

window.ScanStep1Identity = ScanStep1Identity;