/* Reusable UI primitives */
const { useState, useEffect, useRef, useCallback } = React;

function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { el.classList.add("in"); io.unobserve(el); } });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

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

function HeadingBlock({ eyebrow, title, subtitle }) {
  return (
    <Reveal className="heading-block">
      {eyebrow && <p className="eyebrow-serif">{eyebrow}</p>}
      <h2 className="title f-display">{title}</h2>
      <span className="dbl-rule" />
      {subtitle && <p className="subtitle">{subtitle}</p>}
    </Reveal>
  );
}

function Chevron({ dir = "left", size = 30 }) {
  const d = dir === "left" ? "M19 6 L9 16 L19 26" : "M13 6 L23 16 L13 26";
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.2">
      <path d={d} />
    </svg>
  );
}

function CornerOrnaments() {
  return (
    <>
      <span className="corner-orn tl" />
      <span className="corner-orn tr" />
      <span className="corner-orn bl" />
      <span className="corner-orn br" />
    </>
  );
}

Object.assign(window, { useReveal, Reveal, HeadingBlock, Chevron, CornerOrnaments });