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

  // Subtle shine sweep
  const shine = spring({
    frame: frame - 5,
    fps,
    config: { damping: 25, mass: 1, stiffness: 50 },
  });
  const shineX = interpolate(shine, [0, 1], [-200, 1200]);

  return (
    <AbsoluteFill
      style={{
        background: `linear-gradient(135deg, ${THEME.colors.customize} 0%, #F59E0B 50%, ${THEME.colors.customize} 100%)`,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        padding: "60px 50px",
        overflow: "hidden",
      }}
    >
      {/* Shine overlay */}
      <div
        style={{
          position: "absolute",
          top: 0,
          left: shineX,
          width: 200,
          height: "100%",
          background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent)",
          transform: "skewX(-15deg)",
        }}
      />

      {/* Headline */}
      <div style={{ marginBottom: 50, maxWidth: 900, zIndex: 1 }}>
        <KineticText
          words={["Your", "Trip.", "Your", "Rules."]}
          fontSize={80}
          color={THEME.colors.textDark}
          delay={4}
          textShadow={THEME.textShadowLight}
        />
      </div>

      {/* Phone mockup */}
      <div style={{ zIndex: 1 }}>
        <PhoneMockup
          screenshot="screen-3-wizard.png"
          enterFrom="scale"
          delay={10}
          scale={1.05}
          sequenceFolder="plan-trip-sequence"
          sequenceFrameCount={156}
          sequenceStartAt={18}
          sequenceSpeed={2.5}
        />
      </div>
    </AbsoluteFill>
  );
};
