/* Lightweight React Bits-inspired components adapted for Mentium. */
const { useEffect, useRef, useState } = React;

function useAnimePageMotion() {
  useEffect(() => {
    const animate = window.anime?.animate;
    const stagger = window.anime?.stagger;
    if (!animate || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

    animate(".hero-copy > *", {
      opacity: { from: 0 },
      y: { from: 16 },
      delay: stagger(80, { start: 80 }),
      duration: 620,
      ease: "out(4)"
    });

    animate(".hero-demo", {
      opacity: { from: 0 },
      x: { from: 18 },
      scale: { from: .985 },
      delay: 260,
      duration: 760,
      ease: "out(4)"
    });
  }, []);
}

function animateDemoSources(container) {
  const animate = window.anime?.animate;
  const stagger = window.anime?.stagger;
  if (!animate || !container || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
  const sources = container.querySelectorAll(".m-src");
  if (!sources.length) return;
  animate(sources, {
    opacity: { from: 0 },
    y: { from: 7 },
    scale: { from: .94 },
    delay: stagger(70),
    duration: 360,
    ease: "out(3)"
  });
}

function PricingMotion() {
  useEffect(() => {
    const section = document.getElementById("pricing");
    const animate = window.anime?.animate;
    const stagger = window.anime?.stagger;
    if (!section || !animate || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

    const observer = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting) return;
      observer.disconnect();

      animate("#pricing .pricing-tilt", {
        opacity: { from: 0 },
        y: { from: 18 },
        delay: stagger(90),
        duration: 560,
        ease: "out(4)"
      });
      animate("#pricing .price-features li", {
        opacity: { from: 0 },
        x: { from: -8 },
        delay: stagger(34, { start: 240 }),
        duration: 360,
        ease: "out(3)"
      });
      animate("#pricing .price-row strong", {
        opacity: { from: 0 },
        scale: { from: .86 },
        delay: stagger(90, { start: 180 }),
        duration: 520,
        ease: "out(4)"
      });
    }, { threshold: .22 });

    observer.observe(section);
    return () => observer.disconnect();
  }, []);
  return null;
}

function SpotlightCard({ children, className = "", spotlightColor = "rgba(91, 140, 255, .2)" }) {
  const ref = useRef(null);

  const onPointerMove = (event) => {
    const card = ref.current;
    if (!card) return;
    const rect = card.getBoundingClientRect();
    card.style.setProperty("--spot-x", `${event.clientX - rect.left}px`);
    card.style.setProperty("--spot-y", `${event.clientY - rect.top}px`);
    card.style.setProperty("--spot-color", spotlightColor);
  };

  return (
    <div
      ref={ref}
      className={`rb-spotlight ${className}`}
      onPointerMove={onPointerMove}
      onPointerEnter={onPointerMove}
    >
      {children}
    </div>
  );
}

function RotatingText({ texts, className = "", interval = 2300 }) {
  const [index, setIndex] = useState(0);
  const [phase, setPhase] = useState("in");

  useEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const timer = setInterval(() => {
      setPhase("out");
      setTimeout(() => {
        setIndex((current) => (current + 1) % texts.length);
        setPhase("in");
      }, 260);
    }, interval);
    return () => clearInterval(timer);
  }, [texts.length, interval]);

  return (
    <span className={`rb-rotate ${phase} ${className}`} aria-live="polite">
      {texts[index]}
    </span>
  );
}

function Magnet({ children, className = "", strength = 16 }) {
  const ref = useRef(null);

  const move = (event) => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const element = ref.current;
    if (!element) return;
    const rect = element.getBoundingClientRect();
    const x = (event.clientX - rect.left - rect.width / 2) / strength;
    const y = (event.clientY - rect.top - rect.height / 2) / strength;
    element.style.transform = `translate3d(${x}px, ${y}px, 0)`;
  };

  const reset = () => {
    if (ref.current) ref.current.style.transform = "";
  };

  return (
    <span className={`rb-magnet ${className}`} onPointerMove={move} onPointerLeave={reset}>
      <span className="rb-magnet-inner" ref={ref}>{children}</span>
    </span>
  );
}

function TiltCard({ children, className = "", maxTilt = 2.4 }) {
  const ref = useRef(null);

  const move = (event) => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches || window.innerWidth < 961) return;
    const element = ref.current;
    if (!element) return;
    const rect = element.getBoundingClientRect();
    const x = (event.clientX - rect.left) / rect.width - .5;
    const y = (event.clientY - rect.top) / rect.height - .5;
    element.style.transform = `perspective(900px) rotateX(${-y * maxTilt}deg) rotateY(${x * maxTilt}deg) translateY(-2px)`;
  };

  const reset = () => {
    if (ref.current) ref.current.style.transform = "";
  };

  return (
    <div ref={ref} className={`rb-tilt ${className}`} onPointerMove={move} onPointerLeave={reset}>
      {children}
    </div>
  );
}

function ShinyText({ children, className = "" }) {
  return <span className={`rb-shiny ${className}`}>{children}</span>;
}

Object.assign(window, { SpotlightCard, RotatingText, Magnet, TiltCard, ShinyText, PricingMotion, useAnimePageMotion, animateDemoSources });