// Milfers · Modal de reserva (TheFork embedded popup)
// Funciona como singleton global — cualquier botón con data-open-reserva
// o que dispare window.mfOpenReserva() abre el modal.
const LASTAPP_URL = 'https://widget.thefork.com/b776f821-119a-4eaf-a004-190bb4b5c494';

function ReservaModal() {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const openHandler = () => setOpen(true);
    window.mfOpenReserva = openHandler;
    // Delegate clicks
    const click = (e) => {
      const t = e.target.closest('[data-open-reserva]');
      if (t) { e.preventDefault(); openHandler(); }
    };
    document.addEventListener('click', click);
    // ESC close
    const key = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', key);
    return () => {
      document.removeEventListener('click', click);
      window.removeEventListener('keydown', key);
    };
  }, []);
  // Body scroll lock
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
  }, [open]);

  if (!open) return null;
  return (
    <div className="mf-modal" role="dialog" aria-modal="true" aria-label={window.t('modal.title')}>
      <button className="mf-modal-bg" aria-label="Cerrar" onClick={() => setOpen(false)}></button>
      <div className="mf-modal-card">
        <button className="mf-modal-close" aria-label="Cerrar" onClick={() => setOpen(false)}>
          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6">
            <path d="M5 5l14 14M19 5L5 19"/>
          </svg>
        </button>
        <div className="mf-modal-head">
          <div className="mf-modal-eyebrow">{window.t('modal.eyebrow')}</div>
          <h3 className="mf-modal-title">{window.t('modal.title')}</h3>
        </div>
        <iframe
          className="mf-modal-iframe"
          src={LASTAPP_URL}
          title={window.t('modal.iframeTitle')}
          allow="payment *"
        />
      </div>
    </div>
  );
}

window.ReservaModal = ReservaModal;