const { Icon, Button } = window.AIProductionStudioDesignSystem_16a811;
// Site-wide accents: film grain + the Goldshine cursor bloom (only over [data-gold] elements)
function PfGrain() {
  return (
    <div aria-hidden style={{ position: 'fixed', inset: 0, overflow: 'hidden', pointerEvents: 'none', zIndex: 80 }}>
      <div className="pf-grain" />
    </div>
  );
}

function PfGoldCursor() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (window.matchMedia && window.matchMedia('(pointer: coarse)').matches) return;
    let x = -400, y = -400, tx = x, ty = y, on = 0, ton = 0, raf;
    const move = (e) => { tx = e.clientX; ty = e.clientY; ton = e.target.closest && e.target.closest('[data-gold]') ? 1 : 0; };
    const out = () => { ton = 0; };
    const tick = () => {
      x += (tx - x) * .16; y += (ty - y) * .16; on += (ton - on) * .1;
      const el = ref.current;
      if (el) { el.style.transform = `translate(${x}px,${y}px) translate(-50%,-50%) scale(${.55 + on * .45})`; el.style.opacity = on.toFixed(3); }
      raf = requestAnimationFrame(tick);
    };
    window.addEventListener('pointermove', move, { passive: true });
    document.addEventListener('pointerleave', out);
    raf = requestAnimationFrame(tick);
    return () => { cancelAnimationFrame(raf); window.removeEventListener('pointermove', move); document.removeEventListener('pointerleave', out); };
  }, []);
  return (
    <div ref={ref} aria-hidden style={{ position: 'fixed', left: 0, top: 0, width: 240, height: 240, borderRadius: '50%', pointerEvents: 'none', zIndex: 75, opacity: 0, mixBlendMode: 'screen', willChange: 'transform,opacity',
      background: `radial-gradient(circle,${PF_GOLD}.42) 0%,${PF_GOLD}.16) 22%,${PF_GOLD}.05) 45%,rgba(0,0,0,0) 68%)` }} />
  );
}

// Glass overlay shell shared by the showreel and the case-study windows
function PfOverlay({ open, onClose, children, width = 1040 }) {
  React.useEffect(() => {
    if (!open) return;
    const k = (e) => e.key === 'Escape' && onClose();
    window.addEventListener('keydown', k);
    return () => window.removeEventListener('keydown', k);
  }, [open]);
  if (!open) return null;
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 60, background: 'rgba(5,5,6,.72)', backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--space-8)', animation: 'pf-in var(--dur-base) var(--ease-standard)' }}>
      <div onClick={(e) => e.stopPropagation()} style={{ position: 'relative', width: '100%', maxWidth: width, maxHeight: '100%', overflowY: 'auto', background: 'rgba(16,16,18,.82)', border: '1px solid var(--line-strong)', borderRadius: 'var(--radius-lg)', boxShadow: '0 40px 120px rgba(0,0,0,.6)', animation: 'pf-rise var(--dur-slow) var(--ease-standard)' }}>
        <button onClick={onClose} aria-label="Close" style={{ position: 'absolute', top: 14, right: 14, zIndex: 2, width: 40, height: 40, borderRadius: 999, border: '1px solid var(--line-strong)', background: 'rgba(5,5,6,.5)', color: 'var(--white)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="x" size={18} />
        </button>
        {children}
      </div>
    </div>
  );
}

Object.assign(window, { PfGrain, PfGoldCursor, PfOverlay });