// Shared primitives: ARMark, CTA pill, useReveal, useTweaks
const CALENDLY = 'https://calendly.com/contact-andririvera';

const ARMark = ({ size = 22, color = '#FFFFFF' }) => (
  <a href="#top" aria-label="Andri Rivera" style={{
    display: 'inline-flex', alignItems: 'baseline',
    fontStyle: 'italic', fontWeight: 800, fontSize: size,
    letterSpacing: '-0.04em', lineHeight: 1, color,
    textDecoration: 'none', fontFamily: 'Clash Display, General Sans, system-ui',
  }}>
    <span>A</span><span style={{ color: color === '#FFFFFF' ? '#EEE8DF' : '#C8874A', marginLeft: -1 }}>R</span>
  </a>
);

const CTA = ({ variant = 'primary', size = 'md', href = CALENDLY, onClick, children, withArrow = true }) => {
  const pad = size === 'lg' ? '20px 34px' : size === 'sm' ? '11px 20px' : '15px 26px';
  const fs  = size === 'lg' ? 17 : size === 'sm' ? 14 : 15;
  const isExternal = href && href.startsWith('http');
  const primary = {
    background: '#EEE8DF', color: '#2C365A', border: '1px solid transparent',
  };
  const ghostDark = {
    background: 'transparent', color: '#FFFFFF',
    border: '1px solid rgba(238,232,223,0.28)',
  };
  const ghostLight = {
    background: 'transparent', color: '#2C365A',
    border: '1px solid rgba(44,54,90,0.22)',
  };
  const s = variant === 'ghost-dark' ? ghostDark : variant === 'ghost-light' ? ghostLight : primary;
  const [hov, setHov] = React.useState(false);
  return (
    <a href={href} onClick={onClick}
      target={isExternal ? '_blank' : undefined}
      rel={isExternal ? 'noopener noreferrer' : undefined}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{
        ...s,
        padding: pad, fontSize: fs, fontWeight: 700, letterSpacing: '0.02em',
        borderRadius: 999, textDecoration: 'none',
        display: 'inline-flex', alignItems: 'center', gap: 10,
        transition: 'transform 200ms cubic-bezier(0.2,0.6,0.2,1), background 200ms, box-shadow 200ms, border-color 200ms',
        transform: hov ? 'translateY(-2px)' : 'none',
        boxShadow: hov && variant === 'primary' ? '0 8px 24px rgba(238,232,223,0.25)' : 'none',
        background: hov && variant === 'ghost-dark' ? 'rgba(238,232,223,0.08)'
                 : hov && variant === 'ghost-light' ? 'rgba(44,54,90,0.04)'
                 : s.background,
        borderColor: hov && variant === 'ghost-dark' ? 'rgba(238,232,223,0.5)'
                 : hov && variant === 'ghost-light' ? 'rgba(44,54,90,0.42)'
                 : s.border?.split(' ').slice(-1)[0] || 'transparent',
        cursor: 'pointer', whiteSpace: 'nowrap',
      }}
    >
      {children}
      {withArrow && <span aria-hidden="true" style={{
        fontWeight: 400, display: 'inline-block',
        transform: hov ? 'translateX(3px)' : 'none',
        transition: 'transform 200ms cubic-bezier(0.2,0.6,0.2,1)',
      }}>→</span>}
    </a>
  );
};

const useIsMobile = () => {
  const [mobile, setMobile] = React.useState(() => window.innerWidth < 768);
  React.useEffect(() => {
    const mq = window.matchMedia('(max-width: 767px)');
    const handler = e => setMobile(e.matches);
    mq.addEventListener('change', handler);
    return () => mq.removeEventListener('change', handler);
  }, []);
  return mobile;
};

const useReveal = () => {
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) e.target.classList.add('is-in');
        else e.target.classList.remove('is-in');
      });
    }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
    const observed = new WeakSet();
    const sweep = () => {
      document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .reveal-scale').forEach(el => {
        if (!observed.has(el)) { io.observe(el); observed.add(el); }
      });
    };
    sweep();
    const mo = new MutationObserver(sweep);
    mo.observe(document.body, { childList: true, subtree: true });
    return () => { io.disconnect(); mo.disconnect(); };
  }, []);
};

// Parallax hook — reads scroll, returns y in px scaled by amplitude
const useParallax = (factor = 0.3) => {
  const [y, setY] = React.useState(0);
  React.useEffect(() => {
    let raf = null;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        setY(window.scrollY * factor);
        raf = null;
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, [factor]);
  return y;
};

// Tweaks — subscribe to window.__tweaks
const useTweaks = () => {
  const [t, setT] = React.useState(window.__tweaks);
  React.useEffect(() => {
    const handler = () => setT({ ...window.__tweaks });
    window.addEventListener('tweakschange', handler);
    return () => window.removeEventListener('tweakschange', handler);
  }, []);
  return t;
};

Object.assign(window, { ARMark, CTA, CALENDLY, useReveal, useParallax, useTweaks });