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 SearchScene: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Animated split position
  const splitProgress = spring({
    frame: frame - 2,
    fps,
    config: { damping: 18, mass: 0.8, stiffness: 100 },
  });
  const splitY = interpolate(splitProgress, [0, 1], [100, 55]);

  return (
    <AbsoluteFill
      style={{
        background: `linear-gradient(180deg, ${THEME.colors.search} 0%, ${THEME.colors.search} ${splitY}%, ${THEME.colors.searchDark} ${splitY}%, ${THEME.colors.searchDark} 100%)`,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        padding: "60px 50px",
      }}
    >
      {/* Headline */}
      <div style={{ marginBottom: 50, maxWidth: 900 }}>
        <KineticText
          words={["Tap.", "Search.", "Go."]}
          fontSize={84}
          delay={4}
          staggerFrames={5}
        />
      </div>

      {/* Phone mockup */}
      <PhoneMockup
        screenshot="screen-2-search.png"
        enterFrom="right"
        delay={10}
        scale={1.05}
        sequenceFolder="all-trips-sequence"
        sequenceFrameCount={126}
        sequenceStartAt={18}
        sequenceSpeed={2.5}
      />
    </AbsoluteFill>
  );
};
