// about-contato.jsx — /sobre and /contato
// Reuses PageHero + PageCTA from svc-pages.jsx
// Exports: SobrePage, ContatoPage

const ABOUT_STATS = [
  ['+7', 'anos no ecossistema TOTVS'],
  ['+200', 'processos automatizados'],
  ['+50', 'soluções prontas no catálogo'],
];

const ABOUT_AUTH = [
  ['database', 'ERP', 'Protheus, RM e Winthor', ['Protheus', 'RM', 'Winthor']],
  ['workflow', 'Processos', 'Automação e governança no Fluig', ['Fluig']],
  ['chart-line', 'Analytics', 'Indicadores e decisão com dados', ['TOTVS Analytics']],
  ['sparkles', 'IA aplicada', 'Inteligência dentro do contexto TOTVS', ['IA no negócio']],
];

const ABOUT_METHOD = [
  ['search', 'Entendemos o cenário', 'Mapeamos processo, sistemas, integrações e prioridades.'],
  ['route', 'Indicamos o caminho', 'Solução pronta, sustentação, especialista, integração ou projeto.'],
  ['list-checks', 'Executamos com rastreabilidade', 'Escopo, responsáveis, prazos e histórico registrados.'],
  ['refresh-cw', 'Evoluímos com o cliente', 'Melhorias, correções e sustentação contínua.'],
];

const ABOUT_FIT = [
  ['building-2', 'Médio e grande porte', 'Empresas que já vivem o ecossistema TOTVS e querem extrair mais dele.'],
  ['users', 'Times sobrecarregados', 'Equipes presas em tarefas manuais, sem tempo para evoluir processos.'],
  ['gauge', 'Gestores que querem escala', 'Quem precisa de previsibilidade, controle e crescimento sustentável.'],
];

const ABOUT_CLIENTS = ['GOL', 'SEBRAE', 'Bombril', 'Shineray', 'Botec', 'Oba', 'Zaraplast'];

const ABOUT_QUOTES = window.PROTHEUS_QUOTES || [
  ['A equipe da JYNX é excepcional, sempre comprometida com os nossos resultados.', 'Candido Loureto', 'Líder de Projetos, Sou Energy'],
  ['A JYNX ajudou a Elfusa a eliminar 100% das solicitações manuais, tornando todo o processo mais eficiente e prático.', 'Raquel Campones', 'Líder de Projetos, Elfusa'],
  ['Quando a tecnologia se conecta com a realidade do negócio, o resultado vem. E a JYNX tem feito exatamente isso: simplificar processos e entregar eficiência.', 'Maicon Monteiro', 'Gerente de Compras, Concreserv'],
];


/* ============================ /sobre, dados ============================
   Copy da especificação "A página Sobre v2". Os fatos vêm do registro público
   do CNPJ 34.971.789/0001-40 e são os mesmos nos dois sites do grupo: fato
   contado diferente em dois lugares vira contradição.
   ====================================================================== */

// A cadeia: onde a JYNX entra, e onde quase todo mundo entra.
const SOBRE_CADEIA = [
  ['01', 'route', 'Processo', 'onde a JYNX entra', 'Entender como o trabalho acontece de verdade, e desenhar quem faz o quê, em que ordem e com qual alçada.'],
  ['02', 'workflow', 'Automação', null, 'Tirar da mão o que se repete, e fazer cada passo deixar rastro sem ninguém precisar lembrar.'],
  ['03', 'database', 'Dado', null, 'O registro nasce certo, no lugar certo e na hora certa, porque nasce dentro do processo.'],
  ['04', 'chart-no-axes-column', 'Informação', null, 'Indicador que a diretoria confia, porque dá para abrir e ver de onde cada número veio.'],
  ['05', 'target', 'Decisão', 'e a empresa evolui', 'Análise que sustenta escolha, e não achismo com gráfico bonito em cima.'],
];

// Linha do tempo. Cada marco carrega o desafio daquele momento: empresa que só
// conta acerto não é acreditada por ninguém que já tocou uma operação.
const SOBRE_TIMELINE = [
  ['2019', 'Ygor Lima funda a empresa em São Paulo, com consultoria em tecnologia da informação como atividade principal e foco no ecossistema TOTVS.', 'Sustentar venda, entrega e aprendizado do ecossistema com uma estrutura mínima.'],
  ['2021', 'Entra o segundo sócio e a operação passa a ser organizada em times. A consultoria cresce dentro do ecossistema TOTVS e deixa de depender de uma pessoa.', 'Estruturar time próprio sem transformar a empresa em alocadora de mão de obra.'],
  ['2022', 'Nasce a JYNX Educação, de uma necessidade interna de capacitação. A busca por profissionais esbarrou num problema maior: as projeções do setor apontavam falta de mais de 500 mil profissionais de tecnologia no país. A necessidade interna virou oportunidade de mercado.', 'Formar gente na velocidade em que a operação precisava contratar.'],
  ['2024', 'Nasce a JYNX Sistemas, para atender empresas que não cabem no software de prateleira e não querem seguir pagando aluguel de licença. Com a IA aplicada ao desenvolvimento, passou a ser viável entregar sistema sob medida robusto num custo que a empresa média comporta.', 'Entregar sob medida com o custo e o prazo que antes só a solução pronta tinha.'],
  ['2025', 'Entra o sócio de gestão de projetos. Com as frentes operando em paralelo, a entrega ganha gestão própria: escopo, prazo e histórico registrados projeto a projeto.', 'Manter o mesmo padrão de entrega em operações com lógicas diferentes.'],
  ['Fim de 2025', 'A marca passa a ser JYNX.', 'Unificar a marca sem perder o que havia sido construído com a anterior.'],
  ['2026', 'Três empresas, a mesma missão. JYNX Serviços, JYNX Sistemas e JYNX Educação operam com times e entregas próprias, unidas pelo objetivo de automatizar o que a empresa ainda faz na mão.', 'Crescer como grupo preservando a autonomia de cada operação.'],
];

const SOBRE_DESAFIOS = [
  ['banknote', 'Vender resultado num mercado que vende hora',
   'No ecossistema TOTVS, o padrão é alocar consultor e faturar hora. É previsível para quem vende e ruim para quem compra, porque o custo cresce com o atraso.',
   'Escopo fechado, prazo definido e catálogo de soluções prontas. Dizer não para a receita fácil da hora aberta custou caro no começo.',
   'A comparação com consultoria tradicional, que hoje é o bloco mais forte da home.'],
  ['users', 'Crescer sem virar corpo de aluguel',
   'Quando a demanda cresce, o caminho mais curto é contratar gente e emprestar para o cliente. Aí a empresa vira agência de mão de obra e para de acumular conhecimento próprio.',
   'Transformou o que se repetia em solução pronta, em vez de refazer projeto a projeto.',
   'Mais de 50 soluções no catálogo, que é o repertório acumulado virando produto.'],
  ['code', 'Entregar sob medida a um preço que a empresa média comporta',
   'Existe uma faixa de empresa que não cabe no software de prateleira e também não quer seguir pagando aluguel de licença por um sistema que nunca será dela. Sob medida resolvia, mas custava caro e demorava demais para a maioria delas.',
   'Levou IA para dentro do próprio desenvolvimento e passou a entregar sistema sob medida robusto em prazo e custo acessíveis, conectado ao ERP que a empresa já usa.',
   'A JYNX Sistemas, que também assume sistema legado sem quem o mantenha e mantém a operação de pé.'],
  ['graduation-cap', 'Contratar num mercado que não forma',
   'Para crescer, a JYNX precisava de profissionais prontos para o ecossistema TOTVS, e o país caminhava para um déficit de centenas de milhares de profissionais de tecnologia. Esperar o mercado formar não era uma opção.',
   'Começou capacitando o próprio time e transformou o método em formação aberta, com aula presencial em São Paulo.',
   'A JYNX Educação, que nasceu de uma necessidade interna e virou resposta para uma necessidade do mercado.'],
  ['activity', 'Mostrar progresso quando não há tela nova para mostrar',
   'Num redesenho do zero, o cliente passa meses pagando sem ver nada de pé. É a maior angústia de quem contrata software sob medida, e a maior causa de projeto cancelado no meio.',
   'Plataforma com o andamento em tempo real, relatório de status por projeto e registro de cada etapa concluída.',
   'A rastreabilidade, que hoje é argumento de venda e não só controle interno.'],
];

// O mesmo componente serve os dois sites, mudando só qual card está marcado
// como "você está aqui".
const SOBRE_GRUPO = [
  ['servicos', 'JYNX Serviços', 'Para quem já tem TOTVS. Soluções prontas, sustentação, integração e consultoria em Protheus, RM, Winthor e Fluig.', null],
  ['sistemas', 'JYNX Sistemas', 'Para quem precisa do que o sistema de prateleira não cobre. Software sob medida com inteligência artificial, conectado ao que a empresa já usa.', 'https://www.jynxsistemas.com.br'],
  ['educacao', 'JYNX Educação', 'Formação presencial em tecnologia, inteligência artificial e negócios digitais, em São Paulo.', 'https://jynxeducacao.com.br'],
];

// Perguntas frequentes. O acordeão esconde por CSS e nunca remove do HTML, que
// é o que faz o robô de IA enxergar a resposta sem executar JavaScript.
const SOBRE_FAQ = [
  ['Quem é a JYNX?', 'A JYNX é uma empresa brasileira de tecnologia especializada no ecossistema TOTVS. Fundada em 2019 em São Paulo, atua com soluções prontas, consultoria, sustentação e integração para Protheus, RM, Winthor e Fluig.'],
  ['Quando a JYNX foi fundada?', 'Em setembro de 2019, em São Paulo, e desde então opera sob a marca JYNX.'],
  ['Quem fundou a JYNX?', 'Ygor Lima, que abriu a empresa sozinho em 2019. Os outros sócios entraram conforme a operação cresceu, entre 2021 e 2025.'],
  ['Quais empresas fazem parte do grupo JYNX?', 'São três empresas diferentes, com times e entregas próprias: JYNX Serviços, que atua no ecossistema TOTVS; JYNX Sistemas, que constrói software sob medida com inteligência artificial; e JYNX Educação, que forma profissionais em tecnologia, em São Paulo.'],
  ['A JYNX é uma empresa de tecnologia?', 'A JYNX usa tecnologia como meio. O trabalho começa entendendo e desenhando o processo do cliente, e a tecnologia entra depois, para automatizar o que se repete e garantir que cada passo deixe registro. O resultado é dado confiável, informação que sustenta decisão e a empresa evoluindo.'],
  ['Onde fica a JYNX?', 'A sede fica em São Paulo, SP. A JYNX atende empresas em todo o Brasil, com trabalho remoto e presencial conforme o projeto.'],
];
window.SOBRE_FAQ = SOBRE_FAQ;

function SobrePage() {
  const L = window.JYNX_LINKS;
  const [faqAberta, setFaqAberta] = React.useState(0);
  return (
    <React.Fragment>
      <PageHero
        eyebrow="Sobre a JYNX"
        h1={['Especialistas em transformar', 'operações de empresas TOTVS']}
        sub="A JYNX é a camada especializada sobre o ecossistema TOTVS. Conectamos ERP, processos, dados e IA para empresas que usam Protheus, RM, Winthor e Fluig, com foco em resultado mensurável. Fundada em 2019, em São Paulo. Tecnologia é o nosso meio. O fim é o processo da sua empresa funcionando melhor."
        primary={['Solicitar diagnóstico', L.diagnostico]}
        secondary={['Falar com especialista', L.wa]}
      />

      {/* Por que a JYNX existe: a cadeia */}
      <section className="section sb-cadeia" id="por-que-existimos">
        <div className="wrap">
          <div className="section-head" data-reveal>
            <div className="eyebrow">Por que a JYNX existe</div>
            <h2>Tecnologia é o meio.<br />O fim é o processo.</h2>
            <p>Empresa nenhuma nos procura porque quer tecnologia. Procura porque alguma coisa não está funcionando. E quase sempre o que não está funcionando é o processo, não o sistema.</p>
          </div>
          <ol className="sb-cadeia__lista">
            {SOBRE_CADEIA.map(([n, ic, titulo, extra, desc], i) => (
              <li key={n} className={'sb-cadeia__elo' + (i === 0 ? ' is-jynx' : '')} data-reveal style={{ '--reveal-delay': (i * 80) + 'ms' }}>
                <span className="sb-cadeia__n">{n}</span>
                <span className="sb-cadeia__ic"><Icon name={ic} size={20} /></span>
                <h3>{titulo}{extra ? <small>{extra}</small> : null}</h3>
                <p>{desc}</p>
              </li>
            ))}
          </ol>
          <div className="sb-cadeia__fecho card" data-reveal>
            <h3>É por isso que a gente não começa pelo painel</h3>
            <p>Empresa que desconfia dos próprios números costuma comprar uma ferramenta de análise. Só que dado ruim não se conserta no relatório: ele nasce torto lá atrás, no processo que ninguém desenhou. Automatizar um processo errado só faz ele errar mais rápido.</p>
          </div>
        </div>
      </section>

      {/* Linha do tempo, com o desafio de cada momento */}
      <section className="section sb-tempo section--alt" id="historia">
        <div className="wrap">
          <div className="section-head" data-reveal>
            <div className="eyebrow">De onde a JYNX veio</div>
            <h2>Começou com uma pessoa<br />e um CNPJ em 2019.</h2>
            <p>Hoje são três empresas, e cada uma nasceu de um problema que apareceu no caminho, não de um plano feito antes.</p>
          </div>
          <ol className="sb-tempo__lista">
            {SOBRE_TIMELINE.map(([ano, marco, desafio], i) => (
              <li key={ano} className={'sb-tempo__marco' + (i === SOBRE_TIMELINE.length - 1 ? ' is-atual' : '')}
                  data-reveal style={{ '--reveal-delay': (i * 90) + 'ms' }}>
                <span className="sb-tempo__ponto" aria-hidden="true"></span>
                <div className="sb-tempo__card card">
                  <span className="sb-tempo__ano">{ano}</span>
                  <p className="sb-tempo__marcoTxt">{marco}</p>
                  <div className="sb-tempo__desafio">
                    <span className="sb-tempo__rotulo">O desafio</span>
                    <p>{desafio}</p>
                  </div>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </section>

      {/* Os quatro desafios */}
      <section className="section sb-desafios" id="desafios">
        <div className="wrap">
          <div className="section-head" data-reveal>
            <div className="eyebrow">O que foi difícil</div>
            <h2>Cada frente nasceu de um problema<br />que a gente teve que resolver primeiro.</h2>
            <p>Nenhum desses caminhos estava no plano. Todos apareceram porque alguma coisa não funcionava, e alguém precisou resolver.</p>
          </div>
          <div className="sb-desafios__grid">
            {SOBRE_DESAFIOS.map(([ic, titulo, problema, fez, ficou], i) => (
              <article key={titulo} className="sb-desafios__card card" data-reveal style={{ '--reveal-delay': (i * 80) + 'ms' }}>
                <span className="sb-desafios__ic"><Icon name={ic} size={22} /></span>
                <h3>{titulo}</h3>
                <p><b>O problema:</b> {problema}</p>
                <p><b>O que a JYNX fez:</b> {fez}</p>
                <p className="sb-desafios__ficou"><b>O que ficou:</b> {ficou}</p>
              </article>
            ))}
          </div>
          <p className="sb-desafios__fecho" data-reveal>
            Os quatro desafios são versões do mesmo problema que o cliente tem: trabalho que depende de gente lembrar, informação que ninguém consegue conferir, e progresso que ninguém enxerga. A JYNX resolveu isso para si mesma antes de vender a solução para outra empresa.
          </p>
        </div>
      </section>

      {/* O grupo. Mesmo componente dos dois sites, muda só qual card está marcado. */}
      <section className="section sb-grupo section--alt" id="grupo">
        <div className="wrap">
          <div className="section-head" data-reveal>
            <div className="eyebrow">O grupo JYNX</div>
            <h2>Três empresas, a mesma missão.</h2>
            <p>São operações diferentes, com times e entregas próprias, unidas pelo mesmo objetivo: automatizar o que a empresa ainda faz na mão. O caminho muda conforme o que já existe dentro do cliente.</p>
          </div>
          <div className="sb-grupo__grid">
            {SOBRE_GRUPO.map(([id, nome, desc, href], i) => {
              const conteudo = (
                <React.Fragment>
                  <h3>{nome}</h3>
                  <p>{desc}</p>
                  <span className="sb-grupo__cta">
                    {href ? <React.Fragment>Conhecer a {nome} <Icon name="arrow-right" size={15} /></React.Fragment> : 'Você está aqui'}
                  </span>
                </React.Fragment>
              );
              const cls = 'sb-grupo__card card' + (href ? '' : ' is-aqui');
              const st = { '--reveal-delay': (i * 80) + 'ms' };
              return href
                ? <a key={id} className={cls} href={href} data-reveal style={st}>{conteudo}</a>
                : <div key={id} className={cls} data-reveal style={st}>{conteudo}</div>;
            })}
          </div>
        </div>
      </section>


      <VideoConheca />

      {/* O que fazemos + números */}
      <section className="section about-do" id="o-que-fazemos">
        <div className="wrap">
          <div className="section-head" data-reveal>
            <div className="eyebrow">O que fazemos</div>
            <h2>Soluções prontas e serviços<br />para quem vive o TOTVS</h2>
            <p>Somos especializados em soluções prontas que rodam no Fluig e em serviços que sustentam, integram e evoluem o ambiente TOTVS. Não vendemos hora, entregamos resultado com escopo e rastreabilidade.</p>
          </div>
          <div className="about-stats" data-reveal>
            {ABOUT_STATS.map(([n, l]) => (
              <div key={l} className="about-stat card">
                <div className="about-stat__num">{n}</div>
                <div className="about-stat__label">{l}</div>
              </div>
            ))}
          </div>
          <p className="about-disc" data-reveal><Icon name="info" size={14} /> Números do ecossistema JYNX. Resultados variam conforme contexto, maturidade dos processos e escopo.</p>
          <PhotoStrip />
        </div>
      </section>

      {/* Autoridade técnica */}
      <section className="section about-auth section--alt" id="autoridade">
        <div className="wrap">
          <div className="section-head" data-reveal>
            <div className="eyebrow">Autoridade técnica</div>
            <h2>Quatro frentes que<br />dominamos a fundo</h2>
          </div>
          <div className="about-auth__grid">
            {ABOUT_AUTH.map(([ic, t, d, tags], i) => (
              <div key={t} className="about-auth__card card" data-reveal style={{ '--reveal-delay': (i * 70) + 'ms' }}>
                <span className="about-auth__ic"><Icon name={ic} size={22} /></span>
                <h3>{t}</h3>
                <p>{d}</p>
                <div className="about-auth__tags">{tags.map(tg => <span key={tg} className="tag">{tg}</span>)}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Para quem é ideal */}
      <section className="section about-fit section--alt" id="para-quem">
        <div className="wrap">
          <div className="section-head" data-reveal>
            <div className="eyebrow">Para quem é ideal</div>
            <h2>Feita para operações<br />que não podem parar</h2>
          </div>
          <div className="about-fit__grid">
            {ABOUT_FIT.map(([ic, t, d], i) => (
              <div key={t} className="about-fit__card card" data-reveal style={{ '--reveal-delay': (i * 80) + 'ms' }}>
                <span className="about-fit__ic"><Icon name={ic} size={22} /></span>
                <h3>{t}</h3>
                <p>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* No lugar dos depoimentos, que eram os mesmos três da home: as histórias
          inteiras. Repetir a home aqui criava conteúdo duplicado dentro do
          próprio site e fazia as duas páginas competirem na busca. */}
      <section className="section sb-clientes" id="clientes">
        <div className="wrap">
          <div className="sb-clientes__faixa card" data-reveal>
            <div>
              <div className="eyebrow">Clientes de sucesso</div>
              <h2>Empresas reais, resultados reais</h2>
              <p>Da indústria ao varejo, do agro ao saneamento. Cada história tem o problema que existia antes e o que mudou depois.</p>
            </div>
            <a href="/clientes-de-sucesso" className="btn btn--primary btn--lg">Ver os clientes de sucesso <Icon name="arrow-right" size={18} /></a>
          </div>
        </div>
      </section>

      {/* Perguntas frequentes. O acordeão esconde por CSS e nunca remove do
          HTML: é isso que faz o robô de IA, que não executa JavaScript,
          enxergar a resposta. */}
      <section className="section faq sb-faq" id="faq">
        <div className="wrap faq__wrap">
          <div className="faq__lead" data-reveal>
            <div className="eyebrow">Perguntas frequentes</div>
            <h2>O que perguntam sobre a JYNX</h2>
            <p>Não achou sua resposta? <a href={L.wa} className="faq__link">Fale com um especialista</a>.</p>
          </div>
          <ul className="faq__list" data-reveal>
            {SOBRE_FAQ.map(([q, a], i) => (
              <li key={q} className={'faq__item' + (faqAberta === i ? ' is-open' : '')}>
                <button className="faq__q" onClick={() => setFaqAberta(faqAberta === i ? -1 : i)} aria-expanded={faqAberta === i}>
                  <span>{q}</span>
                  <Icon name={faqAberta === i ? 'minus' : 'plus'} size={18} />
                </button>
                <div className="faq__a"><p>{a}</p></div>
              </li>
            ))}
          </ul>
        </div>
      </section>

      {/* Unidades / links finais */}
      <section className="section about-units" id="unidades">
        <div className="wrap about-units__grid">
          <a href="https://jynxeducacao.com.br" target="_blank" rel="noopener" className="about-unit card" data-reveal>
            <span className="about-unit__ic"><Icon name="graduation-cap" size={22} /></span>
            <div>
              <h3>JYNX Educação <Icon name="arrow-up-right" size={16} /></h3>
              <p>Nossa unidade de formação no ecossistema TOTVS, em endereço próprio.</p>
            </div>
          </a>
          <a href="https://vagas.jynx.com.br" target="_blank" rel="noopener" className="about-unit card" data-reveal style={{ '--reveal-delay': '80ms' }}>
            <span className="about-unit__ic"><Icon name="briefcase" size={22} /></span>
            <div>
              <h3>Trabalhe conosco <Icon name="arrow-up-right" size={16} /></h3>
              <p>Vagas abertas para quem quer crescer no universo TOTVS com a gente.</p>
            </div>
          </a>
        </div>
        <p className="about-lgpd wrap" data-reveal>
          <Icon name="shield-check" size={16} /> Levamos LGPD e segurança a sério: tratamos dados com responsabilidade, controle de acesso e rastreabilidade em toda a operação.
        </p>
      </section>

      <PageCTA
        title="Quer a JYNX como extensão do seu time?"
        sub="Comece por um diagnóstico gratuito ou fale agora com um especialista."
        primary={['Solicitar diagnóstico', L.diagnostico]}
        secondary={['Falar com especialista', L.wa]}
      />
    </React.Fragment>
  );
}

/* ============================ /contato ============================ */
// Envio real: POST para o endpoint de leads do Admin (cria oportunidade no CRM
// e notifica o time por email via Resend). Sem depender de cliente de email.
const LEADS_ENDPOINT = 'https://admin-jynx.vercel.app/api/leads/site';

function ContatoForm() {
  const L = window.JYNX_LINKS;
  const [f, setF] = React.useState({ nome: '', empresa: '', email: '', telefone: '', 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 res = await fetch(LEADS_ENDPOINT, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ nome, empresa, email, telefone: f.telefone.trim(), mensagem: f.msg.trim() }),
      });
      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>Mensagem recebida!</h3>
        <p>Recebemos seu contato 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>
      <div className="cform__row">
        <label>Email<input type="email" value={f.email} onChange={upd('email')} placeholder="voce@empresa.com.br" required /></label>
        <label>Telefone<input type="tel" value={f.telefone} onChange={upd('telefone')} placeholder="(11) 90000-0000" /></label>
      </div>
      <label>Mensagem<textarea value={f.msg} onChange={upd('msg')} rows={4} placeholder="Conte rapidamente o seu cenário e o que precisa."></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 este contato, 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…' : 'Enviar mensagem'} <Icon name="send" size={17} />
      </button>
      <span className="cform__note">Seus dados são usados apenas para responder a este contato.</span>
    </form>
  );
}

function ContatoPage() {
  const L = window.JYNX_LINKS;
  return (
    <React.Fragment>
      <PageHero
        eyebrow="Contato"
        h1={['Fale com nosso time']}
        sub="Escolha o caminho que faz mais sentido para você. Resposta imediata pelo WhatsApp ou uma conversa estruturada com agendamento."
        primary={['Agendar conversa', L.demo]}
        secondary={['Falar pelo WhatsApp', L.wa]}
      />

      <section className="section contato" id="contato">
        <div className="wrap">
          <div className="ct-paths" data-reveal>
            <a href={L.wa} className="ct-path card">
              <span className="ct-path__ic ct-path__ic--wa"><Icon name="message-circle" size={24} /></span>
              <h3>Resposta imediata</h3>
              <p>Fale agora com um especialista pelo WhatsApp e tire suas dúvidas em minutos.</p>
              <span className="ct-path__cta">Abrir WhatsApp <Icon name="arrow-right" size={16} /></span>
            </a>
            <a href={L.demo} className="ct-path card">
              <span className="ct-path__ic"><Icon name="calendar-check" size={24} /></span>
              <h3>Conversa estruturada</h3>
              <p>Agende uma demonstração de 20 minutos no horário que funcionar para você.</p>
              <span className="ct-path__cta">Agendar no Calendly <Icon name="arrow-right" size={16} /></span>
            </a>
          </div>

          <div className="ct-grid">
            <div className="ct-formwrap" data-reveal>
              <h2>Prefere escrever?</h2>
              <p className="ct-formsub">Deixe sua mensagem e retornamos pelo canal que você preferir.</p>
              <ContatoForm />
            </div>

            <aside className="ct-info" data-reveal style={{ '--reveal-delay': '80ms' }}>
              <div className="ct-info__item">
                <span className="ct-info__ic"><Icon name="mail" size={18} /></span>
                <div>
                  <span className="ct-info__label">Email</span>
                  <a href={L.email} className="ct-info__val">relacionamento@jynx.com.br</a>
                </div>
              </div>
              <div className="ct-info__item">
                <span className="ct-info__ic"><Icon name="map-pin" size={18} /></span>
                <div>
                  <span className="ct-info__label">Endereço</span>
                  <span className="ct-info__val">Rua Augusta, 1836, 5º andar<br />Paulista, São Paulo, SP</span>
                </div>
              </div>
              <div className="ct-info__item">
                <span className="ct-info__ic"><Icon name="globe" size={18} /></span>
                <div>
                  <span className="ct-info__label">Atuação</span>
                  <span className="ct-info__val">Nacional, em todo o Brasil</span>
                </div>
              </div>
              <div className="ct-info__map dotgrid" aria-hidden="true">
                <Icon name="map-pin" size={26} />
                <span>Paulista, São Paulo</span>
              </div>
            </aside>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

Object.assign(window, { SobrePage, ContatoPage });