// quiz-app.jsx — Quiz Completo Desafio 28D · 20 steps
// State machine + step components em um único arquivo.

const TOTAL = 20;

const INTRO_TWEAKS = /*EDITMODE-BEGIN*/{
  "introVariant": (window.QUIZ_INTRO_VARIANT || "A"),
  "ctaPrimary": (window.QUIZ_BRAND_COLOR || "#E96A2D"),
  "studentCount": 4812,
  "showSocialProof": true,
  "v1Eyebrow": "Diagnóstico rápido",
  "v1Headline": "Falso\nmagro?",
  "v1Sub": "Você não está gordo.\nVocê só não tem músculo.",
  "v1Cta": "Ver meu plano",
  "v2Eyebrow": "Desafio 28 dias · Calistenia",
  "v2Count": 36818,
  "v2Sub": "pessoas saíram do sedentarismo\nem 28 dias.",
  "v2Tagline": "Em casa. Sem academia. Sem peso.\nEm 90s a gente monta seu plano.",
  "v2Cta": "Quero meu plano grátis",
  "v3Question": "Há quanto tempo\nvocê não treina?",
  "v3Opt1": "Há mais de 1 ano",
  "v3Opt2": "Alguns meses",
  "v3Opt3": "Nunca treinei",
  "v3Opt4": "Treino, mas pouco",
  "v4Eyebrow": "Método 28 dias",
  "v4Headline": "Perde gordura\nsem academia,\nsem dieta,\nsem peso.",
  "v4Cta": "Ver meu treino",
  "v5Headline": "Cada semana parado\né mais 1 semana\nsem resultado.",
  "v5Sub": "O Desafio 28 dias é calistenia em casa. 15 min/dia, sem equipamento.",
  "v5Cta": "Começar essa semana"
}/*EDITMODE-END*/;

// Alinhado com Variante A (a.html) — PT, mesmos números/nomes.
// Steps ausentes (6, 8, 10, 11, 18-20) são telas informativas/finais sem q.set.
const STEP_QUESTIONS = {
  2: 'genero',
  3: 'idade',
  4: 'altura',
  5: 'peso',
  7: 'fisico_atual',
  9: 'experiencia',
  12: 'frequencia',
  13: 'dificuldades',
  14: 'incomodos_corpo',
  15: 'mudancas_desejadas',
  16: 'desenvolvimento',
  17: 'objetivo',
};

function fireQtAnswer(step, key, value) {
  try {
    if (!window.QT || typeof window.QT.answer !== 'function') return;
    if (value === undefined || value === null || value === '') return;
    const stepName = STEP_QUESTIONS[step] || ('step_' + step);
    const ans = Array.isArray(value) ? value.join(',') : String(value);
    window.QT.answer(step, stepName, key, ans);
  } catch (e) {}
}

const useQuizState = () => {
  const [s, setS] = React.useState({
    step: 1,
    gender: null,           // 'm' | 'f'
    age: null,              // '18-29' etc
    height: 175,
    heightUnit: 'cm',
    weight: 78,
    weightUnit: 'kg',
    physique: null,         // 'magro' | 'falsomagro' | 'sobrepeso' | 'obeso'
    experience: null,
    frequency: null,
    difficulties: [],
    bodyIssues: [],
    changes: [],
    develop: [],
    objective: null,        // 'gain' | 'loss'
  });
  const set = (patch) => setS((p) => {
    Object.entries(patch).forEach(([k, v]) => {
      if (k !== 'step') fireQtAnswer(p.step, k, v);
    });
    return { ...p, ...patch };
  });
  const next = () => setS((p) => ({ ...p, step: Math.min(TOTAL, p.step + 1) }));
  const back = () => setS((p) => ({ ...p, step: Math.max(1, p.step - 1) }));
  const goto = (n) => setS((p) => ({ ...p, step: n }));
  const toggle = (key, val) => setS((p) => {
    const arr = p[key];
    const nextArr = arr.includes(val) ? arr.filter(x => x !== val) : [...arr, val];
    fireQtAnswer(p.step, key, nextArr);
    return { ...p, [key]: nextArr };
  });
  return { s, set, next, back, goto, toggle };
};

// ────────────────────────────────────────────────────────
// Shared shell
// ────────────────────────────────────────────────────────
function Shell({ stepNum, totalShown = 17, onBack, light, hideHeader, children }) {
  const pct = Math.min(100, (stepNum / totalShown) * 100);
  const logoSrc = window.QUIZ_ASSETS ? window.QUIZ_ASSETS + '/logo.webp' : 'logo.webp';
  return (
    <div className={`qs ${light ? 'light' : ''}`}>
      {!hideHeader && (
        <>
          <img className="q-logo-sm" src={logoSrc} alt="" />
          <div className="q-hd">
            <button className="q-back" onClick={onBack} aria-label="Voltar">‹</button>
            <div />
            <span className="q-counter">{stepNum} / {totalShown}</span>
          </div>
          <div className="q-prog-bar"><i style={{ width: pct + '%' }} /></div>
        </>
      )}
      {children}
    </div>
  );
}

// ────────────────────────────────────────────────────────
// Step 1 — Hero / Identificação
// ────────────────────────────────────────────────────────
function Step1({ q, t }) {
  const map = {
    A: V0Main, AR: V0Redesign, B: V2SocialProof, C: V3NoIntro,
    D: V4Method, E: V5LossAversion,
  };
  const Variant = map[t.introVariant] || V1Identification;
  return (
    <div className="qs" style={{ padding: 0 }}>
      <Variant t={t} onStart={() => { try { window.QT?.start?.(); } catch(e){} q.next(); }} embedded />
    </div>
  );
}

// ────────────────────────────────────────────────────────
// Step 2 — Gênero
// ────────────────────────────────────────────────────────
function Step2({ q }) {
  const pick = (v) => { q.set({ gender: v }); setTimeout(q.next, 150); };
  return (
    <Shell stepNum={1} onBack={q.back}>
      <div className="q-body">
        <p className="q-eyebrow">Pergunta 1</p>
        <h1 className="q-title lg">Qual seu <span style={{color:'var(--brand)'}}>gênero</span>?</h1>
        <p className="q-sub">Vamos personalizar treino e referências de corpo.</p>
        <div className="q-cards">
          <button className={`q-card ${q.s.gender==='m'?'sel':''}`} onClick={() => pick('m')}>
            <div className="silh silh-male"><Silhouette type="man"/></div>
            <div className="nm">Masculino</div>
          </button>
          <button className={`q-card ${q.s.gender==='f'?'sel':''}`} onClick={() => pick('f')}>
            <div className="silh silh-female"><Silhouette type="woman"/></div>
            <div className="nm">Feminino</div>
          </button>
        </div>
      </div>
    </Shell>
  );
}

// Resolve nome de asset com rewrite opcional (window.QUIZ_IMG_REWRITE).
// Quando rewrite setado, retorna o path inteiro mapeado; senão concatena com `assets`.
function imgSrc(assets, name) {
  const rw = window.QUIZ_IMG_REWRITE && window.QUIZ_IMG_REWRITE[name];
  return rw || (assets + '/' + name);
}

// Silhuetas — imagens reais quando QUIZ_ASSETS disponível, SVG como fallback
function Silhouette({ type, gender }) {
  const A = window.QUIZ_ASSETS;
  if (A) {
    const f = gender === 'f';
    const map = {
      man:        f ? 'woman.webp'             : 'man.webp',
      woman:      'woman.webp',
      magro:      f ? 'woman-thin.png'         : 'man-thin.webp',
      falsomagro: f ? 'woman-fake-skinny.png'  : 'man-fake-skinny.webp',
      sobrepeso:  f ? 'woman-overweight.png'   : 'man-overweight.webp',
      obeso:      f ? 'woman-obese.png'        : 'man-obese.webp',
    };
    const name = map[type];
    if (name) return (
      <img src={imgSrc(A, name)} alt={type} style={{
        position: 'absolute', inset: 0,
        width: '100%', height: '100%',
        objectFit: 'cover', objectPosition: 'center top',
      }}/>
    );
  }
  // SVG fallback
  const c = "rgba(245,241,234,.22)";
  if (type === 'woman') return (
    <svg viewBox="0 0 60 100" fill={c}>
      <circle cx="30" cy="13" r="9"/>
      <path d="M22 23 L38 23 L42 50 L38 75 L42 95 L18 95 L22 75 L18 50 Z"/>
    </svg>
  );
  if (type === 'man') return (
    <svg viewBox="0 0 60 100" fill={c}>
      <circle cx="30" cy="13" r="9"/>
      <path d="M16 26 L44 26 L48 55 L40 95 L20 95 L12 55 Z"/>
    </svg>
  );
  const w = { magro: 14, falsomagro: 17, sobrepeso: 22, obeso: 28 }[type] || 17;
  return (
    <svg viewBox="0 0 60 100" fill={c}>
      <circle cx="30" cy="13" r="9"/>
      <path d={`M${30-w} 26 L${30+w} 26 L${30+w-2} 55 Q${30+w} 85 ${30+w/1.4} 95 L${30-w/1.4} 95 Q${30-w} 85 ${30-w+2} 55 Z`}/>
    </svg>
  );
}

// ────────────────────────────────────────────────────────
// Step 3 — Idade
// ────────────────────────────────────────────────────────
function Step3({ q }) {
  const opts = ['18 – 29 anos', '30 – 39 anos', '40 – 49 anos', '50+ anos'];
  const pick = (v) => { q.set({ age: v }); setTimeout(q.next, 150); };
  return (
    <Shell stepNum={2} onBack={q.back}>
      <div className="q-body">
        <p className="q-eyebrow">Pergunta 2</p>
        <h1 className="q-title">Qual a sua faixa de <span style={{color:'var(--brand)'}}>idade</span>?</h1>
        <p className="q-sub">A intensidade muda com a idade — mas o método funciona em qualquer uma.</p>
        <div className="q-opts">
          {opts.map(o => (
            <button key={o} className={`q-opt ${q.s.age===o?'sel':''}`} onClick={() => pick(o)}>
              <span className="lbl">{o}</span>
              <span className="arr">→</span>
            </button>
          ))}
        </div>
      </div>
    </Shell>
  );
}

// ────────────────────────────────────────────────────────
// Step 4 — Altura (slider)
// ────────────────────────────────────────────────────────
function Step4({ q }) {
  const [unit, setUnit] = React.useState(q.s.heightUnit);
  const min = unit === 'cm' ? 140 : 55;
  const max = unit === 'cm' ? 210 : 84;
  const val = unit === 'cm' ? q.s.height : Math.round(q.s.height / 2.54);
  const setVal = (v) => {
    const cm = unit === 'cm' ? +v : Math.round(+v * 2.54);
    q.set({ height: cm, heightUnit: unit });
  };
  const pct = ((val - min) / (max - min)) * 100;
  return (
    <Shell stepNum={3} onBack={q.back}>
      <div className="q-body">
        <p className="q-eyebrow">Pergunta 3</p>
        <h1 className="q-title">Qual a sua <span style={{color:'var(--brand)'}}>altura</span>?</h1>
        <div className="q-slider-wrap">
          <div className="q-slider-tabs">
            <button className={unit==='cm'?'on':''} onClick={() => setUnit('cm')}>cm</button>
            <button className={unit==='in'?'on':''} onClick={() => setUnit('in')}>pol</button>
          </div>
          <div className="q-slider-val">
            {val} <span className="u">{unit === 'cm' ? 'cm' : 'pol'}</span>
          </div>
        </div>
        <div className="q-ruler">
          <input type="range" min={min} max={max} value={val}
            onChange={e => setVal(e.target.value)}
            style={{ '--p': pct + '%' }}/>
          <div className="q-ruler-marks">
            <span>{min}</span><span>{Math.round((min+max)/2)}</span><span>{max}</span>
          </div>
        </div>
      </div>
      <div className="q-ft">
        <button className="cta" onClick={q.next}>Continuar <span className="arr">→</span></button>
      </div>
    </Shell>
  );
}

// ────────────────────────────────────────────────────────
// Step 5 — Peso (slider)
// ────────────────────────────────────────────────────────
function Step5({ q }) {
  const [unit, setUnit] = React.useState(q.s.weightUnit);
  const min = unit === 'kg' ? 40 : 88;
  const max = unit === 'kg' ? 150 : 330;
  const val = unit === 'kg' ? q.s.weight : Math.round(q.s.weight * 2.205);
  const setVal = (v) => {
    const kg = unit === 'kg' ? +v : Math.round(+v / 2.205);
    q.set({ weight: kg, weightUnit: unit });
  };
  const pct = ((val - min) / (max - min)) * 100;
  return (
    <Shell stepNum={4} onBack={q.back}>
      <div className="q-body">
        <p className="q-eyebrow">Pergunta 4</p>
        <h1 className="q-title">Qual o seu <span style={{color:'var(--brand)'}}>peso</span> aproximado?</h1>
        <div className="q-slider-wrap">
          <div className="q-slider-tabs">
            <button className={unit==='kg'?'on':''} onClick={() => setUnit('kg')}>kg</button>
            <button className={unit==='lb'?'on':''} onClick={() => setUnit('lb')}>lb</button>
          </div>
          <div className="q-slider-val">
            {val} <span className="u">{unit}</span>
          </div>
        </div>
        <div className="q-ruler">
          <input type="range" min={min} max={max} value={val}
            onChange={e => setVal(e.target.value)}
            style={{ '--p': pct + '%' }}/>
          <div className="q-ruler-marks">
            <span>{min}</span><span>{Math.round((min+max)/2)}</span><span>{max}</span>
          </div>
        </div>
      </div>
      <div className="q-ft">
        <button className="cta" onClick={q.next}>Continuar <span className="arr">→</span></button>
      </div>
    </Shell>
  );
}

// ────────────────────────────────────────────────────────
// Step 6 — Aviso
// ────────────────────────────────────────────────────────
function Step6({ q }) {
  return (
    <Shell stepNum={4} onBack={q.back}>
      <div className="q-body" style={{ padding: '20px 24px' }}>
        <div className="q-warn">
          <div className="ic">⚠️</div>
          <h2>Atenção total agora</h2>
          <p>
            A partir daqui, leia tudo com calma e responda <strong style={{color:'#f5f1ea'}}>com a verdade</strong>.
            <br/><br/>
            É o que torna o seu plano <strong style={{color:'var(--brand)'}}>100% preciso e eficaz</strong>.
          </p>
        </div>
      </div>
      <div className="q-ft">
        <button className="cta" onClick={q.next}>OK, estou de acordo <span className="arr">→</span></button>
      </div>
    </Shell>
  );
}

// ────────────────────────────────────────────────────────
// Step 7 — Físico atual
// ────────────────────────────────────────────────────────
function Step7({ q }) {
  const opts = [
    { v: 'magro',       l: 'Magro' },
    { v: 'falsomagro',  l: 'Falso magro' },
    { v: 'sobrepeso',   l: 'Sobrepeso' },
    { v: 'obeso',       l: 'Obeso' },
  ];
  const pick = (v) => { q.set({ physique: v }); setTimeout(q.next, 180); };
  return (
    <Shell stepNum={5} onBack={q.back}>
      <div className="q-body">
        <p className="q-eyebrow">Pergunta 5</p>
        <h1 className="q-title">Como está seu <span style={{color:'var(--brand)'}}>físico</span> hoje?</h1>
        <p className="q-sub">Sem julgamento. Resposta confidencial — vai calibrar seu plano.</p>
        <div className="q-cards">
          {opts.map(o => (
            <button key={o.v} className={`q-card ${q.s.physique===o.v?'sel':''}`} onClick={() => pick(o.v)}>
              <div className={`silh silh-${o.v}`}><Silhouette type={o.v} gender={q.s.gender}/></div>
              <div className="nm">{o.l}</div>
            </button>
          ))}
        </div>
      </div>
    </Shell>
  );
}

// ────────────────────────────────────────────────────────
// Step 8 — História (Nestor / Paulo / Maria / Ana)
// ────────────────────────────────────────────────────────
function Step8({ q }) {
  const A = window.QUIZ_ASSETS;
  const isFem   = q.s.gender === 'f';
  const isHeavy = q.s.physique === 'sobrepeso' || q.s.physique === 'obeso';

  const ph = q.s.physique;

  // ── copy ──
  const story = (() => {
    if (isFem && isHeavy) return {
      name: 'Ana', pronoun: 'a',
      baTag: ph === 'obeso' ? 'Obesa · antes' : 'Sobrepeso · antes',
      intro: 'Com sobrepeso, tentou academia 3 vezes e desistiu. Achava que precisava de dieta restritiva e personal trainer.',
      resultado: '−9 kg de gordura, mais disposta e definida.',
    };
    if (isFem) return {
      name: 'Maria', pronoun: 'a',
      baTag: ph === 'magro' ? 'Magra · antes' : 'Falsa magra · antes',
      intro: ph === 'magro'
        ? 'Magra e sem tônus, tentou academia 3 vezes e desistiu. Achava que precisava de peso pesado e suplementos.'
        : 'Falsa magra, tentou academia 3 vezes e desistiu. Achava que precisava de equipamento, suplemento e dieta maluca.',
      resultado: 'Ganhou definição e perdeu gordura localizada. Totalmente transformada!',
    };
    if (isHeavy) return {
      name: 'Paulo', pronoun: 'o',
      baTag: ph === 'obeso' ? 'Obeso · antes' : 'Sobrepeso · antes',
      intro: 'Pagava academia, seguia treino convencional e gastava com dietas — e mesmo assim continuava acima do peso, sem energia.',
      resultado: '−11,5 kg de gordura, mais disposto e forte.',
    };
    return {
      name: 'Nestor', pronoun: 'o',
      baTag: ph === 'magro' ? 'Magro · antes' : 'Falso magro · antes',
      intro: ph === 'magro'
        ? 'Magro e sem massa, tentou academia 3 vezes e largou. Achava que precisava de peso pesado e suplementos caros.'
        : 'Falso magro, tentou academia 3 vezes e largou. Achava que precisava de equipamento, suplemento, dieta maluca.',
      resultado: 'Ganhou massa muscular e queimou gordura. Totalmente transformado!',
    };
  })();

  // ── imagens ──
  const beforeImg = A && (isHeavy
    ? A + (isFem ? '/woman-before-overweight.png' : '/man-before-overweight.png')
    : A + (isFem ? '/woman-before-thin.png'       : '/before-thin.webp'));

  const afterImg = A && (isHeavy
    ? A + (isFem ? '/woman-after-overweight.png'  : '/man-after-overweight.png')
    : A + (isFem ? '/woman-after-thin.png'        : '/after-thin.webp'));

  const baStyle = (img) => img ? {
    backgroundImage: `url(${img})`,
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center bottom',
    backgroundColor: '#161210',
  } : {};

  return (
    <Shell stepNum={6} onBack={q.back}>
      <div className="q-body q-story">
        <p className="q-eyebrow">Antes de continuar</p>
        <h2>{story.pronoun === 'a' ? 'A' : 'O'} {story.name} era igual a você há 4 meses.</h2>
        <p>{story.intro}</p>
        <p>Não precisava. <strong style={{color:'#f5f1ea'}}>Calistenia em casa, 15 min/dia.</strong> 28 dias depois, est{story.pronoun === 'a' ? 'a' : 'e'} aqui é {story.pronoun} {story.name}:</p>
        <div className="ba-grid">
          <div style={{ display:'flex', flexDirection:'column', gap: 6 }}>
            <div className="ba before" style={baStyle(beforeImg)} />
            <div className="ba-caption">{story.baTag}</div>
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap: 6 }}>
            <div className="ba after" style={baStyle(afterImg)} />
            <div className="ba-caption ba-caption--after">28 dias depois</div>
          </div>
        </div>
        <p style={{ marginTop: 4, opacity: .7, fontSize: 13 }}>
          {story.resultado} A diferença foi o <strong style={{color:'var(--brand)'}}>método</strong>.
        </p>
      </div>
      <div className="q-ft">
        <button className="cta" onClick={q.next}>{story.cta} <span className="arr">→</span></button>
      </div>
    </Shell>
  );
}

// ────────────────────────────────────────────────────────
// Step 9 — Experiência com calistenia
// ────────────────────────────────────────────────────────
function Step9({ q }) {
  const opts = [
    { v: 'sim', ic: '✅', l: 'Sim, tenho experiência' },
    { v: 'nao', ic: '🙅', l: 'Não, sou novo nisso' },
    { v: 'tentou', ic: '😵', l: 'Já tentei, não consegui' },
    { v: 'voltar', ic: '🔄', l: 'Quero voltar a praticar' },
  ];
  const pick = (v) => { q.set({ experience: v }); setTimeout(q.next, 150); };
  return (
    <Shell stepNum={7} onBack={q.back}>
      <div className="q-body">
        <p className="q-eyebrow">Pergunta 6</p>
        <h1 className="q-title">Já praticou <span style={{color:'var(--brand)'}}>calistenia</span>?</h1>
        <p className="q-sub">75% dos alunos começam do zero. Tudo bem qualquer resposta.</p>
        <div className="q-opts">
          {opts.map(o => (
            <button key={o.v} className={`q-opt ${q.s.experience===o.v?'sel':''}`} onClick={() => pick(o.v)}>
              <span className="ic">{o.ic}</span>
              <span className="lbl">{o.l}</span>
              <span className="arr">→</span>
            </button>
          ))}
        </div>
      </div>
    </Shell>
  );
}

// ────────────────────────────────────────────────────────
// Step 10 — Apresentação Luca / Floripa Calistenia
// ────────────────────────────────────────────────────────
function Step10({ q }) {
  return (
    <Shell stepNum={8} onBack={q.back}>
      <div className="q-body q-story">
        <p className="q-eyebrow">Quem está por trás</p>
        <h2>Luca · Floripa Calistenia</h2>
        {window.QUIZ_ASSETS
          ? <img src={window.QUIZ_ASSETS + '/instagram-profile.png'} alt="Luca · Floripa Calistenia"
              style={{ width: '100%', aspectRatio: '4/5', borderRadius: 14, marginTop: 4, objectFit: 'cover', objectPosition: 'center top', display: 'block' }}/>
          : <div style={{
              aspectRatio: '16/9', borderRadius: 14, marginTop: 4,
              background: 'linear-gradient(135deg,#3a312a 0%,#1a1612 100%)',
              display: 'flex', alignItems: 'flex-end', padding: 14,
              fontSize: 11, fontWeight: 700, letterSpacing: '.12em',
              textTransform: 'uppercase', opacity: .7,
            }}>Foto / vídeo do Luca</div>
        }
        <div className="q-auth-stats">
          <div><div className="n">+2.6 mi</div><div className="l">seguidores no Instagram</div></div>
          <div><div className="n">+40k</div><div className="l">alunos no método</div></div>
          <div><div className="n">#1</div><div className="l">calistenia do mundo</div></div>
          <div><div className="n">7 anos</div><div className="l">ensinando o método</div></div>
        </div>
        <div className="q-auth-quote">
          "Não é sobre treinar mais. É sobre treinar do jeito certo, no seu ritmo, em casa."
        </div>
      </div>
      <div className="q-ft">
        <button className="cta" onClick={q.next}>É disso que eu preciso <span className="arr">→</span></button>
      </div>
    </Shell>
  );
}

// ────────────────────────────────────────────────────────
// Step 11 — O que você terá acesso
// ────────────────────────────────────────────────────────
function Step11({ q }) {
  const feats = [
    { ic: '⏱', t: 'Treinos de 15 min', d: 'Cabe em qualquer rotina. Antes do trabalho, na hora do almoço, à noite.' },
    { ic: '🎬', t: 'Vídeo-aulas em HD', d: 'Cada exercício explicado do zero, com variação fácil e difícil.' },
    { ic: '📈', t: 'Progressão semanal', d: 'O método ajusta a dificuldade conforme você evolui — sem platô.' },
    { ic: '💬', t: 'Suporte WhatsApp', d: 'Tira dúvida com a equipe direto no zap. Resposta em até 12h.' },
  ];
  return (
    <Shell stepNum={9} onBack={q.back}>
      <div className="q-body">
        <p className="q-eyebrow">O que você vai ter acesso</p>
        <h1 className="q-title">Tudo dentro do <span style={{color:'var(--brand)'}}>app</span>.</h1>
        <p className="q-sub">Sem academia, sem equipamento, sem assinatura mensal.</p>
        <div className="q-feat-list">
          {feats.map((f, i) => (
            <div className="q-feat" key={i}>
              <div className="feat-ic">{f.ic}</div>
              <div>
                <h4>{f.t}</h4>
                <p>{f.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="q-ft">
        <button className="cta" onClick={q.next}>Sim, é isso que eu quero <span className="arr">→</span></button>
      </div>
    </Shell>
  );
}

// ────────────────────────────────────────────────────────
// Step 12 — Frequência
// ────────────────────────────────────────────────────────
function Step12({ q }) {
  const opts = [
    { v: 'no',    ic: '😬', l: 'Não treino ainda' },
    { v: '1-2',   ic: '🙂', l: '1 ou 2 vezes por semana' },
    { v: '3-4',   ic: '😁', l: '3 ou 4 vezes por semana' },
    { v: '5+',    ic: '😍', l: '5 vezes ou mais' },
  ];
  const pick = (v) => { q.set({ frequency: v }); setTimeout(q.next, 150); };
  return (
    <Shell stepNum={10} onBack={q.back}>
      <div className="q-body">
        <p className="q-eyebrow">Pergunta 7</p>
        <h1 className="q-title">Quantas vezes por <span style={{color:'var(--brand)'}}>semana</span> você treina?</h1>
        <div className="q-opts">
          {opts.map(o => (
            <button key={o.v} className={`q-opt ${q.s.frequency===o.v?'sel':''}`} onClick={() => pick(o.v)}>
              <span className="ic">{o.ic}</span>
              <span className="lbl">{o.l}</span>
              <span className="arr">→</span>
            </button>
          ))}
        </div>
      </div>
    </Shell>
  );
}

// ────────────────────────────────────────────────────────
// Multi-select factory
// ────────────────────────────────────────────────────────
function MultiStep({ q, stepNum, eyebrow, title, accent, sub, opts, keyName }) {
  const arr = q.s[keyName];
  return (
    <Shell stepNum={stepNum} onBack={q.back}>
      <div className="q-body">
        <p className="q-eyebrow">{eyebrow}</p>
        <h1 className="q-title">{title} <span style={{color:'var(--brand)'}}>{accent}</span>?</h1>
        {sub && <p className="q-sub">{sub}</p>}
        <div className="q-opts">
          {opts.map(o => (
            <button key={o.v} className={`q-opt ${arr.includes(o.v)?'sel':''}`} onClick={() => q.toggle(keyName, o.v)}>
              {o.ic && <span className="ic">{o.ic}</span>}
              <span className="lbl">{o.l}</span>
              <span className="check">{arr.includes(o.v) ? '✓' : ''}</span>
            </button>
          ))}
        </div>
      </div>
      <div className="q-ft">
        <button className="cta" onClick={q.next} disabled={arr.length === 0} style={{ opacity: arr.length ? 1 : .4 }}>
          Continuar <span className="arr">→</span>
        </button>
        <div className="q-continue-help">
          {arr.length === 0 ? 'Selecione ao menos uma opção' : `${arr.length} ${arr.length === 1 ? 'selecionada' : 'selecionadas'} · pode marcar mais de uma`}
        </div>
      </div>
    </Shell>
  );
}

// Step 13 — Maior dificuldade
const Step13 = ({ q }) => (
  <MultiStep q={q} stepNum={11} eyebrow="Pergunta 8"
    title="Qual sua maior" accent="dificuldade"
    sub="Marque tudo o que se aplica."
    keyName="difficulties"
    opts={[
      { v: 'tempo',     ic: '⏳', l: 'Falta de tempo' },
      { v: 'motiv',     ic: '😣', l: 'Falta de motivação' },
      { v: 'discip',    ic: '😬', l: 'Falta de constância / disciplina' },
      { v: 'comecar',   ic: '😵', l: 'Não sei por onde começar' },
      { v: 'dinheiro',  ic: '💸', l: 'Falta de $ pra academia ou suplemento' },
    ]}
  />
);

// Step 14 — O que incomoda no corpo
const Step14 = ({ q }) => (
  <MultiStep q={q} stepNum={12} eyebrow="Pergunta 9"
    title="O que mais te" accent="incomoda no corpo"
    keyName="bodyIssues"
    opts={[
      { v: 'gordura',   l: 'Gordura abdominal' },
      { v: 'flacido',   l: 'Corpo flácido' },
      { v: 'massa',     l: 'Falta de massa muscular' },
      { v: 'forca',     l: 'Falta de força ou condicionamento' },
      { v: 'energia',   l: 'Falta de energia e disposição' },
    ]}
  />
);

// Step 15 — O que mudaria em você
const Step15 = ({ q }) => (
  <MultiStep q={q} stepNum={13} eyebrow="Pergunta 10"
    title="Vendo resultado, o que" accent="mudaria em você"
    keyName="changes"
    opts={[
      { v: 'autoest',   ic: '📱', l: 'Minha autoestima' },
      { v: 'motiv',     ic: '🚀', l: 'Minha motivação' },
      { v: 'conf',      ic: '💪', l: 'Confiança em público' },
      { v: 'rel',       ic: '❤️', l: 'Meus relacionamentos' },
      { v: 'camisa',    ic: '👕', l: 'Tirar a camisa em público' },
    ]}
  />
);

// Step 16 — O que desenvolver
const Step16 = ({ q }) => (
  <MultiStep q={q} stepNum={14} eyebrow="Pergunta 11"
    title="Além do físico, o que mais" accent="desenvolver"
    keyName="develop"
    opts={[
      { v: 'mob',       l: 'Mobilidade / flexibilidade' },
      { v: 'res',       l: 'Resistência e condicionamento' },
      { v: 'forca',     l: 'Força funcional' },
      { v: 'esp',       l: 'Desempenho em outros esportes' },
      { v: 'dor',       l: 'Viver sem dores no corpo' },
    ]}
  />
);

// ────────────────────────────────────────────────────────
// Step 17 — Objetivo principal
// ────────────────────────────────────────────────────────
function Step17({ q }) {
  const pick = (v) => { q.set({ objective: v }); setTimeout(q.next, 180); };
  return (
    <Shell stepNum={15} onBack={q.back}>
      <div className="q-body">
        <p className="q-eyebrow">Última pergunta</p>
        <h1 className="q-title lg">Qual mudança você mais <span style={{color:'var(--brand)'}}>quer ver</span>?</h1>
        <p className="q-sub">Vai definir a base do seu plano.</p>
        <div className="q-cards cols-1" style={{ marginTop: 4 }}>
          <button className={`q-card ${q.s.objective==='gain'?'sel':''}`} onClick={() => pick('gain')} style={{ flexDirection: 'row', alignItems: 'stretch', padding: 14, gap: 14 }}>
            <div className="silh silh-objgain" style={{ width: 90, aspectRatio: '1/1.1', flex: '0 0 auto' }}>
              <Silhouette type="man" gender={q.s.gender}/>
            </div>
            <div style={{ flex: 1, textAlign: 'left', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <div style={{ fontSize: 22 }}>💪</div>
              <div className="nm" style={{ marginTop: 4 }}>Ganhar força e massa</div>
              <div className="meta" style={{ marginTop: 4, fontSize: 12.5, opacity: .65 }}>+ até 5 kg de massa corporal</div>
            </div>
            <div aria-hidden="true" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto', width: 28, color: 'var(--brand)', fontSize: 26, fontWeight: 700, lineHeight: 1 }}>→</div>
          </button>
          <button className={`q-card ${q.s.objective==='loss'?'sel':''}`} onClick={() => pick('loss')} style={{ flexDirection: 'row', alignItems: 'stretch', padding: 14, gap: 14 }}>
            <div className="silh silh-objloss" style={{ width: 90, aspectRatio: '1/1.1', flex: '0 0 auto' }}>
              <Silhouette type="falsomagro" gender={q.s.gender}/>
            </div>
            <div style={{ flex: 1, textAlign: 'left', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <div style={{ fontSize: 22 }}>🔥</div>
              <div className="nm" style={{ marginTop: 4 }}>Perder peso e gordura</div>
              <div className="meta" style={{ marginTop: 4, fontSize: 12.5, opacity: .65 }}>– até 12 kg de gordura</div>
            </div>
            <div aria-hidden="true" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto', width: 28, color: 'var(--brand)', fontSize: 26, fontWeight: 700, lineHeight: 1 }}>→</div>
          </button>
        </div>
      </div>
    </Shell>
  );
}

// ────────────────────────────────────────────────────────
// Step 18 — Loading
// ────────────────────────────────────────────────────────
function Step18({ q }) {
  const [pct, setPct] = React.useState(0);
  const [stepIdx, setStepIdx] = React.useState(0);
  const steps = [
    'Lendo seu perfil...',
    'Calibrando intensidade...',
    'Selecionando exercícios...',
    'Montando sua semana 1...',
    'Plano pronto.',
  ];
  React.useEffect(() => {
    let p = 0;
    const it = setInterval(() => {
      p += 2;
      setPct(p);
      const idx = Math.min(steps.length - 1, Math.floor(p / 22));
      setStepIdx(idx);
      if (p >= 100) {
        clearInterval(it);
        setTimeout(() => q.next(), 600);
      }
    }, 160);
    return () => clearInterval(it);
  }, []);
  const r = 42;
  const c = 2 * Math.PI * r;
  return (
    <Shell stepNum={16} onBack={q.back} hideHeader>
      <div className="q-body" style={{ paddingTop: 70 }}>
        <div className="q-loading">
          <div className="ring">
            <svg viewBox="0 0 100 100">
              <circle cx="50" cy="50" r={r} stroke="rgba(255,255,255,.08)" strokeWidth="6" fill="none"/>
              <circle cx="50" cy="50" r={r} stroke="var(--brand)" strokeWidth="6" fill="none"
                strokeLinecap="round"
                strokeDasharray={c}
                strokeDashoffset={c - (c * pct/100)}
                style={{ transition: 'stroke-dashoffset .12s linear' }}/>
            </svg>
            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, letterSpacing: '-.02em' }}>
              {pct}%
            </div>
          </div>
          <h2>Ótimo! Obrigado por todas as respostas.</h2>
          <p>Estamos analisando agora — não feche a tela.</p>
          <ul className="step-list">
            {steps.map((t, i) => (
              <li key={i} className={i < stepIdx ? 'done' : i === stepIdx ? 'on' : ''}>
                <span className="b">{i < stepIdx ? '✓' : i + 1}</span>
                <span>{t}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </Shell>
  );
}

// ────────────────────────────────────────────────────────
// Step 19 — Resultados
// ────────────────────────────────────────────────────────
function Step19({ q }) {
  const gauges = [
    { l: 'Autoestima',     d: 'Como você se vê hoje',           v: 28, t: 92 },
    { l: 'Bem-estar',      d: 'Energia e disposição diária',    v: 35, t: 88 },
    { l: 'Risco metabólico', d: 'Quanto mais alto, pior',       v: 72, t: 22, inv: true },
    { l: 'Massa muscular', d: 'Comparado ao ideal pra altura',  v: 41, t: 76 },
  ];
  return (
    <Shell stepNum={17} onBack={q.back}>
      <div className="q-body">
        <p className="q-eyebrow">Resultado</p>
        <div className="q-result-banner">
          <span className="ic">⚠️</span>
          <span className="txt">
            Vou ser direto: do jeito que tá, <strong style={{color:'#fff'}}>seu corpo está te travando</strong>.
            Mas dá pra mudar — em 28 dias.
          </span>
        </div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, letterSpacing: '-.02em', margin: '6px 0 12px' }}>
          Como você está hoje
        </h2>
        <div className="q-gauges">
          {gauges.map((g, i) => <Gauge key={i} {...g} />)}
        </div>
      </div>
      <div className="q-ft">
        <button className="cta" onClick={q.next}>Quero mudar isso agora <span className="arr">→</span></button>
        <div className="q-continue-help">A próxima tela mostra o que muda em 28 dias</div>
      </div>
    </Shell>
  );
}

function Gauge({ l, d, v, inv }) {
  const r = 22;
  const c = 2 * Math.PI * r;
  const hue = Math.max(0, 50 - 0.5 * v);
  const color = `hsl(${hue}, 88%, 55%)`;
  return (
    <div className="q-gauge">
      <div className="ring-sm">
        <svg viewBox="0 0 50 50">
          <circle cx="25" cy="25" r={r} stroke="rgba(255,255,255,.08)" strokeWidth="4" fill="none"/>
          <circle cx="25" cy="25" r={r} stroke={color} strokeWidth="4" fill="none"
            strokeLinecap="round" strokeDasharray={c} strokeDashoffset={c - c * v/100}/>
        </svg>
        <div className="pct" style={{ color }}>{v}</div>
      </div>
      <div className="body">
        <h4>{l}</h4>
        <p>{d}</p>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────
// Step 20 — Evolução / Projeção final
// ────────────────────────────────────────────────────────
function Step20({ q }) {
  const isLoss = q.s.objective === 'loss';
  const target = isLoss ? '–8 kg de gordura' : '+4 kg de massa';
  return (
    <Shell hideHeader onBack={q.back}>
      <div className="q-body">
        <p className="q-eyebrow">Sua projeção</p>
        <h1 className="q-title">Em <span style={{color:'var(--brand)'}}>28 dias</span>, isso é o que muda.</h1>
        <p className="q-sub">Baseado nas suas respostas e na média dos {(4812).toLocaleString('pt-BR')} alunos com perfil próximo ao seu.</p>

        <div className="q-proj-card">
          <h4>Meta projetada</h4>
          <div className="big">{target}</div>
          <div className="meta">15 min/dia · em casa · sem equipamento</div>
        </div>

        <div className="q-timeline">
          <div className="q-tl-step"><div className="day">Sem 1</div><div className="lbl">Adaptação · ritmo leve</div></div>
          <div className="q-tl-step"><div className="day">Sem 2</div><div className="lbl">Primeira mudança visível</div></div>
          <div className="q-tl-step"><div className="day">Sem 3</div><div className="lbl">Força em alta</div></div>
          <div className="q-tl-step"><div className="day">Sem 4</div><div className="lbl">Resultado consolidado</div></div>
        </div>

      </div>
      <div className="q-ft">
        <button className="cta" onClick={() => {
          try { window.QT?.complete?.(q.s.gender, q.s.objective, q.s.physique); } catch(e){}
          window.__quizCompleted = true;
          const dest = window.QUIZ_NEXT_URL || '../video.html';
          const sid  = window.QT?.getSid?.();
          const sep  = dest.indexOf('?') > -1 ? '&' : '?';
          window.location.href = sid ? dest + sep + '_sid=' + sid : dest;
        }}>
          Ver meu plano completo <span className="arr">→</span>
        </button>
        <div className="q-continue-help">Acesso vitalício · sem mensalidade</div>
      </div>
    </Shell>
  );
}

// ────────────────────────────────────────────────────────
// App router
// ────────────────────────────────────────────────────────
const STEPS = [
  null, Step1, Step2, Step3, Step4, Step5, Step6, Step7, Step8, Step9, Step10,
  Step11, Step12, Step13, Step14, Step15, Step16, Step17, Step18, Step19, Step20,
];

function App() {
  const q = useQuizState();
  // Persist step in localStorage
  React.useEffect(() => {
    const saved = localStorage.getItem('quiz-step');
    if (saved) q.goto(+saved);
  }, []);
  React.useEffect(() => {
    localStorage.setItem('quiz-step', q.s.step);
  }, [q.s.step]);

  // QT.start (evento "init" → flag initiated) ao sair da intro — paridade com
  // a.html (control). Sem isso, o redesign nunca marcava initiated/start_rate (G1).
  React.useEffect(() => {
    if (q.s.step > 1 && !window.__qtStarted) {
      window.__qtStarted = true;
      try { window.QT && window.QT.start && window.QT.start(); } catch (e) {}
    }
  }, [q.s.step]);

  // Quiz abandon tracking — dispara QT.abandon ao sair sem completar
  React.useEffect(() => {
    let sent = false;
    const fire = () => {
      if (sent || window.__quizCompleted) return;
      sent = true;
      try {
        const step = q.s.step;
        const name = STEP_QUESTIONS[step] || ('step_' + step);
        const pct = Math.round(((step - 1) * 100) / (TOTAL - 1));
        window.QT?.abandon?.(step, name, pct);
      } catch (e) {}
    };
    const onVis = () => { if (document.visibilityState === 'hidden') fire(); };
    window.addEventListener('beforeunload', fire);
    window.addEventListener('pagehide', fire);
    document.addEventListener('visibilitychange', onVis);
    return () => {
      window.removeEventListener('beforeunload', fire);
      window.removeEventListener('pagehide', fire);
      document.removeEventListener('visibilitychange', onVis);
    };
  }, [q.s.step]);

  const [t, setTweak] = useTweaks(INTRO_TWEAKS);
  React.useEffect(() => {
    const brandColor = t.ctaPrimary;
    const ctaColor = window.QUIZ_CTA_COLOR || brandColor;
    document.documentElement.style.setProperty("--brand", brandColor);
    const hex = ctaColor.replace("#", "");
    const r = parseInt(hex.slice(0,2), 16);
    const g = parseInt(hex.slice(2,4), 16);
    const b = parseInt(hex.slice(4,6), 16);
    const lum = (0.299*r + 0.587*g + 0.114*b) / 255;
    document.documentElement.style.setProperty("--cta-bg", ctaColor);
    document.documentElement.style.setProperty("--cta-fg", lum > 0.6 ? "#0a0a0a" : "#fff");
  }, [t.ctaPrimary]);

  const Comp = STEPS[q.s.step] || Step1;
  return (
    <div className="q-stage">
      <Comp q={q} t={t} />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Intro / Step 1" />
        <TweakRadio label="Variação" value={t.introVariant}
          options={["A","B","C","D","E"]}
          onChange={(v) => { setTweak("introVariant", v); q.goto(1); }}/>
        <TweakColor label="Cor do CTA" value={t.ctaPrimary}
          options={["#E96A2D", "#21B36F", "#1E63E5", "#F5C518", "#E94545", "#0a0a0a"]}
          onChange={(v) => setTweak("ctaPrimary", v)}/>
        <TweakSlider label="Nº de alunos" value={t.studentCount} min={1000} max={15000} step={50}
          onChange={(v) => setTweak("studentCount", v)}/>
        <TweakToggle label="Mostrar prova social" value={t.showSocialProof}
          onChange={(v) => setTweak("showSocialProof", v)}/>

        <TweakSection label="A · Identificação" />
        <TweakText label="Eyebrow" value={t.v1Eyebrow} onChange={(v) => setTweak("v1Eyebrow", v)}/>
        <TweakText label="Headline" value={t.v1Headline} onChange={(v) => setTweak("v1Headline", v)}/>
        <TweakText label="Subhead" value={t.v1Sub} onChange={(v) => setTweak("v1Sub", v)}/>
        <TweakText label="CTA" value={t.v1Cta} onChange={(v) => setTweak("v1Cta", v)}/>

        <TweakSection label="B · Prova social" />
        <TweakText label="Eyebrow" value={t.v2Eyebrow} onChange={(v) => setTweak("v2Eyebrow", v)}/>
        <TweakText label="Subtítulo do número" value={t.v2Sub} onChange={(v) => setTweak("v2Sub", v)}/>
        <TweakText label="Tagline" value={t.v2Tagline} onChange={(v) => setTweak("v2Tagline", v)}/>
        <TweakText label="CTA" value={t.v2Cta} onChange={(v) => setTweak("v2Cta", v)}/>

        <TweakSection label="C · Zero intro" />
        <TweakText label="Pergunta" value={t.v3Question} onChange={(v) => setTweak("v3Question", v)}/>
        <TweakText label="Opção 1" value={t.v3Opt1} onChange={(v) => setTweak("v3Opt1", v)}/>
        <TweakText label="Opção 2" value={t.v3Opt2} onChange={(v) => setTweak("v3Opt2", v)}/>
        <TweakText label="Opção 3" value={t.v3Opt3} onChange={(v) => setTweak("v3Opt3", v)}/>
        <TweakText label="Opção 4" value={t.v3Opt4} onChange={(v) => setTweak("v3Opt4", v)}/>

        <TweakSection label="D · Método específico" />
        <TweakText label="Eyebrow" value={t.v4Eyebrow} onChange={(v) => setTweak("v4Eyebrow", v)}/>
        <TweakText label="Headline" value={t.v4Headline} onChange={(v) => setTweak("v4Headline", v)}/>
        <TweakText label="CTA" value={t.v4Cta} onChange={(v) => setTweak("v4Cta", v)}/>

        <TweakSection label="E · Loss aversion" />
        <TweakText label="Headline" value={t.v5Headline} onChange={(v) => setTweak("v5Headline", v)}/>
        <TweakText label="Subhead" value={t.v5Sub} onChange={(v) => setTweak("v5Sub", v)}/>
        <TweakText label="CTA" value={t.v5Cta} onChange={(v) => setTweak("v5Cta", v)}/>
      </TweaksPanel>
    </div>
  );
}


if (!window.QUIZ_SKIP_REACT) {
  ReactDOM.createRoot(document.getElementById('root')).render(<App />);
}