/* SDR Humano — formação por marca e guião das campanhas activas.
   O ecrã SDR AI (supervisão da Digi) fica no sub "sdr". */

const SH_INBOUND = 'A pessoa escreveu-nos. Confirmas o BANT e marcas um dia e uma hora.';
const SH_OUTBOUND = 'A Digi contactou primeiro. Usas os passos abaixo. Dois toques mudam o ângulo; ao quarto, o ciclo fecha.';

function shEmail(userEmail) {
  return userEmail || window.currentUser?.email || '';
}

async function shApi(url, userEmail, options = {}) {
  const p = new URLSearchParams(window.location.search || '');
  const email = shEmail(userEmail);
  if (email && !p.get('email')) p.set('email', email);
  const sep = url.includes('?') ? '&' : '?';
  const res = await fetch(`${url}${sep}${p.toString()}`, {
    headers: { 'Content-Type': 'application/json' },
    ...options,
  });
  const body = await res.json().catch(() => ({}));
  if (!res.ok) throw new Error(body.error || `HTTP ${res.status}`);
  return body;
}

function shTexto(s) {
  return String(s || '').replace(/^#{1,6}\s+/gm, '').replace(/\*\*(.+?)\*\*/g, '$1').trim();
}

function rotuloCamp(c) {
  const marca = String(c?.campanha?.marca || '').trim();
  const titulo = String(c?.campanha?.titulo || 'Campanha').trim();
  if (!marca) return titulo;
  if (titulo.toLowerCase().startsWith(marca.toLowerCase())) return titulo;
  return marca + ' · ' + titulo;
}

const SH_MARCAS = new Set(['mimaki', 'biond', 'decal', 'alldecor', 'sensek', 'netscreen']);

function shHash({ licao, camp, marca }) {
  const q = new URLSearchParams((window.location.hash || '').replace(/^#/, ''));
  q.set('screen', 'marketing');
  q.set('sub', 'sdr-humano');
  q.delete('tab');
  if (licao) q.set('licao', licao); else q.delete('licao');
  if (camp) q.set('camp', camp); else q.delete('camp');
  if (marca && marca !== 'todas') q.set('marca', marca); else q.delete('marca');
  const next = q.toString();
  if (window.location.hash.replace(/^#/, '') !== next) window.location.hash = next;
}

function shParams() {
  try { return new URLSearchParams((window.location.hash || '').replace(/^#/, '')); } catch { return new URLSearchParams(); }
}

const shCard = { background: 'var(--bg-elev)', border: '1px solid var(--border)', borderRadius: 14, overflow: 'hidden' };
const SH_CSS = '.sh-curso{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:16px;align-items:start}.sh-aula{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,360px);gap:22px;align-items:start}@media(max-width:860px){.sh-curso{grid-template-columns:1fr}}@media(max-width:1100px){.sh-aula{grid-template-columns:1fr}.sh-video{order:-1}}';

function ShEstado({ estado }) {
  const map = {
    feito: { t: 'Feito', c: 'var(--success, #177a3d)' },
    em_estudo: { t: 'Em estudo', c: 'var(--ai-500)' },
    por_fazer: { t: 'Por fazer', c: 'var(--text-dim)' },
  };
  const x = map[estado] || map.por_fazer;
  return <span style={{ fontSize: 10, fontWeight: 650, letterSpacing: '.04em', textTransform: 'uppercase', color: x.c }}>{x.t}</span>;
}

function ShFichaChamada({ camp }) {
  const mercados = camp.playbook?.mercados || [];
  const [mercado, setMercado] = React.useState(mercados[0]?.mercado || '');
  React.useEffect(() => { setMercado(mercados[0]?.mercado || ''); }, [camp.campanha?.id]);
  const bloco = mercados.find(m => m.mercado === mercado) || mercados[0];
  const f = camp.ficha || {};
  return (
    <div style={shCard}>
      <div style={{ padding: '20px 22px 4px' }}>
        <div style={{ fontSize: 11, fontWeight: 650, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>Ficha de chamada</div>
        <h2 style={{ margin: '6px 0 0', fontSize: 18, fontWeight: 700, fontFamily: 'var(--font-display)', letterSpacing: '-0.01em' }}>{camp.campanha?.titulo}</h2>
        {f.pitch ? <p style={{ margin: '10px 0 0', fontSize: 14, lineHeight: 1.55 }}>{f.pitch}</p> : null}
        <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 6, fontSize: 13, lineHeight: 1.45 }}>
          <div><b>Inbound.</b> {SH_INBOUND}</div>
          <div><b>Outbound.</b> {SH_OUTBOUND}</div>
        </div>
      </div>
      {mercados.length > 1 && (
        <div style={{ display: 'flex', gap: 6, padding: '14px 22px 0' }}>
          {mercados.map(m => (
            <button key={m.mercado} type="button" onClick={() => setMercado(m.mercado)} style={{
              borderRadius: 999, border: '1px solid var(--border)', padding: '4px 10px', cursor: 'pointer', fontSize: 12,
              background: m.mercado === bloco?.mercado ? 'var(--bg-hover)' : 'transparent',
              color: 'var(--text)', fontWeight: 650,
            }}>{m.mercado}</button>
          ))}
        </div>
      )}
      <div style={{ padding: '4px 22px 20px' }}>
        {(bloco?.passos || []).map(p => (
          <div key={`${bloco?.mercado}-${p.ordem}`} style={{ paddingTop: 16 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{p.titulo}</div>
            {p.dizer ? <div style={{ fontSize: 15, lineHeight: 1.5, marginTop: 4 }}>{p.dizer}</div> : null}
            {Array.isArray(p.perguntas) && p.perguntas.length ? (
              <ol style={{ margin: '6px 0 0', paddingLeft: 18, fontSize: 14, lineHeight: 1.5 }}>
                {p.perguntas.map((q, i) => <li key={i}>{q}</li>)}
              </ol>
            ) : null}
          </div>
        ))}
        {!bloco?.passos?.length ? <div style={{ paddingTop: 16, fontSize: 14, color: 'var(--text-muted)' }}>Esta ficha não traz passos de chamada.</div> : null}
        {(f.nao_dizer || []).length ? (
          <div style={{ marginTop: 16, padding: '10px 12px', borderRadius: 10, background: 'color-mix(in oklch, var(--danger, #c2312e) 8%, var(--bg))', fontSize: 13, lineHeight: 1.45 }}>
            <b>Não dizer.</b> {f.nao_dizer.join(' · ')}
          </div>
        ) : null}
      </div>
    </div>
  );
}


function ShVideo({ url }) {
  return (
    <div className="sh-video">
      <div style={{ fontSize: 10, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--text-dim)', fontWeight: 650, marginBottom: 8 }}>Tutor em vídeo</div>
      <div style={{ position: 'relative', borderRadius: 12, overflow: 'hidden', background: '#101828', aspectRatio: '16 / 9', border: '1px solid var(--border)' }}>
        {url ? (
          <video key={url} controls playsInline preload="metadata" style={{ width: '100%', height: '100%', display: 'block', background: '#000' }} src={url} />
        ) : (
          <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, padding: 18, textAlign: 'center' }}>
            <div style={{ width: 46, height: 46, borderRadius: '50%', border: '1px solid rgba(255,255,255,.35)', display: 'grid', placeItems: 'center' }}>
              <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 4.2v7.6l6-3.8-6-3.8z" fill="rgba(255,255,255,.88)" /></svg>
            </div>
            <div style={{ fontSize: 13, fontWeight: 650, color: 'rgba(255,255,255,.9)' }}>Vídeo do tutor</div>
            <div style={{ fontSize: 12, lineHeight: 1.45, color: 'rgba(255,255,255,.55)', maxWidth: 220 }}>Esta lição ainda não tem vídeo.</div>
          </div>
        )}
      </div>
    </div>
  );
}

function ShCategoria({ nome, aberto, onToggle, meta, children }) {
  return (
    <div>
      <button type="button" onClick={onToggle} aria-expanded={aberto} style={{
        display: 'flex', alignItems: 'center', gap: 8, width: '100%', textAlign: 'left',
        border: 'none', background: 'transparent', cursor: 'pointer', color: 'inherit',
        padding: '12px 14px 6px', fontFamily: 'inherit',
      }}>
        <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true" style={{ transform: aberto ? 'rotate(90deg)' : 'none', flex: '0 0 auto' }}>
          <path d="M3 1.5 L7.5 5 L3 8.5" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        <span style={{ flex: 1, fontSize: 11, letterSpacing: '.08em', textTransform: 'uppercase', fontWeight: 700 }}>{nome}</span>
        <span style={{ fontSize: 11, color: 'var(--text-muted)', fontWeight: 600 }}>{meta}</span>
      </button>
      {aberto ? <div style={{ paddingBottom: 6 }}>{children}</div> : null}
    </div>
  );
}

function ShItem({ activo, onClick, titulo, sub, extra }) {
  return (
    <button type="button" onClick={onClick} style={{
      display: 'block', width: 'calc(100% - 16px)', margin: '1px 8px', textAlign: 'left',
      border: 'none', borderRadius: 8, cursor: 'pointer', fontFamily: 'inherit', color: 'inherit',
      background: activo ? 'color-mix(in oklch, var(--ai-500) 12%, transparent)' : 'transparent',
      padding: '8px 10px 8px 28px',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, alignItems: 'baseline' }}>
        <span style={{ fontSize: 13, fontWeight: activo ? 700 : 600, color: activo ? 'var(--ai-500)' : 'var(--text)' }}>{titulo}</span>
        {extra}
      </div>
      {sub ? <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2, lineHeight: 1.35 }}>{sub}</div> : null}
    </button>
  );
}

function MktSdrHumanoScreen({ userEmail }) {
  const [modulos, setModulos] = React.useState(null);
  const [campanhas, setCampanhas] = React.useState(null);
  const [vista, setVista] = React.useState('licao');
  const [aberto, setAberto] = React.useState(null);
  const [passo, setPasso] = React.useState('conteudo');
  const [licao, setLicao] = React.useState(null);
  const [respostas, setRespostas] = React.useState({});
  const [resultado, setResultado] = React.useState(null);
  const [campId, setCampId] = React.useState('');
  const [erro, setErro] = React.useState('');
  const [aCarregar, setACarregar] = React.useState(false);
  const [abertas, setAbertas] = React.useState({ 'O trabalho': true, Marcas: true, Apoio: true });
  const boot = React.useRef(false);
  const pedido = React.useRef(0);

  const recarregar = React.useCallback(() => {
    return shApi('/api/marketing/sdr-humano/modulos', userEmail).then(d => {
      setModulos(d);
      return d;
    });
  }, [userEmail]);

  const abrir = React.useCallback(async (id) => {
    setVista('licao');
    setPasso('conteudo');
    setAberto(id);
    setCampId('');
    setResultado(null);
    setRespostas({});
    setErro('');
    shHash({ licao: id, marca: SH_MARCAS.has(id) ? id : '' });
    const ticket = ++pedido.current;
    setACarregar(true);
    try {
      const d = await shApi('/api/marketing/sdr-humano/modulos/' + encodeURIComponent(id) + '/estudo', userEmail, { method: 'POST', body: '{}' });
      if (ticket !== pedido.current) return;
      setLicao(d);
      recarregar().catch(() => {});
    } catch (e) {
      if (ticket === pedido.current) setErro(e.message);
    } finally {
      if (ticket === pedido.current) setACarregar(false);
    }
  }, [userEmail, recarregar]);

  const abrirCamp = React.useCallback((row) => {
    const id = row?.campanha?.id || '';
    setVista('apoio');
    setCampId(String(id));
    setPasso('conteudo');
    setErro('');
    shHash({ camp: id, marca: String(row?.campanha?.marca_slug || '').toLowerCase() });
  }, []);

  const abrirRef = React.useRef(abrir);
  const abrirCampRef = React.useRef(abrirCamp);
  abrirRef.current = abrir;
  abrirCampRef.current = abrirCamp;

  React.useEffect(() => {
    let vivo = true;
    boot.current = false;
    const h = shParams();
    (async () => {
      try {
        const [mods, camps] = await Promise.all([
          shApi('/api/marketing/sdr-humano/modulos', userEmail),
          shApi('/api/marketing/sdr-humano/campanhas', userEmail).catch(() => ({ rows: [] })),
        ]);
        if (!vivo || boot.current) return;
        boot.current = true;
        const rows = camps.rows || [];
        setModulos(mods);
        setCampanhas(rows);
        const querApoio = h.get('tab') === 'apoio';
        const camp = h.get('camp') || '';
        if (querApoio || (camp && !h.get('licao'))) {
          const row = rows.find(c => String(c.campanha?.id) === String(camp)) || (querApoio ? rows[0] : null);
          if (row) { abrirCampRef.current(row); return; }
          if (querApoio) { setVista('apoio'); setCampId(''); return; }
        }
        const lista = mods.modulos || [];
        const licaoId = h.get('licao') || h.get('marca') || '';
        const escolhida = lista.find(m => m.id === licaoId) || lista[0];
        if (escolhida) await abrirRef.current(escolhida.id);
      } catch (e) {
        if (vivo) setErro(e.message);
      }
    })();
    return () => { vivo = false; };
  }, [userEmail]);

  const verificar = async () => {
    if (!aberto) return;
    setACarregar(true);
    setErro('');
    try {
      const d = await shApi('/api/marketing/sdr-humano/modulos/' + encodeURIComponent(aberto) + '/verificar', userEmail, {
        method: 'POST',
        body: JSON.stringify({ respostas }),
      });
      setResultado(d);
      recarregar().catch(() => {});
    } catch (e) {
      setErro(e.message);
    } finally {
      setACarregar(false);
    }
  };

  const licoes = modulos?.modulos || [];
  const camps = campanhas || [];
  const grupos = [];
  for (const m of licoes) {
    let g = grupos.find(x => x.nome === m.grupo);
    if (!g) { g = { nome: m.grupo, itens: [] }; grupos.push(g); }
    g.itens.push(m);
  }
  const fila = [
    ...licoes.map(m => ({ tipo: 'licao', id: m.id })),
    ...camps.map(c => ({ tipo: 'camp', id: String(c.campanha?.id || ''), row: c })),
  ];
  const pos = fila.findIndex(x => (vista === 'licao' ? x.tipo === 'licao' && x.id === aberto : x.tipo === 'camp' && x.id === String(campId)));
  const anteriorItem = pos > 0 ? fila[pos - 1] : null;
  const seguinteItem = pos >= 0 && pos < fila.length - 1 ? fila[pos + 1] : null;
  const ir = (item) => {
    if (!item) return;
    if (item.tipo === 'licao') abrir(item.id);
    else abrirCamp(item.row);
  };
  const camp = camps.find(c => String(c.campanha?.id) === String(campId)) || null;
  const feitos = modulos?.feitos ?? 0;
  const total = modulos?.total ?? 0;
  const pct = total ? Math.round((feitos / total) * 100) : 0;
  const toggle = (nome) => setAbertas(a => ({ ...a, [nome]: !a[nome] }));
  const noConteudo = vista === 'licao' && passo === 'conteudo';
  const naVerificacao = vista === 'licao' && passo === 'verificacao';

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0, background: 'var(--bg)' }}>
      <style>{SH_CSS}</style>
      <div style={{ background: 'var(--bg-elev)', borderBottom: '1px solid var(--border)', padding: '20px 40px 18px', flexShrink: 0 }}>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.07em', color: 'var(--text-muted)', textTransform: 'uppercase', marginBottom: 6, fontFamily: 'var(--font-mono)' }}>
          MARKETING · FORMAÇÃO E APOIO
        </div>
        <h1 style={{ margin: 0, fontSize: 21, fontWeight: 700, color: 'var(--text)', fontFamily: 'var(--font-display)', letterSpacing: '-0.01em', lineHeight: 1.2 }}>
          SDR Tutor
        </h1>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 12, maxWidth: 420 }}>
          <div style={{ flex: 1, height: 4, borderRadius: 99, background: 'var(--border)', overflow: 'hidden' }}>
            <div style={{ width: pct + '%', height: '100%', background: 'var(--ai-500)' }} />
          </div>
          <div style={{ fontSize: 12, color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>{modulos ? (feitos + ' de ' + total + ' lições feitas') : ''}</div>
        </div>
      </div>

      <div className="scrollbar" style={{ overflowY: 'auto', flex: 1, minHeight: 0, padding: '22px 40px 64px', background: 'var(--bg)' }}>
        {erro ? <div style={{ marginBottom: 14, padding: '10px 12px', borderRadius: 10, background: 'color-mix(in oklch, var(--danger, #c2312e) 10%, var(--bg-elev))', color: 'var(--danger, #c2312e)', fontSize: 13 }}>{erro}</div> : null}
        <div className="sh-curso">
          <div style={shCard}>
            {!modulos ? <div style={{ padding: 18, fontSize: 13, color: 'var(--text-muted)' }}>A carregar o curso…</div> : (
              <div style={{ padding: '4px 0 10px' }}>
                {grupos.map(g => {
                  const nFeitas = g.itens.filter(m => m.estado === 'feito').length;
                  return (
                    <ShCategoria key={g.nome} nome={g.nome} aberto={abertas[g.nome] !== false} onToggle={() => toggle(g.nome)} meta={nFeitas + '/' + g.itens.length}>
                      {g.itens.map(m => (
                        <ShItem key={m.id} activo={vista === 'licao' && aberto === m.id} onClick={() => abrir(m.id)} titulo={m.titulo} sub={m.resumo} extra={<ShEstado estado={m.estado} />} />
                      ))}
                    </ShCategoria>
                  );
                })}
                <ShCategoria nome="Apoio à campanha" aberto={abertas.Apoio !== false} onToggle={() => toggle('Apoio')} meta={campanhas ? String(camps.length) : '…'}>
                  {!campanhas ? <div style={{ padding: '6px 28px 8px', fontSize: 12, color: 'var(--text-muted)' }}>A ler campanhas…</div> : null}
                  {campanhas && !camps.length ? <div style={{ padding: '6px 28px 8px', fontSize: 12, color: 'var(--text-muted)' }}>Sem campanha activa</div> : null}
                  {camps.map(c => (
                    <ShItem
                      key={c.campanha.id}
                      activo={vista === 'apoio' && String(campId) === String(c.campanha.id)}
                      onClick={() => abrirCamp(c)}
                      titulo={rotuloCamp(c)}
                    />
                  ))}
                </ShCategoria>
              </div>
            )}
          </div>

          <div style={{ minWidth: 0 }}>
            {vista === 'apoio' && (
              <div>
                {!campanhas ? <div style={{ color: 'var(--text-muted)', fontSize: 13 }}>A ler campanhas…</div> : null}
                {campanhas && !camp ? (
                  <div style={{ ...shCard, padding: 22, fontSize: 14, lineHeight: 1.5 }}>
                    Não há campanhas com ficha activa. O guião aparece aqui quando uma campanha está activa para a Digi.
                  </div>
                ) : null}
                {camp ? <ShFichaChamada camp={camp} /> : null}
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, marginTop: 14 }}>
                  <button type="button" className="btn" disabled={!anteriorItem} onClick={() => ir(anteriorItem)}>Anterior</button>
                  <button type="button" className="btn btn-ai" disabled={!seguinteItem} onClick={() => ir(seguinteItem)}>Seguinte</button>
                </div>
              </div>
            )}

            {vista === 'licao' && (
              <div style={shCard}>
                {!licao ? (
                  <div style={{ padding: 28, color: 'var(--text-muted)', fontSize: 13 }}>{aCarregar ? 'A preparar a lição…' : 'Escolhe uma lição no índice.'}</div>
                ) : (
                  <div style={{ padding: '18px 0 8px' }}>
                    <div style={{ padding: '0 22px 14px' }}>
                      <h2 style={{ margin: 0, fontSize: 20, fontWeight: 700, fontFamily: 'var(--font-display)', letterSpacing: '-0.01em' }}>{licao.titulo}</h2>
                    </div>
                    <div className="sh-aula" style={{ padding: '0 22px 8px' }}>
                      <div style={{ minWidth: 0 }}>
                        <div style={{ display: 'flex', gap: 6, marginBottom: 14 }}>
                          <button type="button" onClick={() => setPasso('conteudo')} style={{
                            border: 'none', cursor: 'pointer', fontFamily: 'inherit', borderRadius: 999, padding: '6px 12px', fontSize: 12, fontWeight: 700,
                            background: noConteudo ? 'color-mix(in oklch, var(--ai-500) 14%, transparent)' : 'transparent',
                            color: noConteudo ? 'var(--ai-500)' : 'var(--text-muted)',
                          }}>1. Conteúdo</button>
                          <button type="button" onClick={() => setPasso('verificacao')} style={{
                            border: 'none', cursor: 'pointer', fontFamily: 'inherit', borderRadius: 999, padding: '6px 12px', fontSize: 12, fontWeight: 700,
                            background: naVerificacao ? 'color-mix(in oklch, var(--ai-500) 14%, transparent)' : 'transparent',
                            color: naVerificacao ? 'var(--ai-500)' : 'var(--text-muted)',
                          }}>2. Verificação</button>
                        </div>
                        {noConteudo ? (
                          <div style={{ fontSize: 14, lineHeight: 1.65, whiteSpace: 'pre-wrap' }}>{aCarregar && !licao.estudo_md ? 'A preparar a lição…' : shTexto(licao.estudo_md)}</div>
                        ) : (
                          <div>
                            {(licao.perguntas || []).map((p, i) => {
                              const corr = (resultado?.correccao || []).find(c => c.id === p.id);
                              return (
                                <fieldset key={p.id} style={{ border: 'none', margin: '0 0 14px', padding: 0 }}>
                                  <legend style={{ fontSize: 13, fontWeight: 650, marginBottom: 6 }}>{(i + 1) + '. ' + p.pergunta}</legend>
                                  {p.opcoes.map((op, oi) => (
                                    <label key={oi} style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 13, lineHeight: 1.4, marginBottom: 4, cursor: 'pointer' }}>
                                      <input type="radio" name={p.id} checked={Number(respostas[p.id]) === oi} onChange={() => setRespostas(r => ({ ...r, [p.id]: oi }))} />
                                      <span>{op}</span>
                                    </label>
                                  ))}
                                  {corr ? <div style={{ fontSize: 12, marginTop: 4, color: corr.acertou ? 'var(--success, #177a3d)' : 'var(--danger, #c2312e)' }}>{corr.acertou ? 'Certa.' : ('A resposta é: ' + corr.resposta)}</div> : null}
                                </fieldset>
                              );
                            })}
                            <button type="button" className="btn btn-ai" disabled={aCarregar} onClick={verificar}>Verificar</button>
                            {resultado ? <span style={{ marginLeft: 12, fontSize: 13 }}>{resultado.certas + ' de ' + resultado.total + '. ' + (resultado.feito ? 'Lição feita.' : ('Faltam respostas. Precisas de ' + resultado.nota_minima + '.'))}</span> : null}
                          </div>
                        )}
                      </div>
                      <ShVideo url={licao.video} />
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, padding: '16px 22px 14px' }}>
                      <button type="button" className="btn" disabled={noConteudo ? !anteriorItem : false} onClick={() => { if (naVerificacao) setPasso('conteudo'); else ir(anteriorItem); }}>Anterior</button>
                      {noConteudo
                        ? <button type="button" className="btn btn-ai" onClick={() => setPasso('verificacao')}>Verificação</button>
                        : <button type="button" className="btn btn-ai" disabled={!seguinteItem} onClick={() => ir(seguinteItem)}>Seguinte</button>}
                    </div>
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

window.MktSdrHumanoScreen = MktSdrHumanoScreen;