/* global React */
const { useEffect: useEffectM, useState: useStateM } = React;

function MobileCTA() {
  const [shown, setShown] = useStateM(false);
  useEffectM(() => {
    const onScroll = () => {
      const past = window.scrollY > 400;
      const contact = document.getElementById("contact");
      const inContact = contact ? contact.getBoundingClientRect().top < window.innerHeight - 200 : false;
      setShown(past && !inContact);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className={`pc-mobilecta ${shown ? "is-shown" : ""}`} aria-hidden={!shown}>
      <div className="pc-mobilecta__inner">
        <a href="tel:+61459235860" className="pc-mobilecta__call">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z" />
          </svg>
          <span>Call Pathway Civil</span>
        </a>
        <a href="#contact" className="pc-mobilecta__enquire">
          <span>Request wet hire</span>
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M5 12h14" /><path d="M13 6l6 6-6 6" />
          </svg>
        </a>
      </div>
    </div>
  );
}

window.MobileCTA = MobileCTA;