// Sub-components for the WAKEDIAMOND site

const DiamondMark = ({ size = 18, glow = true }) =>
<span
  className="dia-mark"
  style={{
    width: size,
    height: size,
    display: "inline-block",
    filter: glow ? `drop-shadow(0 0 ${size * 0.8}px var(--accent))` : "none",
    flexShrink: 0,
    backgroundImage: "url(assets/diamond-yellow.svg)",
    backgroundSize: "contain",
    backgroundRepeat: "no-repeat",
    backgroundPosition: "center"
  }}
  aria-hidden="true" />;



const Cursor = () => {
  const dot = React.useRef(null);
  const ring = React.useRef(null);
  React.useEffect(() => {
    let dx = 0,dy = 0,rx = 0,ry = 0,mx = 0,my = 0;
    let raf;
    const onMove = (e) => {mx = e.clientX;my = e.clientY;};
    window.addEventListener("mousemove", onMove);
    const tick = () => {
      dx += (mx - dx) * 0.45;
      dy += (my - dy) * 0.45;
      rx += (mx - rx) * 0.12;
      ry += (my - ry) * 0.12;
      if (dot.current) dot.current.style.transform = `translate(${dx}px, ${dy}px) translate(-50%, -50%)`;
      if (ring.current) ring.current.style.transform = `translate(${rx}px, ${ry}px) translate(-50%, -50%)`;
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);

    const onDown = () => {if (ring.current) ring.current.style.width = ring.current.style.height = "20px";};
    const onUp = () => {if (ring.current) {ring.current.style.width = ring.current.style.height = "36px";}};
    window.addEventListener("mousedown", onDown);
    window.addEventListener("mouseup", onUp);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("mousedown", onDown);
      window.removeEventListener("mouseup", onUp);
    };
  }, []);
  return (
    <>
      <div ref={dot} className="cursor-dot" />
      <div ref={ring} className="cursor-ring" />
    </>);

};

const Reveal = ({ children, className = "", delay = 0 }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setTimeout(() => el.classList.add("in"), delay);
        io.unobserve(el);
      }
    }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <div ref={ref} className={`reveal ${className}`}>{children}</div>;
};

window.DiamondMark = DiamondMark;
window.Cursor = Cursor;
window.Reveal = Reveal;