// Exit-intent modal — fires once per session when user mouse leaves window OR mobile visibility change.
// Shows compact LeadForm with persuasive copy.

const ExitIntentModal = () => {
  const [show, setShow] = lfUseState(false);
  const firedRef = lfUseRef(false);

  lfUseEffect(() => {
    let already = false;
    try { already = sessionStorage.getItem("__cl_exit_shown") === "1"; } catch {}
    if (already) return;

    let mountTime = Date.now();

    const trigger = (source) => {
      if (firedRef.current) return;
      // Don't fire in first 4s (avoid annoying users who land + bounce immediately)
      if (Date.now() - mountTime < 4000) return;
      // Skip if a lead was already submitted
      try { if (sessionStorage.getItem("__cl_lead")) return; } catch {}
      firedRef.current = true;
      setShow(true);
      try { sessionStorage.setItem("__cl_exit_shown", "1"); } catch {}
      track("exit_intent_shown", { source });
    };

    // Desktop: mouseleave from top of viewport
    const onMouseLeave = (e) => {
      if (e.clientY <= 0 && !e.relatedTarget && e.target === document.documentElement) {
        trigger("mouseleave_top");
      }
    };
    // Mobile fallback: visibility change (tab hidden / app switched)
    const onVisibility = () => {
      if (document.visibilityState === "hidden") {
        trigger("visibility_hidden");
      }
    };
    // Mobile: scroll up gesture near top after engagement
    let lastScroll = window.scrollY;
    let scrolledDown = false;
    const onScroll = () => {
      const y = window.scrollY;
      if (y > 800) scrolledDown = true;
      if (scrolledDown && y < 200 && lastScroll - y > 80) {
        trigger("scroll_back_to_top");
      }
      lastScroll = y;
    };

    window.addEventListener("mouseout", onMouseLeave);
    document.addEventListener("visibilitychange", onVisibility);
    window.addEventListener("scroll", onScroll, { passive: true });

    return () => {
      window.removeEventListener("mouseout", onMouseLeave);
      document.removeEventListener("visibilitychange", onVisibility);
      window.removeEventListener("scroll", onScroll);
    };
  }, []);

  lfUseEffect(() => {
    if (!show) return;
    const onKey = (e) => { if (e.key === "Escape") close(); };
    document.addEventListener("keydown", onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [show]);

  const close = () => {
    track("exit_intent_dismissed");
    setShow(false);
  };

  if (!show) return null;

  return (
    <div
      className="exit-overlay"
      role="dialog"
      aria-modal="true"
      aria-label="Antes de sair"
      onClick={(e) => { if (e.target === e.currentTarget) close(); }}
    >
      <div className="exit-modal">
        <button className="exit-close" onClick={close} aria-label="Fechar">
          <Icon name="close" size={20} />
        </button>

        <div className="exit-image">
          <img
            src={CONTENT.images.sunset}
            alt="Vista da cobertura do Campeche Living ao entardecer"
            loading="lazy"
            decoding="async"
          />
          <div className="exit-image-tag">
            <span className="mono">Campeche Living · cobertura</span>
          </div>
        </div>

        <div className="exit-content">
          <span className="eyebrow gold">Antes de sair</span>
          <h2 className="exit-headline">
            Receba a tabela completa antes de fechar.
          </h2>
          <p className="exit-lede">
            Plantas, condições de pagamento e estudo personalizado de valorização.
            Enviado por email em até 24h úteis. Sem ligações comerciais.
          </p>
          <ul className="exit-bullets">
            <li><Icon name="check" size={14} /> Tabela atualizada de unidades</li>
            <li><Icon name="check" size={14} /> Plantas técnicas dos 3 layouts</li>
            <li><Icon name="check" size={14} /> Simulação Housi personalizada</li>
          </ul>

          <LeadForm location="exit_intent" />
        </div>
      </div>
    </div>
  );
};

window.ExitIntentModal = ExitIntentModal;