/* lp/primitives.jsx — Selo, Pill, Eyebrow, Reveal, hooks comuns */

const Seal = ({ className = "seal", fill = "currentColor" }) => (
  <svg className={className} viewBox="0 0 100 65" aria-hidden="true">
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      fill={fill}
      d="M22 5 H78 A28 28 0 0 1 78 60 H22 A28 28 0 0 1 22 5 Z M36 32.5 A14 14 0 1 1 64 32.5 A14 14 0 1 1 36 32.5 Z"
    />
  </svg>
);

const Pill = ({ size = "sm", className = "" }) => (
  <span className={`pill ${size === "lg" ? "pill--lg" : ""} ${className}`} aria-hidden="true" />
);

const Eyebrow = ({ children, withPill = true }) => (
  <span className="eyebrow">
    {withPill && <Pill />}
    <span>{children}</span>
  </span>
);

/* IntersectionObserver-based reveal */
const useReveal = () => {
  const ref = legadoReact.useRef(null);
  legadoReact.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            obs.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12 }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return ref;
};

// alias for hooks
const legadoReact = window.React;

const Reveal = ({ children, className = "", delay = 0, as: Tag = "div", ...rest }) => {
  const ref = useReveal();
  return (
    <Tag
      ref={ref}
      className={`reveal ${className}`}
      style={{ transitionDelay: `${delay}ms` }}
      {...rest}
    >
      {children}
    </Tag>
  );
};

Object.assign(window, { Seal, Pill, Eyebrow, Reveal, useReveal, legadoReact });