// Modal that hosts the WaitlistForm. Shadcn-style overlay + sheet; theme tokens
// follow `html.inverse-page`. Click backdrop or Esc to close. Locks body scroll.

function WaitlistModal({ open, onClose, dark = false }) {
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = prev;
    };
  }, [open, onClose]);

  if (!open) return null;

  return (
    <div
      className="modal-overlay waitlist-dialog-overlay"
      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
      role="dialog"
      aria-modal="true"
      aria-label="Join the waitlist"
    >
      <div className="modal-card waitlist-dialog-content">
        <button type="button" onClick={onClose} className="waitlist-dialog-close" aria-label="Close">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
            <path d="M2 2 L12 12 M12 2 L2 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
        </button>
        <div className="waitlist-dialog-body">
          <WaitlistForm variant="bare" inverse={dark} />
        </div>
      </div>
    </div>
  );
}

window.WaitlistModal = WaitlistModal;