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

  // Subtle background gradient pulse
  const pulse = spring({
    frame,
    fps,
    config: { damping: 30, mass: 1, stiffness: 40 },
  });
  const bgLightness = interpolate(pulse, [0, 1], [0, 3]);

  return (
    <AbsoluteFill
      style={{
        background: `radial-gradient(ellipse at 50% 30%, hsl(153, 42%, ${28 + bgLightness}%) 0%, ${THEME.colors.hero} 70%)`,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        padding: "60px 50px",
      }}
    >
      {/* Headline */}
      <div style={{ marginBottom: 50, maxWidth: 900 }}>
        <KineticText
          words={["Plan", "the", "ultimate", "sports", "road", "trip"]}
          fontSize={76}
          delay={4}
        />
      </div>

      {/* Phone mockup with scrolling home screen recording */}
      <PhoneMockup
        screenshot="screen-1-home.png"
        enterFrom="fade"
        delay={4}
        scale={1.05}
        sequenceFolder="home-sequence"
        sequenceFrameCount={92}
        sequenceStartAt={18}
      />
    </AbsoluteFill>
  );
};
