// Reusable atomic primitives for the W&B marketing site
const { useEffect, useRef, useState } = React;

function Eyebrow({ children, noRules = false }) {
  return (
    <span className={"eyebrow" + (noRules ? " no-rules" : "")}>{children}</span>
  );
}

function Reveal({ children, delay = 0, as = "div", className = "" }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => e.isIntersecting && setShown(true)),
      { threshold: 0.12 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = as;
  return (
    <Tag
      ref={ref}
      style={{ transitionDelay: shown ? `${delay}ms` : "0ms" }}
      className={`reveal ${shown ? "in" : ""} ${className}`}
    >
      {children}
    </Tag>
  );
}

function Divider({ kind = "eye-stars" }) {
  const src = `./assets/ornaments/divider-${kind}.svg`;
  return (
    <div className="section-divider" aria-hidden="true">
      <img src={src} alt="" />
    </div>
  );
}

function SectionHead({ eyebrow, title, lede, ornaments = ["star-seven", "moon-full", "star-seven"] }) {
  // title and lede may be either an HTML string or a React node (JSX)
  const renderContent = (val, Tag, className) => {
    if (val == null) return null;
    if (typeof val === "string") {
      return <Tag className={className} dangerouslySetInnerHTML={{ __html: val }} />;
    }
    return <Tag className={className}>{val}</Tag>;
  };
  return (
    <Reveal className="sec-head">
      {eyebrow ? <Eyebrow>{eyebrow}</Eyebrow> : null}
      {renderContent(title, "h2", undefined)}
      {renderContent(lede, "div", "lede")}
      <div className="ornament-row" aria-hidden="true">
        {ornaments.map((o, i) => (
          <img key={i} src={`./assets/ornaments/${o}.svg`} alt="" />
        ))}
      </div>
    </Reveal>
  );
}

function Marquee({ items }) {
  const doubled = [...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="track">
        {doubled.map((it, i) => (
          <span key={i}>
            {it}
            <span className="dot"> · </span>
          </span>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Eyebrow, Reveal, Divider, SectionHead, Marquee });