// Top sections: Nav, Hero, Marquee, Problem

function Nav() {
  const scrolled = useScrolled(8);
  const scrollTo = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 70, behavior: 'smooth' });
  };
  return (
    <nav className={'nav' + (scrolled ? ' scrolled' : '')}>
      <div className="container nav__inner">
        <a className="nav__logo" href="#top" onClick={scrollTo('top')}>
          <img src="assets/logo-vivaz.png" alt="Vivaz Soluções" />
        </a>
        <div className="nav__links">
          <a href="#servicos" onClick={scrollTo('servicos')}>Serviços</a>
          <a href="#metodo" onClick={scrollTo('metodo')}>Método</a>
          <a href="#cases" onClick={scrollTo('cases')}>Cases</a>
          <a href="#duvidas" onClick={scrollTo('duvidas')}>Dúvidas</a>
        </div>
        <div className="nav__cta">
          <span className="nav__phone">+55 85 9 9132 8821</span>
          <a className="btn btn--primary" href="#contato" onClick={scrollTo('contato')}>
            Solicitar análise <Arrow size={14} />
          </a>
        </div>
      </div>
    </nav>
  );
}

function Hero() {
  const photos = [
    { src: 'assets/foto-equipe.jpg', alt: 'Equipe Vivaz Soluções' },
    { src: 'assets/foto-equipe-2.jpg', alt: 'Time Vivaz Soluções' },
    { src: 'assets/foto-equipe-3.jpg', alt: 'Equipe Vivaz Soluções' },
    { src: 'assets/foto-equipe-4.jpg', alt: 'Time Vivaz Soluções' },
  ];
  const [idx, setIdx] = React.useState(0);
  const next = () => setIdx(i => (i + 1) % photos.length);
  const front = photos[idx];
  const back = photos[(idx + 1) % photos.length];
  return (
    <section className="hero" id="top">
      <div className="container hero__grid">
        <div>
          <Reveal>
            <span className="eyebrow"><Diamond size={8} /> Recrutamento & Seleção para PMEs</span>
          </Reveal>
          <Reveal delay={80}>
            <h1 className="hero__title" style={{ marginTop: 22 }}>
              Pare de perder tempo com <em>contratações erradas</em>.
            </h1>
          </Reveal>
          <Reveal delay={140}>
            <p className="hero__lead">
              Recrutamento e seleção especializado para pequenas e médias empresas. A gente entra no detalhe da vaga,
              do perfil e do negócio, entregando finalistas com fit confirmado em até 20 dias úteis.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div className="hero__cta">
              <a className="btn btn--orange btn--lg" href="#contato"
                 onClick={(e)=>{e.preventDefault(); document.getElementById('contato')?.scrollIntoView({behavior:'smooth', block:'start'});}}>
                Solicitar análise da vaga <Arrow size={16} />
              </a>
              <a className="btn btn--ghost btn--lg" href="#metodo"
                 onClick={(e)=>{e.preventDefault(); document.getElementById('metodo')?.scrollIntoView({behavior:'smooth', block:'start'});}}>
                Como funciona
              </a>
            </div>
          </Reveal>
        </div>

        <Reveal delay={120}>
          <div className="hero__visual">
            <div className="hero__album">
              <div
                className="hero__album-frame hero__album-frame--back"
                key={'back-' + idx}
                onClick={next}
                title="Ver outra foto"
              >
                <img src={back.src} alt={back.alt} />
              </div>
              <div
                className="hero__album-frame hero__album-frame--front"
                key={'front-' + idx}
                onClick={next}
                title="Ver outra foto"
              >
                <img src={front.src} alt={front.alt} />
              </div>
            </div>
            <div className="hero__card">
              <div className="dot">V</div>
              <div className="t">
                <strong>Analista de RH contratado</strong>
                12 dias · 4 finalistas alinhados ao fit cultural
              </div>
            </div>
            <svg className="diamond-stripe" viewBox="0 0 200 200" aria-hidden="true">
              <g fill="none" stroke="#EC7A3C" strokeWidth="1.5">
                <polygon points="100,10 130,100 100,190 70,100" />
                <polygon points="100,30 122,100 100,170 78,100" />
                <polygon points="100,50 114,100 100,150 86,100" />
              </g>
            </svg>
          </div>
        </Reveal>
      </div>

      <Reveal delay={260}>
        <div className="hero__meta">
            <div className="hero__meta-item">
              <span className="num"><CountUp value="2690" duration={1200} /></span>
              <span className="label">Vagas preenchidas</span>
            </div>
            <div className="hero__meta-item">
              <span className="num"><CountUp value="20" suffix="d" duration={900} /></span>
              <span className="label">Prazo médio até a contratação</span>
            </div>
            <div className="hero__meta-item">
              <span className="num"><CountUp value="91" suffix="%" duration={1100} /></span>
              <span className="label">Permanência após 12 meses</span>
            </div>
            <div className="hero__meta-item">
              <span className="num"><CountUp value="11" duration={800} /></span>
              <span className="label">Anos no mercado</span>
            </div>
          </div>
        </Reveal>
    </section>
  );
}

function Marquee() {
  const items = [
    'Recrutamento & Seleção',
    'Hunting Ativo',
    'Mapeamento Comportamental',
    'Assessment DISC',
    'Entrevistas por Competências',
    'Onboarding Estruturado',
    'Pesquisa de Referência',
    'Laudos de Finalistas',
  ];
  const full = [...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee__track">
        {full.map((t, i) => (
          <React.Fragment key={i}>
            <span>{t}</span>
            <span className="sep">◆</span>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function Problem() {
  const cells = [
    { n: '01', t: 'Vaga aberta por meses', d: 'Anúncios em portais, currículos infinitos, entrevistas inconclusivas. A operação trava e o time acumula sobrecarga.' },
    { n: '02', t: 'Contratar e demitir no curto prazo', d: 'A pessoa entra, não engrena, sai antes do 3º mês. Custo cheio, processo do zero, moral do time abalada.' },
    { n: '03', t: 'Decisão por intuição', d: 'Sem critério estruturado, a contratação vira aposta. E aposta repetida é prejuízo certo no fim do trimestre.' },
  ];
  return (
    <section className="problem">
      <div className="container">
        <div className="problem__head">
          <Reveal><span className="eyebrow" style={{ color: '#bbb1a0' }}><Diamond /> O custo invisível do RH improvisado</span></Reveal>
          <Reveal delay={80}>
            <h2 className="problem__title">
              Contratar errado custa <em>3 a 5×</em> o salário da posição. Em PME, isso é o caixa de um trimestre inteiro.
            </h2>
          </Reveal>
        </div>

        <div className="problem__grid">
          {cells.map((c, i) => (
            <Reveal key={i} delay={i * 80} className="problem__cell">
              <span className="num">[ {c.n} ]</span>
              <h3>{c.t}</h3>
              <p>{c.d}</p>
            </Reveal>
          ))}
        </div>

        <Reveal>
          <div className="problem__stat">
            <div>
              <div className="huge">67%</div>
            </div>
            <div>
              <p>das pequenas e médias empresas brasileiras relatam dificuldade em manter talentos no primeiro ano.</p>
              <div className="source">Fonte: SEBRAE / pesquisa setorial 2024</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Marquee, Problem });