// Diagnostic.jsx — multi-step form, fully functional
const { useState: useStateD, useEffect: useEffectD, useRef: useRefD } = React;

const STEPS = [
  {
    id: 'segment', label: 'Segmento da empresa',
    q: 'Qual é o segmento da sua empresa?',
    options: [
      { id: 'comercio',  label: 'Comércio',  hint: 'Varejo, atacado, distribuição' },
      { id: 'servicos',  label: 'Serviços',  hint: 'Profissionais, tech, agências' },
      { id: 'industria', label: 'Indústria', hint: 'Manuf., transformação, insumos' },
      { id: 'outro',     label: 'Outro',     hint: 'Agro, construção, saúde, outros' },
    ],
  },
  {
    id: 'regime', label: 'Regime tributário',
    q: 'Qual é o regime tributário atual?',
    options: [
      { id: 'simples',    label: 'Simples Nacional',  hint: 'Anexos I a V' },
      { id: 'presumido',  label: 'Lucro Presumido',   hint: 'Apuração trimestral' },
      { id: 'real',       label: 'Lucro Real',        hint: 'Apuração mensal/trimestral' },
      { id: 'naosei',     label: 'Não sei informar',  hint: 'Tudo bem, a gente descobre' },
    ],
  },
  {
    id: 'faturamento', label: 'Faturamento anual',
    q: 'Qual é o faturamento anual aproximado?',
    options: [
      { id: 'a1', label: 'Até R\$ 360 mil',          hint: 'MEI / ME pequeno' },
      { id: 'a2', label: 'R\$ 361 mil a R\$ 4,8 mi',  hint: 'Simples Nacional' },
      { id: 'a3', label: 'R\$ 4,8 mi a R\$ 10 mi',    hint: 'Presumido comum' },
      { id: 'a4', label: 'Acima de R\$ 10 mi',       hint: 'Real / obrigatório' },
    ],
  },
  {
    id: 'autuacao', label: 'Notificação ou autuação',
    q: 'Já recebeu notificação ou autuação fiscal?',
    options: [
      { id: 'ativa',    label: 'Sim, pendência ativa',   hint: 'Precisa resposta urgente' },
      { id: 'resolvi',  label: 'Sim, já resolvi',        hint: 'Mas ainda tem dúvidas' },
      { id: 'nao',      label: 'Não',                    hint: 'Quero prevenir' },
      { id: 'naosei',   label: 'Não sei verificar',      hint: 'A gente confere pra você' },
    ],
  },
  {
    id: 'dor', label: 'Principal dificuldade',
    q: 'Qual é a principal dificuldade tributária hoje?',
    options: [
      { id: 'muito',      label: 'Pago muito imposto',            hint: 'Suspeito pagar a mais' },
      { id: 'autuacao',   label: 'Recebi uma autuação',           hint: 'Preciso impugnar' },
      { id: 'plan',       label: 'Nunca fiz planejamento',        hint: 'Quero estratégia' },
      { id: 'recuperar',  label: 'Suspeito ter a recuperar',      hint: 'Créditos parados' },
    ],
  },
  {
    id: 'contato', label: 'Contato',
    q: 'Quase lá. Para onde enviamos a análise?',
    contact: true,
  },
];

function Diagnostic({ prefillSegment, jumpToken }) {
  const [step, setStep] = useStateD(0);
  const [answers, setAnswers] = useStateD({});
  const [sent, setSent] = useStateD(false);
  const [nameVal, setNameVal] = useStateD('');
  const [phoneVal, setPhoneVal] = useStateD('');
  const [errors, setErrors] = useStateD({});
  const [transitioning, setTransitioning] = useStateD(false);
  const rootRef = useRefD(null);

  useEffectD(() => {
    if (prefillSegment && !sent) {
      setAnswers(a => ({ ...a, segment: prefillSegment }));
      setStep(1);
    }
  }, [jumpToken]);

  const current = STEPS[step];
  const pct = Math.round(((step) / (STEPS.length - 1)) * 100);

  const pick = (val) => {
    setTransitioning(true);
    setAnswers(a => ({ ...a, [current.id]: val }));
    setTimeout(() => {
      setStep(s => Math.min(STEPS.length - 1, s + 1));
      setTransitioning(false);
    }, 260);
  };

  const prev = () => setStep(s => Math.max(0, s - 1));

  const phoneFmt = (raw) => {
    const d = raw.replace(/\D/g, '').slice(0, 11);
    if (d.length <= 2) return d;
    if (d.length <= 6) return `(${d.slice(0,2)}) ${d.slice(2)}`;
    if (d.length <= 10) return `(${d.slice(0,2)}) ${d.slice(2,6)}-${d.slice(6)}`;
    return `(${d.slice(0,2)}) ${d.slice(2,7)}-${d.slice(7)}`;
  };

  const submit = async () => {
    const errs = {};
    if (nameVal.trim().length < 2) errs.name = 'Informe seu nome';
    const digits = phoneVal.replace(/\D/g, '');
    if (digits.length < 10) errs.phone = 'WhatsApp inválido';
    setErrors(errs);
    if (Object.keys(errs).length) return;

    try {
      await fetch('/submit.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: nameVal, phone: phoneVal, ...answers }),
      });
    } catch (_) {}

    setSent(true);
  };

  const reset = () => {
    setSent(false); setStep(0); setAnswers({}); setNameVal(''); setPhoneVal(''); setErrors({});
  };

  return (
    <section id="diagnostico" style={{ background: 'var(--bg2)' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.35fr', gap: 64, alignItems: 'start' }} className="diag-grid">
          <div style={{ position: 'sticky', top: 120, minWidth: 0 }}>
            <span className="q-eyebrow">Diagnóstico Tributário</span>
            <h2 style={{ marginTop: 18, marginBottom: 22 }}>
              Gratuito.<br />
              Rápido.<br />
              <span style={{ color: 'var(--signal)' }}>Sem enrolação.</span>
            </h2>
            <p style={{ marginBottom: 32, maxWidth: 420, color: 'var(--t2)' }}>
              Responda 5 perguntas. Você vai entender onde está o problema e chega à conversa com nossa especialista com clareza sobre o que precisa resolver.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 14 }}>
              {[
                '100% gratuito, sem compromisso',
                'Suas informações são confidenciais',
                'Retorno por WhatsApp com especialista',
                'Atendimento em até 24 horas úteis',
              ].map((t, i) => (
                <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'baseline', color: 'var(--t2)' }}>
                  <span style={{ color: 'var(--signal)', fontFamily: 'var(--font-mono)', fontSize: '.85rem', flexShrink: 0 }}>✓</span>
                  <span style={{ fontSize: '0.95rem' }}>{t}</span>
                </li>
              ))}
            </ul>
          </div>
          <div ref={rootRef} style={{ background: 'var(--bg3)', border: '1px solid var(--border)', borderRadius: 'var(--r-1)', minHeight: 620, minWidth: 0, display: 'flex', flexDirection: 'column', boxShadow: 'var(--shadow-sig)' }}>
            <div className="diag-card-header" style={{ padding: '22px 32px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
              <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
                <span className="badge badge-sig badge-dot">Formulário</span>
                <span className="q-micro">{sent ? 'Concluído' : `Passo ${String(step+1).padStart(2, '0')} / ${String(STEPS.length).padStart(2, '0')}`}</span>
              </div>
              <div style={{ flex: 1, maxWidth: 240, marginLeft: 'auto' }}>
                <div style={{ height: 3, background: 'var(--t5)', borderRadius: 2, overflow: 'hidden' }}>
                  <div style={{ height: '100%', background: 'var(--signal)', width: `${sent ? 100 : pct}%`, transition: 'width .4s var(--ease-std)', boxShadow: '0 0 10px var(--signal)' }} />
                </div>
              </div>
            </div>
            <div className="diag-card-crumbs" style={{ padding: '14px 32px', borderBottom: '1px solid var(--border)', display: 'flex', gap: 18, overflowX: 'auto', scrollbarWidth: 'none' }}>
              {STEPS.map((s, i) => {
                const done = answers[s.id] || (s.contact && sent);
                const active = i === step && !sent;
                return (
                  <button key={s.id} onClick={() => { if (i <= step) setStep(i); }} disabled={i > step}
                    style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 2px', fontFamily: 'var(--font-mono)', fontSize: '0.7rem', letterSpacing: '0.12em', textTransform: 'uppercase', color: active ? 'var(--signal)' : (done ? 'var(--white)' : 'var(--t3)'), borderBottom: active ? '1px solid var(--signal)' : '1px solid transparent', whiteSpace: 'nowrap', cursor: i <= step ? 'pointer' : 'not-allowed' }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 18, height: 18, fontSize: 10, border: `1px solid ${active ? 'var(--signal)' : (done ? 'var(--white)' : 'var(--border2)')}`, background: done && !active ? 'var(--white)' : 'transparent', color: done && !active ? 'var(--black)' : 'inherit', fontWeight: 700 }}>
                      {done && !active ? '✓' : String(i+1).padStart(2, '0')}
                    </span>
                    {s.label}
                  </button>
                );
              })}
            </div>
            <div className="diag-card-body" style={{ padding: '40px 32px', flex: 1, opacity: transitioning ? 0 : 1, transition: 'opacity .2s' }}>
              {sent ? (
                <SentState answers={answers} name={nameVal} onReset={reset} />
              ) : current.contact ? (
                <ContactForm name={nameVal} setName={setNameVal} phone={phoneVal} setPhone={(v) => setPhoneVal(phoneFmt(v))} errors={errors} onSubmit={submit} onBack={prev} answers={answers} />
              ) : (
                <>
                  <div className="q-micro" style={{ color: 'var(--signal)', marginBottom: 10 }}>Pergunta {String(step+1).padStart(2, '0')} · {current.label}</div>
                  <h3 style={{ fontSize: 'clamp(1.5rem, 2.5vw, 2rem)', marginBottom: 32, letterSpacing: '-0.01em' }}>{current.q}</h3>
                  <div style={{ display: 'grid', gap: 10 }}>
                    {current.options.map(o => {
                      const active = answers[current.id] === o.id;
                      return (
                        <button key={o.id} onClick={() => pick(o.id)} className="q-opt"
                          style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 22px', border: `1px solid ${active ? 'var(--signal)' : 'var(--border)'}`, background: active ? 'var(--signal-dim)' : 'var(--bg4)', borderRadius: 'var(--r-1)', textAlign: 'left', transition: 'all .2s' }}>
                          <div>
                            <div style={{ fontFamily: 'var(--display-stack)', fontWeight: 700, fontSize: '1.02rem', textTransform: 'uppercase', letterSpacing: '0.01em', color: active ? 'var(--signal)' : 'var(--white)' }}>{o.label}</div>
                            <div className="q-small" style={{ color: 'var(--t3)', marginTop: 4 }}>{o.hint}</div>
                          </div>
                          <span className="arrow" style={{ color: active ? 'var(--signal)' : 'var(--t3)', fontSize: '1.2rem', transform: active ? 'translateX(4px)' : 'none' }}>→</span>
                        </button>
                      );
                    })}
                  </div>
                </>
              )}
            </div>
            {!sent && !current.contact && (
              <div className="diag-card-foot" style={{ padding: '18px 32px', borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <button onClick={prev} disabled={step === 0} style={{ opacity: step === 0 ? 0.3 : 1, fontFamily: 'var(--font-mono)', fontSize: '0.78rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--t2)', cursor: step === 0 ? 'default' : 'pointer' }}>← Voltar</button>
                <span className="q-small" style={{ color: 'var(--t3)' }}>Clique uma opção para avançar</span>
              </div>
            )}
          </div>
        </div>
      </div>
      <style>{`
        .q-opt:hover { border-color: var(--signal) !important; background: var(--signal-dim) !important; }
        .q-opt:hover .arrow { transform: translateX(4px); color: var(--signal); }
        @media (max-width: 980px) { .diag-grid { grid-template-columns: 1fr !important; gap: 40px !important; } .diag-grid > div:first-child { position: static !important; } }
        @media (max-width: 640px) { .diag-card-header { padding: 16px 18px !important; } .diag-card-crumbs { padding: 10px 18px !important; } .diag-card-body { padding: 24px 18px !important; } .diag-card-foot { padding: 14px 18px !important; } }
      `}</style>
    </section>
  );
}

function ContactForm({ name, setName, phone, setPhone, errors, onSubmit, onBack, answers }) {
  return (
    <>
      <div className="q-micro" style={{ color: 'var(--signal)', marginBottom: 10 }}>Pergunta 06 · Contato</div>
      <h3 style={{ fontSize: 'clamp(1.5rem, 2.5vw, 2rem)', marginBottom: 12, letterSpacing: '-0.01em' }}>Quase lá. Para onde enviamos<br /> a análise?</h3>
      <p className="q-small" style={{ color: 'var(--t3)', marginBottom: 32, maxWidth: 420 }}>Sua especialista retorna em até 24h úteis com o primeiro parecer.</p>
      <div style={{ display: 'grid', gap: 18, maxWidth: 520, marginBottom: 28 }}>
        <div>
          <label style={{ display: 'block', marginBottom: 8 }} className="q-micro">Nome</label>
          <input value={name} onChange={e => setName(e.target.value)} placeholder="Seu nome completo" style={{ width: '100%', padding: '16px 18px', background: 'var(--bg4)', border: `1px solid ${errors.name ? 'var(--danger-soft, #FF6B6B)' : 'var(--border)'}`, borderRadius: 'var(--r-1)', fontSize: '1rem', color: 'var(--white)', fontFamily: 'var(--font-body)' }} onFocus={e => e.target.style.borderColor = 'var(--signal)'} onBlur={e => e.target.style.borderColor = errors.name ? '#FF6B6B' : 'var(--border)'} />
          {errors.name && <div style={{ color: '#FF6B6B', fontSize: '0.8rem', marginTop: 6 }}>{errors.name}</div>}
        </div>
        <div>
          <label style={{ display: 'block', marginBottom: 8 }} className="q-micro">WhatsApp</label>
          <input value={phone} onChange={e => setPhone(e.target.value)} placeholder="(11) 99999-9999" style={{ width: '100%', padding: '16px 18px', background: 'var(--bg4)', border: `1px solid ${errors.phone ? '#FF6B6B' : 'var(--border)'}`, borderRadius: 'var(--r-1)', fontSize: '1rem', color: 'var(--white)', fontFamily: 'var(--font-body)' }} onFocus={e => e.target.style.borderColor = 'var(--signal)'} onBlur={e => e.target.style.borderColor = errors.phone ? '#FF6B6B' : 'var(--border)'} />
          {errors.phone && <div style={{ color: '#FF6B6B', fontSize: '0.8rem', marginTop: 6 }}>{errors.phone}</div>}
        </div>
      </div>
      <div style={{ padding: 18, background: 'var(--bg4)', border: '1px solid var(--border)', borderRadius: 'var(--r-1)', marginBottom: 28 }}>
        <div className="q-micro" style={{ color: 'var(--t3)', marginBottom: 10 }}>Suas respostas</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))', gap: 12 }}>
          {STEPS.slice(0, 5).map(s => {
            const ans = s.options?.find(o => o.id === answers[s.id]);
            return (<div key={s.id}><div className="q-micro" style={{ color: 'var(--t3)' }}>{s.label}</div><div style={{ color: 'var(--white)', fontSize: '0.88rem', marginTop: 4, fontFamily: 'var(--font-body)' }}>{ans?.label || '—'}</div></div>);
          })}
        </div>
      </div>
      <div style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
        <button onClick={onBack} className="btn btn-ghost">← Voltar</button>
        <button onClick={onSubmit} className="btn btn-primary btn-lg">Enviar e falar com especialista <span className="arrow">→</span></button>
      </div>
      <p className="q-small" style={{ color: 'var(--t3)', marginTop: 18 }}>Sem spam. Seus dados são usados apenas para o contato.</p>
    </>
  );
}

function SentState({ answers, name, onReset }) {
  return (
    <div style={{ textAlign: 'center', padding: '40px 10px' }}>
      <div style={{ width: 72, height: 72, margin: '0 auto 32px', background: 'var(--signal)', borderRadius: 'var(--r-1)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--black)', fontSize: 36, fontWeight: 900, boxShadow: 'var(--shadow-sig-lg)', animation: 'pop .5s cubic-bezier(.34, 1.5, .64, 1)' }}>✓</div>
      <h3 style={{ fontSize: 'clamp(1.6rem, 3vw, 2.4rem)', marginBottom: 14 }}>Pronto, {name?.split(' ')[0] || 'empresário'}.</h3>
      <p className="q-sub q-sub-md" style={{ maxWidth: 440, margin: '0 auto 24px' }}>Nossa especialista entra em contato pelo WhatsApp em até <strong style={{ color: 'var(--signal)' }}>24 horas úteis</strong>.</p>
      <p className="q-small" style={{ color: 'var(--t3)', marginBottom: 32, maxWidth: 380, margin: '0 auto 32px' }}>Enquanto isso, você pode checar o case real da impugnação que devolveu R\$ 166 mil ao caixa.</p>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
        <button onClick={() => document.getElementById('case')?.scrollIntoView({ behavior: 'smooth' })} className="btn btn-white">Ver case real</button>
        <button onClick={onReset} className="btn btn-ghost">Enviar outro</button>
      </div>
      <style>{`@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }`}</style>
    </div>
  );
}

window.Diagnostic = Diagnostic;