// Shared hooks and small utilities
const { useState, useEffect, useRef, useCallback, useMemo } = React;

function useScrollY() {
  const [y, setY] = useState(0);
  useEffect(() => {
    let raf = 0;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        setY(window.scrollY);
        raf = 0;
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return y;
}

function useMouse() {
  const [m, setM] = useState({ x: 0.5, y: 0.5 });
  useEffect(() => {
    const on = (e) => setM({ x: e.clientX / window.innerWidth, y: e.clientY / window.innerHeight });
    window.addEventListener('mousemove', on);
    return () => window.removeEventListener('mousemove', on);
  }, []);
  return m;
}

// Small sparkle/ornament SVGs
const Ornament = ({ className }) => (
  <div className={`ornament ${className || ''}`}>
    <span className="ornament-line" />
    <span className="ornament-diamond" />
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
      <path d="M9 0L10 8L18 9L10 10L9 18L8 10L0 9L8 8L9 0Z" fill="currentColor" opacity="0.8" />
    </svg>
    <span className="ornament-diamond" />
    <span className="ornament-line" />
  </div>
);

// Delicate sigil SVG — used as repeating motif
const Sigil = ({ size = 80, stroke = 1 }) => (
  <svg width={size} height={size} viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth={stroke} aria-hidden="true">
    <circle cx="50" cy="50" r="48" opacity="0.4" />
    <circle cx="50" cy="50" r="36" opacity="0.6" />
    <path d="M50 14 L82 68 L18 68 Z" opacity="0.5" />
    <path d="M50 86 L18 32 L82 32 Z" opacity="0.5" />
    <circle cx="50" cy="50" r="6" fill="currentColor" opacity="0.9" />
  </svg>
);

Object.assign(window, { useScrollY, useMouse, Ornament, Sigil });