// components/rinpo-phone-overlay.jsx — desktop overlay: store visible behind dim scrim

function RinpoPhoneOverlay() {
  const store = useStore();
  const visible = store.state.phoneOpen && store.isPhoneDesktop();

  const close = () => store.closePhoneOverlay();

  React.useEffect(function () {
    if (!visible) return undefined;
    const onKey = function (e) {
      if (e.key === 'Escape') close();
    };
    window.addEventListener('keydown', onKey);
    return function () { window.removeEventListener('keydown', onKey); };
  }, [visible]);

  if (!visible) return null;

  return (
    <div
      className="rinpo-phone-overlay"
      role="dialog"
      aria-modal="true"
      aria-label="RINPO Phone"
      onClick={(e) => { if (e.target === e.currentTarget) close(); }}
    >
      <div className="rinpo-phone-overlay__device">
        <button type="button" className="rinpo-phone-overlay__close" onClick={close} aria-label="Close RINPO Phone">
          <Icon name="close" size={18} />
        </button>
        <RinpoPhoneShell overlay />
      </div>
    </div>
  );
}

window.RinpoPhoneOverlay = RinpoPhoneOverlay;