// Processo.jsx
const { useRef: useProcRef } = React;

const STEPS = [
  { title: 'Diagnóstico completo', entregavel: 'Mapeamento de dores, rotina, histórico e objetivos reais' },
  { title: 'Estratégia personalizada', entregavel: 'Plano de treino + nutrição + rotina desenhado para a sua vida' },
  { title: 'Trabalho de identidade', entregavel: 'Mentoria para destravar crenças e construir constância real' },
  { title: 'Execução com acompanhamento', entregavel: 'Suporte próximo da Taty + equipe integrada no dia a dia' },
  { title: 'Ajustes e evolução', entregavel: 'Revisões semanais de progresso com métricas reais' },
  { title: 'Sustentação do resultado', entregavel: 'Método de autonomia para manter sem depender eternamente' },
];

function Processo() {
  const ref = useProcRef();
  useReveal(ref);

  return (
    <section className="processo-section" ref={ref}>
      <div className="container">
        <div className="processo-header">
          <p className="eyebrow reveal">Como funciona</p>
          <h2 className="section-title reveal rev-d1">O processo em <em>6 etapas</em></h2>
          <p className="reveal rev-d2" style={{ fontSize: 16, color: '#6a5060', marginTop: 12, maxWidth: 520, margin: '12px auto 0' }}>
            Cada etapa tem um entregável claro. Sem achismo, sem improviso.
          </p>
        </div>
        <div className="processo-timeline">
          <div className="processo-line" />
          {STEPS.map((s, i) => (
            <div key={i} className={`processo-step reveal rev-d${Math.min(i + 1, 5)}`}>
              <div className="processo-num">{i + 1}</div>
              <div className="processo-content">
                <div className="processo-step-title">{s.title}</div>
                <p style={{ fontSize: 14, color: '#6a5060', lineHeight: 1.65 }}>
                  <span style={{ fontWeight: 600, color: 'var(--accent)' }}>Entregável: </span>
                  {s.entregavel}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Processo });