const {
  motion,
  useScroll,
  useTransform,
  useInView,
  useMotionValue,
  useSpring,
  AnimatePresence,
  animate,
} = window.Motion;

const CALENDLY_URL = "https://calendly.com/jackzwhitee/15min";

const fadeUp = (delay = 0, distance = 22) => ({
  initial: { opacity: 0, y: distance },
  whileInView: { opacity: 1, y: 0 },
  viewport: { once: true, margin: "-80px" },
  transition: { duration: 0.7, delay, ease: [0.22, 1, 0.36, 1] },
});

const fadeIn = (delay = 0) => ({
  initial: { opacity: 0 },
  whileInView: { opacity: 1 },
  viewport: { once: true, margin: "-60px" },
  transition: { duration: 0.7, delay, ease: "easeOut" },
});

function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState(false);
  React.useEffect(() => {
    const mq = window.matchMedia('(hover: none), (max-width: 900px)');
    setIsMobile(mq.matches);
    const handler = (e) => setIsMobile(e.matches);
    mq.addEventListener('change', handler);
    return () => mq.removeEventListener('change', handler);
  }, []);
  return isMobile;
}

function Wordmark({ size = 14, dim = false }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      fontFamily: "'Space Mono', monospace", fontWeight: 700,
      fontSize: size, letterSpacing: '0.16em', textTransform: 'uppercase',
      color: dim ? 'var(--muted)' : 'var(--fg)',
    }}>
      <img
        src="uploads/vu-mark.png"
        alt="VentureUp"
        style={{
          height: size + 18,
          width: 'auto',
          display: 'block',
        }}
      />
    </span>
  );
}

function useCountdown(from, to, durationMs, run) {
  const [val, setVal] = React.useState(from);
  React.useEffect(() => {
    if (!run) { setVal(from); return; }
    const start = performance.now();
    let raf;
    const tick = (t) => {
      const p = Math.min(1, (t - start) / durationMs);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(Math.round(from + (to - from) * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [from, to, durationMs, run]);
  return val;
}

Object.assign(window, {
  motion, useScroll, useTransform, useInView, useMotionValue, useSpring,
  AnimatePresence, animate,
  CALENDLY_URL, fadeUp, fadeIn, useIsMobile, Wordmark, useCountdown,
});