// Shared hooks and atomic components — exported to window
(function() {
  var useState   = React.useState;
  var useEffect  = React.useEffect;
  var useRef     = React.useRef;

  // ── useInView ────────────────────────────────────────────────────────────────
  function useInView(threshold) {
    threshold = threshold || 0.1;
    var pair    = useState(false);
    var visible = pair[0], setVisible = pair[1];
    var ref     = useRef(null);
    useEffect(function() {
      var el = ref.current;
      if (!el) return;
      var obs = new IntersectionObserver(function(entries) {
        if (entries[0].isIntersecting) { setVisible(true); obs.disconnect(); }
      }, { threshold: threshold });
      obs.observe(el);
      return function() { obs.disconnect(); };
    }, []);
    return [ref, visible];
  }

  // ── useCursorParallax ────────────────────────────────────────────────────────
  function useCursorParallax(factor) {
    factor = factor || 12;
    var pair   = useState({ x: 0, y: 0 });
    var offset = pair[0], setOffset = pair[1];
    useEffect(function() {
      if (window.matchMedia('(max-width:767px)').matches) return;
      if (window.matchMedia('(prefers-reduced-motion:reduce)').matches) return;
      function onMove(e) {
        var cx = window.innerWidth / 2, cy = window.innerHeight / 2;
        setOffset({ x: (e.clientX - cx) / cx * factor, y: (e.clientY - cy) / cy * factor });
      }
      window.addEventListener('mousemove', onMove, { passive: true });
      return function() { window.removeEventListener('mousemove', onMove); };
    }, []);
    return offset;
  }

  // ── SectionTag ───────────────────────────────────────────────────────────────
  function SectionTag(props) {
    return React.createElement('div', {
      style: {
        display: 'inline-flex', alignItems: 'center', gap: '10px',
        fontSize: '0.67rem', letterSpacing: '0.22em', textTransform: 'uppercase',
        color: 'var(--accent)', fontFamily: "'Inter',sans-serif", fontWeight: 400,
        marginBottom: '20px'
      }
    }, [
      React.createElement('span', {
        key: 'line',
        style: { display: 'block', width: '28px', height: '1px', background: 'var(--accent)', flexShrink: 0 }
      }),
      props.children
    ]);
  }

  // ── Reveal ───────────────────────────────────────────────────────────────────
  function Reveal(props) {
    var inView  = useInView(0.1);
    var ref     = inView[0], visible = inView[1];
    var delay   = props.delay || 0;
    var baseStyle = {
      opacity:    visible ? 1 : 0,
      transform:  visible ? 'translateY(0)' : 'translateY(28px)',
      transition: 'opacity 0.9s cubic-bezier(0.4,0,0.2,1) ' + delay + 's, transform 0.9s cubic-bezier(0.4,0,0.2,1) ' + delay + 's'
    };
    var merged = Object.assign({}, baseStyle, props.style || {});
    return React.createElement('div', { ref: ref, style: merged, className: props.className || '' }, props.children);
  }

  // ── GoldDivider ──────────────────────────────────────────────────────────────
  function GoldDivider() {
    return React.createElement('div', {
      style: {
        width: '100%', height: '1px',
        background: 'linear-gradient(to right, transparent, var(--border), transparent)'
      }
    });
  }

  Object.assign(window, { useInView: useInView, useCursorParallax: useCursorParallax, SectionTag: SectionTag, Reveal: Reveal, GoldDivider: GoldDivider });
})();