// 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'],
  ['+20', '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'],
];

function SobrePage() {
  const L = window.JYNX_LINKS;
  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."
        primary={['Solicitar diagnóstico', L.demo]}
        secondary={['Falar com especialista', L.wa]}
      />

      <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>

      {/* Metodologia */}
      <section className="section method" id="metodologia">
        <div className="wrap">
          <div className="section-head" data-reveal>
            <div className="eyebrow">Nossa metodologia</div>
            <h2>Do diagnóstico à evolução,<br />com rastreabilidade</h2>
          </div>
          <div className="method__steps">
            <div className="method__line" aria-hidden="true"></div>
            {ABOUT_METHOD.map(([ic, t, d], i) => (
              <div key={t} className="method__step" data-reveal style={{ '--reveal-delay': (i * 100) + 'ms' }}>
                <div className="method__node">
                  <span className="method__num">{i + 1}</span>
                  <span className="method__ic"><Icon name={ic} size={20} /></span>
                </div>
                <h3>{t}</h3>
                <p>{d}</p>
              </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>

      {/* Prova social */}
      <section className="section about-prova" id="prova">
        <div className="wrap">
          <div className="section-head" data-reveal>
            <div className="eyebrow">Prova social</div>
            <h2>A confiança de quem<br />opera processos críticos</h2>
          </div>
          <div className="depo__grid" data-reveal>
            {ABOUT_QUOTES.map(([quote, name, role], i) => (
              <figure key={name} className="depo__card card" style={{ '--reveal-delay': (i * 80) + 'ms' }}>
                <span className="depo__mark">”</span>
                <blockquote>{quote}</blockquote>
                <figcaption>
                  <span className="depo__avatar">{name.split(' ').map(w => w[0]).slice(0, 2).join('')}</span>
                  <span>
                    <span className="depo__name">{name}</span>
                    <span className="depo__role">{role}</span>
                  </span>
                </figcaption>
              </figure>
            ))}
          </div>
          <div className="about-logos" data-reveal>
            <ClientLogos />
          </div>
        </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.demo]}
        secondary={['Falar com especialista', L.wa]}
      />
    </React.Fragment>
  );
}

/* ============================ /contato ============================ */
function ContatoForm() {
  const [f, setF] = React.useState({ nome: '', empresa: '', email: '', msg: '' });
  const [sent, setSent] = React.useState(false);
  const upd = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const submit = (e) => {
    e.preventDefault();
    const body = `Nome: ${f.nome}\nEmpresa: ${f.empresa}\nEmail: ${f.email}\n\n${f.msg}`;
    window.location.href = `mailto:relacionamento@jynx.com.br?subject=${encodeURIComponent('Contato pelo site JYNX')}&body=${encodeURIComponent(body)}`;
    setSent(true);
  };
  return (
    <form className="cform card" onSubmit={submit}>
      <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" /></label>
      </div>
      <label>Email<input type="email" value={f.email} onChange={upd('email')} placeholder="voce@empresa.com.br" required /></label>
      <label>Mensagem<textarea value={f.msg} onChange={upd('msg')} rows={4} placeholder="Conte rapidamente o seu cenário e o que precisa." required></textarea></label>
      <button type="submit" className="btn btn--primary btn--lg">{sent ? 'Abrindo seu email…' : 'Enviar mensagem'} <Icon name="send" size={17} /></button>
      <span className="cform__note">Ao enviar, abrimos seu app de email com a mensagem pronta para relacionamento@jynx.com.br.</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 });