// 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.diagnostico} 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.diagnostico} 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>
  );
}

/* ---------------- Solicitar diagnóstico (formulário real) ---------------- */
// Envio real: mesmo endpoint de leads do /contato (cria oportunidade no CRM e
// notifica o time por email via Resend). Resolve o loop dos CTAs (ACHADO 4.1).
const DIAG_LEADS_ENDPOINT = 'https://admin-jynx.vercel.app/api/leads/site';

function DiagForm() {
  const L = window.JYNX_LINKS;
  const [f, setF] = React.useState({ nome: '', empresa: '', email: '', msg: '' });
  const [consent, setConsent] = React.useState(false);
  const [status, setStatus] = React.useState('idle'); // idle | loading | success | error
  const [err, setErr] = React.useState('');
  const upd = (k) => (e) => setF({ ...f, [k]: e.target.value });

  const submit = async (e) => {
    e.preventDefault();
    if (status === 'loading') return;
    const nome = f.nome.trim(), empresa = f.empresa.trim(), email = f.email.trim();
    if (!nome || !empresa || !email) { setStatus('error'); setErr('Preencha nome, empresa e email.'); return; }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setStatus('error'); setErr('Informe um email válido.'); return; }
    if (!consent) { setStatus('error'); setErr('Marque o consentimento para continuar.'); return; }
    setStatus('loading'); setErr('');
    try {
      const contexto = f.msg.trim() ? `[Solicitação de diagnóstico] ${f.msg.trim()}` : '[Solicitação de diagnóstico gratuito do ambiente TOTVS]';
      const res = await fetch(DIAG_LEADS_ENDPOINT, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ nome, empresa, email, mensagem: contexto }),
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data.error || 'falha');
      }
      setStatus('success');
    } catch (_) {
      setStatus('error');
      setErr('Não foi possível enviar agora.');
    }
  };

  if (status === 'success') {
    return (
      <div className="cform card cform--done" role="status">
        <span className="cform__doneic"><Icon name="circle-check-big" size={30} /></span>
        <h3>Solicitação recebida!</h3>
        <p>Recebemos o pedido de diagnóstico e o time da JYNX retorna em breve. Se preferir falar agora:</p>
        <a href={L.wa} className="btn btn--ghost btn--sm"><Icon name="message-circle" size={16} /> Falar pelo WhatsApp</a>
      </div>
    );
  }

  return (
    <form className="cform card" onSubmit={submit} noValidate>
      <div className="cform__row">
        <label>Nome<input type="text" value={f.nome} onChange={upd('nome')} placeholder="Seu nome" required /></label>
        <label>Empresa<input type="text" value={f.empresa} onChange={upd('empresa')} placeholder="Sua empresa" required /></label>
      </div>
      <label>Email<input type="email" value={f.email} onChange={upd('email')} placeholder="voce@empresa.com.br" required /></label>
      <label>O que está travando? (opcional)<textarea value={f.msg} onChange={upd('msg')} rows={4} placeholder="Conte rapidamente o seu cenário: ERP, o que trava e o que você quer resolver."></textarea></label>
      <label className="cform__consent">
        <input type="checkbox" checked={consent} onChange={(e) => setConsent(e.target.checked)} />
        <span>Autorizo a JYNX a tratar meus dados para responder a esta solicitação, conforme a <a href="/sobre">política de privacidade</a>.</span>
      </label>
      {status === 'error' && (
        <div className="cform__err" role="alert">
          <Icon name="alert-circle" size={16} />
          <span>{err} Se preferir, escreva para <a href={L.email}>relacionamento@jynx.com.br</a> ou fale pelo <a href={L.wa}>WhatsApp</a>.</span>
        </div>
      )}
      <button type="submit" className="btn btn--primary btn--lg" disabled={status === 'loading'}>
        {status === 'loading' ? 'Enviando…' : 'Solicitar diagnóstico gratuito'} <Icon name="send" size={17} />
      </button>
      <span className="cform__note">Gratuito e sem compromisso. Seus dados são usados apenas para responder a esta solicitação.</span>
    </form>
  );
}

function DiagSolicitar() {
  return (
    <section className="section contato" id="solicitar">
      <div className="wrap">
        <div className="ct-grid">
          <div className="ct-formwrap" data-reveal>
            <div className="eyebrow">Solicitar diagnóstico</div>
            <h2>Peça o seu diagnóstico gratuito</h2>
            <p className="ct-formsub">Preencha os dados e o time da JYNX retorna com os próximos passos. Sem compromisso.</p>
            <DiagForm />
          </div>
        </div>
      </div>
    </section>
  );
}

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