// Training section: Chardae's pixie training video as four step cards.
// Desktop: hover a card to play. Phones: swipe, the card in view plays.

const TRAIN_STEPS = [
  ['step-1-sculpt', '01', 'Sculpt', 'Waves shaped by hand, close to the head'],
  ['step-2-set', '02', 'Set', 'Every curl placed and locked in'],
  ['step-3-style', '03', 'Style', 'Heat, shape and the soft finish'],
  ['step-4-reveal', '04', 'Reveal', 'The dollhouse pixie, done right'],
];

function CPTrainFull({ open, onClose }) {
  React.useEffect(() => {
    if (!open) return;
    const k = e => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', k);
    return () => window.removeEventListener('keydown', k);
  }, [open]);
  if (!open) return null;
  return (
    <div className="cp-trainmodal" role="dialog" aria-label="Full pixie process video" onClick={onClose}>
      <div className="box" onClick={e => e.stopPropagation()}>
        <video src="assets/training/full.mp4" poster="assets/training/step-4-reveal.jpg" controls autoPlay muted playsInline />
        <button className="cp-btn white" onClick={onClose}>Close</button>
      </div>
    </div>
  );
}

function CPTrainCard({ id, n, t, d, mobile }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const v = ref.current;
    if (!mobile || !v) return;
    // phones: play the card that is mostly on screen
    const io = new IntersectionObserver(([e]) => { e.intersectionRatio > 0.6 ? v.play().catch(() => {}) : v.pause(); }, { threshold: [0, 0.6, 1] });
    io.observe(v);
    return () => io.disconnect();
  }, [mobile]);
  const play = () => { const v = ref.current; if (v) v.play().catch(() => {}); };
  const stop = () => { const v = ref.current; if (v) { v.pause(); v.currentTime = 0; } };
  const toggle = () => { const v = ref.current; if (v) v.paused ? play() : v.pause(); };
  return (
    <div className="cp-traincard rv" onMouseEnter={mobile ? undefined : play} onMouseLeave={mobile ? undefined : stop} onClick={mobile ? toggle : undefined}>
      <video ref={ref} src={`assets/training/${id}.mp4`} poster={`assets/training/${id}.jpg`} style={{ backgroundImage: `url(assets/training/${id}.jpg)` }} muted loop playsInline preload="none" aria-hidden="true" />
      <span className="num">{n}</span>
      <div className="lbl"><b>{t}</b><small>{d}</small></div>
    </div>
  );
}

function CPTrainSteps() {
  const [full, setFull] = React.useState(false);
  const mobile = React.useMemo(() => window.matchMedia('(hover: none), (max-width: 900px)').matches, []);
  return (
    <section className="cp-trainsteps" id="training" data-screen-label="Training">
      <div className="cp-sechead">
        <div>
          <div className="cp-eyebrow rv">Inside the dollhouse</div>
          <h2 className="cp-h2 rv" style={{ '--d': '.08s' }}>How a dollhouse pixie is made.</h2>
          <p className="cp-body rv" style={{ '--d': '.16s' }}>Trained for the perfect pixie by <a className="cp-credit" href="https://instagram.com/hairfetishshop" target="_blank" rel="noopener">@hairfetishshop</a> in Dallas, Texas.</p>
        </div>
        <div className="btns rv" style={{ '--d': '.2s' }}>
          <button className="cp-btn line" onClick={() => setFull(true)}>Watch the full process</button>
          <a className="cp-btn ink" href="#book">Book your pixie <span className="arr" aria-hidden="true"></span></a>
        </div>
      </div>
      <p className="cp-hint near"><span className="d">Hover to play</span><span className="m">Swipe</span></p>
      <div className="grid">
        {TRAIN_STEPS.map(([id, n, t, d]) => <CPTrainCard key={id} id={id} n={n} t={t} d={d} mobile={mobile} />)}
      </div>
      <CPTrainFull open={full} onClose={() => setFull(false)} />
    </section>
  );
}

Object.assign(window, { CPTraining: CPTrainSteps });