/* Shared primitives: Button, Eyebrow, GoldRule, useReveal */

const { useState, useEffect, useRef } = React;

const Eyebrow = ({ children, color, style }) => (
  <div className="eyebrow" style={{ color: color || undefined, ...style }}>{children}</div>
);

const GoldRule = ({ width = 56, style }) => (
  <div style={{ width, height: 2, background: 'var(--color-gold-base)', ...style }} />
);

const Button = ({ variant = 'primary', children, onClick, style, type, disabled, fullWidth }) => {
  const [hover, setHover] = useState(false);
  const base = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 600,
    padding: '13px 22px', borderRadius: 4, cursor: disabled ? 'not-allowed' : 'pointer',
    border: '1.5px solid transparent',
    textDecoration: 'none', lineHeight: 1,
    transition: 'background 160ms var(--ease-standard), color 160ms var(--ease-standard), border-color 160ms var(--ease-standard), transform 120ms var(--ease-standard)',
    letterSpacing: '0.005em',
    opacity: disabled ? 0.5 : 1,
    width: fullWidth ? '100%' : undefined,
  };
  const variants = {
    primary: {
      background: hover ? 'var(--color-green-900)' : 'var(--brand-primary)',
      color: '#fff', borderColor: hover ? 'var(--color-green-900)' : 'var(--brand-primary)',
    },
    secondary: {
      background: hover ? 'var(--brand-primary)' : '#fff',
      color: hover ? '#fff' : 'var(--brand-primary)',
      borderColor: 'var(--brand-primary)',
    },
    quiet: {
      background: 'transparent', color: 'var(--color-ink-soft)',
      borderColor: 'var(--divider)',
      ...(hover && { borderColor: 'var(--color-ink)', color: 'var(--color-ink)' }),
      fontWeight: 500,
    },
    gold: {
      background: hover ? 'var(--color-gold-700)' : 'var(--brand-accent)',
      color: '#fff', borderColor: hover ? 'var(--color-gold-700)' : 'var(--brand-accent)',
    },
    onDark: {
      background: hover ? '#fff' : 'transparent',
      color: hover ? 'var(--color-green-900)' : '#fff',
      borderColor: '#fff',
    },
    link: {
      background: 'transparent', borderColor: 'transparent',
      color: hover ? 'var(--color-blue-900)' : 'var(--color-blue-700)',
      padding: '4px 0', fontWeight: 600,
      borderBottom: `1.5px solid ${hover ? 'var(--color-gold-base)' : 'transparent'}`,
      borderRadius: 0,
    },
  };
  return (
    <button
      type={type || 'button'}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={disabled ? undefined : onClick}
      disabled={disabled}
      style={{ ...base, ...variants[variant], ...style }}
    >
      {children}
    </button>
  );
};

/* Reveal-on-scroll wrapper */
const Reveal = ({ children, delay = 0, as: Tag = 'div', style, ...rest }) => {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setInView(true); io.disconnect(); } },
      { threshold: 0.12, rootMargin: '-30px' }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <Tag
      ref={ref}
      className={'reveal' + (inView ? ' in' : '')}
      style={{ transitionDelay: delay + 'ms', ...style }}
      {...rest}
    >
      {children}
    </Tag>
  );
};

Object.assign(window, { Button, Eyebrow, GoldRule, Reveal });