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

function ExitPopup({ onClose }) {
  const scrollToReg = () => {
    onClose();
    setTimeout(() => {
      const reg = document.getElementById("registration");
      if (reg) {
        reg.scrollIntoView({ behavior: "smooth", block: "center" });
      } else {
        const cta = document.querySelector(".cta-btn");
        if (cta) cta.click();
      }
    }, 120);
  };

  return (
    <div
      className="modal-overlay"
      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
      style={{
        position: "fixed", top: 0, left: 0, width: "100%", height: "100%",
        background: "rgba(0,0,0,0.6)", zIndex: 9999,
        display: "flex", alignItems: "center", justifyContent: "center",
      }}
    >
      <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",
      }}>

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

        <div style={{
          width: 56, height: 56, borderRadius: "50%",
          background: "#e11229",
          display: "flex", alignItems: "center", justifyContent: "center",
          margin: "0 auto 16px",
        }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="10"/>
            <line x1="12" y1="8" x2="12" y2="12"/>
            <line x1="12" y1="16" x2="12.01" y2="16"/>
          </svg>
        </div>

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

        <p style={{
          fontFamily: "Georgia, serif", fontSize: 14, color: "#333",
          lineHeight: 1.7, marginBottom: 20, textAlign: "center",
        }}>
          <strong>Aleksandar Stanković i tim Most Primelon</strong> 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: "#e11229",
          border: "none", borderRadius: 4, color: "#fff",
          fontFamily: "Arial, sans-serif",
          fontWeight: 700, fontSize: 13,
          cursor: "pointer", textTransform: "uppercase", letterSpacing: 0.5,
          marginBottom: 14, padding: "12px 16px",
        }}>
          REGISTRIRAJ SE BESPLATNO
        </button>

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

Object.assign(window, { ExitPopup });