// ═══════════════════════════════════════════
// MAIN SCENE — Split screen + intro/outro
// ═══════════════════════════════════════════

function Scene() {
  const t = useTime();
  const dur = 16;

  // Intro: 0→1.5s, Main: 1.5→14, Outro: 14→16
  const introP = Math.min(t / 1.2, 1);
  const outroP = Math.max(0, Math.min((t - 14) / 1.5, 1));

  // Eased
  const introEase = Easing.easeOutCubic(introP);
  const outroEase = Easing.easeInCubic(outroP);

  // Main timer for left/right (starts after intro)
  const mainT = Math.max(0, Math.min(t - 1.5, 12.5));

  // Divider animation
  const dividerGlow = 0.3 + 0.2 * Math.sin(t * 1.5);

  return (
    <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column' }}>
      {/* Title bar */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, zIndex: 20,
        height: 56,
        opacity: introEase * (1 - outroEase),
        transform: `translateY(${(1 - introEase) * -20}px)`,
      }}/>

      {/* Split screen */}
      <div style={{
        flex: 1, display: 'flex', position: 'relative',
        opacity: introEase,
        transform: `scale(${0.96 + 0.04 * introEase})`,
      }}>
        {/* LEFT */}
        <LeftSide t={mainT} duration={12.5} />

        {/* CENTER DIVIDER */}
        <div style={{
          width: 3, background: `linear-gradient(180deg, transparent, rgba(184,148,106,${dividerGlow}), transparent)`,
          position: 'relative', zIndex: 10,
          boxShadow: `0 0 20px rgba(184,148,106,${dividerGlow * 0.3})`,
        }}>
          <div style={{
            position: 'absolute', top: '50%', left: '50%',
            transform: 'translate(-50%,-50%)',
            width: 36, height: 36, borderRadius: 18,
            background: '#1A1A20',
            border: '2px solid rgba(184,148,106,0.4)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'DM Sans', fontSize: 11, fontWeight: 700, color: '#B8946A',
          }}>
            VS
          </div>
        </div>

        {/* RIGHT */}
        <RightSide t={mainT} duration={12.5} />
      </div>


    </div>
  );
}

function App() {
  return (
    <Stage width={1280} height={720} duration={16} background="#111" loop={true} autoplay={true} showBar={false} persistKey="wiboo-vs">
      <Scene />
    </Stage>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);