/* global React */
(() => {
const { useState, useEffect, useRef } = React;
const RED = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

/* Abstract only: bar = a question slot, never its content. [width%, duplicate?, tag] */
const COLS = [
  { k: 'a', name: 'Partner 01', sub: 'Kantar', rows: [[94], [72, 1, 'asked twice'], [86], [62], [80, 1, 'same intent, other wording'], [68]] },
  { k: 'b', name: 'Partner 02', sub: 'Ipsos', rows: [[82, 1, 'overlaps 01'], [90], [66], [76, 1, 'different scale'], [58], [88]] },
  { k: 'c', name: 'Partner 03', sub: 'Eye Square', rows: [[74], [88], [64, 1, 'overlaps 02'], [84], [70, 1, 'asked twice'], [60]] }
];
const OUT = [96, 84, 90, 76, 88, 70, 80];

function UniStory() {
  const wrap = useRef(null);
  const [p, setP] = useState(0);
  const [stat, setStat] = useState(true);
  useEffect(() => {
    const small = () => RED || window.innerWidth < 860;
    const measure = () => {
      if (small()) { setStat(true); setP(1); return; }
      setStat(false);
      const el = wrap.current; if (!el) return;
      const r = el.getBoundingClientRect();
      const h = el.offsetHeight - window.innerHeight;
      setP(Math.min(1, Math.max(0, -r.top / Math.max(1, h))));
    };
    let last = 0;
    const onScroll = () => { if (Date.now() - last > 40) { last = Date.now(); measure(); } };
    measure();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); };
  }, []);
  const ph = stat ? 4 : p > 0.78 ? 4 : p > 0.56 ? 3 : p > 0.3 ? 2 : p > 0.05 ? 1 : 0;
  const done = ph >= 4;
  const status = done
    ? 'One questionnaire. Nothing important lost.'
    : ph >= 3 ? 'Keeping what earns its place, rewriting the rest'
      : ph >= 2 ? 'Compared question by question, with each partner'
        : 'Same area of shopping behaviour, three ways of asking';
  return (
    <div className={'uq' + (stat ? ' static' : '')} ref={wrap} data-screen-label="Unilever: three methodologies become one">
      <div className="uq-stage">
        <div className={'uq-read' + (done ? ' done' : '')}>
          <span className="uq-n" key={done ? 'one' : 'three'}>{done ? '01' : '03'}</span>
          <span className="uq-nk">{done ? 'aligned questionnaire' : 'partner methodologies'}</span>
          <span className="uq-status" key={status}>{status}</span>
        </div>
        <div className="uq-field">
          {COLS.map((c) =>
          <div className={'uq-col ' + c.k + (ph >= 1 ? ' on' : '') + (!stat && ph >= 3 ? ' cv' : '')} key={c.k}>
            <span className="uq-ch">{c.name}<i>{c.sub}</i></span>
            <div className="uq-rows">
              {c.rows.map(([w, dup, tag], i) =>
              <div className={'uq-row' + (dup && ph >= 2 ? ' dup' : '')} key={i} style={{ width: w + '%', transitionDelay: (i * 70) + 'ms' }}>
                <i></i>
                {tag && <em>{tag}</em>}
              </div>)}
            </div>
          </div>)}
          <div className={'uq-out' + (ph >= 3 ? ' on' : '')} aria-hidden={ph < 3}>
            <div className="uq-out-inner">
              <span className="uq-ch big">Aligned questionnaire<i>designed by me · replaces all three</i></span>
              <div className="uq-rows">
                {OUT.map((w, i) =>
                <div className="uq-row out" key={i} style={{ width: w + '%', transitionDelay: (i * 80 + 140) + 'ms' }}><i></i></div>)}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>);
}

window.UniStory = UniStory;
})();