/* global React */
const { useState: useStateSCTA, useEffect: useEffectSCTA } = React;

function StickyMobileCTA({ onCTAClick }) {
  const [visible, setVisible] = useStateSCTA(false);

  useEffectSCTA(() => {
    const hero = document.getElementById("top");
    const sim  = document.getElementById("simular");
    if (!hero || !sim) return;

    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.target === hero) setVisible(!e.isIntersecting);
        if (e.target === sim && e.isIntersecting) setVisible(false);
      });
    }, { threshold: 0.1 });

    io.observe(hero);
    io.observe(sim);
    return () => io.disconnect();
  }, []);

  return (
    <div className={`sticky-cta${visible ? " visible" : ""}`} aria-hidden={!visible}>
      <button className="sticky-cta-btn" onClick={onCTAClick} tabIndex={visible ? 0 : -1}>
        Cadastrar minha conta
        <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" strokeWidth="2.5">
          <path d="M5 12h14M13 5l7 7-7 7"/>
        </svg>
      </button>
      <span className="sticky-cta-sub">LEVA 5 MIN · SEM CUSTO · SEM FIDELIDADE</span>
    </div>
  );
}

window.StickyMobileCTA = StickyMobileCTA;