// Popup.jsx — ExitPopup (exit intent) for landing page

Object.assign(window, { ExitPopup });

/* ── Exit intent popup ── */
function ExitPopup({ onClose }) {
  const scrollToReg = () => {
    onClose();
    setTimeout(() => {
      const reg = document.getElementById("registration");
      if (reg) {
        reg.scrollIntoView({ behavior: "smooth", block: "center" });
      }
    }, 120);
  };

  return (
    <div className="modal-overlay" onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="popup-exit-body" style={{
        background: "#fff", borderRadius: 8, width: "100%", maxWidth: 400,
        padding: "32px 28px 24px", position: "relative",
        boxShadow: "0 8px 40px rgba(0,0,0,0.28)", textAlign: "center", margin: "16px",
      }}>

        {/* Close */}
        <button onClick={onClose} style={{
          position: "absolute", top: 10, right: 14, background: "none",
          border: "none", fontSize: 22, color: "#aaa", cursor: "pointer", lineHeight: 1,
        }}>
          ×
        </button>

        <h2 style={{
          fontFamily: "Arial, sans-serif", fontWeight: 700, fontSize: 22,
          color: "#111", marginBottom: 14, lineHeight: 1.3,
        }}>
          Ne odlazite još…
        </h2>

        <p style={{
          fontFamily: "Arial, sans-serif", fontSize: 14, color: "#333",
          lineHeight: 1.65, marginBottom: 20, textAlign: "center",
        }}>
          <strong>Marko Primorac</strong> i tim Croatia Vanguard otvaraju samo ograničen broj mjesta za hrvatske građane.
          Kada se mjesta popune — registracija se zatvara. Osigurajte svoje mjesto sada dok još ima prostora.
        </p>

        <button onClick={scrollToReg} style={{
          width: "100%", minHeight: 50, background: "#e8241a",
          border: "none", borderRadius: 6, color: "#fff",
          fontFamily: "Arial, sans-serif", fontWeight: 700, fontSize: 13,
          cursor: "pointer", textTransform: "uppercase", letterSpacing: 0.5,
          marginBottom: 14, padding: "12px 16px",
        }}>
          REGISTRIRAJTE SE BESPLATNO
        </button>

        <a href="#" onClick={e => { e.preventDefault(); scrollToReg(); }}
          style={{ fontFamily: "Arial, sans-serif", fontSize: 13, color: "#1a2751", textDecoration: "underline", cursor: "pointer" }}>
          Saznaj više
        </a>
      </div>
    </div>
  );
}