// Primitives.jsx — buttons, section wrappers, reveal-on-scroll

function useWindowWidth() {
  const [width, setWidth] = React.useState(window.innerWidth);
  React.useEffect(() => {
    const handler = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handler, { passive: true });
    return () => window.removeEventListener('resize', handler);
  }, []);
  return width;
}

function PrimaryButton({ children, onClick, size = 'md', style }) {
  const [hover, setHover] = React.useState(false);
  const sizes = {
    sm: { padding: '10px 18px', fontSize: 14 },
    md: { padding: '16px 28px', fontSize: 15.5 },
    lg: { padding: '20px 34px', fontSize: 17 },
  };
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        ...sizes[size],
        background: 'var(--cta)',
        color: '#fff',
        border: 0,
        borderRadius: 10,
        fontWeight: 600,
        letterSpacing: '-0.005em',
        fontFamily: 'inherit',
        cursor: 'pointer',
        transform: hover ? 'translateY(-1px)' : 'translateY(0)',
        boxShadow: hover
          ? '0 10px 24px -8px rgba(251,97,7,.45), 0 2px 4px rgba(0,0,0,.06)'
          : '0 4px 12px -4px rgba(251,97,7,.35), 0 1px 2px rgba(0,0,0,.04)',
        transition: 'all .18s cubic-bezier(.2,.7,.2,1)',
        whiteSpace: 'nowrap',
        ...style,
      }}
    >
      {children}
    </button>
  );
}

function SecondaryLink({ children, onClick, style }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: 'transparent',
        color: 'var(--link)',
        border: 0,
        padding: '6px 0',
        fontFamily: 'inherit',
        fontSize: 15,
        fontWeight: 500,
        cursor: 'pointer',
        ...style,
      }}
    >
      <span style={{ borderBottom: hover ? '1.5px solid var(--link)' : '1.5px solid transparent', paddingBottom: 2, transition: 'border .18s' }}>
        {children}
      </span>
    </button>
  );
}

// Reveal on scroll
function Reveal({ children, delay = 0, y = 18, tweaks }) {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    if (!tweaks.scrollAnims) { setVisible(true); return; }
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => { if (e.isIntersecting) setVisible(true); });
      },
      { threshold: 0.12, rootMargin: '0px 0px -8% 0px' }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, [tweaks.scrollAnims]);

  return (
    <div
      ref={ref}
      style={{
        opacity: visible ? 1 : 0,
        transform: visible ? 'translateY(0)' : `translateY(${y}px)`,
        transition: `opacity .7s cubic-bezier(.2,.7,.2,1) ${delay}ms, transform .7s cubic-bezier(.2,.7,.2,1) ${delay}ms`,
        willChange: 'opacity, transform',
      }}
    >
      {children}
    </div>
  );
}

function Section({ children, tone = 'light', narrow = false, style, id }) {
  const w = useWindowWidth();
  const isMobile = w < 640;
  // tones: light, tint, dark, accent
  const bgMap = {
    light: 'var(--bg-light)',
    tint: 'var(--bg-tint)',
    dark: 'var(--bg-dark)',
    accent: 'var(--bg-accent)',
  };
  const colorMap = {
    light: 'var(--fg)',
    tint: 'var(--fg)',
    dark: '#f5f6fa',
    accent: '#fff',
  };
  return (
    <section id={id} style={{
      background: bgMap[tone],
      color: colorMap[tone],
      padding: isMobile ? '64px 20px' : '120px 32px',
      position: 'relative',
      ...style,
    }}>
      <div style={{ maxWidth: narrow ? 880 : 1200, margin: '0 auto' }}>
        {children}
      </div>
    </section>
  );
}

function Eyebrow({ children, color }) {
  return (
    <div style={{
      fontSize: 12.5,
      fontWeight: 600,
      letterSpacing: '0.16em',
      textTransform: 'uppercase',
      color: color || 'var(--accent)',
      marginBottom: 18,
    }}>
      {children}
    </div>
  );
}

Object.assign(window, { PrimaryButton, SecondaryLink, Reveal, Section, Eyebrow, useWindowWidth });