// Extended ficha steps — now a one-question-at-a-time interactive flow.
// Single-choice answers auto-advance; multi-select & text use "Continuar".
// Uses window.FormControls helpers and PALETTE_A vocabulary.
const { useState: useStateE, useRef: useRefE } = React;

const PE = {
  bg: "#ffffff", panel: "#fff0ef", panelAlt: "#fde2d7",
  border: "rgba(74,39,35,0.09)", borderStrong: "rgba(74,39,35,0.16)",
  text: "#4a2723", text2: "#6b4b45",
  muted: "#806660", accent: "#ef7b60", accentDeep: "#b75746",
  accentSoft: "rgba(239,123,96,0.10)",
  tealGrad: "linear-gradient(135deg, #fcc89b 0%, #e8927c 100%)",
  coral: "#ff6b4a", coralSoft: "rgba(255,107,74,0.10)",
};

// Flow entrance animation
if (typeof document !== "undefined" && !document.getElementById("flow-style")) {
  const s = document.createElement("style");
  s.id = "flow-style";
  s.textContent = `
    @keyframes flowIn { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform:none; } }
    .flow-card { animation: flowIn .36s cubic-bezier(.2,.8,.2,1); }
  `;
  document.head.appendChild(s);
}

function Kicker({ children }) {
  return (
    <div style={{
      fontSize: 11.5, color: PE.accent, fontWeight: 700,
      letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 12,
    }}>{children}</div>
  );
}

function Title({ children, sub }) {
  return (
    <>
      <h2 style={{ fontSize: 30, fontWeight: 600, margin: 0, letterSpacing: "-0.02em", lineHeight: 1.15 }}>{children}</h2>
      {sub && <p style={{ color: PE.muted, marginTop: 8, fontSize: 14, marginBottom: 0 }}>{sub}</p>}
    </>
  );
}

function StepShell({ kicker, title, sub, children, onBack, onNext, canNext = true, nextLabel = "Continuar" }) {
  return (
    <div style={{
      width: "100%", height: "100%", padding: "90px 80px 90px",
      display: "flex", flexDirection: "column", overflow: "hidden",
    }}>
      <div style={{ marginBottom: 24, flexShrink: 0 }}>
        <Kicker>{kicker}</Kicker>
        <Title sub={sub}>{title}</Title>
      </div>
      <div style={{ flex: 1, overflowY: "auto", paddingRight: 14, marginRight: -14, marginBottom: 20 }}>
        {children}
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexShrink: 0 }}>
        <button onClick={onBack} style={navBackStyle}>← Voltar</button>
        <button onClick={onNext} disabled={!canNext} style={navPrimaryStyle(canNext)}>{nextLabel} →</button>
      </div>
    </div>
  );
}

const navBackStyle = {
  background: "transparent", border: `1px solid ${PE.borderStrong}`, color: PE.text2,
  padding: "13px 22px", borderRadius: 999, fontSize: 14, fontWeight: 600, cursor: "pointer",
  fontFamily: "'Inter', sans-serif", letterSpacing: "0.005em",
};
function navPrimaryStyle(enabled) {
  return {
    appearance: "none", border: "none", cursor: enabled ? "pointer" : "not-allowed",
    background: enabled ? PE.tealGrad : "rgba(239,123,96,0.30)",
    color: "#fff", padding: "14px 30px", borderRadius: 999,
    fontSize: 14.5, fontWeight: 600, opacity: enabled ? 1 : 0.55,
    boxShadow: enabled ? `0 8px 20px -10px rgba(239,123,96,0.55)` : "none",
    transition: "all 0.2s",
  };
}

// ───────────────────────────────────────────────────────────────────────
// FlowShell — guided, one-question-at-a-time experience.
// questions: [{ label, sub, optional, isAnswered:()=>bool, control:({advance})=>JSX }]
// ───────────────────────────────────────────────────────────────────────
function FlowShell({ kicker, title, questions, onBack, onNext, nextLabel = "Continuar", aside, busy = false, footerError = "" }) {
  const [i, setI] = useStateE(0);
  const total = questions.length;
  const idx = Math.min(i, total - 1);
  const q = questions[idx];

  const goRef = useRefE();
  goRef.current = (d) => {
    const ni = idx + d;
    if (ni < 0) return onBack();
    if (ni >= total) return onNext();
    setI(ni);
  };
  const go = (d) => goRef.current(d);
  const advance = () => goRef.current(1);

  const answered = q.isAnswered ? q.isAnswered() : true;
  const canNext = q.isAnswered ? answered : (q.optional ? true : answered);
  const isLast = idx === total - 1;

  return (
    <div style={{ width: "100%", height: "100%", display: "flex", overflow: "hidden" }}>
    {aside && (
      <div style={{
        flex: "0 0 380px", position: "relative", height: "100%",
        borderRight: `1px solid ${PE.border}`,
        background: "radial-gradient(ellipse 70% 60% at 50% 38%, #fff0ef 0%, #f9d5bd 88%)",
      }}>{aside}</div>
    )}
    <div style={{
      flex: 1, minWidth: 0, height: "100%", padding: aside ? "80px 64px 40px" : "80px 80px 40px",
      display: "flex", flexDirection: "column", overflow: "hidden",
    }}>
      {/* progress header */}
      <div style={{ flexShrink: 0, marginBottom: 26 }}>
        <Kicker>{kicker}</Kicker>
        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
          <div style={{ flex: 1, height: 5, borderRadius: 3, background: PE.panelAlt, overflow: "hidden" }}>
            <div style={{
              width: `${((idx + 1) / total) * 100}%`, height: "100%",
              background: PE.tealGrad, borderRadius: 3,
              transition: "width .4s cubic-bezier(.2,.8,.2,1)",
            }} />
          </div>
          <div style={{ fontSize: 12.5, color: PE.muted, fontWeight: 600, whiteSpace: "nowrap" }}>
            {String(idx + 1).padStart(2, "0")} <span style={{ opacity: 0.55 }}>/ {String(total).padStart(2, "0")}</span>
          </div>
        </div>
      </div>

      {/* question card */}
      <div style={{ flex: 1, overflowY: "auto", paddingRight: 14, marginRight: -14 }}>
        <div key={idx} className="flow-card">
          <div style={{
            fontSize: 11.5, color: PE.accent, fontWeight: 700,
            letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 12, opacity: 0.9,
          }}>{title}</div>
          <h2 style={{ fontSize: 27, fontWeight: 600, margin: "0 0 8px", letterSpacing: "-0.02em", lineHeight: 1.22, maxWidth: 780 }}>
            {q.label}
          </h2>
          <p style={{ color: PE.muted, fontSize: 14, margin: `0 0 ${q.sub ? 24 : 26}px`, maxWidth: 700, lineHeight: 1.5 }}>
            {q.sub || (q.optional ? "Opcional — toque em pular se preferir." : "\u00A0")}
          </p>
          <div style={{ maxWidth: 860 }}>{q.control({ advance })}</div>
        </div>
      </div>

      {/* nav */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexShrink: 0, marginTop: 18 }}>
        <button onClick={() => go(-1)} style={navBackStyle}>← Voltar</button>
        <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
          {footerError && <span role="alert" style={{ color: "#c2412d", fontSize: 12.5, maxWidth: 340 }}>{footerError}</span>}
          {q.optional && q.allowSkip !== false && !answered && (
            <button onClick={() => go(1)} style={{
              background: "none", border: "none", color: PE.muted, cursor: "pointer",
              fontSize: 13, fontWeight: 600, letterSpacing: "0.02em",
              textDecoration: "underline", textUnderlineOffset: 3,
            }}>Pular</button>
          )}
          <button onClick={() => go(1)} disabled={!canNext || busy} style={navPrimaryStyle(canNext && !busy)}>
            {busy ? "Enviando..." : (isLast ? nextLabel : "Continuar")} →
          </button>
        </div>
      </div>
    </div>
    </div>
  );
}

// Anatomical spine companion — soft light viewport.
function SpineAside({ caption }) {
  return (
    <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", padding: "0 28px" }}>
      <div style={{ position: "relative", width: "100%", maxWidth: 320, height: 540, display: "grid", placeItems: "center" }}>
        <div style={{
          position: "absolute", inset: -10, borderRadius: "50%",
          background: `radial-gradient(circle, rgba(239,123,96,0.20), transparent 65%)`,
          filter: "blur(20px)", pointerEvents: "none",
        }} />
        <window.GLBSpine
          modelUrl="spine-model-2.glb"
          palette={{ bone: 0xf3f5f4, accent: PE.coral, accentLight: 0xffb59e, muted: PE.muted }}
        />
        {caption && (
          <div style={{
            position: "absolute", bottom: -4, left: 0, right: 0, textAlign: "center",
            fontSize: 12, color: PE.text2, fontWeight: 500, lineHeight: 1.45,
            padding: "0 12px", pointerEvents: "none",
          }}>{caption}</div>
        )}
      </div>
    </div>
  );
}

// small helper: auto-advance after a beat so the choice is visible
function beat(fn) { setTimeout(fn, 220); }

// ───────────────────────────────────────────────────────────────────────
// STEP: Motivação — A) sintoma  B) preventivo  (single big choice, kept)
// ───────────────────────────────────────────────────────────────────────
function MotivacaoStep({ data, update, next, prev }) {
  return (
    <StepShell
      kicker="Etapa 06 — Sua intenção"
      title="Por qual motivo você está aqui?"
      sub="Direcionamos o atendimento conforme a sua resposta."
      onBack={prev} onNext={next} canNext={!!data.motivacao}
    >
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, maxWidth: 760 }}>
        {window.FichaData.motivacao.map((o) => {
          const sel = data.motivacao === o.id;
          return (
            <button key={o.id} onClick={() => { update("motivacao", o.id); beat(next); }} style={{
              padding: "26px 22px", textAlign: "left",
              background: sel ? PE.accentSoft : PE.panel,
              border: `1.5px solid ${sel ? PE.accent : PE.border}`,
              borderRadius: 16, cursor: "pointer", color: PE.text,
              display: "flex", flexDirection: "column", gap: 14,
              transform: sel ? "translateY(-2px)" : "none",
              boxShadow: sel ? `0 14px 30px -14px rgba(239,123,96,0.45)` : "none",
              transition: "all 0.25s",
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 13,
                background: sel ? PE.accent : PE.accentSoft,
                display: "grid", placeItems: "center", transition: "background 0.25s",
              }}>
                {o.id === "A" ? (
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={sel ? "#fff" : PE.accent} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M12 2v6M12 18h.01M5 12a7 7 0 1 1 14 0 7 7 0 0 1-14 0z"/>
                  </svg>
                ) : (
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={sel ? "#fff" : PE.accent} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M12 2 4 5v6c0 5 3 9 8 11 5-2 8-6 8-11V5l-8-3z"/>
                  </svg>
                )}
              </div>
              <div>
                <div style={{
                  fontSize: 10.5, color: sel ? PE.accentDeep : PE.muted, fontWeight: 700,
                  letterSpacing: "0.16em", marginBottom: 6,
                }}>OPÇÃO {o.id}</div>
                <div style={{ fontSize: 18, fontWeight: 700, lineHeight: 1.2 }}>{o.label}</div>
                <div style={{ fontSize: 13, color: PE.muted, marginTop: 6, lineHeight: 1.4 }}>{o.sub}</div>
              </div>
            </button>
          );
        })}
      </div>
      <div style={{
        marginTop: 24, padding: 14, borderRadius: 12,
        background: PE.accentSoft, border: `1px solid ${PE.accent}30`,
        fontSize: 12.5, color: PE.text2, maxWidth: 760, lineHeight: 1.5,
      }}>
        <strong style={{ color: PE.accentDeep }}>Importante:</strong> se você escolher <em>cuidado preventivo</em>, vamos direto para o histórico de saúde.
      </div>
    </StepShell>
  );
}

// Conditional follow-up text shown under a control inside a flow card
function FollowUp({ children }) {
  return <div style={{ marginTop: 14, animation: "flowIn .3s ease" }}>{children}</div>;
}

// ───────────────────────────────────────────────────────────────────────
// STEP: Sobre você — Q03..Q07
// ───────────────────────────────────────────────────────────────────────
function SobreVoceStep({ data, update, next, prev }) {
  const { TextInputF, RadioPill } = window.FormControls;
  const upd = (key, val) => update("sobreVoce", { ...(data.sobreVoce || {}), [key]: val });
  const sv = data.sobreVoce || {};

  const questions = [
    {
      label: "Descreva o motivo da sua consulta",
      sub: "Inclua sintomas ou sensações — com suas próprias palavras.",
      isAnswered: () => !!sv.descricao,
      control: () => <TextInputF value={sv.descricao} onChange={(v) => upd("descricao", v)} multiline rows={4} placeholder="Conte com suas palavras..." />,
    },
    {
      label: "Há quanto tempo e em qual hora do dia piora?",
      isAnswered: () => !!sv.duracao,
      control: () => <TextInputF value={sv.duracao} onChange={(v) => upd("duracao", v)} placeholder="Ex: há 2 meses, piora à noite" />,
    },
    {
      label: "Como começou?",
      isAnswered: () => !!sv.comoComecou && (sv.comoComecou !== "evento" || !!sv.eventoDescricao),
      control: ({ advance }) => (
        <div>
          <RadioPill options={window.FichaData.comoComecou} value={sv.comoComecou}
            onChange={(v) => { upd("comoComecou", v); if (v !== "evento") beat(advance); }} columns={2} />
          {sv.comoComecou === "evento" && (
            <FollowUp><TextInputF value={sv.eventoDescricao} onChange={(v) => upd("eventoDescricao", v)} placeholder="Qual evento?" /></FollowUp>
          )}
        </div>
      ),
    },
    {
      label: "O quão presente esse problema está no seu dia a dia?",
      isAnswered: () => !!sv.presencaProb,
      control: ({ advance }) => (
        <RadioPill options={window.FichaData.presencaProblema} value={sv.presencaProb}
          onChange={(v) => { upd("presencaProb", v); beat(advance); }} columns={2} />
      ),
    },
    {
      label: "Desde o início, o seu problema vem:",
      isAnswered: () => !!sv.trajetoria,
      control: ({ advance }) => (
        <RadioPill options={window.FichaData.trajetoria} value={sv.trajetoria}
          onChange={(v) => { upd("trajetoria", v); beat(advance); }} columns={2} />
      ),
    },
  ];

  return <FlowShell kicker="Etapa 07 — Sobre você" title="Sobre o que você sente" questions={questions} onBack={prev} onNext={next}
    aside={<SpineAside caption="Suas respostas ajudam a mapear o que sua coluna está comunicando." />} />;
}

// ───────────────────────────────────────────────────────────────────────
// STEP: Explorando a condição — Q08..Q14
// ───────────────────────────────────────────────────────────────────────
function ExploracaoStep({ data, update, next, prev }) {
  const { TextInputF, YesNo, CheckGrid, Scale10, RadioPill } = window.FormControls;
  const upd = (key, val) => update("exploracao", { ...(data.exploracao || {}), [key]: val });
  const ex = data.exploracao || {};
  const toggle = (key, id) => {
    const cur = ex[key] || [];
    upd(key, cur.includes(id) ? cur.filter((x) => x !== id) : [...cur, id]);
  };
  const trat = ex.tratamentos || [];

  const questions = [
    {
      label: "Há algo que alivia? Se sim, o quê?",
      optional: true,
      control: () => <TextInputF value={ex.alivio} onChange={(v) => upd("alivio", v)} placeholder="Ex: massagem, alongamento, deitar..." />,
    },
    {
      label: "Já teve esse problema antes?",
      optional: true,
      allowSkip: false,
      isAnswered: () => ex.jaTeve !== "sim" || !!window.FichaValidation.text(ex.jaTeveQuando),
      control: ({ advance }) => (
        <div>
          <YesNo value={ex.jaTeve} onChange={(v) => { upd("jaTeve", v); if (v === "nao") beat(advance); }} />
          {ex.jaTeve === "sim" && (
            <FollowUp><TextInputF value={ex.jaTeveQuando} onChange={(v) => upd("jaTeveQuando", v)} placeholder="Quando?" /></FollowUp>
          )}
        </div>
      ),
    },
    {
      label: "Já fez algum tratamento para isso?",
      sub: "Toque em tudo que já tentou.",
      optional: true,
      control: () => (
        <div>
          <CheckGrid options={window.FichaData.tratamentosTentados} values={trat} onToggle={(id) => toggle("tratamentos", id)} onClear={() => upd("tratamentos", [])} />
          {trat.length > 0 && !trat.includes("nao") && (
            <FollowUp>
              <RadioPill options={[{ id: "fin", label: "Já finalizei" }, { id: "ainda", label: "Ainda estou tratando" }]}
                value={ex.tratamentoStatus} onChange={(v) => upd("tratamentoStatus", v)} columns={2} />
            </FollowUp>
          )}
        </div>
      ),
    },
    {
      label: "Tem histórico de coluna na família?",
      isAnswered: () => ex.familia === "nao" || (ex.familia === "sim" && !!window.FichaValidation.text(ex.familiaDetalhe)),
      control: ({ advance }) => (
        <div>
          <YesNo value={ex.familia} onChange={(v) => { upd("familia", v); if (v === "nao") beat(advance); }} />
          {ex.familia === "sim" && (
            <FollowUp><TextInputF value={ex.familiaDetalhe} onChange={(v) => upd("familiaDetalhe", v)} placeholder="Qual o grau de parentesco? (ex: pai, mãe, avó, irmão...)" /></FollowUp>
          )}
        </div>
      ),
    },
    {
      label: "Como os sintomas afetam sua vida?",
      sub: "Toque em tudo que se aplica.",
      optional: true,
      control: () => <CheckGrid options={window.FichaData.impactosVida} values={ex.impactos || []} onToggle={(id) => toggle("impactos", id)} onClear={() => upd("impactos", [])} />,
    },
    {
      label: "Quão comprometido você está em corrigir isso?",
      sub: "1 = nenhum comprometimento · 10 = totalmente comprometido",
      isAnswered: () => ex.comprometimento != null,
      control: ({ advance }) => <Scale10 value={ex.comprometimento} onChange={(v) => { upd("comprometimento", v); beat(advance); }} leftLabel="nenhum" rightLabel="total" />,
    },
    {
      label: "Sua saúde e bem-estar são prioridades pra você?",
      isAnswered: () => !!ex.prioridade,
      control: ({ advance }) => <YesNo value={ex.prioridade} onChange={(v) => { upd("prioridade", v); beat(advance); }} />,
    },
  ];

  return <FlowShell kicker="Etapa 08 — Explorando sua condição" title="Histórico e impacto" questions={questions} onBack={prev} onNext={next}
    aside={<SpineAside caption="Entender seu histórico revela como sua coluna chegou até aqui." />} />;
}

// ───────────────────────────────────────────────────────────────────────
// STEP: Histórico de saúde — Q15..Q20
// ───────────────────────────────────────────────────────────────────────
function HistoricoStep({ data, update, next, prev }) {
  const { TextInputF, YesNo, CheckGrid } = window.FormControls;
  const upd = (key, val) => update("historico", { ...(data.historico || {}), [key]: val });
  const h = data.historico || {};
  const toggle = (key, id) => {
    const cur = h[key] || [];
    upd(key, cur.includes(id) ? cur.filter((x) => x !== id) : [...cur, id]);
  };

  const yesNoDetail = (key, label, placeholder, multiline) => ({
    label, optional: true, allowSkip: false,
    isAnswered: () => h[key] !== "sim" || !!window.FichaValidation.text(h[key + "Det"]),
    control: ({ advance }) => (
      <div>
        <YesNo value={h[key]} onChange={(v) => { upd(key, v); if (v === "nao") beat(advance); }} />
        {h[key] === "sim" && (
          <FollowUp><TextInputF value={h[key + "Det"]} onChange={(v) => upd(key + "Det", v)} placeholder={placeholder} multiline={multiline} rows={2} /></FollowUp>
        )}
      </div>
    ),
  });

  const questions = [
    {
      label: "Qual postura mais se aproxima de você?",
      sub: "Gire o modelo e toque na postura correspondente.",
      optional: true,
      control: () => <window.PostureEcorche value={h.postura} onChange={(v) => upd("postura", v)} />,
    },
    {
      label: "Sintomas e patologias — marque o que já teve ou tem",
      sub: "Use a busca pra achar rápido. Toque em tudo que se aplica.",
      optional: true,
      control: () => <CheckGrid options={window.FichaData.sintomasPatologias} values={h.sintomas || []} onToggle={(id) => toggle("sintomas", id)} searchable onClear={() => upd("sintomas", [])} />,
    },
    yesNoDetail("tratandoAtual", "Está em tratamento de alguma condição?", "Quais e pra quê?", true),
    yesNoDetail("medicamentos", "Está tomando algum medicamento?", "Quais e pra quê?", false),
    {
      label: "Ao longo da vida, você já teve ou realizou:",
      optional: true,
      allowSkip: false,
      isAnswered: () => (h.cirurgias || []).length === 0 || !!window.FichaValidation.text(h.cirurgiasDet),
      control: () => (
        <div>
          <CheckGrid options={window.FichaData.cirurgiasFraturas} values={h.cirurgias || []} onToggle={(id) => toggle("cirurgias", id)} onClear={() => upd("cirurgias", [])} />
          {(h.cirurgias || []).length > 0 && (
            <FollowUp><TextInputF value={h.cirurgiasDet} onChange={(v) => upd("cirurgiasDet", v)} placeholder="Quais? Em qual local?" multiline rows={2} /></FollowUp>
          )}
        </div>
      ),
    },
    yesNoDetail("suplementos", "Toma suplementos?", "Quais e pra quê?", false),
  ];

  return <FlowShell kicker="Etapa 09 — Histórico de saúde" title="Conta mais sobre seu corpo" questions={questions} onBack={prev} onNext={next} />;
}

// ───────────────────────────────────────────────────────────────────────
// STEP: Estilo de vida — Q21..Q28
// ───────────────────────────────────────────────────────────────────────
function EstiloVidaStep({ data, update, next, prev }) {
  const { TextInputF, YesNo, RadioPill } = window.FormControls;
  const upd = (key, val) => update("estiloVida", { ...(data.estiloVida || {}), [key]: val });
  const e = data.estiloVida || {};

  const inputSmall = {
    width: 120, padding: "11px 14px",
    background: PE.panel, border: `1.5px solid ${PE.border}`,
    borderRadius: 12, color: PE.text, fontSize: 13.5, outline: "none",
    fontFamily: "'Inter', sans-serif",
  };

  const questions = [
    {
      label: "Faz atividade física?",
      optional: true,
      allowSkip: false,
      isAnswered: () => e.atividade !== "sim" || (!!window.FichaValidation.text(e.atividadeQual) && !!window.FichaValidation.text(e.atividadeFreq)),
      control: ({ advance }) => (
        <div>
          <YesNo value={e.atividade} onChange={(v) => { upd("atividade", v); if (v === "nao") beat(advance); }} />
          {e.atividade === "sim" && (
            <FollowUp>
              <div style={{ display: "flex", gap: 10 }}>
                <div style={{ flex: 1 }}><TextInputF value={e.atividadeQual} onChange={(v) => upd("atividadeQual", v)} placeholder="Qual atividade?" /></div>
                <div style={{ flex: 1 }}><TextInputF value={e.atividadeFreq} onChange={(v) => upd("atividadeFreq", v)} placeholder="Frequência?" /></div>
              </div>
            </FollowUp>
          )}
        </div>
      ),
    },
    {
      label: "Quantas horas dorme e em qual posição?",
      optional: true,
      control: () => (
        <div>
          <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 14 }}>
            <input type="number" min="0" max="24" step="1" value={e.sonoHoras || ""} onChange={(ev) => upd("sonoHoras", ev.target.value)} placeholder="horas" inputMode="numeric" style={inputSmall} />
            <span style={{ fontSize: 13, color: PE.muted }}>horas por noite</span>
          </div>
          <RadioPill options={window.FichaData.posicoesSono} value={e.sonoPosicao} onChange={(v) => upd("sonoPosicao", v)} columns={2} />
        </div>
      ),
    },
    {
      label: "Possui distúrbio de sono diagnosticado?",
      optional: true,
      allowSkip: false,
      isAnswered: () => e.disturbioSono !== "sim" || !!window.FichaValidation.text(e.disturbioSonoDet),
      control: ({ advance }) => (
        <div>
          <YesNo value={e.disturbioSono} onChange={(v) => { upd("disturbioSono", v); if (v === "nao") beat(advance); }} />
          {e.disturbioSono === "sim" && <FollowUp><TextInputF value={e.disturbioSonoDet} onChange={(v) => upd("disturbioSonoDet", v)} placeholder="Qual?" /></FollowUp>}
        </div>
      ),
    },
    {
      label: "Como você se sente ao acordar?",
      optional: true,
      control: ({ advance }) => <RadioPill options={window.FichaData.aoAcordar} value={e.aoAcordar} onChange={(v) => { upd("aoAcordar", v); beat(advance); }} columns={2} />,
    },
    {
      label: "Como está o seu colchão?",
      optional: true,
      control: ({ advance }) => <RadioPill options={window.FichaData.estadoColchao} value={e.colchao} onChange={(v) => { upd("colchao", v); beat(advance); }} columns={1} />,
    },
    {
      label: "Você fuma?",
      optional: true,
      allowSkip: false,
      isAnswered: () => e.fuma !== "sim" || !!window.FichaValidation.text(e.fumaQtd),
      control: ({ advance }) => (
        <div>
          <YesNo value={e.fuma} onChange={(v) => { upd("fuma", v); if (v === "nao") beat(advance); }} />
          {e.fuma === "sim" && <FollowUp><TextInputF value={e.fumaQtd} onChange={(v) => upd("fumaQtd", v)} placeholder="Quantos cigarros por dia?" /></FollowUp>}
        </div>
      ),
    },
    {
      label: "Ingere bebidas alcoólicas?",
      optional: true,
      allowSkip: false,
      isAnswered: () => e.alcool !== "sim" || !!window.FichaValidation.text(e.alcoolFreq),
      control: ({ advance }) => (
        <div>
          <YesNo value={e.alcool} onChange={(v) => { upd("alcool", v); if (v === "nao") beat(advance); }} />
          {e.alcool === "sim" && <FollowUp><TextInputF value={e.alcoolFreq} onChange={(v) => upd("alcoolFreq", v)} placeholder="Com qual frequência?" /></FollowUp>}
        </div>
      ),
    },
    {
      label: "Utiliza alguma droga ilícita?",
      optional: true,
      allowSkip: false,
      isAnswered: () => e.drogas !== "sim" || (!!window.FichaValidation.text(e.drogasQual) && !!window.FichaValidation.text(e.drogasFreq)),
      control: ({ advance }) => (
        <div>
          <YesNo value={e.drogas} onChange={(v) => { upd("drogas", v); if (v === "nao") beat(advance); }} />
          {e.drogas === "sim" && (
            <FollowUp>
              <div style={{ display: "flex", gap: 10 }}>
                <div style={{ flex: 1 }}><TextInputF value={e.drogasQual} onChange={(v) => upd("drogasQual", v)} placeholder="Qual?" /></div>
                <div style={{ flex: 1 }}><TextInputF value={e.drogasFreq} onChange={(v) => upd("drogasFreq", v)} placeholder="Frequência?" /></div>
              </div>
            </FollowUp>
          )}
        </div>
      ),
    },
  ];

  return <FlowShell kicker="Etapa 10 — Estilo de vida" title="Hábitos do seu dia a dia" questions={questions} onBack={prev} onNext={next} />;
}

// ───────────────────────────────────────────────────────────────────────
// STEP: Impacto e qualidade de vida — Q29..Q36
// ───────────────────────────────────────────────────────────────────────
function ImpactoStep({ data, update, next, prev }) {
  const { Scale10, YesNo, TextInputF } = window.FormControls;
  const upd = (key, val) => update("impacto", { ...(data.impacto || {}), [key]: val });
  const im = data.impacto || {};
  const interferencia = im.interferencia || {};
  const updInter = (area, val) => upd("interferencia", { ...interferencia, [area]: val });
  const saudeGeral = im.saudeGeral || {};
  const updSG = (area, val) => upd("saudeGeral", { ...saudeGeral, [area]: val });

  const questions = [
    {
      label: "Como isso interfere em cada área da sua vida?",
      sub: "1 = não interfere · 10 = interfere muito",
      optional: true,
      control: () => (
        <div>
          {window.FichaData.areasVida.map((area) => (
            <div key={area} style={{ marginBottom: 14 }}>
              <div style={{ fontSize: 13, color: PE.text, marginBottom: 6 }}>{area}</div>
              <Scale10 value={interferencia[area]} onChange={(v) => updInter(area, v)} leftLabel="não" rightLabel="muito" />
            </div>
          ))}
        </div>
      ),
    },
    {
      label: "Você está mais saudável que há 5 anos?",
      optional: true,
      control: ({ advance }) => <YesNo value={im.maisSaudavel} onChange={(v) => { upd("maisSaudavel", v); beat(advance); }} />,
    },
    {
      label: "Se não tratar, como acredita que estará em 12 meses?",
      optional: true,
      control: () => <TextInputF value={im.futuro12} onChange={(v) => upd("futuro12", v)} multiline rows={3} placeholder="..." />,
    },
    {
      label: "Como gostaria que sua saúde estivesse em 5 anos?",
      optional: true,
      control: () => <TextInputF value={im.futuro5} onChange={(v) => upd("futuro5", v)} multiline rows={3} placeholder="..." />,
    },
    {
      label: "Quão estressado você se considera?",
      sub: "1 = nada · 10 = extremamente",
      optional: true,
      control: ({ advance }) => <Scale10 value={im.estresse} onChange={(v) => { upd("estresse", v); beat(advance); }} leftLabel="nada" rightLabel="extremo" />,
    },
    {
      label: "Qualidade de vida geral",
      sub: "1 = péssima · 10 = excelente",
      optional: true,
      control: ({ advance }) => <Scale10 value={im.qualidadeVida} onChange={(v) => { upd("qualidadeVida", v); beat(advance); }} leftLabel="péssima" rightLabel="excelente" />,
    },
    {
      label: "Saúde além da ausência de dor",
      sub: "1 = péssima · 10 = excelente",
      optional: true,
      control: () => (
        <div>
          {[
            { id: "fisica", label: "Física — corpo, organismo, energia" },
            { id: "emocional", label: "Emocional — pensamentos e emoções" },
            { id: "social", label: "Social — relacionamentos e convivência" },
          ].map((area) => (
            <div key={area.id} style={{ marginBottom: 14 }}>
              <div style={{ fontSize: 13, color: PE.text, marginBottom: 6 }}>{area.label}</div>
              <Scale10 value={saudeGeral[area.id]} onChange={(v) => updSG(area.id, v)} leftLabel="1" rightLabel="10" />
            </div>
          ))}
        </div>
      ),
    },
    {
      label: "Qual você acha que é a razão do seu estado atual?",
      optional: true,
      control: () => <TextInputF value={im.razaoEstado} onChange={(v) => upd("razaoEstado", v)} multiline rows={3} placeholder="..." />,
    },
  ];

  return <FlowShell kicker="Etapa 11 — Impacto e qualidade de vida" title="Como sua saúde tem afetado sua vida" questions={questions} onBack={prev} onNext={next} />;
}

// ───────────────────────────────────────────────────────────────────────
// STEP: Objetivos — Q37 melhorias + Q38 três objetivos
// ───────────────────────────────────────────────────────────────────────
function ObjetivosStep({ data, update, next, prev, submitting, submitError }) {
  const { CheckGrid, TextInputF } = window.FormControls;
  const upd = (key, val) => update("objetivos", { ...(data.objetivos || {}), [key]: val });
  const o = data.objetivos || {};
  const toggle = (key, id) => {
    const cur = o[key] || [];
    upd(key, cur.includes(id) ? cur.filter((x) => x !== id) : [...cur, id]);
  };

  const questions = [
    {
      label: "O que você gostaria de melhorar na sua saúde?",
      sub: "Toque em tudo que deseja — separamos por área.",
      optional: true,
      control: () => (
        <div>
          <SectionLabel>Saúde física</SectionLabel>
          <CheckGrid options={window.FichaData.melhoriaFisica} values={o.melhoriaFisica || []} onToggle={(id) => toggle("melhoriaFisica", id)} onClear={() => upd("melhoriaFisica", [])} />
          <SectionLabel>Saúde emocional</SectionLabel>
          <CheckGrid options={window.FichaData.melhoriaEmocional} values={o.melhoriaEmocional || []} onToggle={(id) => toggle("melhoriaEmocional", id)} onClear={() => upd("melhoriaEmocional", [])} />
          <SectionLabel>Saúde em geral</SectionLabel>
          <CheckGrid options={window.FichaData.melhoriaGeral} values={o.melhoriaGeral || []} onToggle={(id) => toggle("melhoriaGeral", id)} onClear={() => upd("melhoriaGeral", [])} />
        </div>
      ),
    },
    {
      label: "Defina três objetivos que vão guiar seu tratamento",
      sub: "Pense no que mais deseja voltar a fazer.",
      optional: true,
      control: () => (
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {[1, 2, 3].map((n) => (
            <div key={n} style={{ display: "flex", gap: 12, alignItems: "center" }}>
              <div style={{
                width: 32, height: 32, borderRadius: 10,
                background: PE.accentSoft, color: PE.accentDeep,
                display: "grid", placeItems: "center",
                fontSize: 12.5, fontWeight: 700, flexShrink: 0,
              }}>{`0${n}`}</div>
              <div style={{ flex: 1 }}><TextInputF value={o[`obj${n}`]} onChange={(v) => upd(`obj${n}`, v)} placeholder={`Objetivo ${n}`} /></div>
            </div>
          ))}
        </div>
      ),
    },
    {
      label: "Quanto tempo acredita que levará pra chegar lá?",
      optional: true,
      control: () => (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, maxWidth: 520 }}>
          {["Dias", "Semanas", "Meses", "Anos"].map((unit) => (
            <div key={unit}>
              <div style={{ fontSize: 11, color: PE.muted, marginBottom: 6 }}>{unit}</div>
              <input type="number" min="0" max={unit === "Dias" ? 3650 : unit === "Semanas" ? 520 : unit === "Meses" ? 120 : 10} step="1" value={o[`tempo${unit}`] || ""} onChange={(e) => upd(`tempo${unit}`, e.target.value)} placeholder="0" inputMode="numeric"
                style={{
                  width: "100%", padding: "11px 14px",
                  background: PE.panel, border: `1.5px solid ${PE.border}`,
                  borderRadius: 12, color: PE.text, fontSize: 13.5, outline: "none",
                  fontFamily: "'Inter', sans-serif",
                }} />
            </div>
          ))}
        </div>
      ),
    },
  ];

  return <FlowShell kicker="Etapa 12 — Seus objetivos" title="Onde você quer chegar" questions={questions} onBack={prev} onNext={next} nextLabel="Finalizar" busy={submitting} footerError={submitError} />;
}

function SectionLabel({ children }) {
  return (
    <div style={{
      fontSize: 11, color: PE.muted, fontWeight: 700,
      letterSpacing: "0.14em", textTransform: "uppercase",
      margin: "18px 0 10px", paddingBottom: 6, borderBottom: `1px solid ${PE.border}`,
    }}>{children}</div>
  );
}

window.ExtraSteps = {
  MotivacaoStep, SobreVoceStep, ExploracaoStep,
  HistoricoStep, EstiloVidaStep, ImpactoStep, ObjetivosStep,
};