// grupo.jsx: páginas do grupo JYNX (home, sobre, contato). Exporta HomeGrupo, SobreGrupo, ContatoGrupo.
// Textos conforme o briefing, sem reescrita.
function HeroGrupo() {
  const L = window.JYNX_LINKS;
  return (
    <section className="ghero" id="top">
      <div className="wrap ghero__inner">
        <h1 data-reveal>IA dentro da operação da sua empresa</h1>
        <p className="ghero__sub" data-reveal>A JYNX forma o seu time, mapeia o que automatizar, constrói o que falta sem trocar o que você já usa, e sustenta o que entregou. Do primeiro treinamento ao sistema rodando, no seu ritmo.</p>
        <div className="ghero__cta" data-reveal>
          <a href={L.funil('home_grupo')} className="btn btn--primary btn--lg">Falar com a JYNX <Icon name="arrow-right" size={18} /></a>
          <a href="#como-a-jynx-trabalha" className="btn btn--ghost btn--lg">Ver como funciona</a>
        </div>
      </div>
    </section>
  );
}

const PORTAS = [
  ['Formar o time', 'Seu time usando IA no trabalho de verdade',
   'Cursos presenciais e remotos em São Paulo, formação in company e o método de dois dias que leva a IA para dentro da área. Para quem quer aprender e para empresas que querem capacitar.',
   'Conhecer a JYNX Educação', 'educacao', ['Já é aluno? ', 'Acesse o Portal do Aluno', 'portal']],
  ['Automatizar a operação', 'O que o seu sistema não faz, a gente completa',
   'Programa de 30 dias que mapeia a operação e entrega a primeira automação com os seus dados, e um time que segue construindo por sprints, com o código sendo seu.',
   'Conhecer o programa', 'programa', ['Já tem um sistema sem quem cuide? ', 'Veja a sustentação', 'sustentacao']],
  ['Consultoria TOTVS', 'Para quem roda a empresa em TOTVS',
   'Implantação, customização e sustentação de Fluig, Protheus, RM e Analytics, com mais de sete anos e dezenas de clientes atendidos.',
   'Ver a consultoria TOTVS', 'totvs', null],
];
function Portas() {
  const L = window.JYNX_LINKS;
  return (
    <section className="section" id="portas">
      <div className="wrap">
        <div className="portas">
          {PORTAS.map(([k, h3, p, cta, link, apoio]) => (
            <article key={k} className="porta card" data-reveal>
              <span className="porta__k">{k}</span>
              <h3>{h3}</h3>
              <p>{p}</p>
              <a href={L[link]} className="btn btn--primary">{cta} <Icon name="arrow-right" size={16} /></a>
              {apoio && <span className="porta__apoio">{apoio[0]}<a href={L[apoio[2]]}>{apoio[1]}</a></span>}
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

const DEGRAUS = [
  ['Formar', 'o time aprende a usar IA no processo dele.'],
  ['Mapear', 'a JYNX levanta a operação e diz o que automatizar primeiro.'],
  ['Construir', 'a primeira automação roda com os seus dados em semanas, e o time segue por sprints.'],
  ['Sustentar', 'o que foi entregue fica vivo, com quem cuida.'],
];
function Escada() {
  return (
    <section className="section section--alt" id="como-a-jynx-trabalha">
      <div className="wrap">
        <div className="section-head" data-reveal><h2>Como a JYNX trabalha</h2></div>
        <div className="escada">
          {DEGRAUS.map(([t, d]) => <div key={t} className="degrau" data-reveal><h3>{t}</h3><p>{d}</p></div>)}
        </div>
        <p className="escada__fecho" data-reveal>Você entra pelo degrau que faz sentido e sobe no seu ritmo. Nada obriga a continuar, e tudo que é produzido é seu.</p>
      </div>
    </section>
  );
}

function Prova() {
  const cases = (typeof window !== 'undefined' && window.JYNX_CASES) || [];
  if (!cases.length) return null;
  return (
    <section className="section" id="prova">
      <div className="wrap">
        <div className="section-head" data-reveal><h2>Quem já confia na JYNX</h2></div>
        <div className="prova">
          {cases.map((c) => (
            <a key={c.slug} href={'/clientes-de-sucesso/' + c.slug} className="prova__card card" data-reveal>
              {c.thumb && <img className="prova__img" src={c.thumb} alt={c.thumbAlt || c.crumb} loading="lazy" />}
              <div className="prova__body">
                <span className="prova__cat">{c.cat}</span>
                <h3>{c.title}</h3>
                <span className="prova__more">Ver o caso <Icon name="arrow-right" size={15} /></span>
              </div>
            </a>
          ))}
        </div>
        <div className="prova__all" data-reveal><a href="/clientes-de-sucesso" className="btn btn--ghost">Ver todos os clientes de sucesso <Icon name="arrow-right" size={16} /></a></div>
      </div>
    </section>
  );
}

function Aprendendo() {
  const posts = (typeof window !== 'undefined' && window.JYNX_BLOG_LATEST) || [];
  if (!posts.length) return null;
  return (
    <section className="section section--alt" id="aprendendo">
      <div className="wrap">
        <div className="section-head" data-reveal><h2>O que estamos aprendendo</h2></div>
        <div className="posts">
          {posts.map((p) => (
            <a key={p.slug} href={'/blog/' + p.slug} className="post card" data-reveal>
              <span className="post__meta">{p.date}</span>
              <h3>{p.title}</h3>
            </a>
          ))}
        </div>
        <div className="prova__all" data-reveal><a href="/blog" className="btn btn--ghost">Ir para o blog <Icon name="arrow-right" size={16} /></a></div>
      </div>
    </section>
  );
}

function Comecar() {
  const L = window.JYNX_LINKS;
  const links = [['Quero formar meu time', L.cursos], ['Quero automatizar minha operação', L.programa], ['Já uso TOTVS e preciso de consultoria', L.totvs]];
  return (
    <section className="section comecar" id="comecar">
      <div className="wrap">
        <div className="section-head" data-reveal><h2>Por onde você quer começar?</h2></div>
        <div className="comecar__links">
          {links.map(([t, h]) => <a key={t} href={h} className="comecar__link card" data-reveal>{t} <Icon name="arrow-right" size={18} /></a>)}
        </div>
        <a href={L.wa} className="comecar__wa" data-reveal><Icon name="message-circle" size={18} /> Falar pelo WhatsApp</a>
      </div>
    </section>
  );
}

function HomeGrupo() {
  return (<React.Fragment><HeroGrupo /><Portas /><Escada /><Prova /><Aprendendo /><Comecar /></React.Fragment>);
}

function SobreGrupo() {
  return (
    <React.Fragment>
      <section className="ghero"><div className="wrap ghero__inner"><h1 data-reveal>Sobre a JYNX</h1>
        <p className="ghero__sub" data-reveal>A JYNX forma o seu time, mapeia o que automatizar, constrói o que falta sem trocar o que você já usa, e sustenta o que entregou. Do primeiro treinamento ao sistema rodando, no seu ritmo.</p></div></section>
      <Portas /><Escada /><Comecar />
    </React.Fragment>
  );
}

Object.assign(window, { HomeGrupo, SobreGrupo, Portas, Escada, Comecar });