import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
import { COLORS, FONT, SPRING_CFG } from "../../styles";

const TOOL_LABELS = [
  "Email",
  "Notes",
  "CRM",
  "LinkedIn",
  "X",
  "WhatsApp",
  "Docs",
  "Sheets",
  "Tickets",
  "Calendar",
  "DB",
  "API",
];

export const TikTokHook = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const terminalIn = spring({ fps, frame, config: SPRING_CFG });
  const gridIn = spring({ fps, frame: Math.max(0, frame - 18), config: SPRING_CFG });
  const captionIn = interpolate(frame, [20, 34], [0, 1], { extrapolateRight: "clamp" });

  return (
    <AbsoluteFill style={{ padding: 72 }}>
      <div
        style={{
          marginTop: 120,
          borderRadius: 32,
          border: `1px solid ${COLORS.borderBlue}`,
          background: "rgba(7, 8, 18, 0.92)",
          boxShadow: `0 20px 60px ${COLORS.accentGlow}`,
          padding: "28px 32px",
          opacity: terminalIn,
          transform: `translateY(${(1 - terminalIn) * 80}px)`,
        }}
      >
        <div style={{ display: "flex", gap: 12, marginBottom: 26 }}>
          {["#ff5f57", "#febc2e", "#28c840"].map((dot) => (
            <div key={dot} style={{ width: 14, height: 14, borderRadius: 999, background: dot }} />
          ))}
        </div>
        <div
          style={{
            fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
            fontWeight: 700,
            fontSize: 44,
            color: COLORS.accentLight,
            letterSpacing: -1.2,
          }}
        >
          {"> connect squaremcp"}
          <span style={{ color: COLORS.text, opacity: (frame % 20) < 10 ? 1 : 0 }}>|</span>
        </div>
      </div>

      <div
        style={{
          marginTop: 48,
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 18,
          opacity: gridIn,
          transform: `scale(${0.9 + gridIn * 0.1})`,
        }}
      >
        {TOOL_LABELS.map((label, index) => (
          <div
            key={label}
            style={{
              borderRadius: 24,
              border: `1px solid ${COLORS.borderBlue}`,
              background: index % 2 === 0 ? "rgba(18, 18, 31, 0.95)" : "rgba(10, 17, 38, 0.92)",
              padding: "26px 16px",
              minHeight: 112,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              color: COLORS.text,
              fontFamily: FONT,
              fontWeight: 700,
              fontSize: 28,
              boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.03)",
            }}
          >
            {label}
          </div>
        ))}
      </div>

      <div
        style={{
          marginTop: "auto",
          marginBottom: 68,
          fontFamily: FONT,
          fontSize: 54,
          fontWeight: 800,
          color: COLORS.text,
          lineHeight: 1.05,
          letterSpacing: -1.8,
          opacity: captionIn,
          transform: `translateY(${(1 - captionIn) * 40}px)`,
        }}
      >
        One API key.
        <br />
        One workflow layer.
      </div>
    </AbsoluteFill>
  );
};