// diag.jsx — /diagnosticos conversion page components
// Exports: DiagHero, ParaQuem, Tipos, ComoFunciona, OQueRecebe, DiagCTA

const DIAG_ASSESS = [
  ['Ambiente', 'ok'],
  ['Integrações', 'warn'],
  ['Datasets', 'warn'],
  ['Adoção do Fluig', 'ok'],
  ['Backlog', 'crit'],
];

function DiagHero() {
  const L = window.JYNX_LINKS;
  return (
    <section className="dhero">
      <div className="dhero__atmo" aria-hidden="true"></div>
      <div className="wrap dhero__inner">
        <div className="dhero__copy">
          <div className="eyebrow" data-reveal>Diagnóstico gratuito</div>
          <h1 data-reveal style={{ '--reveal-delay': '60ms' }}>
            Não sabe por onde<br />começar?
          </h1>
          <p className="dhero__lead" data-reveal style={{ '--reveal-delay': '120ms' }}>
            Faça um diagnóstico gratuito do seu ambiente TOTVS. A JYNX mapeia processos,
            integrações, performance, adoção e backlog, e indica o melhor caminho,
            seja solução pronta, sustentação, especialista, integração ou projeto.
          </p>
          <div className="dhero__cta" data-reveal style={{ '--reveal-delay': '200ms' }}>
            <a href={L.demo} className="btn btn--primary btn--lg">Solicitar diagnóstico gratuito <Icon name="arrow-right" size={18} /></a>
            <a href={L.wa} className="btn btn--ghost btn--lg"><Icon name="message-circle" size={18} /> Falar com especialista</a>
          </div>
          <div className="dhero__trust" data-reveal style={{ '--reveal-delay': '260ms' }}>
            <span><Icon name="check" size={15} /> Gratuito e sem compromisso</span>
            <span><Icon name="check" size={15} /> +7 anos no ecossistema TOTVS</span>
          </div>
        </div>

        <div className="dhero__visual" data-reveal style={{ '--reveal-delay': '180ms' }}>
          <div className="dreport">
            <div className="dreport__head">
              <span className="dreport__tag"><JynxMark size={15} color="var(--accent)" /> Diagnóstico</span>
              <span className="dreport__id">JYNX · ambiente TOTVS</span>
            </div>
            <div className="dreport__score">
              <div className="dreport__ring" aria-hidden="true"></div>
              <div>
                <div className="dreport__scoretxt">Avaliação do ambiente</div>
                <div className="dreport__scorenum">Plano de ação pronto</div>
              </div>
            </div>
            <ul className="dreport__list">
              {DIAG_ASSESS.map(([label, st]) => (
                <li key={label}>
                  <span className={'dreport__dot dreport__dot--' + st}></span>
                  {label}
                  <Icon name={st === 'ok' ? 'check' : st === 'warn' ? 'alert-triangle' : 'alert-circle'} size={15} />
                </li>
              ))}
            </ul>
            <div className="dreport__foot">
              <span>Próximo passo recomendado</span>
              <strong>Sustentação + integração</strong>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Para quem é ---------------- */
const SIGNALS = [
  ['layers', 'Backlog crescendo', 'Demandas paradas por falta de tempo ou de especialista.'],
  ['repeat', 'Retrabalho e redigitação', 'Dados aprovados sendo relançados à mão no ERP.'],
  ['unplug', 'Fluig subutilizado', 'A plataforma existe, mas os processos não evoluem.'],
  ['triangle-alert', 'Integrações falhando', 'Erros entre Fluig e o ERP que ninguém consegue rastrear.'],
];

function ParaQuem() {
  return (
    <section className="section pquem section--alt" id="para-quem">
      <div className="wrap pquem__inner">
        <div className="pquem__lead" data-reveal>
          <div className="eyebrow">Para quem é</div>
          <h2>Algo trava, mas você<br />não sabe o que pedir</h2>
          <p>Se a operação dá sinais de desgaste mas você ainda não sabe se precisa de projeto, sustentação, integração ou alocação, o diagnóstico é o ponto de partida certo.</p>
        </div>
        <ul className="pquem__signals" data-reveal>
          {SIGNALS.map(([ic, t, d], i) => (
            <li key={t} className="pquem__sig" style={{ '--reveal-delay': (i * 60) + 'ms' }}>
              <span className="pquem__sigic"><Icon name={ic} size={20} /></span>
              <span>
                <span className="pquem__sigt">{t}</span>
                <span className="pquem__sigd">{d}</span>
              </span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

/* ---------------- Tipos de diagnóstico ---------------- */
const TIPOS = [
  ['heart-pulse', 'Saúde Fluig', 'Performance, datasets, jobs e estabilidade da sua plataforma Fluig.'],
  ['workflow', 'Integrações', 'Fluig com Protheus, RM, Datasul e Winthor, APIs e webservices.'],
  ['git-branch', 'Processos', 'Onde o fluxo trava, gargalos e oportunidades de automação.'],
  ['layers', 'Backlog', 'O que está parado, por que parou e o que priorizar primeiro.'],
  ['scan-search', 'Avaliação de ambiente', 'Visão geral de adoção, riscos e maturidade do seu TOTVS.'],
  ['list-checks', 'Plano de ação', 'Recomendações priorizadas e o melhor caminho para evoluir.'],
];

function Tipos() {
  return (
    <section className="section tipos" id="tipos">
      <div className="wrap">
        <div className="section-head" data-reveal>
          <div className="eyebrow">Tipos de diagnóstico</div>
          <h2>Escolha o foco, ou deixe<br />que a gente aponta</h2>
          <p>Cada diagnóstico olha para uma camada do seu ambiente. Não sabe qual? Começamos por uma avaliação geral.</p>
        </div>
        <div className="tipos__grid">
          {TIPOS.map(([ic, t, d], i) => {
            const href = t === 'Saúde Fluig' ? 'diagnostico-saude-fluig.html' : window.JYNX_LINKS.demo;
            return (
              <a key={t} href={href} className="tipos__card card" data-reveal style={{ '--reveal-delay': (i * 70) + 'ms' }}>
                <span className="tipos__ic"><Icon name={ic} size={22} /></span>
                <h3>{t}</h3>
                <p>{d}</p>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Como funciona ---------------- */
const DSTEPS = [
  ['send', 'Você solicita e conta o cenário', 'Em poucos minutos, você descreve o que está travando e o seu contexto.'],
  ['search', 'Avaliamos o seu ambiente', 'Olhamos ambiente, integrações, datasets, performance, adoção e backlog.'],
  ['clipboard-check', 'Você recebe um plano de ação', 'Com prioridades e o melhor caminho a seguir, sem compromisso.'],
];

function ComoFunciona() {
  return (
    <section className="section dcomo section--alt" id="como">
      <div className="wrap">
        <div className="section-head" data-reveal>
          <div className="eyebrow">Como funciona</div>
          <h2>Três passos até a clareza</h2>
        </div>
        <div className="dcomo__steps">
          <div className="dcomo__line" aria-hidden="true"></div>
          {DSTEPS.map(([ic, t, d], i) => (
            <div key={t} className="dcomo__step" data-reveal style={{ '--reveal-delay': (i * 110) + 'ms' }}>
              <div className="dcomo__node">
                <span className="dcomo__num">{i + 1}</span>
                <span className="dcomo__ic"><Icon name={ic} size={22} /></span>
              </div>
              <h3>{t}</h3>
              <p>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- O que você recebe ---------------- */
const RECEBE = [
  ['scan-eye', 'Visão clara do que trava', 'Onde estão os gargalos, os riscos e o que drena tempo da operação.'],
  ['flag', 'Prioridades definidas', 'O que resolver primeiro, com base em impacto e esforço.'],
  ['route', 'Plano de ação', 'O melhor caminho a seguir: solução pronta, sustentação, integração ou projeto.'],
];

function OQueRecebe() {
  return (
    <section className="section drecebe" id="recebe">
      <div className="wrap drecebe__inner">
        <div className="drecebe__lead" data-reveal>
          <div className="eyebrow">O que você recebe</div>
          <h2>Sai do diagnóstico<br />sabendo o que fazer</h2>
          <p>Nada de relatório genérico. Você recebe direção concreta para destravar o ambiente.</p>
        </div>
        <div className="drecebe__cards">
          {RECEBE.map(([ic, t, d], i) => (
            <div key={t} className="drecebe__card card" data-reveal style={{ '--reveal-delay': (i * 80) + 'ms' }}>
              <span className="drecebe__ic"><Icon name={ic} size={22} /></span>
              <div className="drecebe__txt">
                <h3>{t}</h3>
                <p>{d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- CTA final ---------------- */
function DiagCTA() {
  const L = window.JYNX_LINKS;
  return (
    <section className="section dcta section--ink" id="cta">
      <div className="dcta__mark" aria-hidden="true"><JynxMark size={480} color="color-mix(in srgb, var(--accent) 13%, transparent)" /></div>
      <div className="wrap dcta__inner" data-reveal>
        <h2>O primeiro passo é<br />gratuito e sem compromisso</h2>
        <p>Solicite o diagnóstico do seu ambiente TOTVS ou fale agora com um especialista.</p>
        <div className="dcta__btns">
          <a href={L.demo} className="btn btn--primary btn--lg">Solicitar diagnóstico gratuito <Icon name="arrow-right" size={18} /></a>
          <a href={L.wa} className="btn btn--ghost btn--lg"><Icon name="message-circle" size={18} /> Falar com especialista</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { DiagHero, ParaQuem, Tipos, ComoFunciona, OQueRecebe, DiagCTA });