/* Portal — clean navigation between Minimalist (this site) and Maximalist (cinematic site at /maximalist/).
   Iframe-free, sandbox-free, CSP-free — just a full-page navigation. The hover peek stays for the
   reveal effect, but the takeover is now `window.location.assign('/maximalist/')`. */
(function(){
const { useState, useEffect } = React;

function Portal() {
  const [peek, setPeek] = useState(false);
  const [transitioning, setTransitioning] = useState(false);

  useEffect(() => {
    const onPeek = (e) => setPeek(!!e.detail);
    const onActivate = () => goToMaximalist();
    window.addEventListener('portalPeek', onPeek);
    window.addEventListener('portalActivate', onActivate);
    return () => {
      window.removeEventListener('portalPeek', onPeek);
      window.removeEventListener('portalActivate', onActivate);
    };
  });

  const goToMaximalist = () => {
    if (transitioning) return;
    setPeek(false);
    document.body.classList.remove('portal-peeking');
    setTransitioning(true);
    // Brief warp animation before navigation, then swap to the maximalist site.
    setTimeout(() => {
      window.location.assign('/maximalist/');
    }, 650);
  };

  return (
    <>
      {/* Hover peek layer — same UX as before; click anywhere on it to enter. */}
      <div className={`portal-peek ${peek ? 'on' : ''}`} aria-hidden="true">
        <div className="portal-peek-frame">
          <div className="portal-peek-glyph">
            <img src="public/iternative-logo.png" alt="" />
            <div className="portal-peek-label">
              <div className="portal-peek-eyebrow">— Click to enter —</div>
              <div className="portal-peek-title">The Maximalist Site</div>
              <div className="portal-peek-sub">Animation, depth, the full story</div>
            </div>
          </div>
          <div className="portal-peek-rays"></div>
        </div>
      </div>

      {/* Cinematic transition overlay — plays just before the hard navigation. */}
      {transitioning && (
        <div className="portal-warp" aria-hidden="true">
          <div className="portal-warp-iris"></div>
          <div className="portal-warp-streaks"></div>
          <div className="portal-warp-logo">
            <img src="public/iternative-logo.png" alt="" />
          </div>
          <div className="portal-warp-text mono">Entering · iternative // maximalist</div>
        </div>
      )}
    </>
  );
}

// Toggle body class when peeking
(function bindPeekClass(){
  window.addEventListener('portalPeek', (e) => {
    document.body.classList.toggle('portal-peeking', !!e.detail);
  });
})();

window.Portal = Portal;
})();