/* Shared helpers for the Calming Spot website UI kit.
   Exposes a scroll-reveal hook, a Section wrapper, and the wordmark. */

const { useEffect, useRef, useState } = React;

/* IntersectionObserver-based reveal, adds data-in once element enters view.
   Honors prefers-reduced-motion (CSS handles the no-motion end-state). */
function useReveal(options) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el || shown) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            setShown(true);
            io.disconnect();
          }
        });
      },
      { threshold: 0.16, rootMargin: "0px 0px -8% 0px", ...(options || {}) }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [shown]);
  return [ref, shown];
}

/* Reveal wrapper, fades + rises children into place when scrolled into view. */
function Reveal({ as = "div", delay = 0, className = "", children, ...rest }) {
  const [ref, shown] = useReveal();
  const Tag = as;
  return (
    <Tag
      ref={ref}
      className={["cs-reveal", className].filter(Boolean).join(" ")}
      data-in={shown ? "true" : "false"}
      style={{ transitionDelay: `${delay}ms` }}
      {...rest}
    >
      {children}
    </Tag>
  );
}

/* Full-bleed band with a constrained inner container. tone sets the surface. */
function Section({ id, tone = "dark", className = "", inner = true, children, ...rest }) {
  return (
    <section id={id} className={["cs-section", `cs-section--${tone}`, className].filter(Boolean).join(" ")} {...rest}>
      {inner ? <div className="cs-container">{children}</div> : children}
    </section>
  );
}

/* The Calming Spot wordmark logo. */
function Wordmark({ tone = "ink", small = false }) {
  return (
    <a href="index.html" className={["cs-wordmark", small ? "cs-wordmark--sm" : "", tone === "light" ? "cs-wordmark--light" : ""].filter(Boolean).join(" ")}
       aria-label="Calming Spot, home">
      <img className="cs-wordmark__img" src="assets/logo.png" alt="Calming Spot" />
    </a>
  );
}

Object.assign(window, { useReveal, Reveal, Section, Wordmark });