// Middle: Services, Process, Differentials

function Services() {
  const items = [
    { n: '01', t: 'Recrutamento & Seleção', d: 'Mapeamento da vaga, hunting ativo, avaliação técnica e comportamental. Você recebe em média 3 candidatos com fit confirmado.' },
    { n: '02', t: 'Hunting Ativo', d: 'Buscamos o candidato certo onde ele está: LinkedIn, portais, rede própria. Nada de esperar currículo chegar.' },
    { n: '03', t: 'Assessment & DISC', d: 'Teste comportamental DISC e Big 5, com laudo individual por finalista: perfil, pontos fortes e pontos de atenção.' },
    { n: '04', t: 'Pesquisa de Referência', d: 'Checagem estruturada com ex-gestores e colegas. Confirmamos o que o currículo não conta antes da carta-proposta.' },
    { n: '05', t: 'Onboarding Estruturado', d: 'Não encerramos o processo na contratação. Acompanhamos os primeiros 90 dias com check-ins quinzenais, visita de acompanhamento e alinhamentos até a conclusão da experiência.' },
    { n: '06', t: 'Consultoria de Vaga', d: 'Especialista disponível para suporte, desde a descrição da vaga até a decisão final do gestor.' },
    { n: '07', t: 'Análise de Confiabilidade Profissional', sub: 'Background Check', d: 'Checagem de antecedentes criminal, cível e trabalhista dos candidatos finalistas. Relatório com marca d\'água, link personalizado e QR code. Pode ser incluído no processo seletivo ou contratado à parte — ideal para conhecer quem já trabalha na sua empresa.' },
  ];
  return (
    <section className="services" id="servicos">
      <div className="container">
        <div className="section__head">
          <div>
            <Reveal><span className="eyebrow"><Diamond /> O que entregamos</span></Reveal>
            <Reveal delay={80}>
              <h2 className="section__title" style={{ marginTop: 22 }}>
                Cada etapa do <em>recrutamento</em>, do perfil ao onboarding.
              </h2>
            </Reveal>
          </div>
          <div className="right">
            <Reveal>
              <p className="section__lead">
                Trabalhamos como extensão do seu time. Nada de triagem genérica. Cada processo é montado para o perfil
                real da vaga, com critérios claros e finalistas que você realmente quer entrevistar.
              </p>
            </Reveal>
          </div>
        </div>

        <div className="svc__list">
          {items.map((s, i) => (
            <Reveal key={i} delay={i * 50}>
              <a className="svc__item" href="#contato"
                 onClick={(e)=>{e.preventDefault(); document.getElementById('contato')?.scrollIntoView({behavior:'smooth'});}}>
                <span className="svc__num">{s.n}</span>
                <h3 className="svc__title">{s.t}{s.sub && <span className="svc__sub">{s.sub}</span>}</h3>
                <p className="svc__desc">{s.d}</p>
                <span className="svc__open"><Plus /></span>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process() {
  const steps = [
    { n: '01', t: 'Alinhamento do perfil', d: 'Mapeamos com o gestor o perfil desejado, as responsabilidades da vaga e o que realmente faz sentido para o negócio.', time: '1–2 dias' },
    { n: '02', t: 'Montagem do projeto', d: 'Definimos critérios objetivos, redigimos a vaga sob a sua marca e estruturamos o projeto de seleção personalizado.', time: '1 dia' },
    { n: '03', t: 'Recrutamento ativo', d: 'Hunting nos canais certos para o perfil: LinkedIn, Indeed, Glassdoor, Adzuna e plataforma própria Vivaz.', time: '3–5 dias' },
    { n: '04', t: 'Seleção e avaliação', d: 'Triagem, entrevistas por competências, testes psicológicos, assessment DISC e pesquisa de referência.', time: '5–9 dias' },
    { n: '05', t: 'Laudos dos finalistas', d: 'Você recebe os principais candidatos da seleção, normalmente 3 por vaga, com análise de perfil comportamental e pontos de atenção.', time: '1–2 dias' },
    { n: '06', t: 'Entrevista final e onboarding', d: 'Conduzimos a entrevista final e acompanhamos os primeiros 90 dias para ajudar na adaptação do profissional.', time: '2–4 dias' },
  ];
  return (
    <section className="process" id="metodo">
      <div className="container">
        <div className="section__head" style={{ marginBottom: 0 }}>
          <div>
            <Reveal><span className="eyebrow"><Diamond /> O método Vivaz</span></Reveal>
            <Reveal delay={80}>
              <h2 className="section__title" style={{ marginTop: 22 }}>
                Seis etapas. <em>20 dias úteis</em> em média, da abertura à contratação.
              </h2>
            </Reveal>
          </div>
          <Reveal>
            <p className="section__lead">
              Um processo organizado, transparente e sem achismos. Você acompanha cada etapa da seleção com clareza até a decisão final.
            </p>
          </Reveal>
        </div>

        <div className="process__grid process__grid--3">
          {steps.map((s, i) => (
            <RevealScale key={i} delay={i * 90}>
              <div className="proc">
                <div className="proc__num">{s.n}</div>
                <h3 className="proc__title">{s.t}</h3>
                <p className="proc__desc">{s.d}</p>
                <div className="proc__time">⌗ {s.time}</div>
              </div>
            </RevealScale>
          ))}
        </div>
      </div>
    </section>
  );
}

function Differentials() {
  return (
    <section className="diffs">
      <div className="container">
        <div className="section__head" style={{ marginBottom: 0 }}>
          <div>
            <Reveal><span className="eyebrow"><Diamond /> Porque Vivaz</span></Reveal>
            <Reveal delay={80}>
              <h2 className="section__title" style={{ marginTop: 22 }}>
                Diferente de uma agência. <em>Mais sênior</em> que um RH júnior interno.
              </h2>
            </Reveal>
          </div>
          <Reveal>
            <p className="section__lead">
              Atuamos como time de RH terceirizado para empresas que ainda não têm escala para um departamento próprio
              ou que já têm e querem reforço estratégico.
            </p>
          </Reveal>
        </div>

        <div className="diffs__grid">
          <Reveal className="diff diff--a">
            <div>
              <span className="eyebrow" style={{ color: '#bbb1a0' }}><Diamond /> Garantia</span>
              <h3 style={{ marginTop: 14 }}>Reposição sem custo em até 90 dias</h3>
              <p>Se o contratado sair ou não engrenar, reabrimos a posição e refazemos o processo sem cobrar de novo.</p>
            </div>
            <div className="diff__big">90<sup>dias</sup></div>
          </Reveal>

          <Reveal className="diff diff--b" delay={60}>
            <div>
              <span className="eyebrow"><Diamond /> Critério</span>
              <h3 style={{ marginTop: 14 }}>Avaliação técnica + comportamental + fit cultural</h3>
              <p>Cada finalista vem com um parecer estruturado: ponto forte, ponto de atenção, perfil DISC e referência checada.</p>
            </div>
            <div className="diff__big" style={{ color: 'var(--orange)' }}>3 eixos</div>
          </Reveal>

          <Reveal className="diff diff--c" delay={120}>
            <div>
              <span className="eyebrow" style={{ color: 'rgba(255,255,255,.9)' }}><Diamond /> Transparência</span>
              <h3 style={{ marginTop: 14 }}>Modelo enxuto</h3>
              <p>Pacote fechado por vaga ou mensalidade. Você sabe exatamente quanto vai pagar antes de começar.</p>
            </div>
            <div className="diff__big" style={{ color: '#fff' }}>1<sup>preço</sup></div>
          </Reveal>

          <Reveal className="diff diff--d" delay={60}>
            <div>
              <span className="eyebrow"><Diamond /> Cobertura</span>
              <h3 style={{ marginTop: 14 }}>Operacional ao C-level</h3>
              <p>Do auxiliar administrativo ao diretor de operações. Adaptamos hunting e avaliação ao nível da posição.</p>
            </div>
            <div className="diff__big">∞</div>
          </Reveal>

          <Reveal className="diff diff--e" delay={120}>
            <div>
              <span className="eyebrow"><Diamond /> Onboarding</span>
              <h3 style={{ marginTop: 14 }}>Acompanhamento até o 90º dia</h3>
              <p>Seguimos próximos após a contratação. Realizamos acompanhamentos quinzenais com gestor e colaborador para apoiar a adaptação.</p>
            </div>
            <div className="diff__big">90d</div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services, Process, Differentials });