// shared.jsx — small shared pieces used across sections.

function Ornament({ width = 56, color }) {
  return (
    <div className="ornament" aria-hidden="true">
      <span className="bar" style={{ width }} />
      <svg className="star" width="18" height="18" viewBox="-12 -12 24 24" fill="currentColor" style={color ? { color } : null}>
        <path d="M0 -10 L1.6 -1.6 L10 0 L1.6 1.6 L0 10 L-1.6 1.6 L-10 0 L-1.6 -1.6 Z" />
        <path d="M0 -5 L0.8 -0.8 L5 0 L0.8 0.8 L0 5 L-0.8 0.8 L-5 0 L-0.8 -0.8 Z" opacity="0.55" />
      </svg>
      <span className="bar" style={{ width }} />
    </div>
  );
}

// Scroll-reveal: returns a ref to attach; adds .is-in when the element enters view.
function useReveal(options) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (typeof IntersectionObserver === "undefined") { el.classList.add("is-in"); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { e.target.classList.add("is-in"); io.unobserve(e.target); }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px", ...(options || {}) });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

// A reveal wrapper that staggers its delay.
function Reveal({ children, delay = 0, as = "div", className = "", style }) {
  const ref = useReveal();
  const Tag = as;
  return (
    <Tag ref={ref} className={"reveal " + className}
         style={{ transitionDelay: delay ? delay + "ms" : undefined, ...style }}>
      {children}
    </Tag>
  );
}

// Centered section header: eyebrow + ornament + title (en + optional hi) + sub.
function SectionHead({ eyebrow, titleEn, titleHi, sub, center = true, light = false }) {
  return (
    <Reveal className={"sec-head" + (center ? " sec-head--center" : "")}
            style={{ marginBottom: 56, color: light ? "var(--fg-inverse)" : undefined }}>
      {eyebrow && <div className="eyebrow" style={light ? { color: "var(--accent)" } : null}>{eyebrow}</div>}
      <h2 className="sec-title" style={light ? { color: "var(--fg-inverse)" } : null}>
        {titleHi && <span className="hi" lang="hi" style={{ marginBottom: titleEn ? 4 : 0 }}>{titleHi}</span>}
        {titleEn}
      </h2>
      {center && <div style={{ marginTop: 20 }}><Ornament /></div>}
      {sub && <p className="sec-sub" style={light ? { color: "rgba(255,255,234,0.72)" } : null}>{sub}</p>}
    </Reveal>
  );
}

Object.assign(window, { Ornament, useReveal, Reveal, SectionHead });