/* global React */
/*
 * Aionios — V2 dreamland overlay. Full-bleed image (contain) with a
 * static gradient filling the letterbox. One centered semi-transparent
 * glass button labeled "Enter the Aionios"; one corner "← Back" pill.
 *
 * Exposes window.Aionios. Used by landing.jsx's App component when the
 * aionios mode is active (or pre-mounted with visibility:hidden during
 * the brush transition so the PNG is decoded before reveal).
 */

const { useState: useAioniosState } = React; // local alias to avoid clashing with other scripts' destructure

function AioniosEnterButton({ onClick }) {
  const [pressed, setPressed] = useAioniosState(false);
  const handle = () => {
    if (pressed) return;          // ignore double-clicks while transitioning
    setPressed(true);
    // Fire immediately so the parent's warp curtain begins fading in on
    // the SAME frame the button fades out. The old 220ms delay made the
    // transition feel "click → pause → flash → loading → arrive"; now
    // the curtain owns the timing (~520ms cover → navigate).
    onClick();
  };
  return (
    <div className={`enter-wrap ${pressed ? 'enter-wrap--pressed' : ''}`}>
      <button className="enter-btn" onClick={handle} disabled={pressed}>
        Enter the Aionios
      </button>
    </div>
  );
}

function Aionios({ onEnter, onBack }) {
  return (
    <section className="aionios" data-screen-label="V2 Aionios">
      {/* New outpainted dreamland (16:10) fills the viewport via
          object-fit:cover; tiny side trim only on extra-wide screens. */}
      <img
        className="aionios-img"
        src="assets/landing/aionios-dreamland.png"
        alt="Aionios dreamland"
        loading="eager"
        decoding="async"
        fetchpriority="high"
      />
      <button className="aionios-back" onClick={onBack} aria-label="Back to landing">
        ← Back
      </button>
      <AioniosEnterButton onClick={onEnter} />
    </section>
  );
}

window.Aionios = Aionios;