// Bottom: Testimonials, CTA form, FAQ, Footer

function Testimonials() {
  const items = [
    {
      q: 'A Vivaz já presta serviços para nossa escola há mais de 5 anos, e essa parceria sempre foi muito positiva. No recrutamento e seleção, eles conseguem compreender com profundidade as particularidades da nossa realidade e o perfil que buscamos para cada vaga. Isso faz toda a diferença, porque o processo não é engessado, existe flexibilidade, alinhamento constante e uma comunicação muito clara e rápida ao longo de toda a seleção. Esse acompanhamento nos dá mais segurança e agilidade na tomada de decisão.',
      name: 'Rafaela Sampaio',
      role: 'Diretora — Casa da Tia Léa',
      initials: 'RS',
    },
    {
      q: 'Vivaz foi uma grande descoberta para a Festo. E hoje funciona como uma porta de entrada, para nossa empresa, que está bem conectada aos nossos valores. E por esta razão, vemos a Vivaz como uma extensão do nosso trabalho. Parceiros que fazemos questão de honrá-los, manter relacionamento e indicá-los.',
      name: 'Raquel Castro',
      role: 'CEO — Festo Fashion',
      initials: 'RC',
    },
    {
      q: 'A Vivaz trouxe mais agilidade e organização para nossos processos seletivos. Eles entendem o perfil da vaga, realizam uma triagem muito alinhada e apresentam candidatos realmente aderentes ao que buscamos. Isso otimiza nosso tempo e torna a contratação muito mais assertiva. Indico para empresas que precisam estruturar melhor suas contratações e ganhar velocidade no recrutamento.',
      name: 'Régia Maciel',
      role: 'Gestão de Pessoas — Clínica Linus Pauling',
      initials: 'RM',
    },
    {
      q: 'Vivaz tem sido nossa parceira nos últimos anos no processo de seleção de novos colaboradores. Criteriosamente traçam conosco os perfis desejados e, após triarem, vamos juntos analisando cada um de acordo com a cultura da empresa. O serviço é personalizado e respeitoso com nosso projeto de trabalho.',
      name: 'Emília',
      role: 'Diretora — Escola Canarinho e Sapiens',
      initials: 'EM',
    },
    {
      q: 'A Vivaz nos ajudou bastante nos processos seletivos de candidatos em vários cargos da nossa empresa. A consultoria nos ajudou a identificar oportunidades de melhoria e alcançar resultados significativos em pouco tempo. Recomendo fortemente!',
      name: 'Lucivânia de Lima',
      role: 'Aux. Depto Pessoal e Fiscal — Regitec Assistência Técnica',
      initials: 'LL',
    },
  ];
  const [i, setI] = useState(0);
  const [paused, setPaused] = useState(false);

  useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setI((p) => (p + 1) % items.length), 6000);
    return () => clearInterval(id);
  }, [paused, items.length]);

  const go = (n) => setI(((n % items.length) + items.length) % items.length);
  const t = items[i];

  return (
    <section className="testi" id="cases" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="container">
        <Reveal><span className="eyebrow" style={{ color: '#bbb1a0' }}><Diamond /> Quem confiou na gente</span></Reveal>
        <Reveal delay={80}>
          <h2 className="section__title testi__title" style={{ marginTop: 22, maxWidth: '20ch' }}>
            Resultado em <em>caixa</em>, em <em>tempo</em> e em <em>clima</em>.
          </h2>
        </Reveal>

        <div className="testi__stage">
          <div className="testi__grid">
            <div>
              <div key={i} style={{ animation: 'fadeUp .5s ease' }}>
                <blockquote className="testi__quote">{t.q}</blockquote>
                <div className="testi__person">
                  <div className="testi__avatar">{t.initials}</div>
                  <div>
                    <div className="name">{t.name}</div>
                    <div className="role">{t.role}</div>
                  </div>
                </div>
              </div>
              <div className="testi__controls">
                <button className="testi__nav" onClick={() => go(i - 1)} aria-label="Anterior"><ChevronLeft /></button>
                <button className="testi__nav" onClick={() => go(i + 1)} aria-label="Próximo"><ChevronRight /></button>
                <div className="testi__dots">
                  {items.map((_, k) => (
                    <button key={k} className={'testi__dot' + (k === i ? ' active' : '')} onClick={() => go(k)} aria-label={`Depoimento ${k+1}`} />
                  ))}
                </div>
              </div>
            </div>

            <div className="testi__side">
              <div className="testi__metric">
                <div className="v"><em>20</em> dias úteis</div>
                <div className="l">dias úteis em média até o fechamento da vaga</div>
              </div>
              <div className="testi__metric">
                <div className="v"><em>91</em>%</div>
                <div className="l">após os 3 primeiros meses</div>
              </div>
              <div className="testi__metric">
                <div className="v"><em>2690</em></div>
                <div className="l">posições preenchidas para PMEs</div>
              </div>
              <div className="testi__metric">
                <div className="v"><em>NPS 76</em></div>
                <div className="l">avaliação dos clientes em 2025</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`@keyframes fadeUp { from {opacity:0; transform: translateY(10px);} to {opacity:1; transform:none;} }`}</style>
    </section>
  );
}

function CTAForm() {
  const [form, setForm] = useState({ name: '', email: '', phone: '', company: '', vaga: '', urgencia: '' });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  const set = (k) => (e) => {
    setForm({ ...form, [k]: e.target.value });
    if (errors[k]) setErrors({ ...errors, [k]: null });
  };

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = 'Diga seu nome';
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = 'Email inválido';
    if (form.phone.replace(/\D/g, '').length < 10) e.phone = 'Telefone incompleto';
    if (!form.company.trim()) e.company = 'Nome da empresa';
    if (!form.vaga.trim()) e.vaga = 'Qual posição?';
    if (!form.urgencia) e.urgencia = 'Selecione';
    return e;
  };

  const submit = (ev) => {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length) return;
    setSubmitting(true);
    setTimeout(() => { setSubmitting(false); setSent(true); }, 900);
  };

  return (
    <section className="cta-band" id="contato">
      <div className="container">
        <div className="cta-card">
          <div className="glyph" />
          <div>
            <span className="eyebrow" style={{ color: 'rgba(255,255,255,.85)' }}><Diamond color="white" /> Próximo passo</span>
            <h2 style={{ marginTop: 18 }}>Solicite uma análise da sua vaga.</h2>
            <p>
              Em até 1 dia útil, um especialista entra em contato para entender o desafio, validar prazos e estimar
              o investimento. Sem compromisso e sem cobrança.
            </p>
            <ul style={{ listStyle: 'none', marginTop: 26, display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14.5 }}>
              <li>◆ Análise gratuita da descrição da vaga</li>
              <li>◆ Estimativa de prazo realista</li>
              <li>◆ Orçamento fechado, sem letras miúdas</li>
            </ul>
          </div>

          {!sent ? (
            <form className="cta-form" onSubmit={submit} noValidate>
              <h3>Receber análise da vaga</h3>
              <p className="sub">Resposta em até 1 dia útil.</p>

              <div className={'field' + (errors.name ? ' error' : '')}>
                <label>Nome</label>
                <input value={form.name} onChange={set('name')} placeholder="Como você se chama?" />
                {errors.name && <span className="err-msg">{errors.name}</span>}
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                <div className={'field' + (errors.email ? ' error' : '')}>
                  <label>Email</label>
                  <input value={form.email} onChange={set('email')} placeholder="voce@empresa.com" />
                  {errors.email && <span className="err-msg">{errors.email}</span>}
                </div>
                <div className={'field' + (errors.phone ? ' error' : '')}>
                  <label>Telefone</label>
                  <input value={form.phone} onChange={set('phone')} placeholder="(00) 00000 0000" />
                  {errors.phone && <span className="err-msg">{errors.phone}</span>}
                </div>
              </div>

              <div className={'field' + (errors.company ? ' error' : '')}>
                <label>Empresa</label>
                <input value={form.company} onChange={set('company')} placeholder="Nome da empresa" />
                {errors.company && <span className="err-msg">{errors.company}</span>}
              </div>

              <div className={'field' + (errors.vaga ? ' error' : '')}>
                <label>Vaga / desafio</label>
                <input value={form.vaga} onChange={set('vaga')} placeholder="Ex: gerente comercial, analista financeiro…" />
                {errors.vaga && <span className="err-msg">{errors.vaga}</span>}
              </div>

              <div className={'field' + (errors.urgencia ? ' error' : '')}>
                <label>Urgência</label>
                <select value={form.urgencia} onChange={set('urgencia')}>
                  <option value="">Selecione</option>
                  <option value="alta">Preciso preencher em até 30 dias</option>
                  <option value="media">Tenho 30 a 60 dias</option>
                  <option value="baixa">Estou planejando para o trimestre</option>
                  <option value="exp">Tenho várias vagas para abrir</option>
                </select>
                {errors.urgencia && <span className="err-msg">{errors.urgencia}</span>}
              </div>

              <button className="btn btn--primary btn--lg" type="submit" disabled={submitting}>
                {submitting ? 'Enviando…' : (<>Solicitar análise <Arrow size={16} /></>)}
              </button>
              <p className="legal">Ao enviar, você concorda em receber retorno por email ou WhatsApp. Não usamos seus dados para mais nada.</p>
            </form>
          ) : (
            <div className="cta-form">
              <div className="cta-success">
                <div className="check">✓</div>
                <h3>Recebido, {form.name.split(' ')[0]}.</h3>
                <p>Em até 1 dia útil um especialista entra em contato em <strong>{form.email}</strong> para falar sobre a vaga de <strong>{form.vaga}</strong>.</p>
                <button className="btn btn--ghost" style={{ marginTop: 18 }} onClick={() => { setSent(false); setForm({ name:'', email:'', phone:'', company:'', vaga:'', urgencia:'' }); }}>Enviar outra solicitação</button>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: 'Para que tamanho de empresa vocês atendem?', a: 'Atendemos principalmente pequenas e médias empresas, de 10 a 250 colaboradores. Trabalhamos com fundadores, sócios e diretores de operações que precisam de um RH estratégico sem o custo de uma estrutura interna completa.' },
    { q: 'Quanto tempo leva para fechar uma vaga?', a: 'Em média 16 dias da abertura à carta-proposta. Posições mais técnicas ou de C-level podem variar entre 21 e 35 dias. No diagnóstico você recebe uma estimativa específica para o seu caso.' },
    { q: 'Como funciona a garantia de reposição?', a: 'Caso o profissional seja desligado por questões técnicas ou comportamentais nesse período, reabrimos a vaga sem custo adicional. A garantia não se aplica quando há mudança das atividades ou do escopo da função inicialmente contratada.' },
    { q: 'Para quais níveis hierárquicos vocês recrutam?', a: 'Atendemos desde vagas operacionais (com análise prévia) até cargos de liderança. Cada processo é adaptado ao perfil da vaga, com avaliações compatíveis com o nível da posição.' },
    { q: 'Qual o modelo comercial?', a: 'Oferecemos contratação por vaga, com valor previamente alinhado, ou modelo mensal para empresas com demanda contínua de seleção.' },
    { q: 'Em quais cidades vocês atuam?', a: 'Atendemos todo o Brasil de forma remota, com base em Fortaleza/CE. Para posições estratégicas ou onboarding presencial, fazemos visitas alinhadas com a sua agenda.' },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="faq" id="duvidas">
      <div className="container">
        <div className="faq__wrap">
          <div>
            <Reveal><span className="eyebrow"><Diamond /> Dúvidas frequentes</span></Reveal>
            <Reveal delay={80}>
              <h2 className="section__title" style={{ marginTop: 22 }}>
                Antes de marcar uma conversa, <em>quem sabe</em>?
              </h2>
            </Reveal>
            <Reveal delay={140}>
              <p className="section__lead" style={{ marginTop: 22 }}>
                Não achou sua dúvida? Mande direto pelo WhatsApp: a gente responde no mesmo dia.
              </p>
            </Reveal>
          </div>
          <div className="faq__list">
            {items.map((it, idx) => (
              <Reveal key={idx} delay={idx * 40} className={'faq__item' + (open === idx ? ' open' : '')}>
                <button className="faq__q" onClick={() => setOpen(open === idx ? -1 : idx)} aria-expanded={open === idx}>
                  <h3>{it.q}</h3>
                  <span className="faq__icon"><Plus /></span>
                </button>
                <div className="faq__a"><p>{it.a}</p></div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__top">
          <div className="footer__intro">
            <img className="logo" src="assets/logo-vivaz-white.png" alt="Vivaz Soluções" />
            <p>Especialistas em recrutamento e seleção para pequenas e médias empresas.</p>
          </div>
          <div>
            <h4>Empresa</h4>
            <ul>
              <li><a href="#servicos">Serviços</a></li>
              <li><a href="#metodo">Método</a></li>
              <li><a href="#cases">Cases</a></li>
              <li><a href="#duvidas">Dúvidas</a></li>
            </ul>
          </div>
          <div>
            <h4>Contato</h4>
            <ul>
              <li><a href="mailto:contato@vivazsolucoes.com.br">contato@vivazsolucoes.com.br</a></li>
              <li><a href="tel:+5585991328821">+55 85 9 9132 8821</a></li>
              <li><a href="https://wa.me/5585991328821" target="_blank" rel="noopener">WhatsApp</a></li>
            </ul>
          </div>
          <div>
            <h4>Social</h4>
            <ul>
              <li><a href="https://instagram.com/vivazsolucoes" target="_blank" rel="noopener">Instagram</a></li>
              <li><a href="https://linkedin.com" target="_blank" rel="noopener">LinkedIn</a></li>
              <li><a href="https://vivazsolucoes.com.br" target="_blank" rel="noopener">vivazsolucoes.com.br</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <p>© {new Date().getFullYear()} Vivaz Soluções LTDA — CNPJ 26.482.004/0001-47 — Fortaleza/CE</p>
          <p>11 anos desenvolvendo o melhor do humano nas organizações</p>
        </div>
      </div>
    </footer>
  );
}

function Whatsapp() {
  return (
    <a className="wa" href="https://wa.me/5585991328821?text=Ol%C3%A1%2C%20vim%20pelo%20site%20da%20Vivaz%21" target="_blank" rel="noopener" aria-label="Falar no WhatsApp">
      <WhatsappIcon />
    </a>
  );
}

Object.assign(window, { Testimonials, CTAForm, FAQ, Footer, Whatsapp });