// Ambient layer: petals, cursor ring
const { useEffect, useState, useRef } = React;

function SakuraPetals({ count = 22 }) {
  const petals = React.useMemo(() => {
    return Array.from({ length: count }).map((_, i) => ({
      id: i,
      left: Math.random() * 100,
      dx: (Math.random() * 240 - 120) + "px",
      delay: Math.random() * 18,
      duration: 14 + Math.random() * 18,
      scale: 0.5 + Math.random() * 1.1,
      opacity: 0.3 + Math.random() * 0.5,
    }));
  }, [count]);
  return (
    <>
      {petals.map(p => (
        <span
          key={p.id}
          className="petal"
          style={{
            left: `${p.left}%`,
            "--dx": p.dx,
            animationDelay: `${p.delay}s`,
            animationDuration: `${p.duration}s`,
            transform: `scale(${p.scale})`,
            opacity: p.opacity,
          }}
        />
      ))}
    </>
  );
}

function CursorRing() {
  const ref = useRef(null);
  useEffect(() => {
    let raf, tx = 0, ty = 0, cx = 0, cy = 0;
    const onMove = (e) => { tx = e.clientX; ty = e.clientY; };
    const tick = () => {
      cx += (tx - cx) * 0.2;
      cy += (ty - cy) * 0.2;
      if (ref.current) {
        ref.current.style.left = cx + "px";
        ref.current.style.top = cy + "px";
      }
      raf = requestAnimationFrame(tick);
    };
    window.addEventListener("mousemove", onMove);
    raf = requestAnimationFrame(tick);
    return () => { cancelAnimationFrame(raf); window.removeEventListener("mousemove", onMove); };
  }, []);
  return <div ref={ref} className="cursor-ring" />;
}

Object.assign(window, { SakuraPetals, CursorRing });