// SceneTeams.jsx — Beat 4: Teams + round-robin
// Time window: 10.8 – 13.5s

function SceneTeams() {
  const { localTime } = useSprite();

  const entryOp = interpolate([0, 0.4], [0, 1], Easing.easeOutCubic)(localTime);
  const exitT = clamp((localTime - 2.3) / 0.4, 0, 1);
  const exitOp = 1 - Easing.easeInCubic(exitT);

  const members = [
    { name: 'Mark',   color: CAL.blue,               initial: 'M' },
    { name: 'Sanne',  color: 'oklch(68% 0.13 35)',   initial: 'S' },
    { name: 'Priya',  color: 'oklch(70% 0.13 165)',  initial: 'P' },
    { name: 'Jonas',  color: CAL.cyan,               initial: 'J' },
  ];

  const sel = (t) => {
    if (t < 0.6) return -1;
    if (t < 0.9) return 0;
    if (t < 1.15) return 1;
    if (t < 1.4) return 2;
    if (t < 1.65) return 3;
    return 1;
  };
  const selIdx = sel(localTime);
  const locked = localTime >= 1.65;

  const capOp = interpolate([0.3, 0.8, 2.1, 2.3], [0, 1, 1, 0], Easing.easeOutCubic)(localTime);
  const capY = interpolate([0.3, 0.8], [10, 0], Easing.easeOutCubic)(localTime);

  return (
    <div style={{
      position: 'absolute', inset: 0,
      opacity: exitOp,
      background: CAL.bg,
    }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse 60% 40% at 50% 60%, ${CAL.haloA} 0%, transparent 70%)`,
      }}/>

      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        opacity: entryOp,
        fontFamily: CAL.font,
      }}>
        <div style={{
          fontSize: 13, color: CAL.inkMuted,
          letterSpacing: '0.14em', textTransform: 'uppercase',
          marginBottom: 40, fontWeight: 500,
        }}>
          Sales team · round-robin
        </div>

        <div style={{ display: 'flex', gap: 40 }}>
          {members.map((m, i) => {
            const active = i === selIdx;
            const scale = active ? (locked ? 1.12 : 1.08) : 0.95;
            return (
              <div key={i} style={{ position: 'relative', textAlign: 'center' }}>
                <div style={{
                  width: 108, height: 108, borderRadius: 54,
                  background: m.color,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: '#fff', fontSize: 40, fontWeight: 700,
                  letterSpacing: '-0.02em',
                  transform: `scale(${scale})`,
                  transition: 'transform 180ms ease-out',
                  boxShadow: active ? '0 12px 30px -8px rgba(47,107,255,0.35)' : '0 6px 16px -6px rgba(20,22,40,0.15)',
                }}>{m.initial}</div>

                <div style={{
                  position: 'absolute',
                  inset: -8,
                  borderRadius: 64,
                  border: `2.5px solid ${CAL.blue}`,
                  opacity: active ? 1 : 0,
                  transition: 'opacity 120ms',
                }}/>

                <div style={{
                  fontSize: 15, color: CAL.ink, marginTop: 16, fontWeight: 500,
                }}>{m.name}</div>

                {active && locked && (
                  <div style={{
                    position: 'absolute',
                    top: -14, right: -14,
                    width: 34, height: 34, borderRadius: 17,
                    background: CAL.green,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    boxShadow: '0 4px 12px -2px rgba(0,0,0,0.15)',
                  }}>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M5 12l5 5 10-11"/>
                    </svg>
                  </div>
                )}
              </div>
            );
          })}
        </div>

        <div style={{
          marginTop: 48,
          display: 'flex', alignItems: 'center', gap: 10,
          fontSize: 20, color: CAL.ink,
        }}>
          {locked ? (
            <>
              <span style={{ fontWeight: 600 }}>Toegewezen aan Sanne</span>
              <span style={{ color: CAL.inkMuted }}>·</span>
              <span style={{ color: CAL.inkSoft }}>di 10:00</span>
            </>
          ) : (
            <span style={{ color: CAL.inkSoft, fontFamily: CAL.mono, fontSize: 16 }}>
              zoekt de eerstvolgende beschikbare…
            </span>
          )}
        </div>

        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 90,
          textAlign: 'center',
          opacity: capOp,
          transform: `translateY(${capY}px)`,
        }}>
          <div style={{ fontSize: 40, fontWeight: 600, color: CAL.ink, letterSpacing: '-0.03em' }}>
            Ook voor <span style={{ color: CAL.blue }}>teams</span>.
          </div>
        </div>
      </div>
    </div>
  );
}

window.SceneTeams = SceneTeams;