// ═══════════════════════════════════════════════════════════════
// ACT I — SPARK (0 – 9s)
// The three players are introduced as nodes in a live network.
// One spark in the middle ignites them, first connections form.
// ═══════════════════════════════════════════════════════════════

function Scene_Spark({ t }) {
  // t is 0..1 across 9 seconds
  const secs = t * 9;

  // Phase breakdown (within this scene):
  // 0.0 – 1.8s   dark / spark forms in center
  // 1.8 – 3.5s   spark expands, reveals 3 silhouettes
  // 3.5 – 6.0s   labels settle; first connections animate in
  // 6.0 – 9.0s   tagline; 3 players held in position

  const sparkIn = Math.min(1, secs / 1.6);
  const reveal = Math.min(1, Math.max(0, (secs - 1.6) / 1.6));
  const connect = Math.min(1, Math.max(0, (secs - 3.4) / 1.4));
  const settle = Math.min(1, Math.max(0, (secs - 5.5) / 1.8));

  // Player positions (SAME as Scene_Exchange for seamless transition)
  const players = [
    { role: 'institution', name: 'Iron Peak',  tag: 'FITNESS CENTER', meta: 'Bengaluru · 6 branches',  x: 160, y: 300, cx: 260, cy: 460 },
    { role: 'trainer',     name: 'Coach Ryan', tag: 'TRAINER',        meta: 'Strength · 8 yrs',        x: 830, y: 300, cx: 930, cy: 460 },
    { role: 'enthusiast',  name: 'Samira',     tag: 'ENTHUSIAST',     meta: '21-day streak',           x: 1500, y: 300, cx: 1600, cy: 460 },
  ];

  // Spark → node position (used for initial spawn)
  const center = { x: 960, y: 540 };

  return (
    <SceneBG>
      {/* Radial spark in the center — pulses, then fades as silhouettes appear */}
      <div style={{
        position: 'absolute',
        left: center.x - 500, top: center.y - 500,
        width: 1000, height: 1000,
        background: `radial-gradient(circle,
          rgba(204,255,0, ${0.7 * sparkIn * (1 - reveal * 0.6)}) 0%,
          rgba(204,255,0, ${0.3 * sparkIn * (1 - reveal)}) 25%,
          transparent 55%)`,
        filter: 'blur(8px)',
      }}/>

      {/* Initial spark dot */}
      {sparkIn > 0 && reveal < 1 && (
        <div style={{
          position: 'absolute',
          left: center.x - 10, top: center.y - 10,
          width: 20, height: 20,
          borderRadius: '50%',
          background: BRAND.volt,
          opacity: 1 - reveal,
          transform: `scale(${0.3 + sparkIn * 2 + reveal * 1.5})`,
          boxShadow: `0 0 60px ${BRAND.volt}, 0 0 120px ${BRAND.volt}, 0 0 200px rgba(204,255,0,0.4)`,
        }}/>
      )}

      {/* Player cards appear from center, fly to their positions */}
      {players.map((p, i) => {
        const cardReveal = Math.max(0, Math.min(1, (secs - 1.6 - i * 0.15) / 1.2));
        const x = center.x - 130 + (p.x - center.x + 130) * cardReveal;
        const y = center.y - 170 + (p.y - center.y + 170) * cardReveal;
        return (
          <PlayerCard
            key={i}
            x={x} y={y}
            role={p.role}
            name={p.name}
            tag={p.tag}
            meta={p.meta}
            highlighted={settle > 0.3}
            opacity={cardReveal}
            scale={0.5 + cardReveal * 0.5}
          />
        );
      })}

      {/* Connection lines between the 3 players — drawn as connect progresses */}
      {connect > 0 && (
        <svg
          style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'visible' }}
          viewBox="0 0 1920 1080"
        >
          <defs>
            <linearGradient id="sparkLine" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" stopColor="#CCFF00" stopOpacity="0.0"/>
              <stop offset="50%" stopColor="#CCFF00" stopOpacity="0.9"/>
              <stop offset="100%" stopColor="#CCFF00" stopOpacity="0.0"/>
            </linearGradient>
          </defs>
          {/* Institution ↔ Trainer */}
          <line
            x1={players[0].cx} y1={players[0].cy}
            x2={players[0].cx + (players[1].cx - players[0].cx) * Math.min(1, connect * 1.5)}
            y2={players[0].cy + (players[1].cy - players[0].cy) * Math.min(1, connect * 1.5)}
            stroke="url(#sparkLine)"
            strokeWidth="2"
            style={{ filter: 'drop-shadow(0 0 6px #CCFF00)' }}
          />
          {/* Trainer ↔ Enthusiast */}
          <line
            x1={players[1].cx} y1={players[1].cy}
            x2={players[1].cx + (players[2].cx - players[1].cx) * Math.min(1, Math.max(0,(connect-0.3)) * 1.6)}
            y2={players[1].cy + (players[2].cy - players[1].cy) * Math.min(1, Math.max(0,(connect-0.3)) * 1.6)}
            stroke="url(#sparkLine)"
            strokeWidth="2"
            style={{ filter: 'drop-shadow(0 0 6px #CCFF00)' }}
          />
          {/* Institution ↔ Enthusiast (arc — goes under through center) */}
          {connect > 0.55 && (
            <path
              d={`M ${players[0].cx} ${players[0].cy} Q 960 780 ${players[2].cx} ${players[2].cy}`}
              fill="none"
              stroke="#CCFF00"
              strokeOpacity={Math.min(1, (connect - 0.55) * 2.5) * 0.6}
              strokeWidth="1.5"
              strokeDasharray="6 8"
              style={{ filter: 'drop-shadow(0 0 4px #CCFF00)' }}
            />
          )}
        </svg>
      )}

      {/* Intro headline — bottom-left */}
      <div style={{
        position: 'absolute',
        left: 96, bottom: 160,
        opacity: settle,
        transform: `translateY(${(1 - settle) * 24}px)`,
      }}>
        <div style={{
          fontFamily: FONT_MONO,
          fontSize: 13,
          color: BRAND.volt,
          letterSpacing: '0.3em',
          fontWeight: 700,
          marginBottom: 14,
          textTransform: 'uppercase',
        }}>
          <span style={{ display: 'inline-block', width: 40, height: 2, background: BRAND.volt, verticalAlign: 'middle', marginRight: 14 }}/>
          Act I · The Spark
        </div>
        <div style={{
          fontFamily: FONT_DISPLAY,
          fontSize: 84,
          fontWeight: 800,
          color: '#fff',
          letterSpacing: '-0.035em',
          lineHeight: 0.95,
          maxWidth: 1100,
        }}>
          Three players.<br/>
          <span style={{ color: BRAND.volt, textShadow: `0 0 40px ${BRAND.voltGlow}` }}>One network.</span>
        </div>
      </div>

      {/* Corner stat ticker */}
      {settle > 0.4 && (
        <div style={{
          position: 'absolute',
          right: 96, bottom: 160,
          textAlign: 'right',
          opacity: (settle - 0.4) / 0.6,
          fontFamily: FONT_MONO,
        }}>
          <div style={{ fontSize: 11, color: BRAND.textMeta, letterSpacing: '0.2em', marginBottom: 8 }}>
            LIVE · CONNECTIONS FORMING
          </div>
          <div style={{ display: 'flex', gap: 32, justifyContent: 'flex-end' }}>
            <Stat value="3" label="roles"/>
            <Stat value="1" label="platform"/>
            <Stat value="∞" label="intersections"/>
          </div>
        </div>
      )}
    </SceneBG>
  );
}

function Stat({ value, label }) {
  return (
    <div>
      <div style={{ fontFamily: FONT_DISPLAY, fontSize: 32, fontWeight: 800, color: '#fff', lineHeight: 1 }}>
        {value}
      </div>
      <div style={{ fontFamily: FONT_MONO, fontSize: 10, color: BRAND.textTertiary, letterSpacing: '0.2em', textTransform: 'uppercase', marginTop: 4 }}>
        {label}
      </div>
    </div>
  );
}

Object.assign(window, { Scene_Spark });