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

  // Gentle warm glow
  const glow = spring({
    frame,
    fps,
    config: { damping: 40, mass: 2, stiffness: 20 },
  });
  const glowSize = interpolate(glow, [0, 1], [40, 55]);

  return (
    <AbsoluteFill
      style={{
        background: `radial-gradient(ellipse at 50% 50%, #FFFBEB ${glowSize}%, ${THEME.colors.itinerary} 100%)`,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        padding: "60px 50px",
      }}
    >
      {/* Headline */}
      <div style={{ marginBottom: 50, maxWidth: 900 }}>
        <KineticText
          words={["Beautiful", "itineraries,", "one", "tap"]}
          fontSize={74}
          color={THEME.colors.textDark}
          delay={4}
          textShadow="none"
        />
      </div>

      {/* Phone mockup */}
      <PhoneMockup
        screenshot="screen-5-itinerary.png"
        enterFrom="bottom"
        delay={10}
        scale={1.05}
        sequenceFolder="trip-sequence"
        sequenceFrameCount={244}
        sequenceStartAt={18}
        sequenceSpeed={2.5}
      />
    </AbsoluteFill>
  );
};
