/* Shared website primitives. Depends on window.Icon. */
(function () {
  const { useState, useEffect, useRef } = React;
  const Icon = window.Icon;

  /* Fade/slide reveal on scroll */
  const Reveal = ({ children, delay = 0, as = 'div', className = '', style = {} }) => {
    const ref = useRef(null);
    const [shown, setShown] = useState(false);
    useEffect(() => {
      const el = ref.current;
      if (!el) return;
      if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
        setShown(true); return;
      }
      const io = new IntersectionObserver((entries) => {
        entries.forEach((e) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } });
      }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
      io.observe(el);
      return () => io.disconnect();
    }, []);
    return React.createElement(as, {
      ref, className,
      style: {
        ...style,
        opacity: shown ? 1 : 0,
        transform: shown ? 'none' : 'translateY(18px)',
        transition: `opacity .6s cubic-bezier(.16,1,.3,1) ${delay}ms, transform .6s cubic-bezier(.16,1,.3,1) ${delay}ms`,
      },
    }, children);
  };

  /* Button — renders <button>; onClick used for navigation */
  const Btn = ({ variant = 'primary', size, icon, iconRight, children, onClick, type = 'button', style }) => {
    const cls = ['btn', 'btn--' + variant, size === 'sm' ? 'btn--sm' : ''].filter(Boolean).join(' ');
    return React.createElement('button', { className: cls, onClick, type, style },
      icon ? React.createElement(Icon, { name: icon, size: 17 }) : null,
      React.createElement('span', null, children),
      iconRight ? React.createElement(Icon, { name: iconRight, size: 17 }) : null
    );
  };

  const TextLink = ({ children, onClick, className = '' }) =>
    React.createElement('button', {
      className: 'textlink ' + className,
      onClick,
      style: { background: 'none', border: 0, cursor: 'pointer', padding: 0 },
    }, React.createElement('span', null, children), React.createElement(Icon, { name: 'arrow', size: 16 }));

  const SectionHead = ({ eyebrow, title, lead, align = 'left', dark }) =>
    React.createElement('div', {
      className: 'section-head',
      style: { textAlign: align, maxWidth: align === 'center' ? 760 : null, marginInline: align === 'center' ? 'auto' : null },
    },
      eyebrow ? React.createElement('p', { className: 'eyebrow', style: align === 'center' ? { justifyContent: 'center' } : null }, eyebrow) : null,
      React.createElement('h2', { className: 'display display--lg' }, title),
      lead ? React.createElement('p', { className: 'lead', style: align === 'center' ? { marginInline: 'auto' } : null }, lead) : null
    );

  const Tag = ({ children }) => React.createElement('span', { className: 'tag' }, children);

  Object.assign(window, { Reveal, Btn, TextLink, SectionHead, Tag });
})();