// svc-pages.jsx — /servicos and /integracoes
// Exports: ServicosPage, IntegracoesPage

function PageHero({ eyebrow, h1, sub, primary, secondary }) {
  return (
    <section className="phero">
      <div className="phero__atmo" aria-hidden="true"></div>
      <div className="wrap phero__inner">
        <div className="eyebrow" data-reveal>{eyebrow}</div>
        <h1 data-reveal style={{ '--reveal-delay': '60ms' }}>
          {h1.map((l, i) => <React.Fragment key={i}>{l}{i < h1.length - 1 && <br />}</React.Fragment>)}
        </h1>
        <p className="phero__sub" data-reveal style={{ '--reveal-delay': '120ms' }}>{sub}</p>
        <div className="phero__cta" data-reveal style={{ '--reveal-delay': '180ms' }}>
          <a href={primary[1]} className="btn btn--primary btn--lg">{primary[0]} <Icon name="arrow-right" size={18} /></a>
          <a href={secondary[1]} className="btn btn--ghost btn--lg"><Icon name="message-circle" size={18} /> {secondary[0]}</a>
        </div>
      </div>
    </section>
  );
}

function PageCTA({ title, sub, primary, secondary }) {
  return (
    <section className="section pagecta section--ink" id="cta">
      <div className="pagecta__mark" aria-hidden="true"><JynxMark size={460} color="color-mix(in srgb, var(--accent) 13%, transparent)" /></div>
      <div className="wrap pagecta__inner" data-reveal>
        <h2>{title}</h2>
        <p>{sub}</p>
        <div className="pagecta__btns">
          <a href={primary[1]} className="btn btn--primary btn--lg">{primary[0]} <Icon name="arrow-right" size={18} /></a>
          <a href={secondary[1]} className="btn btn--ghost btn--lg"><Icon name="message-circle" size={18} /> {secondary[0]}</a>
        </div>
      </div>
    </section>
  );
}

/* ============================ /servicos ============================ */
const SVC_PILLARS = [
  {
    key: 'sustentar', icon: 'shield-check', title: 'Sustentar',
    tag: 'Operação estável e previsível',
    mods: [
      ['Sustentação Fluig', 'Operação estável, correções e melhorias contínuas.'],
      ['AMS TOTVS', 'Gestão e manutenção do ambiente com acordo de serviço.'],
      ['Service Desk com SLA', 'Atendimento com fila, responsável e prazo acordado.'],
      ['Operação assistida', 'Apoio próximo na rotina, com transferência de conhecimento.'],
    ],
  },
  {
    key: 'evoluir', icon: 'trending-up', title: 'Evoluir',
    tag: 'Processos que acompanham o negócio',
    mods: [
      ['Consultoria Fluig', 'Revisão de processos, boas práticas e evolução da plataforma.'],
      ['Desenvolvimento Fluig', 'Formulários, fluxos, widgets e automações sob medida.'],
      ['Projetos sob medida', 'Escopo fechado, prazo definido e entrega rastreável.'],
      ['Arquitetura de processos', 'Desenho de fluxos que escalam e conversam com o ERP.'],
      ['Alocação de especialistas', 'Consultores Protheus, Fluig e RM no seu time, em dias.'],
    ],
  },
];

function ServicosPage() {
  const L = window.JYNX_LINKS;
  const BASE = window.JYNX_BASE || '';
  return (
    <React.Fragment>
      <PageHero
        eyebrow="Serviços TOTVS"
        h1={['Serviços TOTVS com rastreabilidade,', 'não alocação de hora']}
        sub="Sustentar, evoluir e executar com escopo, responsável e histórico. Cada serviço entrega valor mensurável e fica registrado na plataforma, do início ao fim."
        primary={['Solicitar diagnóstico', L.demo]}
        secondary={['Falar com especialista', L.wa]}
      />

      <section className="section svc" id="servicos">
        <div className="wrap">
          <div className="section-head" data-reveal>
            <div className="eyebrow">Três capacidades</div>
            <h2>Sustentar, integrar e evoluir<br />o seu ambiente TOTVS</h2>
            <p>As modalidades se organizam em três frentes coerentes, sem listas soltas e sem venda de hora.</p>
          </div>
          <div className="svc-pillars">
            {SVC_PILLARS.map((p, pi) => (
              <div key={p.key} className="svc-pillar card" data-reveal style={{ '--reveal-delay': (pi * 90) + 'ms' }}>
                <div className="svc-pillar__head">
                  <span className="svc-pillar__ic"><Icon name={p.icon} size={24} /></span>
                  <div>
                    <h3>{p.title}</h3>
                    <span className="svc-pillar__tag">{p.tag}</span>
                  </div>
                </div>
                <ul className="svc-mods">
                  {p.mods.map(([n, d]) => (
                    <li key={n} className="svc-mod">
                      <span className="svc-mod__name">{n}</span>
                      <span className="svc-mod__desc">{d}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}

            {/* Integrar pillar -> /integracoes */}
            <a href={BASE + 'integracoes.html'} className="svc-pillar svc-pillar--int" data-reveal style={{ '--reveal-delay': '180ms' }}>
              <div className="svc-pillar__head">
                <span className="svc-pillar__ic svc-pillar__ic--int"><Icon name="workflow" size={24} /></span>
                <div>
                  <h3>Integrar</h3>
                  <span className="svc-pillar__tag">Dados fluindo, sem redigitação</span>
                </div>
              </div>
              <p className="svc-int__lead">Conecte o Fluig ao Protheus, RM, Datasul e Winthor, além de APIs, webservices, datasets e SSO.</p>
              <div className="svc-int__feats">
                {['Fluig + Protheus', 'Fluig + RM', 'Fluig + Datasul', 'Fluig + Winthor', 'APIs', 'SSO'].map(f => (
                  <span key={f} className="svc-int__chip">{f}</span>
                ))}
              </div>
              <span className="svc-int__cta">Conhecer integrações <Icon name="arrow-right" size={16} /></span>
            </a>
          </div>
        </div>
      </section>

      <PageCTA
        title="Vamos evoluir o seu ambiente TOTVS?"
        sub="Fale com um especialista ou solicite um diagnóstico gratuito para mapear o melhor caminho."
        primary={['Solicitar diagnóstico', L.demo]}
        secondary={['Falar com especialista', L.wa]}
      />
    </React.Fragment>
  );
}

/* ============================ /integracoes ============================ */
const INTEG = [
  ['arrow-left-right', 'Fluig + Protheus', 'Aprovações e cadastros gravam direto no Protheus, sem redigitação.', ['Protheus']],
  ['users', 'Fluig + RM', 'Processos de RH e backoffice sincronizados com o TOTVS RM.', ['RM']],
  ['database', 'Fluig + Datasul', 'Fluxos do Fluig integrados às rotinas do Datasul.', ['Datasul']],
  ['shopping-cart', 'Fluig + Winthor', 'Compras e cadastros conectados ao Winthor, sem planilha no meio.', ['Winthor']],
  ['webhook', 'APIs e webservices', 'Comunicação com sistemas internos e externos via REST e SOAP.', ['REST', 'SOAP']],
  ['database-zap', 'Datasets e integrações', 'Consulta de dados em tempo real para formulários e fluxos.', ['Datasets']],
  ['key-round', 'SSO e Identity', 'Login único e governança de acesso entre Fluig e ERP.', ['SSO', 'OAuth']],
  ['puzzle', 'Integrações personalizadas', 'Conectores sob medida para o seu cenário específico.', []],
  ['shield-check', 'Boas práticas de integração', 'Arquitetura resiliente, logs e tratamento de erro de verdade.', []],
];

function IntegracoesPage() {
  const L = window.JYNX_LINKS;
  return (
    <React.Fragment>
      <PageHero
        eyebrow="Integrações TOTVS"
        h1={['Integre o Fluig com o', 'seu ERP, sem redigitação']}
        sub="Conecte o Fluig a Protheus, RM, Datasul e Winthor, além de APIs, webservices, datasets e SSO. Dado aprovado no fluxo vira registro no ERP, sem digitar duas vezes."
        primary={['Solicitar diagnóstico técnico', L.demo]}
        secondary={['Falar com especialista', L.wa]}
      />

      <div className="wrap integ-band" data-reveal>
        <span className="integ-band__label">Conectamos</span>
        {['Protheus', 'RM', 'Datasul', 'Winthor', 'REST', 'SOAP', 'Datasets', 'SSO'].map(t => (
          <span key={t} className="integ-band__chip">{t}</span>
        ))}
      </div>

      <section className="section integ" id="integracoes">
        <div className="wrap">
          <div className="integ-grid">
            {INTEG.map(([ic, t, d, tags], i) => (
              <div key={t} className="integ-card card" data-reveal style={{ '--reveal-delay': (Math.min(i, 6) * 60) + 'ms' }}>
                <div className="integ-card__top">
                  <span className="integ-ic"><Icon name={ic} size={20} /></span>
                  <div className="integ-tags">
                    {tags.map(tg => <span key={tg} className="integ-tag">{tg}</span>)}
                  </div>
                </div>
                <h3>{t}</h3>
                <p>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <PageCTA
        title="Conecte o seu Fluig ao ERP"
        sub="Solicite um diagnóstico técnico do seu cenário de integração ou fale direto com um especialista."
        primary={['Solicitar diagnóstico técnico', L.demo]}
        secondary={['Falar com especialista', L.wa]}
      />
    </React.Fragment>
  );
}

Object.assign(window, { ServicosPage, IntegracoesPage });