{q.title}

{q.sub &&

{q.sub}

} {q.kind === 'text' && ( setAnswer(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter' && canProceed()) next(); }} /> )} {q.kind === 'longtext' && (

setAnswer(e.target.value)}
            />
          )}

{q.kind === 'options' && (
            <div className="q-options">
              {q.options.map((opt, i) => {
                const isObj = typeof opt === 'object';
                const label = isObj ? opt.label : opt;
                const tail = isObj ? opt.tail : '';
                const value = isObj ? opt : opt;
                const selected = JSON.stringify(answers[q.id]) === JSON.stringify(value);
                const key = String.fromCharCode(65 + i);
                return (
                  <button
                    key={i}
                    className={`q-option ${selected ? 'is-selected' : ''}`}
                    onClick={() => { setAnswer(value); setTimeout(next, 240); }}
                  >
                    <span className="q-option-key">{key}</span>
                    <span>{label}</span>
                    {tail && <span className="q-option-tail">{tail}</span>}
                  </button>
                );
              })}
            </div>
          )}

{q.kind === 'slider' && (
            <SliderQ q={q} value={answers[q.id] ?? q.default} onChange={setAnswer} />
          )}

{q.kind === 'bloodwork_upload' && (
            <BloodworkUploadQ
              q={q}
              value={answers[q.id]}
              visitorId={visitorId}
              track={trackHint}
              onChange={setAnswer}
            />
          )}

<div className="q-actions">
            <button className="btn btn-soft" onClick={back}>← Back</button>
            <button
              className="btn btn-primary"
              onClick={next}
              disabled={!canProceed()}
              style={{ opacity: canProceed() ? 1 : 0.4, pointerEvents: canProceed() ? 'auto' : 'none' }}
            >
              {step === total - 1
                ? (phase === 'triage' ? "Let's get started" : 'See what we recommend')
                : (q.optional && !canProceed() ? 'Skip →' : 'Continue →')}
            </button>
            <span className="q-hint">PRESS ENTER ↵</span>
          </div>
        </div>
      </div>
    </div>
  );
};

const BloodworkUploadQ = ({ value, visitorId, track, onChange }) => {
  const [status, setStatus] = React.useState(value?.bloodwork ? 'uploaded' : 'idle');
  const [message, setMessage] = React.useState('');

const chooseNo = () => {
    setStatus('idle');
    setMessage('');
    onChange({ hasRecentBloodwork: false });
  };

const chooseYes = () => {
    onChange({ hasRecentBloodwork: true });
    setMessage('');
  };

const upload = async (file) => {
    if (!file) return;
    setStatus('uploading');
    setMessage('');
    const form = new FormData();
    form.append('visitorId', visitorId);
    form.append('track', track || '');
    form.append('bloodwork', file);

try {
      const res = await fetch('/api/site/bloodwork', { method: 'POST', body: form });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Upload failed');
      setStatus('uploaded');
      setMessage('Uploaded.');
      onChange({
        hasRecentBloodwork: true,
        fileName: file.name,
        bloodwork: data.bloodwork,
      });
    } catch (err) {
      setStatus('error');
      setMessage(err?.message || 'Upload failed. Try again.');
      onChange({ hasRecentBloodwork: true });
    }
  };

const hasRecentBloodwork = value?.hasRecentBloodwork === true;

return (
    <div className="q-bloodwork">
      <div className="q-options q-bloodwork-options">
        <button
          type="button"
          className={`q-option ${hasRecentBloodwork ? 'is-selected' : ''}`}
          onClick={chooseYes}
        >
          <span className="q-option-key">A</span>
          <span>Yes, I have recent bloodwork</span>
        </button>
        <button
          type="button"
          className={`q-option ${value?.hasRecentBloodwork === false ? 'is-selected' : ''}`}
          onClick={chooseNo}
        >
          <span className="q-option-key">B</span>
          <span>No, not right now</span>
        </button>
      </div>

{hasRecentBloodwork && (
        <label className={`q-upload ${status === 'uploading' ? 'is-uploading' : ''}`}>
          <input
            type="file"
            accept=".pdf,.jpg,.jpeg,.png,.heic,.heif,application/pdf,image/jpeg,image/png,image/heic,image/heif"
            onChange={(e) => upload(e.target.files?.[0])}
          />
          <span className="q-upload-title">
            {status === 'uploaded' ? (value?.fileName || 'Bloodwork uploaded') : 'Upload bloodwork'}
          </span>
          <span className="q-upload-detail">PDF, JPG, PNG, HEIC, or HEIF</span>
        </label>
      )}

{message && <div className={`q-upload-message ${status === 'error' ? 'is-error' : ''}`}>{message}</div>}
    </div>
  );
};

Object.assign(window, { Questionnaire, TRIAGE_QUESTIONS, DEEP_QUESTIONS });