// sections2.jsx — sections 6-9: Soluções por área, 3 Pilares, Resultados, Comparativo
// Exports to window: Solucoes, Pilares, Resultados, Comparativo, CountUp

/* ---------------- 6. Soluções por área (bento) ---------------- */
const AREAS = [
  ['layout-dashboard', 'TI e Governança', 'Mantenha o Fluig saudável e o backlog sob controle.',
    ['Sustentação Fluig', 'AMS', 'SSO', 'Datasets', 'Central de serviços', 'GMUD'], 'big'],
  ['users', 'RH e Pessoas', 'Da admissão ao desligamento, sem papel.',
    ['Admissão digital', 'Avaliação', 'Requisição de vaga', 'Integração com RM'], 'big'],
  ['receipt', 'Financeiro', 'Aprovação e pagamento com governança.',
    ['Pagamento de notas', 'Antecipados', 'Rateio', 'Alçadas'], 'mid'],
  ['shopping-cart', 'Compras e Suprimentos', 'Da requisição ao contrato.',
    ['Portal de compras', 'Cotação eletrônica', 'Fornecedor', 'Contratos'], 'mid'],
  ['headset', 'Operações', 'Atendimento interno organizado.',
    ['Central de serviços', 'Chamados', 'SLA', 'Portais internos'], 'mid'],
  ['chart-no-axes-column', 'Diretoria e Gestão', 'Visibilidade para decidir com dados, não com achismo.',
    ['Indicadores', 'Visibilidade de processos', 'Gargalos', 'ROI', 'Evolução do Fluig'], 'wide'],
];

function Solucoes() {
  return (
    <section className="section solucoes" id="solucoes">
      <div className="wrap">
        <div className="section-head" data-reveal>
          <div className="eyebrow">Soluções por área</div>
          <h2>Mais de 20 soluções prontas,<br />organizadas pela sua dor</h2>
          <p>Cada solução roda no Fluig, implanta em semanas e é sua para sempre. Comece pela área que mais trava hoje.</p>
        </div>
        <div className="bento">
          {AREAS.map(([ic, name, desc, chips, size], i) => (
            <a key={name} href="/solucoes" className={'bento__card card bento__card--' + size} data-reveal style={{ '--reveal-delay': (i * 70) + 'ms' }}>
              <div className="bento__top">
                <span className="bento__ic"><Icon name={ic} size={22} /></span>
                <span className="bento__see">Ver soluções <Icon name="arrow-up-right" size={15} /></span>
              </div>
              <h3>{name}</h3>
              <p>{desc}</p>
              <div className="bento__chips">
                {chips.map(c => <span key={c} className="tag">{c}</span>)}
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- 7. Sustentar, Integrar, Evoluir ---------------- */
const PILLARS = [
  ['shield-check', 'Sustentar', 'Seu ambiente operando com previsibilidade e SLA.',
    ['Sustentação Fluig', 'AMS TOTVS', 'Service Desk com SLA', 'Correções', 'Operação assistida'],
    'Ver serviços', '/servicos'],
  ['workflow', 'Integrar', 'Dados fluindo entre Fluig e o seu ERP, sem redigitação.',
    ['Fluig + Protheus', 'Fluig + RM', 'Fluig + Datasul', 'Fluig + Winthor', 'APIs e webservices', 'Datasets e SSO'],
    'Conhecer integrações', '/integracoes'],
  ['trending-up', 'Evoluir', 'Processos que acompanham o crescimento do negócio.',
    ['Consultoria Fluig', 'Desenvolvimento', 'Portais', 'Automações', 'Projetos sob medida', 'IA aplicada a processos'],
    'Solicitar diagnóstico técnico', window.JYNX_LINKS.diagnostico],
];

function Pilares() {
  return (
    <section className="section pilares section--alt" id="servicos">
      <div className="wrap">
        <div className="section-head" data-reveal>
          <div className="eyebrow">Serviços e integrações</div>
          <h2>Sustentar, integrar e evoluir</h2>
          <p>Três capacidades que cobrem todo o ciclo de vida do seu ambiente TOTVS, com rastreabilidade do começo ao fim.</p>
        </div>
        <div className="pilares__grid">
          {PILLARS.map(([ic, title, desc, items, cta, href], i) => (
            <div key={title} className="pilares__card card" data-reveal style={{ '--reveal-delay': (i * 90) + 'ms' }}>
              <div className="pilares__head">
                <span className="pilares__ic"><Icon name={ic} size={24} /></span>
                <h3>{title}</h3>
              </div>
              <p className="pilares__desc">{desc}</p>
              <ul className="pilares__list">
                {items.map(it => (
                  <li key={it}><Icon name="check" size={15} /> {it}</li>
                ))}
              </ul>
              <a href={href} className="pilares__cta">{cta} <Icon name="arrow-right" size={16} /></a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- count-up (timer-based, capture-safe) ---------------- */
function CountUp({ to, suffix = '', duration = 1400, motion = true }) {
  const ref = React.useRef(null);
  const [val, setVal] = React.useState(motion ? 0 : to);
  React.useEffect(() => {
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (!motion || reduce) { setVal(to); return; }
    let started = false, animId = null, checkId = null;
    const run = () => {
      if (started) return; started = true; clearInterval(checkId);
      const t0 = Date.now();
      animId = setInterval(() => {
        const p = Math.min(1, (Date.now() - t0) / duration);
        const eased = 1 - Math.pow(1 - p, 3);
        setVal(Math.round(eased * to));
        if (p >= 1) clearInterval(animId);
      }, 30);
    };
    checkId = setInterval(() => {
      const el = ref.current; if (!el) return;
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight || document.documentElement.clientHeight;
      if (r.top < vh * 0.92 && r.bottom > 0) run();
    }, 200);
    const safety = setTimeout(() => { setVal(to); clearInterval(animId); clearInterval(checkId); }, 4000);
    return () => { clearInterval(animId); clearInterval(checkId); clearTimeout(safety); };
  }, [to, motion, duration]);
  return <span ref={ref}>{val}{suffix}</span>;
}

/* ---------------- 8. Resultados ---------------- */
function Resultados({ motion = true }) {
  return (
    <section className="section resultados" id="resultados">
      <div className="wrap">
        <div className="section-head" data-reveal>
          <div className="eyebrow">Resultados e casos de uso</div>
          <h2>O que muda quando o<br />processo passa a fluir</h2>
        </div>
        <div className="resultados__grid">
          <div className="resultados__card card" data-reveal>
            <div className="resultados__num"><CountUp to={70} suffix="%" motion={motion} /></div>
            <div className="resultados__label">de redução no tempo de aprovação de compras</div>
          </div>
          <div className="resultados__card card resultados__card--ba" data-reveal style={{ '--reveal-delay': '80ms' }}>
            <div className="resultados__ba">
              <span className="resultados__before">5 dias</span>
              <Icon name="arrow-right" size={22} />
              <span className="resultados__after">4 horas</span>
            </div>
            <div className="resultados__label">para concluir uma admissão, do papel ao digital</div>
          </div>
          <div className="resultados__card card" data-reveal style={{ '--reveal-delay': '160ms' }}>
            <div className="resultados__num"><CountUp to={95} suffix="%" motion={motion} /></div>
            <div className="resultados__label">dos chamados resolvidos dentro do SLA</div>
          </div>
          <div className="resultados__card card" data-reveal style={{ '--reveal-delay': '240ms' }}>
            <div className="resultados__num"><CountUp to={15} suffix="%" motion={motion} /></div>
            <div className="resultados__label">de economia média em compras com mapa comparativo</div>
          </div>
        </div>
        <p className="resultados__disc" data-reveal>
          <Icon name="info" size={14} /> Resultados variam conforme contexto, maturidade dos processos e escopo.
        </p>
      </div>
    </section>
  );
}

/* ---------------- 9. Comparativo ---------------- */
const COMPARE = [
  ['Prazo', 'Meses de projeto', 'Semanas com soluções prontas'],
  ['Catálogo', 'Desenvolve do zero sob demanda', 'Mais de 20 soluções no catálogo'],
  ['Transparência', 'Acompanhamento por email', 'Plataforma com projetos em tempo real'],
  ['Equipe', '1 consultor generalista', 'Squad: Protheus, Fluig, RM, ADVPL, GoodData'],
  ['Ajustes', 'Cobra aditivo a cada mudança', 'Ajustes inclusos no plano'],
  ['Suporte', 'Encerra no go-live', 'Service desk contínuo com SLA'],
];

function Comparativo() {
  return (
    <section className="section comparativo section--alt" id="comparativo">
      <div className="wrap">
        <div className="section-head" data-reveal>
          <div className="eyebrow">Por que a JYNX</div>
          <h2>Consultoria tradicional<br />ou a extensão do seu time</h2>
        </div>
        <div className="compare" data-reveal>
          <div className="compare__head">
            <div className="compare__rowlabel"></div>
            <div className="compare__col compare__col--trad">Consultoria tradicional</div>
            <div className="compare__col compare__col--jynx"><JynxMark size={16} color="#fff" /> JYNX</div>
          </div>
          {COMPARE.map(([label, trad, jynx], i) => (
            <div key={label} className="compare__row" data-reveal style={{ '--reveal-delay': (i * 60) + 'ms' }}>
              <div className="compare__rowlabel">{label}</div>
              <div className="compare__cell compare__cell--trad">
                <Icon name="x" size={16} /> <span>{trad}</span>
              </div>
              <div className="compare__cell compare__cell--jynx">
                <Icon name="check" size={16} /> <span>{jynx}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Solucoes, Pilares, Resultados, Comparativo, CountUp });