// ═══════════════════════════════════════════════════════════════
// ACT III — THE NETWORK (30 – 40s, 10 seconds)
// Camera pulls back. The 3 players revealed as nodes in a vast
// volumetric cloud. Thousands of connections. Stats tick up.
// ═══════════════════════════════════════════════════════════════

function Scene_Network({ t }) {
  const secs = t * 10;

  // Phase breakdown:
  // 0.0 – 1.2s   Hand-off bloom — 3 seed dots collapse into core, lobe expands from 0
  // 1.2 – 2.5s   Lobe expands to full radius
  // 2.5 – 7.5s   Orbit + stats climb
  // 7.5 – 10s    Cloud holds, overlay "ONE NETWORK" headline

  const handoff = Math.min(1, secs / 1.2);         // 0..1 over first 1.2s
  const handoffE = handoff * handoff * (3 - 2 * handoff); // smoothstep
  const zoomOut = Math.min(1, Math.max(0, (secs - 0.6) / 2.0)); // delayed slightly
  const orbit = Math.max(0, secs / 10);
  const holdHeadline = Math.min(1, Math.max(0, (secs - 5.5) / 2.0));

  // Rotation: gentle continuous orbit
  const rotY = orbit * Math.PI * 0.9;
  const rotX = Math.sin(orbit * Math.PI * 0.5) * 0.28 - 0.15;

  // Radius grows as we "zoom out" — now starts from 0 so it blooms from the merge point
  const radius = zoomOut * 500;
  const buildUp = Math.min(1, Math.max(0, (secs - 0.4) / 2.2));

  // Seed-dot positions (matching Scene_Exchange silhouette cx/cy)
  // These sit at the converged merge point at the handoff, then the lobe blooms outward
  const seedPositions = [
    { fromX: 260,  fromY: 460 },  // institution
    { fromX: 930,  fromY: 460 },  // trainer
    { fromX: 1600, fromY: 460 },  // enthusiast
  ];

  // Stats count up during orbit phase
  const stats = {
    centers:   Math.floor(easeOut(Math.min(1, secs / 7)) * 1247),
    trainers:  Math.floor(easeOut(Math.min(1, secs / 7)) * 8932),
    members:   Math.floor(easeOut(Math.min(1, secs / 7)) * 142856),
    sessions:  Math.floor(easeOut(Math.min(1, secs / 7)) * 512430),
  };

  return (
    <SceneBG>
      {/* Handoff bloom — huge core flash that matches the Exchange merge point, fades as lobe takes over */}
      <div style={{
        position: 'absolute',
        left: 960 - 400, top: 540 - 400,
        width: 800, height: 800,
        background: `radial-gradient(circle, rgba(204,255,0, ${0.95 * (1 - handoffE)}) 0%, rgba(204,255,0, ${0.35 * (1 - handoffE)}) 18%, rgba(204,255,0, ${0.08 * (1 - handoffE)}) 45%, transparent 70%)`,
        filter: 'blur(10px)',
        zIndex: 2,
        pointerEvents: 'none',
        opacity: handoff < 1 ? 1 : 0,
      }}/>

      {/* Seed dots — the 3 silhouettes arriving as glowing orbs, collapsing into the core */}
      {handoff < 1 && (
        <svg style={{ position: 'absolute', inset: 0, width: 1920, height: 1080, zIndex: 3, pointerEvents: 'none' }}>
          {seedPositions.map((s, i) => {
            // Interpolate from handoff start position → center
            const sx = s.fromX + (960 - s.fromX) * handoffE;
            const sy = s.fromY + (540 - s.fromY) * handoffE;
            const r = 22 * (1 - handoffE * 0.6);
            const opacity = 1 - handoffE * 0.7;
            return (
              <g key={i}>
                <circle cx={sx} cy={sy} r={r * 3}
                  fill="#CCFF00" opacity={opacity * 0.25}
                  style={{ filter: 'blur(20px)' }}/>
                <circle cx={sx} cy={sy} r={r}
                  fill="#CCFF00" opacity={opacity}
                  style={{ filter: 'drop-shadow(0 0 16px #CCFF00)' }}/>
              </g>
            );
          })}
          {/* Streak lines still pulling in (matches Exchange's exit streaks for continuity) */}
          {seedPositions.map((s, i) => {
            const sx = s.fromX + (960 - s.fromX) * handoffE;
            const sy = s.fromY + (540 - s.fromY) * handoffE;
            return (
              <line key={'l' + i}
                x1={sx} y1={sy} x2={960} y2={540}
                stroke="#CCFF00"
                strokeWidth={2.5}
                strokeOpacity={(1 - handoffE) * 0.9}
                style={{ filter: 'drop-shadow(0 0 10px #CCFF00)' }}
              />
            );
          })}
        </svg>
      )}

      {/* Ambient orb glow behind lobe */}
      <div style={{
        position: 'absolute',
        left: 960 - 500, top: 540 - 500,
        width: 1000, height: 1000,
        background: `radial-gradient(circle, rgba(204,255,0, ${0.18 * zoomOut}) 0%, rgba(204,255,0, ${0.05 * zoomOut}) 30%, transparent 65%)`,
        filter: 'blur(30px)',
      }}/>

      {/* The volumetric network */}
      <NetworkLobe
        cx={960} cy={540}
        radius={radius}
        rotY={rotY} rotX={rotX}
        t={secs}
        buildUp={buildUp}
      />

      {/* Stats column — left */}
      <div style={{
        position: 'absolute',
        left: 96, top: '50%', transform: 'translateY(-50%)',
        opacity: Math.min(1, (secs - 1.5) / 1.2),
      }}>
        <div style={{
          fontFamily: FONT_MONO,
          fontSize: 13, color: BRAND.volt,
          letterSpacing: '0.3em', fontWeight: 700,
          marginBottom: 28, textTransform: 'uppercase',
        }}>
          <span style={{ display: 'inline-block', width: 40, height: 2, background: BRAND.volt, verticalAlign: 'middle', marginRight: 14 }}/>
          Act III · Network
        </div>
        <BigStat value={stats.centers}   label="FITNESS CENTERS"/>
        <BigStat value={stats.trainers}  label="TRAINERS"/>
        <BigStat value={stats.members}   label="MEMBERS"/>
        <BigStat value={stats.sessions}  label="SESSIONS / MONTH"/>
      </div>

      {/* Right column — headline once settled */}
      {holdHeadline > 0 && (
        <div style={{
          position: 'absolute',
          right: 96, top: '50%', transform: 'translateY(-50%)',
          textAlign: 'right',
          opacity: holdHeadline,
        }}>
          <div style={{
            fontFamily: FONT_DISPLAY,
            fontSize: 96, fontWeight: 900,
            color: '#fff', letterSpacing: '-0.04em', lineHeight: 0.9,
            transform: `translateX(${(1 - holdHeadline) * 24}px)`,
          }}>
            One<br/>
            <span style={{ color: BRAND.volt, textShadow: `0 0 40px ${BRAND.voltGlow}` }}>network.</span>
          </div>
          <div style={{
            fontFamily: FONT_DISPLAY,
            fontSize: 22, fontWeight: 500,
            color: BRAND.textSecondary,
            marginTop: 22,
            maxWidth: 420,
            marginLeft: 'auto',
            textAlign: 'right',
            letterSpacing: '-0.005em',
            lineHeight: 1.3,
          }}>
            Every center, every trainer, every member —<br/>
            moving in sync.
          </div>
        </div>
      )}
    </SceneBG>
  );
}

function BigStat({ value, label }) {
  return (
    <div style={{ marginBottom: 22 }}>
      <div style={{
        fontFamily: FONT_DISPLAY,
        fontSize: 56, fontWeight: 800,
        color: '#fff', lineHeight: 1,
        letterSpacing: '-0.03em',
        fontVariantNumeric: 'tabular-nums',
      }}>
        {value.toLocaleString('en-IN')}
      </div>
      <div style={{
        fontFamily: FONT_MONO,
        fontSize: 11, color: BRAND.volt,
        letterSpacing: '0.24em', fontWeight: 700,
        marginTop: 6, textTransform: 'uppercase',
      }}>{label}</div>
    </div>
  );
}

function easeOut(x) {
  return 1 - Math.pow(1 - x, 3);
}

// ═══════════════════════════════════════════════════════════════
// ACT IV — LOGO LOCKUP (40 – 45s, 5 seconds)
// ═══════════════════════════════════════════════════════════════

function Scene_Logo({ t }) {
  const secs = t * 5;

  // 0.0 – 1.0s   Network fades into background grid
  // 1.0 – 2.5s   Logo fades in center, scales up
  // 2.5 – 4.0s   Tagline below, CTA
  // 4.0 – 5.0s   Hold + subtle breathe before loop

  const logoReveal = Math.min(1, Math.max(0, (secs - 0.3) / 1.2));
  const taglineReveal = Math.min(1, Math.max(0, (secs - 1.8) / 1.1));
  const ctaReveal = Math.min(1, Math.max(0, (secs - 2.8) / 0.9));

  return (
    <SceneBG>
      {/* Faint network behind */}
      <div style={{ opacity: 0.3 }}>
        <NetworkLobe
          cx={960} cy={540}
          radius={420}
          rotY={secs * 0.15}
          rotX={-0.15}
          t={secs}
          buildUp={1}
          showConnections={true}
        />
      </div>

      {/* Logo lockup */}
      <div style={{
        position: 'absolute',
        left: '50%', top: '42%',
        transform: `translate(-50%, -50%) scale(${0.85 + logoReveal * 0.15})`,
        opacity: logoReveal,
        textAlign: 'center',
      }}>
        {/* Logo mark */}
        <div style={{
          display: 'inline-block',
          filter: `drop-shadow(0 0 40px ${BRAND.voltGlow})`,
          marginBottom: 32,
        }}>
          <LogoMark size={140} glow={true}/>
        </div>
        {/* Wordmark */}
        <div style={{
          fontFamily: FONT_DISPLAY,
          fontSize: 160,
          fontWeight: 900,
          letterSpacing: '-0.045em',
          lineHeight: 1,
          color: '#fff',
        }}>
          <span>Fit</span>
          <span style={{
            color: BRAND.volt,
            textShadow: `0 0 60px ${BRAND.voltGlow}`,
          }}>Nexus</span>
        </div>
      </div>

      {/* Tagline */}
      <div style={{
        position: 'absolute',
        left: '50%', top: '74%',
        transform: `translate(-50%, 0) translateY(${(1 - taglineReveal) * 16}px)`,
        opacity: taglineReveal,
        textAlign: 'center',
        fontFamily: FONT_DISPLAY,
      }}>
        <div style={{
          fontSize: 36,
          fontWeight: 500,
          color: '#fff',
          letterSpacing: '-0.015em',
        }}>
          Where all fitness paths <span style={{ color: BRAND.volt, fontWeight: 700 }}>converge</span>.
        </div>
      </div>

      {/* CTA line */}
      <div style={{
        position: 'absolute',
        left: '50%', bottom: '12%',
        transform: `translate(-50%, 0) translateY(${(1 - ctaReveal) * 16}px)`,
        opacity: ctaReveal * 0.5,
        fontFamily: FONT_MONO,
        fontWeight: 500,
        fontSize: 14,
        color: BRAND.textSecondary,
        letterSpacing: '0.15em',
        textTransform: 'uppercase',
      }}>
        Start free today
      </div>
    </SceneBG>
  );
}

Object.assign(window, { Scene_Network, Scene_Logo, easeOut });