/* eslint-disable */
const { useState, useEffect, useRef, useMemo } = React;

function AFMark({ size = 32 }) {
  return (
    <img className="brand-mark"
         src="assets/ai-fusio-logo.png"
         alt="AI Fusio"
         style={{ height: size + "px", width: "auto" }} />
  );
}

function Brand() {
  return (
    <a href="#top" className="brand" aria-label="AI Fusio">
      <AFMark size={28} />
    </a>
  );
}

function Eyebrow({ children }) {
  return <div className="eyebrow">{children}</div>;
}

function Reveal({ children, delay = 0, as: As = "div", className = "", ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        setTimeout(() => el.classList.add("in"), delay);
        io.disconnect();
      }
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <As ref={ref} className={"reveal " + className} {...rest}>{children}</As>;
}

function AnimatedNumber({ value, duration = 1600, format = (n) => Math.round(n).toLocaleString(), trigger = "scroll" }) {
  const ref = useRef(null);
  const [n, setN] = useState(0);
  const started = useRef(false);
  useEffect(() => {
    if (trigger !== "scroll") return;
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting && !started.current) {
        started.current = true;
        const t0 = performance.now();
        const tick = (t) => {
          const p = Math.min((t - t0) / duration, 1);
          const eased = 1 - Math.pow(1 - p, 3);
          setN(value * eased);
          if (p < 1) requestAnimationFrame(tick);
          else setN(value);
        };
        requestAnimationFrame(tick);
      }
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [value, duration, trigger]);
  useEffect(() => { if (trigger === "live") setN(value); }, [value, trigger]);
  return <span ref={ref}>{format(n)}</span>;
}

Object.assign(window, { AFMark, Brand, Eyebrow, Reveal, AnimatedNumber });