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

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

  const headingOpacity = interpolate(frame, [0, 12], [0, 1], { extrapolateRight: "clamp" });

  return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", background: CLIENT.brand.dark, padding: "0 60px" }}>
      <div style={{ fontSize: 16, letterSpacing: 2, textTransform: "uppercase", color: "rgba(255,255,255,0.45)", marginBottom: 28, fontFamily: "sans-serif", opacity: headingOpacity }}>
        Units for every need
      </div>
      <div style={{ display: "flex", gap: 16, width: "100%" }}>
        {CLIENT.units.map((u, i) => {
          const delay = i * 5 + 6;
          const sc = spring({ frame: frame - delay, fps, config: { damping: 14 } });
          return (
            <div key={u.size} style={{
              flex: 1, background: u.featured ? `rgba(232,70,10,0.18)` : "rgba(255,255,255,0.06)",
              border: `1px solid ${u.featured ? CLIENT.brand.primary : "rgba(255,255,255,0.1)"}`,
              borderRadius: 12, padding: "20px 12px", textAlign: "center",
              fontFamily: "sans-serif", transform: `scale(${sc})`,
            }}>
              <div style={{ fontSize: 26, fontWeight: 700, color: "white" }}>{u.size}</div>
              <div style={{ fontSize: 13, color: "rgba(255,255,255,0.4)", marginTop: 4 }}>{u.desc}</div>
              <div style={{ fontSize: 16, color: CLIENT.brand.primary, fontWeight: 600, marginTop: 10 }}>{u.price}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
};