// sections.jsx — Proof, Pains (2 variants), Method, PlatformSection
// Exports to window: Proof, Pains, Method, PlatformSection

/* ---------------- 2. Social proof ---------------- */
function Proof() {
  return (
    <section className="proof section--alt" id="clientes">
      <div className="wrap">
        <p className="proof__line" data-reveal>
          Empresas que usam TOTVS confiam na <strong>JYNX</strong> para evoluir processos críticos
        </p>
      </div>
      <ClientLogos />
    </section>
  );
}

/* ---------------- 3. Pains ---------------- */
const PAINS = [
  ['mail', 'Aprovações por email', 'Decisões espalhadas em caixas de entrada, sem histórico nem padrão.'],
  ['table-2', 'Planilhas paralelas', 'Controles que vivem fora do ERP, sem governança nem versão única.'],
  ['keyboard', 'Redigitação no ERP', 'Dado já aprovado relançado à mão no Protheus, RM, Datasul ou Winthor.'],
  ['layers', 'Backlog de TI', 'Demandas paradas por falta de tempo ou de especialista disponível.'],
  ['unplug', 'Fluig subutilizado', 'Você tem a plataforma, mas os processos simplesmente não evoluem.'],
  ['radar', 'Falta de rastreabilidade', 'Ninguém sabe onde a demanda está, com quem, nem desde quando.'],
];

function PainsHead() {
  return (
    <div className="section-head" data-reveal>
      <div className="eyebrow">Dores que resolvemos</div>
      <h2>Onde sua operação<br />começa a travar</h2>
      <p>Se você reconhece dois ou mais destes sintomas, há valor parado no seu ambiente TOTVS esperando para ser destravado.</p>
    </div>
  );
}

function Pains({ variant = 'cards' }) {
  if (variant === 'list') {
    return (
      <section className="section pains pains--list" id="dores">
        <div className="wrap pains__listwrap">
          <div className="pains__sticky"><PainsHead /></div>
          <ul className="pains__rows">
            {PAINS.map(([ic, t, d], i) => (
              <li key={t} className="pains__row" data-reveal style={{ '--reveal-delay': (i * 60) + 'ms' }}>
                <span className="pains__num">{String(i + 1).padStart(2, '0')}</span>
                <span className="pains__rowic"><Icon name={ic} size={20} /></span>
                <span className="pains__rowtxt">
                  <span className="pains__rowt">{t}</span>
                  <span className="pains__rowd">{d}</span>
                </span>
              </li>
            ))}
          </ul>
        </div>
      </section>
    );
  }
  return (
    <section className="section pains" id="dores">
      <div className="wrap">
        <PainsHead />
        <div className="pains__grid">
          {PAINS.map(([ic, t, d], i) => (
            <div key={t} className="pains__card card" data-reveal style={{ '--reveal-delay': (i * 70) + 'ms' }}>
              <span className="pains__cardic"><Icon name={ic} size={22} /></span>
              <h3>{t}</h3>
              <p>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- 4. Method ---------------- */
const STEPS = [
  ['search', 'Entendemos o cenário', 'Mapeamos processo, sistemas, integrações, urgência e prioridades antes de propor qualquer coisa.'],
  ['route', 'Indicamos o melhor caminho', 'Solução pronta, sustentação, especialista, integração ou projeto sob medida, conforme o seu contexto.'],
  ['list-checks', 'Executamos com rastreabilidade', 'Escopo, responsáveis, prazos e histórico registrados e visíveis na plataforma, do início ao fim.'],
  ['refresh-cw', 'Evoluímos com o cliente', 'Melhorias, correções e sustentação contínua, para o ambiente acompanhar o negócio.'],
];

function Method() {
  return (
    <section className="section method section--alt" id="metodo">
      <div className="wrap">
        <div className="section-head" data-reveal>
          <div className="eyebrow">Método e rastreabilidade</div>
          <h2>Como a JYNX resolve</h2>
          <p>Escopo fechado, prazo definido e transparência em cada etapa. Sem caixa-preta, sem surpresa.</p>
        </div>
        <div className="method__steps">
          <div className="method__line" aria-hidden="true"></div>
          {STEPS.map(([ic, t, d], i) => (
            <div key={t} className="method__step" data-reveal style={{ '--reveal-delay': (i * 110) + 'ms' }}>
              <div className="method__node">
                <span className="method__num">{i + 1}</span>
                <span className="method__ic"><Icon name={ic} size={20} /></span>
              </div>
              <h3>{t}</h3>
              <p>{d}</p>
            </div>
          ))}
        </div>
        <div className="method__cta" data-reveal>
          <a href={window.JYNX_LINKS.diagnostico} className="btn btn--primary btn--lg">Solicitar diagnóstico gratuito <Icon name="arrow-right" size={18} /></a>
        </div>
      </div>
    </section>
  );
}

/* ---------------- 5. Platform ---------------- */
const PLAT_FLOW = [
  ['user-plus', 'Cadastre-se e explore', 'Acesse o catálogo de soluções, serviços e especialistas.'],
  ['mouse-pointer-click', 'Escolha o que precisa', 'Solução pronta, integração, sustentação ou projeto sob medida.'],
  ['calendar-check', 'Demonstração de 20 min', 'Fale com um especialista e veja a solução funcionando.'],
  ['activity', 'Acompanhe tudo', 'Projetos, indicadores e financeiro em tempo real, num só lugar.'],
];
const PLAT_FEATURES = [
  'Catálogo de soluções prontas', 'Serviços e especialistas', 'Consulta de integrações',
  'Demonstrações em vídeo', 'Registro de pedidos', 'Solicitação de proposta',
  'Projetos em tempo real', 'Indicadores e financeiro',
];

function PlatformSection() {
  const L = window.JYNX_LINKS;
  return (
    <section className="section platform section--ink" id="plataforma">
      <div className="wrap platform__inner">
        <div className="platform__lead">
          <div className="section-head" data-reveal>
            <div className="eyebrow">A plataforma JYNX</div>
            <h2>A JYNX não é só um site.<br />É um ambiente de decisão.</h2>
            <p>Um ambiente que a consultoria tradicional não oferece: um lugar onde você explora, contrata e acompanha tudo o que acontece no seu ambiente, em tempo real.</p>
          </div>
          <ul className="platform__feats" data-reveal>
            {PLAT_FEATURES.map(f => (
              <li key={f}><span className="platform__check"><Icon name="check" size={13} /></span>{f}</li>
            ))}
          </ul>
          <div className="platform__cta" data-reveal>
            <a href={L.signup} className="btn btn--primary btn--lg">Entrar na plataforma <Icon name="arrow-right" size={18} /></a>
            <a href={L.signup} className="link-wa link-wa--light"><Icon name="message-circle" size={16} /> Cadastre-se gratuitamente</a>
          </div>
        </div>

        <div className="platform__flow" data-reveal>
          {PLAT_FLOW.map(([ic, t, d], i) => (
            <div key={t} className="platform__fstep">
              <span className="platform__fnum">{i + 1}</span>
              <span className="platform__fic"><Icon name={ic} size={20} /></span>
              <div>
                <div className="platform__ft">{t}</div>
                <div className="platform__fd">{d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Proof, Pains, Method, PlatformSection });