const MyComposition = () => {
  const frame = useCurrentFrame();
  const { width, height } = useVideoConfig();
  const clamp = { extrapolateLeft: "clamp", extrapolateRight: "clamp" };
  const orbitDots = [];
  for (let i = 0; i < 8; i++) {
    const baseAngle = (i / 8) * 360;
    const angle = baseAngle + interpolate(frame, [0, 120], [0, 360]);
    const rad = (angle * Math.PI) / 180;
    const rx = Math.cos(rad) * 260;
    const ry = Math.sin(rad) * 80;
    const depthScale = interpolate(Math.sin(rad), [-1, 1], [0.4, 1]);
    const dotOpacity = interpolate(
      frame,
      [0, 20],
      [0, depthScale * 0.8],
      clamp,
    );
    orbitDots.push({ rx, ry, depthScale, dotOpacity });
  }
  const orbs = [
    { x: 0.15, y: 0.2, size: 200, color: "139,92,246", speed: 0.6 },
    { x: 0.85, y: 0.25, size: 160, color: "99,102,241", speed: 0.8 },
    { x: 0.1, y: 0.8, size: 180, color: "168,85,247", speed: 0.5 },
    { x: 0.88, y: 0.75, size: 220, color: "79,70,229", speed: 0.7 },
    { x: 0.5, y: 0.12, size: 140, color: "124,58,237", speed: 0.9 },
  ];
  const titleProg = interpolate(frame, [18, 48], [0, 1], clamp);
  const titleScale =
    titleProg < 1
      ? interpolate(titleProg, [0, 0.5, 0.75, 1], [0, 1.2, 0.95, 1])
      : 1;
  const titleOpacity = interpolate(frame, [18, 32], [0, 1], clamp);
  const titleGlow = interpolate(frame, [30, 60, 90, 120], [30, 60, 40, 60]);
  const words = ["Create.", "Share.", "Inspire."];
  const lineW = interpolate(frame, [58, 88], [0, 180], clamp);
  const lineOpacity = interpolate(frame, [58, 70], [0, 1], clamp);
  const breath = interpolate(frame, [0, 60, 120], [1, 1.012, 1]);
  return (
    <AbsoluteFill
      style={{
        backgroundColor: "#110525",
        justifyContent: "center",
        alignItems: "center",
        overflow: "hidden",
        transform: "scale(" + breath + ")",
      }}
    >
      {orbs.map((o, i) => {
        const drift = interpolate(frame, [0, 120], [0, 30 * o.speed]);
        const floatY = interpolate(frame, [0, 60, 120], [0, -12 * o.speed, 0]);
        const orbOpacity = interpolate(
          frame,
          [i * 3, i * 3 + 25],
          [0, 0.2],
          clamp,
        );
        return (
          <div
            key={"o" + i}
            style={{
              position: "absolute",
              left: o.x * width - o.size / 2 + drift,
              top: o.y * height - o.size / 2 + floatY,
              width: o.size,
              height: o.size,
              borderRadius: "50%",
              background:
                "radial-gradient(circle, rgba(" +
                o.color +
                ",0.25), transparent 70%)",
              opacity: orbOpacity,
              filter: "blur(30px)",
            }}
          />
        );
      })}
      {orbitDots.map((d, i) => (
        <div
          key={"d" + i}
          style={{
            position: "absolute",
            left: width / 2 + d.rx - 5,
            top: height / 2 + d.ry - 30,
            width: 10 * d.depthScale,
            height: 10 * d.depthScale,
            borderRadius: "50%",
            backgroundColor: "#A78BFA",
            opacity: d.dotOpacity,
            boxShadow: "0 0 " + 16 * d.depthScale + "px rgba(167,139,250,0.8)",
          }}
        />
      ))}
      <div
        style={{
          opacity: titleOpacity,
          transform: "scale(" + titleScale + ")",
          fontSize: 80,
          fontWeight: 900,
          color: "white",
          textAlign: "center",
          letterSpacing: -3,
          textShadow:
            "0 0 " +
            titleGlow +
            "px rgba(139,92,246,0.6), 0 0 " +
            titleGlow * 2 +
            "px rgba(139,92,246,0.2)",
        }}
      >
        remotion<span style={{ color: "#A78BFA" }}>.cool</span>
      </div>
      <div style={{ display: "flex", gap: 24, marginTop: 20 }}>
        {words.map((word, i) => {
          const wOpacity = interpolate(
            frame,
            [45 + i * 10, 57 + i * 10],
            [0, 1],
            clamp,
          );
          const wY = interpolate(
            frame,
            [45 + i * 10, 57 + i * 10],
            [25, 0],
            clamp,
          );
          const wScale = interpolate(
            frame,
            [45 + i * 10, 57 + i * 10],
            [0.8, 1],
            clamp,
          );
          return (
            <div
              key={i}
              style={{
                opacity: wOpacity,
                transform: "translateY(" + wY + "px) scale(" + wScale + ")",
                fontSize: 26,
                color: "rgba(255,255,255,0.85)",
                fontWeight: 300,
                letterSpacing: 5,
                textShadow: "0 0 20px rgba(167,139,250,0.3)",
              }}
            >
              {word}
            </div>
          );
        })}
      </div>
      <div
        style={{
          position: "absolute",
          bottom: height * 0.2,
          width: lineW,
          height: 2,
          opacity: lineOpacity,
          background:
            "linear-gradient(90deg, transparent, #A78BFA, #6366F1, #A78BFA, transparent)",
          boxShadow: "0 0 15px rgba(167,139,250,0.5)",
        }}
      />
    </AbsoluteFill>
  );
};
