import { interpolate, spring, useCurrentFrame, useVideoConfig, Img, staticFile } from "remotion";
import React from "react";
import { CLIENT } from "../client";

export const SceneLocation: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Ken Burns — slow zoom over full 150 frames (5s)
  const mapScale = interpolate(frame, [0, 150], [1.0, 1.25], { extrapolateRight: "clamp" });

  // Overlay text fades in after map appears
  const badgeScale = spring({ frame: frame - 20, fps, config: { damping: 14 } });
  const titleOpacity = interpolate(frame, [25, 45], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
  const titleY = interpolate(frame, [25, 45], [20, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
  const addrOpacity = interpolate(frame, [40, 58], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });

  // Pin springs in
  const pinScale = spring({ frame: frame - 10, fps, config: { damping: 10, stiffness: 120 } });
  const pinOpacity = interpolate(frame, [10, 22], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });

  return (
    <div style={{ width: "100%", height: "100%", position: "relative", overflow: "hidden", fontFamily: "sans-serif" }}>

      {/* Map with Ken Burns zoom */}
      <div style={{
        position: "absolute", inset: 0,
        transform: `scale(${mapScale})`,
        transformOrigin: "center center",
      }}>
        <Img
          src={staticFile("map.png")}
          style={{ width: "100%", height: "100%", objectFit: "cover" }}
        />
      </div>

      {/* Dark overlay so text is readable */}
      <div style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,0.38)" }} />

      {/* Pin at center of map */}
      <div style={{
        position: "absolute", top: "50%", left: "50%",
        transform: `translate(-50%, -100%) scale(${pinScale})`,
        opacity: pinOpacity,
      }}>
        <div style={{
          width: 44, height: 44, borderRadius: "50%",
          background: CLIENT.brand.primary, border: "4px solid white",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <div style={{ width: 14, height: 14, borderRadius: "50%", background: "white" }} />
        </div>
        <div style={{
          width: 0, height: 0, margin: "0 auto",
          borderLeft: "10px solid transparent",
          borderRight: "10px solid transparent",
          borderTop: `14px solid ${CLIENT.brand.primary}`,
        }} />
      </div>

      {/* Bottom overlay with text */}
      <div style={{
        position: "absolute", bottom: 0, left: 0, right: 0,
        background: "linear-gradient(transparent, rgba(0,0,0,0.85))",
        padding: "80px 64px 48px",
      }}>
        <div style={{
          display: "inline-block",
          background: CLIENT.brand.primary, color: "white", fontSize: 13, letterSpacing: 2,
          textTransform: "uppercase", padding: "5px 16px", borderRadius: 30, marginBottom: 16,
          transform: `scale(${badgeScale})`,
        }}>
          Now open in Dillon
        </div>
        <div style={{
          fontSize: 52, fontWeight: 700, color: "white", lineHeight: 1.15,
          transform: `translateY(${titleY}px)`, opacity: titleOpacity,
        }}>
          Storage that fits your life.
        </div>
        <div style={{ fontSize: 20, color: "rgba(255,255,255,0.65)", marginTop: 10, opacity: addrOpacity }}>
          {CLIENT.address}
        </div>
      </div>

    </div>
  );
};