// ═══════════════════════════════════════════════════════════════
// UniverseSwitcher — navegación iter-05 (3 puntos + overlay)
//
// Reemplaza al hamburger en IB y ED (donde la estética iter-05
// pide un elemento más discreto que no rompa la página). Muestra
// un botón circular con 3 puntos de color (uno por universo) que,
// al tocarse, abre un overlay a pantalla completa con 3 tiles
// primarios (IB / VV / ED) + tile secundario DE (horizontal).
//
// Props:
//   current      : 'ib' | 'vv' | 'ed' | 'about' — sección activa
//   onPick(id)   : navegar a la sección (id ∈ ib/vv/ed/about)
//   onHome()     : volver a la home
//   ondark       : bool — botón sobre fondo oscuro (default true)
// ═══════════════════════════════════════════════════════════════

function UniverseSwitcher({ current, onPick, onHome, ondark = true }) {
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', onKey);
    // bloquear scroll del body mientras está abierto
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [open]);

  const pick = (id) => {
    setOpen(false);
    if (id === 'about') onPick && onPick('about');
    else onPick && onPick(id);
  };

  return (
    <>
      <button
        className={`u-btn ${ondark ? 'ondark' : 'onlight'}`}
        onClick={() => setOpen(true)}
        aria-label="Cambiar universo"
        aria-expanded={open}>
        {/* iter-10: orden canónico VV → IB → ED en TODO el sitio. */}
        <span className="dot vv"/>
        <span className="dot ib"/>
        <span className="dot ed"/>
      </button>

      {open && (
        <div className="u-overlay" role="dialog" aria-modal="true">
          <div className="head">
            <div>
              <div className="ti">EL <em>universo</em></div>
              <div className="sub">3 formas de entrar</div>
            </div>
            <button className="x" onClick={() => setOpen(false)} aria-label="Cerrar">×</button>
          </div>

          <div className="tiles">
            {/* iter-10: orden canónico VV → IB → ED. El orden debe ser idéntico
                en todo el sitio (home portal, switcher, dots del botón). */}

            {/* VV */}
            <button
              className={`tile vv ${current === 'vv' ? 'active' : ''}`}
              onClick={() => pick('vv')}
              aria-label="Ir a Vamos Viendo">
              <span className="decos" aria-hidden="true"/>
              <div>
                <div className="k">En cartel · crítica</div>
                <div className="nm">
                  <span>Vamos </span>
                  <span style={{ fontStyle:'italic' }}>Viendo</span>
                </div>
              </div>
              <div className="meta">— El feed —</div>
            </button>

            {/* IB */}
            <button
              className={`tile ib ${current === 'ib' ? 'active' : ''}`}
              onClick={() => pick('ib')}
              aria-label="Ir a Inmenso Bastardo">
              <span className="decos" aria-hidden="true">IB</span>
              <div>
                <div className="k">Cuadernos · Vol II</div>
                <div className="nm">
                  <span>Inmenso </span>
                  <span style={{ fontStyle:'italic' }}>Bastardo.</span>
                </div>
              </div>
              <div className="meta">— Lo inconmensurable —</div>
            </button>

            {/* ED */}
            <button
              className={`tile ed ${current === 'ed' ? 'active' : ''}`}
              onClick={() => pick('ed')}
              aria-label="Ir a EdiBarak">
              <span className="decos" aria-hidden="true"/>
              <span className="paper-line paper-line-a" aria-hidden="true"/>
              <span className="paper-line paper-line-b" aria-hidden="true"/>
              <div>
                <div className="k">Archivo · opinión</div>
                <div className="nm">
                  <span>EDI</span>
                  <span className="sl">/</span>
                  <span>BARAK</span>
                </div>
              </div>
              <div className="meta">Notas sueltas sobre cine y lo demás</div>
            </button>

            <div className="divider">—— Taller ——</div>

            {/* DE — horizontal, secundario */}
            <button
              className={`tile de ${current === 'about' ? 'active' : ''}`}
              onClick={() => pick('about')}
              aria-label="Ir a Detrás de escenas">
              <div>
                <div className="k">Backstage</div>
                <div className="nm">
                  {/* iter-11: "DETRÁS DE ESCENAS" literal, sin //. */}
                  <span>DETRÁS DE ESCENAS</span>
                </div>
              </div>
              <div className="meta">Taller</div>
              <div className="arrow">→</div>
            </button>
          </div>
        </div>
      )}
    </>
  );
}

window.UniverseSwitcher = UniverseSwitcher;