/* VRIZA — shared UI helpers. Exports to window: Reveal, Eyebrow, SectionHead, Placeholder, Icon */
(function () {
  const { useEffect, useRef, useState } = React;

  function Reveal({ children, delay = 0, as = "div", className = "", style = {} }) {
    const ref = useRef(null);
    const [seen, setSeen] = useState(false);
    useEffect(() => {
      const el = ref.current;
      if (!el) return;
      let done = false;
      const reveal = () => { if (!done) { done = true; setSeen(true); } };
      const check = () => {
        if (done) return;
        const vh = window.innerHeight || 800;
        const r = el.getBoundingClientRect();
        if (r.top < vh * 0.92 && r.bottom > -60) reveal();
      };
      // Run after layout has settled, then watch scroll/resize.
      const raf = requestAnimationFrame(check);
      window.addEventListener("scroll", check, { passive: true });
      window.addEventListener("resize", check);
      // Guaranteed failsafe: content is never left hidden.
      const tm = setTimeout(reveal, 1200);
      return () => {
        cancelAnimationFrame(raf);
        clearTimeout(tm);
        window.removeEventListener("scroll", check);
        window.removeEventListener("resize", check);
      };
    }, []);
    return React.createElement(
      as,
      { ref, className: "reveal " + (seen ? "in " : "") + className, style: Object.assign({ transitionDelay: delay + "ms" }, style) },
      children
    );
  }

  function Eyebrow({ children, center }) {
    return React.createElement("span", { className: "eyebrow" + (center ? " center" : "") }, children);
  }

  function SectionHead({ eyebrow, title, sub, center, children }) {
    return React.createElement(
      "div",
      { className: "section-head" + (center ? " center" : "") },
      eyebrow && React.createElement(Eyebrow, { center }, eyebrow),
      React.createElement("h2", null, title),
      sub && React.createElement("p", null, sub),
      children
    );
  }

  function Placeholder({ label, style = {}, className = "" }) {
    return React.createElement(
      "div",
      { className: "ph " + className, style },
      React.createElement("span", null, label)
    );
  }

  function Icon({ name, ...rest }) {
    const C = window.Icons && window.Icons[name];
    return C ? React.createElement(C, rest) : null;
  }

  Object.assign(window, { Reveal, Eyebrow, SectionHead, Placeholder, Icon });
})();