/* global React, useInViewProgress, clamp, lerp, easeOut, easeInOut */
const { useRef: _sRef } = React;

function Shift() {
  const ref = _sRef(null);
  const p = useInViewProgress(ref, { enterAt: 0.8, exitAt: 0.2 });
  const t = easeInOut(clamp(p * 1.3, 0, 1));
  const cols = Math.round(lerp(7, 15, t));

  const cells = [];
  for (let i = 0; i < cols; i++) {
    const isWeek = t < 0.5;
    const label = isWeek ? ['MON','TUE','WED','THU','FRI','SAT','SUN'][i] : `W${String(i+1).padStart(2,'0')}`;
    const num = isWeek ? (4+i) : (i+1);
    let state = 'empty';
    if (isWeek) {
      if (i < 3) state = 'filled';
      else if (i === 3) state = 'now';
      else state = 'future';
    } else {
      if (i < 10) state = 'filled';
      else if (i === 10) state = 'now';
      else state = 'future';
    }
    cells.push({ label, num, state });
  }

  return (
    <section className="sec page" id="system" ref={ref}>
      <div className="phase-num" style={{ top: '10%', right: '-2%', transform: `translateY(${p*60}px)` }}>03</div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 40 }}>
        <div className="section-label"><span className="dot"></span><span className="mono">Phase / 04 · Shift</span></div>
        <div className="mono mono-sm" style={{ color: 'var(--olive)' }}>ZOOM · {Math.round(t*100)}%</div>
      </div>

      <div className="shift-head">
        <div className="claim"><span className="strike">Next week</span>.</div>
        <div className="claim">Next <span className="highlight">semester</span>.</div>
      </div>

      <div className="calendar-stage">
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
          <div className="mono mono-sm">{t < 0.5 ? 'WEEK 07 · OCT 20 – 26' : 'FALL 2026 · 15 WEEKS'}</div>
          <div className="mono mono-sm">{t < 0.5 ? '7 days' : '105 days'}</div>
        </div>
        <div className="cal-row" style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}>
          {cells.map((c, i) => (
            <div key={i} className={`cal-cell ${c.state === 'filled' ? 'filled' : ''} ${c.state === 'now' ? 'filled now' : ''} ${c.state === 'future' ? 'future' : ''}`}>
              <div className="w">{c.label}</div>
              <div className="n">{String(c.num).padStart(2, '0')}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Shift });