/* global React */
// ====================================================================
// Shared UI utilities: scroll-reveal wrapper + section header.
// ====================================================================

function Reveal({ children, delay = 0, as = "div", className = "", style }) {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } },
      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = as;
  return (
    <Tag
      ref={ref}
      className={"reveal " + (seen ? "in " : "") + className}
      style={{ ...style, transitionDelay: `${delay}ms` }}
    >
      {children}
    </Tag>
  );
}

function SectionHead({ eyebrow, title, sub, align = "left", light = false }) {
  return (
    <div className={"sec-head" + (align === "center" ? " center" : "") + (light ? " light" : "")}>
      <Reveal as="span" className="eyebrow">{eyebrow}</Reveal>
      <Reveal as="h2" className="sec-title" delay={80}>{title}</Reveal>
      {sub && <Reveal as="p" className="sec-sub" delay={140}>{sub}</Reveal>}
    </div>
  );
}

window.Reveal = Reveal;
window.SectionHead = SectionHead;