// Milfers · Modal de carta digital (last.app via proxy)
// Singleton global — cualquier elemento con data-open-carta abre el modal.
// En producción la carta está en /carta/carta.html desde la raíz del servidor.
const CARTA_URL = 'carta/carta.html?popup=1';

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

  React.useEffect(() => {
    window.mfOpenCarta = () => setOpen(true);
    const click = (e) => {
      const t = e.target.closest('[data-open-carta]');
      if (t) { e.preventDefault(); setOpen(true); }
    };
    document.addEventListener('click', click);
    const key = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', key);
    return () => {
      document.removeEventListener('click', click);
      window.removeEventListener('keydown', key);
    };
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
  }, [open]);

  if (!open) return null;
  return (
    <div className="mf-carta-modal" role="dialog" aria-modal="true" aria-label="La Carta">
      <button className="mf-carta-modal-bg" aria-label="Cerrar" onClick={() => setOpen(false)}></button>
      <div className="mf-carta-modal-card">
        <button className="mf-carta-modal-close" aria-label="Cerrar carta" onClick={() => setOpen(false)}>
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8">
            <path d="M5 5l14 14M19 5L5 19"/>
          </svg>
        </button>
        <iframe
          className="mf-carta-modal-iframe"
          src={CARTA_URL}
          title="Carta digital Milfers Burgers"
        />
      </div>
    </div>
  );
}

window.CartaModal = CartaModal;