{sections[section]} {section + 1} / {sections.length}

{sections.map((s, i) => (

))}

); } /* ---------------- step header ---------------- */ function StepHead({ title, sub, eyebrow = 'BEVRI' }) { return (

{eyebrow}

{title}

{sub &&

{sub}

}

); } /* ---------------- option / select card ---------------- */ function Opt({ icon, title, sub, selected, onClick, twoUp }) { return ( ); } /* ---------------- tooltip (inline ? popover) ---------------- */ function Tooltip({ text }) { const [open, setOpen] = useSH(false); return ( {open && {text}} ); } /* ---------------- select dropdown ---------------- */ function Select({ label, optional, value, onChange, options, placeholder = 'Select…', error, tooltip }) { // options: array of strings OR {value,label} const opts = (options || []).map(o => typeof o === 'string' ? { value: o, label: o } : o); return ( {label && {label}{optional && · optional}{tooltip && }} {I.chev(18)} {error && {error}} ); } /* ---------------- form field ---------------- */ function Field({ label, optional, value, onChange, placeholder, type = 'text', error, prefix, suffix, inputMode, textarea, onBlur, hint, tooltip, autofilled }) { return ( {label}{optional && · optional} {tooltip && } {hint && {hint}} {textarea ?

onChange(e.target.value)} onBlur={onBlur} placeholder={placeholder} />
        : <span className={'input-prefix' + (suffix ? ' input-suffix' : '')}>
            {prefix && <span>{prefix}</span>}
            <input className={'input' + (error ? ' err' : '')} type={type} value={value}
              inputMode={inputMode}
              onChange={e => onChange(e.target.value)} onBlur={onBlur} placeholder={placeholder} />
            {suffix && <span>{suffix}</span>}
          </span>}
      {error && <span className="field-err">{error}</span>}
    </label>
  );
}

/* ---------------- checkbox ---------------- */
function CheckRow({ checked, onToggle, children }) {
  return (
    <div className="agree-row" onClick={onToggle} role="checkbox" aria-checked={checked} tabIndex={0}
      onKeyDown={e => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); onToggle(); } }}>
      <span className={'checkbox' + (checked ? ' on' : '')}>{I.check(14)}</span>
      <span className="agree-text">{children}</span>
    </div>
  );
}

/* ---------------- nav footer ---------------- */
function NavFooter({ onBack, onNext, nextLabel = 'Next', nextDisabled, backLabel = 'Back' }) {
  return (
    <div className="step-nav">
      <button className="btn btn-secondary" onClick={onBack}>{I.back(16)}{backLabel}</button>
      <button className="btn btn-primary" onClick={onNext} disabled={nextDisabled}>
        {nextLabel}{I.arrow(16)}
      </button>
    </div>
  );
}

/* ---------------- Bevri Operator helper popover ---------------- */
function Helper({ label = "What's the difference?", items }) {
  const [open, setOpen] = useStateUI(false);
  return (
    <div className="helper-wrap">
      <button className={'helper-btn' + (open ? ' open' : '')} onClick={() => setOpen(o => !o)}>
        <span className="ava"><BrainMark size={18} /></span>
        {label}
      </button>
      {open && (
        <div className="helper-pop">
          <div className="helper-pop-head">
            <span className="ava"><BrainMark size={22} /></span>
            <span><b style={{ display: 'block' }}>Bevri Operator</b><span className="mono">here to help</span></span>
          </div>
          <dl>
            {items.map(it => (
              <div key={it.t}><dt>{it.t}</dt><dd>{it.d}</dd></div>
            ))}
          </dl>
        </div>
      )}
    </div>
  );
}

/* ---------------- expandable help link ---------------- */
function HelpLink({ q, a }) {
  const [open, setOpen] = useStateUI(false);
  return (
    <div>
      <button className={'help-link' + (open ? ' open' : '')} onClick={() => setOpen(o => !o)}>
        {q}<span className="chev">{I.chev(16)}</span>
      </button>
      {open && <div className="help-body">{a}</div>}
    </div>
  );
}

/* ---------------- ZIP -> city/state autofill ---------------- */

// Portal's own multi-source lookup (Zippopotam -> FCC -> Census), free and
// keyless, already used by the LOS. Cached per ZIP; fetch failures are not
// cached so a flaky network can retry.
const __bevriZipCache = {};
function bevriZipLookup(zip) {
  const z = String(zip || '').replace(/\D/g, '');
  if (z.length !== 5) return Promise.resolve(null);
  if (__bevriZipCache[z] !== undefined) return Promise.resolve(__bevriZipCache[z]);
  return fetch('/api/location/lookup?zip=' + z, { credentials: 'same-origin' })
    .then(r => (r.ok ? r.json() : null))
    .then(d => {
      const hit = d && d.city && d.state ? { city: d.city, state: d.state, county: d.county || '' } : null;
      __bevriZipCache[z] = hit;
      return hit;
    })
    .catch(() => null);
}

/**
 * ZIP input that looks up city/state when it reaches 5 digits and hands the
 * hit to onFill. The parent applies its own policy (fill empty fields,
 * replace a previous autofill, never touch hand-typed values). Shows a small
 * spinner in the field while the lookup is in flight; an unknown ZIP fails
 * silently and the borrower just types city/state as before.
 */
function ZipField({ value, onChange, onFill, error, placeholder = '94404', label = 'ZIP code' }) {
  const { useState: useZF, useEffect: useZFE, useRef: useZFR } = React;
  const [busy, setBusy] = useZF(false);
  const doneRef = useZFR('');
  const onFillRef = useZFR(onFill);
  onFillRef.current = onFill;
  useZFE(() => {
    const z = String(value || '').replace(/\D/g, '');
    if (z.length !== 5 || doneRef.current === z) { setBusy(false); return undefined; }
    let alive = true;
    setBusy(true);
    bevriZipLookup(z).then(hit => {
      if (!alive) return;
      setBusy(false);
      doneRef.current = z;
      if (hit && onFillRef.current) onFillRef.current(hit);
    });
    return () => { alive = false; };
  }, [value]);
  return (
    <Field label={label} inputMode="numeric" value={value} onChange={onChange} placeholder={placeholder}
      error={error} suffix={busy ? <span className="zip-spin" aria-label="Looking up ZIP" /> : undefined} />
  );
}

Object.assign(window, { I, Progress, StepHead, Opt, Field, Select, CheckRow, NavFooter, Helper, HelpLink, Tooltip, ZipField, bevriZipLookup });