/* global React, EXPERIENCE, SectionHead, useInView */

const { useRef } = React;

function Experience() {
  const ref  = useRef(null);
  const seen = useInView(ref);

  return (
    <section id="experience">
      <SectionHead num="04 / 05" title="Experience" note="reverse-chrono" />
      <div ref={ref} className={`exp-grid ${seen ? "in" : ""}`}>
        {EXPERIENCE.map((e, i) => (
          <div className="exp-row" key={i}>
            <div className="date">{e.date}</div>
            <div className="body">
              <div className="role">{e.role}</div>
              <div className="co">{e.co}</div>
              <ul>
                {e.bullets.map((b, j) => <li key={j}>{b}</li>)}
              </ul>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Experience });