import React from "react";
import { AbsoluteFill, spring, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
import { THEME } from "../theme";
import { KineticText } from "../components/KineticText";
import { PhoneMockup } from "../components/PhoneMockup";

export const GroupScene: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Floating circles background
  const float1 = spring({
    frame,
    fps,
    config: { damping: 40, mass: 2, stiffness: 30 },
  });
  const y1 = interpolate(float1, [0, 1], [0, -20]);

  return (
    <AbsoluteFill
      style={{
        background: `radial-gradient(ellipse at 30% 70%, #60A5FA 0%, ${THEME.colors.group} 50%, #2563EB 100%)`,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        padding: "60px 50px",
        overflow: "hidden",
      }}
    >
      {/* Decorative circles */}
      <div
        style={{
          position: "absolute",
          top: 120,
          right: -60,
          width: 250,
          height: 250,
          borderRadius: "50%",
          background: "rgba(255,255,255,0.08)",
          transform: `translateY(${y1}px)`,
        }}
      />
      <div
        style={{
          position: "absolute",
          bottom: 200,
          left: -40,
          width: 180,
          height: 180,
          borderRadius: "50%",
          background: "rgba(255,255,255,0.06)",
          transform: `translateY(${-y1}px)`,
        }}
      />

      {/* Headline */}
      <div style={{ marginBottom: 50, maxWidth: 900, zIndex: 1 }}>
        <KineticText
          words={["Vote", "on", "games", "with", "your", "crew"]}
          fontSize={74}
          delay={4}
        />
      </div>

      {/* Phone mockup */}
      <div style={{ zIndex: 1 }}>
        <PhoneMockup screenshot="screen-4-poll-a.png" screenshotB="screen-4-poll-b.png" crossfadeAt={35} enterFrom="left" delay={10} scale={1.05} />
      </div>
    </AbsoluteFill>
  );
};
