// sections3.jsx — sections 10-15: Banner Reforma, Depoimentos, Conteúdos, FAQ, CTA final, Footer
// Exports to window: BannerReforma, Depoimentos, Conteudos, FAQ, CTAFinal, Footer

/* ---------------- 10. Banner Reforma Tributária ---------------- */
function BannerReforma() {
  const L = window.JYNX_LINKS;
  return (
    <section className="section banner section--ink" id="reforma">
      <div className="wrap banner__inner">
        <div className="banner__glow" aria-hidden="true"></div>
        <div className="banner__copy" data-reveal>
          <span className="banner__pill"><Icon name="alarm-clock" size={14} /> Reforma Tributária 2026</span>
          <h2>Seu Protheus está preparado<br />para a reforma tributária?</h2>
          <p>A virada exige ajuste fiscal, parametrização e testes. Antecipe-se com um diagnóstico que aponta exatamente o que precisa mudar no seu ambiente.</p>
        </div>
        <div className="banner__cta" data-reveal style={{ '--reveal-delay': '120ms' }}>
          <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">Falar com especialista Protheus</a>
        </div>
      </div>
    </section>
  );
}

/* ---------------- 11. Depoimentos ---------------- */
const 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 Depoimentos() {
  return (
    <section className="section depo" id="depoimentos">
      <div className="wrap">
        <div className="section-head" data-reveal>
          <div className="eyebrow">Quem já evoluiu com a JYNX</div>
          <h2>A confiança de quem<br />opera processos críticos</h2>
        </div>
        <div className="depo__grid">
          {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>
  );
}

/* ---------------- 12. Conteúdos / blog ---------------- */
const CONTENT = [
  ['cpu', 'Para TI', [
    'Dataset Fluig lento: como diagnosticar',
    'Erro de integração: por onde começar',
    'Sustentação Fluig sem dor de cabeça',
    'SSO e APIs: boas práticas',
  ]],
  ['briefcase', 'Para áreas de negócio', [
    'Aprovação por email: o custo invisível',
    'Cotação por email vs portal de compras',
    'Admissão em papel: o que você perde',
    'Rastreabilidade de ponta a ponta',
  ]],
  ['scale', 'Para decisão', [
    'Solução pronta ou projeto sob medida?',
    'Fluig vs ferramentas externas',
    'ROI da automação de processos',
    'Como escolher um parceiro TOTVS',
  ]],
];

function Conteudos() {
  return (
    <section className="section conteudos section--alt" id="recursos">
      <div className="wrap">
        <div className="conteudos__head" data-reveal>
          <div>
            <div className="eyebrow">Conteúdos para você evoluir</div>
            <h2>Material que responde<br />a dúvida certa</h2>
          </div>
          <a href="#recursos" className="btn btn--ghost">Ver conteúdos <Icon name="arrow-right" size={16} /></a>
        </div>
        <div className="conteudos__grid">
          {CONTENT.map(([ic, title, arts], i) => (
            <div key={title} className="conteudos__col card" data-reveal style={{ '--reveal-delay': (i * 90) + 'ms' }}>
              <div className="conteudos__coltop">
                <span className="conteudos__ic"><Icon name={ic} size={18} /></span>
                <span className="conteudos__coltitle">{title}</span>
              </div>
              <ul>
                {arts.map(a => (
                  <li key={a}><a href="#recursos">{a}<Icon name="arrow-up-right" size={14} /></a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- 13. FAQ ---------------- */
const FAQS = [
  ['A JYNX substitui a TOTVS?', 'Não. A JYNX é uma camada especializada sobre o ecossistema TOTVS. Ajudamos você a extrair mais valor do Protheus, Fluig, RM, Datasul e Winthor, conectando processos, sustentação, integrações e soluções prontas. A TOTVS continua sendo a base, a JYNX é a extensão do seu time.'],
  ['A JYNX é só para quem já usa TOTVS?', 'Nosso foco é quem já vive o ecossistema TOTVS e quer evoluir. As soluções prontas rodam no Fluig, e consultoria, alocação e service desk atuam sobre Protheus, RM e Analytics.'],
  ['Preciso ter Fluig para usar as soluções?', 'As automações prontas rodam no Fluig e exigem licença. Já consultoria Protheus, alocação de profissionais, service desk e treinamentos não exigem Fluig.'],
  ['Vocês fazem sustentação Fluig e integram com outros ERPs?', 'Sim. Fazemos sustentação de Fluig e integramos Fluig com Protheus, RM, Datasul e Winthor, além de APIs, webservices, datasets e SSO.'],
  ['Posso começar com uma solução pronta ou pedir projeto sob medida?', 'Os dois caminhos existem. Você pode implantar uma solução do catálogo em semanas ou pedir um projeto sob medida. O diagnóstico indica o melhor caminho para o seu contexto.'],
  ['Como funciona o diagnóstico?', 'Mapeamos processo, sistemas, integrações, urgência e prioridades, e indicamos o caminho mais adequado, com escopo e prazo. É gratuito e sem compromisso.'],
  ['Quanto custa?', 'A precificação é consultiva. O investimento depende do escopo e do contexto, e é apresentado como uma visão de investimento, com escopo e prazo fechados, após o diagnóstico ou a demonstração.'],
  ['Quanto tempo leva a implantação?', 'As soluções prontas implantam em semanas, não meses. O prazo exato de cada solução aparece no catálogo da plataforma.'],
  ['A solução é minha para sempre?', 'Sim. A solução é do cliente para sempre, sem mensalidade obrigatória e sem lock-in.'],
  ['Como acompanho propostas, pedidos e projetos?', 'Tudo fica na plataforma JYNX: você registra pedidos, solicita propostas e acompanha projetos, indicadores e financeiro em tempo real, num só lugar.'],
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section faq" id="faq">
      <div className="wrap faq__wrap">
        <div className="faq__lead" data-reveal>
          <div className="eyebrow">Perguntas frequentes</div>
          <h2>Tudo o que você precisa saber antes de falar com a gente</h2>
          <p>Não achou sua resposta? <a href={window.JYNX_LINKS.wa} className="faq__link">Fale com um especialista</a>.</p>
        </div>
        <ul className="faq__list" data-reveal>
          {FAQS.map(([q, a], i) => (
            <li key={i} className={'faq__item' + (open === i ? ' is-open' : '')}>
              <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span>{q}</span>
                <Icon name={open === i ? 'minus' : 'plus'} size={18} />
              </button>
              <div className="faq__a"><p>{a}</p></div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

/* ---------------- 14. CTA final ---------------- */
function CTAFinal() {
  const L = window.JYNX_LINKS;
  return (
    <section className="section ctafinal section--ink" id="cta">
      <div className="ctafinal__mark" aria-hidden="true"><JynxMark size={520} color="color-mix(in srgb, var(--accent) 14%, transparent)" /></div>
      <div className="wrap ctafinal__inner" data-reveal>
        <h2>Pronto para destravar o<br />potencial do seu ambiente TOTVS?</h2>
        <p>Acesse a plataforma, solicite um diagnóstico ou fale com um especialista. O primeiro passo é gratuito.</p>
        <div className="ctafinal__btns">
          <a href={L.signup} className="btn btn--primary btn--lg">Cadastre-se gratuitamente <Icon name="arrow-right" size={18} /></a>
          <a href={L.demo} className="btn btn--ghost btn--lg">Agendar demonstração</a>
        </div>
        <div className="ctafinal__sub">
          <a href="#diagnostico" className="link-wa link-wa--light"><Icon name="stethoscope" size={16} /> Solicitar diagnóstico gratuito</a>
          <span className="hero__sep"></span>
          <a href={L.wa} className="link-wa link-wa--light"><Icon name="message-circle" size={16} /> Falar pelo WhatsApp</a>
        </div>
      </div>
    </section>
  );
}

/* ---------------- 15. Footer ---------------- */
// Footer moved to chrome.jsx (shared across pages).

Object.assign(window, { BannerReforma, Depoimentos, Conteudos, FAQ, CTAFinal });