/* global React */
const { useEffect, useRef, useState, useCallback } = React;

/* IntersectionObserver-based reveal hook */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -10% 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function Eyebrow({ children }) { return <span className="eyebrow">{children}</span>; }

function SectionHead({ eyebrow, title, subtitle, align }) {
  return (
    <div className={"section-head " + (align === 'left' ? 'left' : '')}>
      {eyebrow && <span className="eyebrow reveal">{eyebrow}</span>}
      <h2 className="headline reveal reveal-delay-1">{title}</h2>
      {subtitle && <p className="subhead reveal reveal-delay-2">{subtitle}</p>}
    </div>
  );
}

function Placeholder({ variant = "room", label }) {
  return (
    <div className={"ph ph-room " + variant}>
      {label && <span className="ph-label">{label}</span>}
    </div>
  );
}

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