(function () {
  'use strict';
  const { Stage, Sprite, useTime, Easing, interpolate, animate, clamp } = window;
  const h = React.createElement;

  const W = 1920, H = 1080;
  const CX = W / 2, CY = H / 2;
  const ORANGE = '#F05A28';
  const DURATION = 5.2;

  // ── Clamp helper ──────────────────────────────────────────────────────────
  const cl = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
  const norm = (t, a, b) => cl((t - a) / (b - a), 0, 1);

  // ── ERP Dashboard Ghost ───────────────────────────────────────────────────
  function ERPGhost({ alpha }) {
    if (alpha <= 0.005) return null;
    const a = (r, g, b, o) => `rgba(${r},${g},${b},${o * alpha})`;

    const card = (l, t, w, ht, extra) => h('div', {
      key: `${l}-${t}`,
      style: {
        position: 'absolute', left: l, top: t, width: w, height: ht,
        borderRadius: 10,
        background: a(220, 215, 208, 0.9),
        ...extra
      }
    });

    return h('div', { style: { position: 'absolute', inset: 0, overflow: 'hidden' } },
      // Base
      h('div', { style: { position: 'absolute', inset: 0, background: a(248, 246, 243, 1) } }),
      // Sidebar
      h('div', { style: { position: 'absolute', left: 0, top: 0, width: 248, bottom: 0, background: a(242, 239, 235, 1), borderRight: `1px solid ${a(210, 205, 198, 0.5)}` } }),
      // Sidebar brand
      h('div', { style: { position: 'absolute', left: 18, top: 18, width: 148, height: 34, borderRadius: 6, background: a(230, 225, 218, 0.9) } }),
      // Sidebar nav items
      ...[0, 1, 2, 3, 4, 5, 6, 7].map(i =>
        h('div', { key: i, style: { position: 'absolute', left: 14, top: 96 + i * 54, width: 220, height: 36, borderRadius: 8, background: i === 2 ? a(240, 90, 40, 0.35) : a(215, 210, 204, 0.7) } })
      ),
      // Topbar
      h('div', { style: { position: 'absolute', left: 248, top: 0, right: 0, height: 60, background: a(252, 250, 248, 1), borderBottom: `1px solid ${a(210, 205, 198, 0.35)}` } }),
      h('div', { style: { position: 'absolute', left: 290, top: 18, width: 220, height: 24, borderRadius: 12, background: a(220, 215, 208, 0.8) } }),
      h('div', { style: { position: 'absolute', right: 72, top: 14, width: 32, height: 32, borderRadius: '50%', background: a(210, 205, 198, 0.7) } }),
      // KPI cards
      ...[0, 1, 2, 3].map(i => card(268 + i * 352, 84, 322, 104)),
      // Chart
      card(268, 218, 872, 400),
      card(1180, 218, 452, 190),
      card(1180, 430, 452, 188),
      // Table
      card(268, 650, 1364, 210),
    );
  }

  // ── Main Scene ────────────────────────────────────────────────────────────
  function Scene() {
    const t = useTime();

    // ── Phase values ─────────────────────────────────────────────────────

    // Dashboard ghost fades fast
    const dashAlpha = Easing.easeInOutQuad(cl(1 - t / 0.55, 0, 1)) * 0.32;

    // Frosted overlay rises
    const overlayP  = Easing.easeInOutCubic(norm(t, 0, 0.75));

    // Ambient glow — expands, holds, contracts
    const glowR = interpolate(
      [0.2, 1.0,  2.4,  3.2,  4.1],
      [0,   420,  450,  320,   0]
    )(t);
    const glowA = interpolate(
      [0.2, 0.85, 2.4,  3.2,  4.1],
      [0,   0.13, 0.10, 0.05,  0]
    )(t);

    // Logo entry
    const entryP  = Easing.easeOutCubic(norm(t, 0.18, 0.85));
    const logoEntryOpacity = entryP;
    const logoEntryTY      = (1 - entryP) * 20;
    const logoEntryScale   = 0.92 + entryP * 0.08;

    // Logo breathing — active only during hold phase
    const breathEnvelope = Easing.easeInOutCubic(norm(t, 0.85, 1.4)) *
                           (1 - Easing.easeInOutCubic(norm(t, 3.0, 3.5)));
    const breathScale = 1 + Math.sin((t / 2.5) * Math.PI * 2 - Math.PI / 2) * 0.013 * breathEnvelope;

    // Logo exit — scale down + fade
    const exitP  = Easing.easeInOutQuart(norm(t, 3.0, 3.9));
    const logoExitOpacity = 1 - exitP;
    const logoExitScale   = 1 - exitP * 0.055;
    const logoExitTY      = -exitP * 8;

    const logoOpacity = logoEntryOpacity * logoExitOpacity;
    const logoScale   = logoEntryScale   * breathScale   * logoExitScale;
    const logoTY      = logoEntryTY + logoExitTY;

    // "Signing Out…" text
    const textOpacity = interpolate([0.85, 1.35, 3.0, 3.55], [0, 1, 1, 0])(t);
    const textTY      = interpolate([0.85, 1.4],  [12, 0])(t);

    // Expanding halo ring on exit
    const haloP  = Easing.easeOutExpo(norm(t, 3.0, 3.9));
    const haloR  = 90 + haloP * 130;
    const haloA  = cl(norm(t, 3.0, 3.18) * (1 - norm(t, 3.3, 3.9)), 0, 1) * 0.22;

    // Second thinner outer ring
    const halo2P = Easing.easeOutExpo(norm(t, 3.1, 4.1));
    const halo2R = 90 + halo2P * 200;
    const halo2A = cl(norm(t, 3.1, 3.25) * (1 - norm(t, 3.5, 4.0)), 0, 1) * 0.12;

    // Final white-out
    const finalOpacity = Easing.easeInOutCubic(norm(t, 4.0, 4.8));

    const LOGO = 164;

    return h('div', { style: { position: 'absolute', inset: 0, overflow: 'hidden' } },

      // ── Base warm-white background
      h('div', { style: { position: 'absolute', inset: 0, background: 'linear-gradient(150deg, #FDFCFB 0%, #FAF8F5 55%, #FBF9F7 100%)' } }),

      // ── ERP dashboard ghost
      h(ERPGhost, { alpha: dashAlpha }),

      // ── Frosted glass overlay
      h('div', { style: {
        position: 'absolute', inset: 0,
        background: `rgba(253,252,251,${0.86 * overlayP})`,
        backdropFilter: `blur(${overlayP * 22}px)`,
        WebkitBackdropFilter: `blur(${overlayP * 22}px)`,
        opacity: overlayP,
      }}),

      // ── Outer ambient wash
      h('div', { style: {
        position: 'absolute',
        left: CX, top: CY,
        width: glowR * 2.8, height: glowR * 2.8,
        transform: 'translate(-50%,-50%)',
        borderRadius: '50%',
        background: `radial-gradient(circle, rgba(240,90,40,${glowA * 0.38}) 0%, transparent 70%)`,
        pointerEvents: 'none',
      }}),

      // ── Inner glow core
      h('div', { style: {
        position: 'absolute',
        left: CX, top: CY,
        width: glowR * 2, height: glowR * 2,
        transform: 'translate(-50%,-50%)',
        borderRadius: '50%',
        background: `radial-gradient(circle, rgba(240,90,40,${glowA}) 0%, rgba(240,90,40,${glowA * 0.28}) 40%, transparent 68%)`,
        pointerEvents: 'none',
      }}),

      // ── Exit halo rings
      h('div', { style: {
        position: 'absolute',
        left: CX, top: CY,
        width: haloR * 2, height: haloR * 2,
        transform: 'translate(-50%,-50%)',
        borderRadius: '50%',
        border: `1.5px solid rgba(240,90,40,${haloA})`,
        pointerEvents: 'none',
      }}),
      h('div', { style: {
        position: 'absolute',
        left: CX, top: CY,
        width: halo2R * 2, height: halo2R * 2,
        transform: 'translate(-50%,-50%)',
        borderRadius: '50%',
        border: `1px solid rgba(240,90,40,${halo2A})`,
        pointerEvents: 'none',
      }}),

      // ── Logo
      h('div', { style: {
        position: 'absolute',
        left: CX, top: CY - 18,
        width: LOGO, height: LOGO,
        transform: `translate(-50%,-50%) translateY(${logoTY}px) scale(${logoScale})`,
        opacity: logoOpacity,
        willChange: 'transform, opacity',
      }},
        h('img', {
          src: 'uploads/OM GROUP ONLY LOGO-9de09387.png',
          style: { width: '100%', height: '100%', objectFit: 'contain', display: 'block' },
          draggable: 'false',
        })
      ),

      // ── "Signing Out…" label
      h('div', { style: {
        position: 'absolute',
        left: CX,
        top: CY + 102,
        transform: `translate(-50%,0) translateY(${textTY}px)`,
        opacity: textOpacity,
        fontFamily: "'Inter', 'Helvetica Neue', Helvetica, sans-serif",
        fontSize: 15,
        fontWeight: 400,
        letterSpacing: '0.24em',
        color: ORANGE,
        textTransform: 'uppercase',
        whiteSpace: 'nowrap',
        willChange: 'transform, opacity',
      }}, 'Signing Out\u2026'),

      // ── Final white-out fade
      h('div', { style: {
        position: 'absolute', inset: 0,
        background: '#FDFCFB',
        opacity: finalOpacity,
        pointerEvents: 'none',
      }}),
    );
  }

  // ── Root (standalone preview via Stage) ───────────────────────────────────
  function LogoutScene() {
    return h(Stage, {
      width: W, height: H,
      duration: DURATION,
      background: '#FDFCFB',
      autoplay: true,
      loop: true,
    },
      h(Sprite, { start: 0, end: DURATION, keepMounted: true },
        h(Scene, null)
      )
    );
  }

  // ── Exports ───────────────────────────────────────────────────────────────
  window.LogoutScene        = LogoutScene;
  window.LogoutSceneContent = Scene;   // used by LogoutOverlay (no Stage wrapper)
})();