// CTAFinal.jsx
const { useRef: useCTARef } = React;

function CTAFinal() {
  const ref = useCTARef();
  useReveal(ref);

  function scrollTo(id) {
    const el = document.getElementById(id);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 80;
    window.scrollTo({ top, behavior: 'smooth' });
  }

  return (
    <section className="ctafinal-section" ref={ref} id="cta">
      <div className="container">
        <div className="ctafinal-box reveal">
          <div className="ctafinal-glow" id="cta-glow" />
          <p className="eyebrow" style={{ marginBottom: 20, position: 'relative' }}>
            Pronta para destravar?
          </p>
          <h2 className="ctafinal-title">
            Sua transformação começa<br />
            com uma <em>decisão.</em>
          </h2>
          <p className="ctafinal-sub">
            Não mais uma dieta. Não mais um treino isolado. O método completo —
            corpo, mente e espírito — com a Taty Vaillant do seu lado.
          </p>
          <div className="ctafinal-ctas">
           <a className="btn-p" href="https://wa.me/17862783603" target="_blank" rel="noopener noreferrer" style={{ fontSize: 16, padding: '16px 36px' }}>
  Quero me destravar agora →
</a>
            <button className="btn-s" onClick={() => scrollTo('metodo')}>
              Conhecer o método primeiro
            </button>
          </div>
          <p style={{
            marginTop: 28, fontSize: 13, color: '#8a7080', position: 'relative',
          }}>
            Vagas limitadas para a Mentoria Premium · Atendimento via WhatsApp
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { CTAFinal });