/* ============================================================================
   DIVONCI WORLD — TERMINAL 9 GATE
   A launcher screen: Terminal 9 is a different department in the same building,
   so it keeps its own orange identity and runs full-bleed in a frame. We add a
   thin Divonci-side boarding strip + an "open in its own tab" escape hatch.
   Window: Terminal9Gate.
   ========================================================================== */
const { useState: useStateT9, useRef: useRefT9 } = React;

function Terminal9Gate() {
  const [loaded, setLoaded] = useStateT9(false);
  const frameRef = useRefT9(null);
  const SRC = "../terminal9/Terminal%209.html";

  function reload() {
    setLoaded(false);
    const f = frameRef.current; if (f) f.src = f.src;
  }

  return (
    <div className="t9gate">
      <div className="t9gate-bar">
        <span className="t9gate-mk">TERMINAL <span className="n9">9</span></span>
        <span className="t9gate-sub">Ops Concourse · adjacent department</span>
        <span className="t9gate-dot" data-on={loaded}></span>
        <span className="t9gate-state">{loaded ? "Boarded" : "Boarding…"}</span>
        <div className="spacer"></div>
        <button className="t9gate-btn" onClick={reload} title="Reload the concourse">↻ Reload</button>
        <a className="t9gate-btn" href={SRC} target="_blank" rel="noopener" title="Open Terminal 9 in its own tab">Open standalone ↗</a>
      </div>
      <div className="t9gate-stage">
        {!loaded && (
          <div className="t9gate-load">
            <div className="ring"></div>
            <div className="lbl">boarding Terminal 9…</div>
          </div>
        )}
        <iframe
          ref={frameRef}
          className="t9gate-frame"
          src={SRC}
          title="Terminal 9 — Ops Concourse"
          allow="clipboard-write; clipboard-read"
          onLoad={() => setLoaded(true)}
        ></iframe>
      </div>
    </div>
  );
}

(function injectT9GateStyles() {
  if (document.getElementById("t9gate-styles")) return;
  const css = `
  .canvas:has(.t9gate){padding:0 !important;overflow:hidden !important}
  .t9gate{display:flex;flex-direction:column;height:100%;min-height:560px;background:#08080a}
  .t9gate-bar{flex:none;display:flex;align-items:center;gap:13px;height:46px;padding:0 16px;
    background:linear-gradient(180deg,#100b07,#0a0808);border-bottom:1px solid rgba(255,106,31,.22)}
  .t9gate-mk{font-family:var(--font-display);font-weight:700;letter-spacing:.16em;font-size:12px;color:#F5F1E8;display:flex;align-items:center;gap:6px}
  .t9gate-mk .n9{color:#FF6A1F}
  .t9gate-mk::before{content:"◉";color:#FF6A1F;font-size:10px}
  .t9gate-sub{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#8a8475;padding-left:13px;border-left:1px solid rgba(255,255,255,.08)}
  .t9gate-dot{width:7px;height:7px;border-radius:50%;background:#5a5648;margin-left:6px;transition:all .3s}
  .t9gate-dot[data-on="true"]{background:#34D98C;box-shadow:0 0 8px rgba(52,217,140,.7)}
  .t9gate-state{font-family:var(--font-mono);font-size:10px;color:#b8b2a4;letter-spacing:.04em}
  .t9gate-bar .spacer{flex:1}
  .t9gate-btn{appearance:none;text-decoration:none;background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:8px;
    color:#cfc9bb;font-family:var(--font-mono);font-size:10.5px;padding:6px 11px;cursor:pointer;transition:all .15s;white-space:nowrap}
  .t9gate-btn:hover{color:#fff;border-color:rgba(255,106,31,.5);background:rgba(255,106,31,.1)}
  .t9gate-stage{flex:1;position:relative;min-height:0;background:#050506}
  .t9gate-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#050506}
  .t9gate-load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
    background:#050506;color:#8a8475;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;z-index:2}
  .t9gate-load .ring{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.12);border-top-color:#FF6A1F;animation:t9gspin .8s linear infinite}
  @keyframes t9gspin{to{transform:rotate(360deg)}}
  `;
  const el = document.createElement("style"); el.id = "t9gate-styles"; el.textContent = css; document.head.appendChild(el);
})();

Object.assign(window, { Terminal9Gate });