// protheus-reforma.jsx — /protheus/reforma-tributaria campaign page
// Exports: RTHero, RTRiscos, RTComo, RTProva, RTCross, RTCTA

const RT_CHECK = [
  ['Cálculo de tributos', 'ajustar'],
  ['Layouts fiscais', 'ajustar'],
  ['Obrigações acessórias', 'ajustar'],
  ['Parametrização fiscal', 'rever'],
  ['Release do Protheus', 'rever'],
];

function RTHero() {
  const L = window.JYNX_LINKS;
  return (
    <section className="rthero">
      <div className="rthero__atmo" aria-hidden="true"></div>
      <div className="wrap rthero__inner">
        <div className="rthero__copy">
          <span className="rthero__pill" data-reveal><Icon name="alarm-clock" size={14} /> Reforma Tributária 2026</span>
          <h1 data-reveal style={{ '--reveal-delay': '60ms' }}>
            Seu Protheus está<br />preparado para a<br />reforma tributária?
          </h1>
          <p className="rthero__lead" data-reveal style={{ '--reveal-delay': '120ms' }}>
            A reforma muda cálculo de tributos, layouts fiscais e obrigações acessórias.
            A JYNX prepara o seu Protheus para a transição com segurança e rastreabilidade.
          </p>
          <div className="rthero__cta" data-reveal style={{ '--reveal-delay': '200ms' }}>
            <a href={L.demo} className="btn btn--primary btn--lg">Agendar diagnóstico gratuito <Icon name="arrow-right" size={18} /></a>
            <a href={L.wa} className="btn btn--ghost btn--lg"><Icon name="message-circle" size={18} /> Falar com especialista Protheus</a>
          </div>
          <div className="rthero__trust" data-reveal style={{ '--reveal-delay': '260ms' }}>
            <span><b>+7 anos</b> no ecossistema TOTVS</span>
            <span className="rthero__dot"></span>
            <span><b>+200</b> processos automatizados</span>
          </div>
        </div>

        <div className="rthero__visual" data-reveal style={{ '--reveal-delay': '180ms' }}>
          <div className="rtcard">
            <div className="rtcard__head">
              <span className="rtcard__tag"><JynxMark size={15} color="var(--accent)" /> Checklist da transição</span>
              <span className="rtcard__erp">Protheus</span>
            </div>
            <ul className="rtcard__list">
              {RT_CHECK.map(([label, st]) => (
                <li key={label}>
                  <span className="rtcard__ic"><Icon name="circle-alert" size={16} /></span>
                  <span className="rtcard__lbl">{label}</span>
                  <span className={'rtcard__st rtcard__st--' + st}>{st === 'ajustar' ? 'A ajustar' : 'Rever'}</span>
                </li>
              ))}
            </ul>
            <div className="rtcard__foot">
              <Icon name="shield-check" size={16} />
              <span>Adequação com escopo fechado e rastreabilidade</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Riscos ---------------- */
const RISCOS = [
  ['sliders-horizontal', 'Parametrização desatualizada', 'Regras fiscais antigas que não refletem o novo modelo de tributos.'],
  ['file-stack', 'Novas obrigações acessórias', 'Declarações e layouts que passam a ser exigidos na transição.'],
  ['calculator', 'Layouts e cálculos a ajustar', 'Apuração, documentos fiscais e cálculos que precisam ser revistos.'],
  ['shield-alert', 'Exposição a autuação', 'Erro fiscal vira risco financeiro e de compliance para a empresa.'],
  ['history', 'Release do Protheus atrasada', 'Versões antigas podem não suportar as mudanças da reforma.'],
  ['user-x', 'Equipe fiscal sem apoio', 'Time interno sobrecarregado, sem especialista Protheus dedicado.'],
];

function RTRiscos() {
  return (
    <section className="section rtriscos" id="riscos">
      <div className="wrap">
        <div className="section-head" data-reveal>
          <div className="eyebrow">O custo de não se preparar</div>
          <h2>O que está em jogo<br />se você deixar para depois</h2>
          <p>A transição não é só uma atualização técnica. Ela toca cálculo, documentos e obrigações que sustentam a operação fiscal.</p>
        </div>
        <div className="rtriscos__grid">
          {RISCOS.map(([ic, t, d], i) => (
            <div key={t} className="rtriscos__card card" data-reveal style={{ '--reveal-delay': (i * 70) + 'ms' }}>
              <span className="rtriscos__ic"><Icon name={ic} size={22} /></span>
              <h3>{t}</h3>
              <p>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Como funciona ---------------- */
const RT_STEPS = [
  ['search', 'Diagnóstico do ambiente fiscal', 'Avaliamos a parametrização, a release e o cenário fiscal atual do seu Protheus.'],
  ['clipboard-list', 'Plano de adequação', 'Parametrização, atualização de release e customizações ADVPL quando necessárias.'],
  ['shield-check', 'Execução com rastreabilidade', 'Implantação validada, com escopo, responsáveis e histórico registrados.'],
];

function RTComo() {
  return (
    <section className="section rtcomo section--alt" id="como">
      <div className="wrap">
        <div className="section-head" data-reveal>
          <div className="eyebrow">Como a JYNX prepara</div>
          <h2>Da avaliação à virada,<br />com segurança</h2>
        </div>
        <div className="rtcomo__steps">
          <div className="rtcomo__line" aria-hidden="true"></div>
          {RT_STEPS.map(([ic, t, d], i) => (
            <div key={t} className="rtcomo__step" data-reveal style={{ '--reveal-delay': (i * 110) + 'ms' }}>
              <div className="rtcomo__node">
                <span className="rtcomo__num">{i + 1}</span>
                <span className="rtcomo__ic"><Icon name={ic} size={22} /></span>
              </div>
              <h3>{t}</h3>
              <p>{d}</p>
            </div>
          ))}
        </div>
        <div className="rtcomo__cta" data-reveal>
          <a href={window.JYNX_LINKS.demo} className="btn btn--primary btn--lg">Agendar diagnóstico gratuito <Icon name="arrow-right" size={18} /></a>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Prova social ---------------- */
const RT_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 RTProva() {
  return (
    <section className="section rtprova" id="prova">
      <div className="wrap">
        <p className="rtprova__trust" data-reveal>
          <b>+7 anos</b> no ecossistema TOTVS, <b>+200</b> processos automatizados. Empresas que operam processos críticos confiam na JYNX.
        </p>
        <div className="depo__grid">
          {RT_QUOTES.map(([quote, name, role], i) => (
            <figure key={name} className="depo__card card" data-reveal style={{ '--reveal-delay': (i * 90) + '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>
    </section>
  );
}

/* ---------------- Cross-sell ---------------- */
const RT_CROSS = [
  ['compass', 'Consultoria Protheus', 'Diagnóstico, implantação de módulos e revitalização.', 'consultoria'],
  ['life-buoy', 'Suporte Protheus', 'Service desk com SLA para a sua operação Protheus.', 'suporte'],
  ['rocket', 'Implantação', 'Novos módulos com escopo fechado e prazo definido.', 'implantacao'],
  ['history', 'Atualização de release', 'Modernização do ambiente para sustentar a evolução.', 'atualizacao'],
  ['code', 'Customização ADVPL', 'Ajustes e desenvolvimentos sob medida no Protheus.', 'customizacao-advpl'],
];

function RTCross() {
  const BASE = window.JYNX_BASE || '';
  return (
    <section className="section rtcross section--alt" id="cross">
      <div className="wrap">
        <div className="section-head" data-reveal>
          <div className="eyebrow">Além da reforma</div>
          <h2>Todo o ciclo do seu<br />Protheus, com a JYNX</h2>
          <p>A reforma é o começo. A JYNX cuida do Protheus de ponta a ponta, com a mesma rastreabilidade.</p>
        </div>
        <div className="rtcross__grid">
          {RT_CROSS.map(([ic, t, d, slug], i) => (
            <a key={t} href={BASE + 'protheus/' + slug + '.html'} className="rtcross__card card" data-reveal style={{ '--reveal-delay': (i * 60) + 'ms' }}>
              <span className="rtcross__ic"><Icon name={ic} size={20} /></span>
              <div>
                <h3>{t}</h3>
                <p>{d}</p>
              </div>
              <Icon name="arrow-up-right" size={16} className="rtcross__arrow" />
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- CTA final ---------------- */
function RTCTA() {
  const L = window.JYNX_LINKS;
  return (
    <section className="section rtcta section--ink" id="cta">
      <div className="rtcta__mark" aria-hidden="true"><JynxMark size={480} color="color-mix(in srgb, var(--accent) 13%, transparent)" /></div>
      <div className="wrap rtcta__inner" data-reveal>
        <span className="rthero__pill"><Icon name="alarm-clock" size={14} /> Não deixe para a última hora</span>
        <h2>Prepare seu Protheus para<br />a reforma com a JYNX</h2>
        <p>Comece por um diagnóstico gratuito do seu ambiente fiscal ou fale agora com um especialista Protheus.</p>
        <div className="rtcta__btns">
          <a href={L.demo} className="btn btn--primary btn--lg">Agendar diagnóstico gratuito <Icon name="arrow-right" size={18} /></a>
          <a href={L.wa} className="btn btn--ghost btn--lg"><Icon name="message-circle" size={18} /> Falar com especialista Protheus</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { RTHero, RTRiscos, RTComo, RTProva, RTCross, RTCTA });