/* global React, useInView */

const { useRef } = React;

// Section heading with num, title, animated seam line, and optional note.
function SectionHead({ num, title, note }) {
  const ref  = useRef(null);
  const seen = useInView(ref);
  return (
    <div ref={ref} className={`section-head ${seen ? "in" : ""}`}>
      <span className="num">{num}</span>
      <h2>{title}</h2>
      <span className="seam" />
      {note && <span className="note">{note}</span>}
    </div>
  );
}

Object.assign(window, { SectionHead });