// web-scenes.jsx — Orchestrates phases for the Web variant with sequenced timing

// Helper: given localTime inside a phase and a sub-event [start, end], return 0..1 progress
function subProgress(localTime, start, end) {
  if (localTime < start) return 0;
  if (localTime > end) return 1;
  return (localTime - start) / (end - start);
}

function WebPhaseScene({ phaseIdx, start, end, title, subtitle, MockupComponent, mockupWidth = 1580, mockupHeight = 780 }) {
  const time = useTime();
  const localTime = time - start;
  if (time < start || time > end) return null;

  const duration = end - start;
  const pEnter = clamp(localTime / 0.5, 0, 1);
  const pExit = clamp((localTime - (duration - 0.3)) / 0.3, 0, 1);
  const opacity = pEnter * (1 - pExit);

  const mx = (1920 - mockupWidth) / 2;
  const my = 150;

  return (
    <div style={{ position: 'absolute', inset: 0, opacity }}>
      <div style={{
        position: 'absolute', left: 100, top: 60,
        fontFamily: DH.serif, fontStyle: 'italic', fontSize: 34,
        color: DH.moss600,
        opacity: pEnter,
        transform: `translateY(${(1 - pEnter) * 8}px)`,
      }}>
        § {String(phaseIdx + 1).padStart(2, '0')} · <span style={{ color: DH.ink }}>{title}</span>
      </div>
      <div style={{
        position: 'absolute', right: 100, top: 72,
        fontFamily: DH.mono, fontSize: 13, letterSpacing: '0.12em',
        color: DH.ink, opacity: pEnter * 0.55,
        textAlign: 'right', textTransform: 'uppercase',
      }}>
        {subtitle}
      </div>

      <div style={{
        position: 'absolute', left: mx, top: my,
        width: mockupWidth, height: mockupHeight,
        borderRadius: 16, overflow: 'hidden',
        background: '#fff',
        boxShadow: `0 30px 80px -20px rgba(36, 69, 58, 0.22), 0 6px 20px -6px rgba(36, 69, 58, 0.12)`,
        transform: `translateY(${(1 - Easing.easeOutCubic(pEnter)) * 14}px) scale(${0.98 + 0.02 * Easing.easeOutCubic(pEnter)})`,
        transformOrigin: 'center',
      }}>
        <MockupComponent localTime={localTime} duration={duration} progress={clamp(localTime / duration, 0, 1)}/>
      </div>
    </div>
  );
}

Object.assign(window, { WebPhaseScene, subProgress });