{label && {label}{required && *}}

onChange(e.target.value)}
        placeholder={placeholder} rows={rows} />
      {error ? (
        <span className="msg err"><Svg d={Ico.alert} w={14} sw={2} /> {error}</span>
      ) : hint ? (<span className="msg">{hint}</span>) : null}
    </div>
  );
}

/* ---------------- ChoiceGroup (radio/checkbox chips) ---------------- */
function ChoiceGroup({ options, value, onChange, multi }) {
  const isOn = (o) => multi ? (value || []).includes(o) : value === o;
  const toggle = (o) => {
    if (multi) {
      const set = new Set(value || []);
      set.has(o) ? set.delete(o) : set.add(o);
      onChange([...set]);
    } else onChange(o);
  };
  return (
    <div className="choices">
      {options.map((o) => (
        <label key={o} className={"choice" + (multi ? " checkbox" : "") + (isOn(o) ? " checked" : "")}>
          <input type={multi ? "checkbox" : "radio"} checked={isOn(o)} onChange={() => toggle(o)} />
          <span className="dot" />{o}
        </label>
      ))}
    </div>
  );
}

/* ---------------- Yes/No row (anamnese) ---------------- */
function YesNo({ q, value, onChange }) {
  return (
    <div className="tnf">
      <span className="q">{q}</span>
      <div className="seg2">
        <button className={value === "sim" ? "on-yes" : ""} onClick={() => onChange("sim")}>Sim</button>
        <button className={value === "nao" ? "on-no" : ""} onClick={() => onChange("nao")}>Não</button>
      </div>
    </div>
  );
}

/* ---------------- Stepper ---------------- */
function Stepper({ steps, current }) {
  const pct = ((current) / (steps.length - 1)) * 100;
  return (
    <div className="stepper">
      <div className="bar"><i style={{ width: pct + "%" }} /></div>
      <div className="steps">
        {steps.map((s, i) => (
          <div key={s} className={"st" + (i === current ? " active" : i < current ? " done" : "")}>
            <span className="ix">{i < current ? <Svg d={Ico.check} w={12} sw={2.5} /> : i + 1}</span>
            <span className="lbl">{s}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------------- Section head ---------------- */
function SectionHead({ num, title }) {
  return (
    <div className="f-section-head">
      {num && <span className="num">{num}</span>}
      <h2>{title}</h2>
    </div>
  );
}

/* ---------------- Signature pad ---------------- */
function SignaturePad({ onChange }) {
  const ref = useRef(null);
  const [signed, setSigned] = useState(false);
  const drawing = useRef(false);
  const last = useRef(null);

const setup = useCallback(() => {
    const c = ref.current; if (!c) return;
    const r = c.getBoundingClientRect();
    const dpr = window.devicePixelRatio || 1;
    c.width = r.width * dpr; c.height = r.height * dpr;
    const ctx = c.getContext("2d");
    ctx.scale(dpr, dpr);
    ctx.lineWidth = 2.2; ctx.lineCap = "round"; ctx.lineJoin = "round";
    ctx.strokeStyle = "#3F0C63";
  }, []);

useEffect(() => { setup(); window.addEventListener("resize", setup); return () => window.removeEventListener("resize", setup); }, [setup]);

return (
    <div className="sig-pad-wrap">
      <canvas ref={ref} className={"sig-pad" + (signed ? " signed" : "")}
        onMouseDown={start} onMouseMove={move} onMouseUp={end} onMouseLeave={end}
        onTouchStart={start} onTouchMove={move} onTouchEnd={end} />
      <div className="sig-tools">
        <span className="hint">{signed ? "Assinatura registrada." : "Assine no quadro acima com o dedo ou mouse."}</span>
        <button className="btn-ghost" onClick={clear}><Svg d={Ico.eraser} w={16} /> Limpar</button>
      </div>
    </div>
  );
}

/* ---------------- Scale row (0–N selectable) ---------------- */
function ScaleRow({ value, onChange, min = 0, max = 10, leftLabel, rightLabel }) {
  const items = [];
  for (let i = min; i <= max; i++) items.push(i);
  return (
    <div className="scale-row">
      <div className="scale-btns">
        {items.map((i) => (
          <button key={i} type="button" className={"scale-btn" + (value === i ? " sel" : "")}
            onClick={() => onChange(i)}>{i}</button>
        ))}
      </div>
      {(leftLabel || rightLabel) && (
        <div className="scale-anchors"><span>{leftLabel}</span><span>{rightLabel}</span></div>
      )}
    </div>
  );
}

/* ---------------- Question block (number + text + control) ---------------- */
function QBlock({ num, text, children }) {
  return (
    <div className="q-block">
      <div className="q-head">
        {num != null && <span className="q-num">{num}</span>}
        <span className="q-text">{text}</span>
      </div>
      {children}
    </div>
  );
}

/* ---------------- Legend (key for scale points) ---------------- */
function ScaleLegend({ items }) {
  return (
    <div className="scale-legend">
      {items.map((it) => (
        <span key={it.v}><b>{it.v}</b> {it.l}</span>
      ))}
    </div>
  );
}

/* ---------------- Result panel (score + band) ---------------- */
function ResultPanel({ score, max, band, bandColor, caption, children }) {
  return (
    <div className="result" style={bandColor ? { background: bandColor } : null}>
      <div className="result-score">{score}<span className="result-max">/{max}</span></div>
      {band && <div className="result-band">{band}</div>}
      {caption && <p className="result-cap">{caption}</p>}
      {children}
    </div>
  );
}

/* ---------------- Sticky progress (answered / total) ---------------- */
function AnsweredBar({ answered, total }) {
  const pct = total ? Math.round((answered / total) * 100) : 0;
  return (
    <div className="answered-bar">
      <div className="ab-track"><i style={{ width: pct + "%" }} /></div>
      <span className="ab-label">{answered} de {total} respondidas</span>
    </div>
  );
}

/* ---------------- Success screen ---------------- */
function DoneScreen({ title, children }) {
  return (
    <div className="done-screen">
      <div className="check"><Svg d={Ico.check} w={36} sw={2.4} /></div>
      <h2>{title}</h2>
      <p>{children}</p>
      <div className="tagline">Atende pessoas, não doenças.</div>
    </div>
  );
}

Object.assign(window, {
  onlyDigits, MASKS, isCPFComplete, isEmail, isPhoneComplete, isDateComplete,
  Ico, Svg, AppTop, Field, TextField, SelectField, TextArea, ChoiceGroup,
  YesNo, Stepper, SectionHead, SignaturePad, DoneScreen,
  ScaleRow, QBlock, ScaleLegend, ResultPanel, AnsweredBar,
});