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

const FEATURE_ICONS = ["🔒", "🚗", "❄️", "📷"];

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

  return (
    <div style={{
      flex: 1, display: "grid", gridTemplateColumns: "1fr 1fr", gridTemplateRows: "1fr 1fr",
      width: "100%", height: "100%", gap: 6, background: "#111", fontFamily: "sans-serif",
    }}>
      {CLIENT.features.map((feat, i) => {
        const iconDelay = i * 10;
        const textDelay = i * 10 + 12;

        const iconScale = spring({ frame: frame - iconDelay, fps, config: { damping: 10, stiffness: 120 } });
        const iconOpacity = interpolate(frame - iconDelay, [0, 8], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
        const textY = interpolate(frame - textDelay, [0, 14], [24, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
        const textOpacity = interpolate(frame - textDelay, [0, 14], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
        const bgOpacity = interpolate(frame - iconDelay, [0, 10], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });

        return (
          <div key={feat} style={{
            display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
            background: i === 0 ? CLIENT.brand.primary : "rgba(255,255,255,0.05)",
            opacity: bgOpacity, overflow: "hidden", position: "relative",
          }}>
            <div style={{ fontSize: 80, lineHeight: 1, transform: `scale(${iconScale})`, opacity: iconOpacity, marginBottom: 20 }}>
              {FEATURE_ICONS[i]}
            </div>
            <div style={{ fontSize: 28, fontWeight: 700, color: "white", textAlign: "center", transform: `translateY(${textY}px)`, opacity: textOpacity, padding: "0 24px", lineHeight: 1.2 }}>
              {feat}
            </div>
          </div>
        );
      })}
    </div>
  );
};

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

  const offerOpacity = interpolate(frame, [0, 10], [0, 1], { extrapolateRight: "clamp" });
  const headlineY = interpolate(frame, [8, 22], [20, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
  const headlineOpacity = interpolate(frame, [8, 22], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
  const btnScale = spring({ frame: frame - 18, fps, config: { damping: 12 } });
  const phoneOpacity = interpolate(frame, [28, 40], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });

  return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", background: CLIENT.brand.dark, fontFamily: "sans-serif" }}>
      <div style={{ fontSize: 16, color: CLIENT.brand.primary, letterSpacing: 2, textTransform: "uppercase", marginBottom: 10, opacity: offerOpacity }}>
        {CLIENT.offer}
      </div>
      <div style={{ fontSize: 52, fontWeight: 700, color: "white", textAlign: "center", lineHeight: 1.2, whiteSpace: "pre-line", transform: `translateY(${headlineY}px)`, opacity: headlineOpacity }}>
        {CLIENT.ctaHeadline}
      </div>
      <div style={{ marginTop: 28, background: CLIENT.brand.primary, color: "white", borderRadius: 10, padding: "14px 40px", fontSize: 20, fontWeight: 600, transform: `scale(${btnScale})` }}>
        {CLIENT.website}
      </div>
      <div style={{ marginTop: 14, fontSize: 16, color: "rgba(255,255,255,0.4)", opacity: phoneOpacity }}>
        {CLIENT.phone} · Dillon, SC
      </div>
    </div>
  );
};