/**
 * Ambient — subtle purple + white glow background used site-wide.
 * Fixed, pointer-events none, sits BEHIND everything (z: -1).
 * Three soft radial orbs + a hairline grain, nothing flashy.
 */

function Ambient() {
  return (
    <div aria-hidden="true" style={{
      position: 'fixed', inset: 0, zIndex: -1, pointerEvents: 'none',
      overflow: 'hidden', background: '#050508',
    }}>
      {/* Top-left purple glow */}
      <div style={{
        position: 'absolute', top: '-20%', left: '-10%',
        width: '60vw', height: '60vw', maxWidth: '900px', maxHeight: '900px',
        background: 'radial-gradient(circle, rgba(94,43,255,0.14) 0%, rgba(94,43,255,0.06) 30%, transparent 62%)',
        filter: 'blur(40px)',
      }} />
      {/* Right-side violet */}
      <div style={{
        position: 'absolute', top: '18%', right: '-12%',
        width: '55vw', height: '55vw', maxWidth: '800px', maxHeight: '800px',
        background: 'radial-gradient(circle, rgba(201,76,255,0.10) 0%, rgba(139,92,255,0.05) 35%, transparent 65%)',
        filter: 'blur(50px)',
      }} />
      {/* Bottom-center warm white */}
      <div style={{
        position: 'absolute', bottom: '-25%', left: '50%', transform: 'translateX(-50%)',
        width: '90vw', height: '70vw', maxWidth: '1400px', maxHeight: '900px',
        background: 'radial-gradient(ellipse 50% 50% at 50% 50%, rgba(245,242,255,0.045) 0%, rgba(201,76,255,0.03) 30%, transparent 65%)',
        filter: 'blur(60px)',
      }} />
      {/* Mid drift — very faint */}
      <div style={{
        position: 'absolute', top: '45%', left: '25%',
        width: '40vw', height: '40vw', maxWidth: '600px', maxHeight: '600px',
        background: 'radial-gradient(circle, rgba(245,242,255,0.025) 0%, transparent 60%)',
        filter: 'blur(40px)',
      }} />
    </div>
  );
}

/**
 * Page shell — shared scroll-progress line + scroll tracking.
 * Returns { scrollY } for nav state. Mounts the scroll line automatically.
 */
function usePageScroll() {
  const [scrollY, setScrollY] = React.useState(0);
  React.useEffect(() => {
    const fn = () => {
      setScrollY(window.scrollY);
      const el = document.getElementById('scroll-line');
      if (el) {
        const pct = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
        el.style.height = `${Math.min(pct, 100)}%`;
      }
    };
    fn();
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);
  return scrollY;
}

Object.assign(window, { Ambient, usePageScroll });