// === JCGASISTAS — Overlays: WhatsApp float, sticky mobile, exit popup ===

function WAFloat() {
  return (
    <a className="wa-float pht-whatsapp" data-widget="5645" href={buildWA()} target="_blank" rel="noopener" onClick={() => waClick("float_widget")}>
      <span className="wa-float-icon">💬</span>
      <span className="wa-float-text">
        <span>Falar no WhatsApp</span>
        <small>Técnico certificado · resposta rápida</small>
      </span>
    </a>
  );
}

function StickyMobileBar() {
  return (
    <div className="sticky-mobile">
      <a className="btn btn-primary" href={`tel:+${COMPANY.phoneDigits}`} onClick={() => trackEvent("phone_click", { source: "sticky_mobile" })}>
        <span>📞</span> Ligar
      </a>
      <a className="btn btn-whatsapp pht-whatsapp" data-widget="5645" href={buildWA()} target="_blank" rel="noopener" onClick={() => waClick("sticky_mobile")}>
        <span>💬</span> WhatsApp
      </a>
    </div>
  );
}

function ExitIntent() {
  const [open, setOpen] = React.useState(false);
  const triggered = React.useRef(false);

  React.useEffect(() => {
    function onLeave(e) {
      if (triggered.current) return;
      if (e.clientY <= 0) {
        triggered.current = true;
        setOpen(true);
        trackEvent("exit_intent_shown", { trigger: "mouse_leave" });
      }
    }
    // Fallback: mostra após 60s se não acionado no mobile
    const t = setTimeout(() => {
      if (!triggered.current && window.innerWidth < 900) {
        triggered.current = true;
        setOpen(true);
        trackEvent("exit_intent_shown", { trigger: "mobile_timeout" });
      }
    }, 60000);
    document.addEventListener("mouseleave", onLeave);
    return () => { document.removeEventListener("mouseleave", onLeave); clearTimeout(t); };
  }, []);

  return (
    <div className="modal-backdrop" aria-hidden={!open} style={{ display: open ? "" : "none" }} onClick={() => setOpen(false)}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={() => setOpen(false)}>×</button>
        <div className="modal-head">
          <div className="modal-head-inner">
            <span className="modal-eyebrow">🛡️ Antes de você ir</span>
            <h3>Tire sua dúvida com um técnico certificado</h3>
            <p>Orçamento sem compromisso para instalação, conversão, laudo ou vazamento de gás.</p>
          </div>
        </div>
        <div className="modal-body">
          <div className="exit-points">
            <div className="exit-point"><span>✓</span> Técnico habilitado e equipe própria</div>
            <div className="exit-point"><span>✓</span> Serviço dentro da norma, com garantia</div>
            <div className="exit-point"><span>✓</span> Laudo válido para síndico e seguradora</div>
          </div>
          <a
            className="btn btn-whatsapp btn-large pht-whatsapp"
            data-widget="5645"
            href={buildWA("Olá! Quero um orçamento sem compromisso com um técnico certificado.")}
            target="_blank"
            rel="noopener"
            onClick={() => { trackEvent("exit_intent_cta", {}); waClick("exit_intent"); setOpen(false); }}
          >
            <span>💬</span> Pedir orçamento no WhatsApp
          </a>
          <p style={{ textAlign: "center", marginTop: 12, fontSize: 12, color: "var(--ink-soft)" }}>
            Sem compromisso · Atendimento em toda a Grande São Paulo
          </p>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { WAFloat, StickyMobileBar, ExitIntent });