import type { Transition, Variants } from "framer-motion";

/** Easing premium — Stripe / Linear style */
export const easePremium = [0.22, 1, 0.36, 1] as [number, number, number, number];

export const transitionFast: Transition = {
  duration: 0.25,
  ease: easePremium,
};

export const transitionBase: Transition = {
  duration: 0.45,
  ease: easePremium,
};

export const transitionSlow: Transition = {
  duration: 0.65,
  ease: easePremium,
};

/** Opacidade sempre 1 no estado inicial — evita tela branca se o JS atrasar ou falhar. */
export const fadeUp = (delay = 0, distance = 24): Variants => ({
  hidden: { opacity: 1, y: distance },
  visible: {
    opacity: 1,
    y: 0,
    transition: { delay, duration: 0.55, ease: easePremium },
  },
});

export const fadeIn: Variants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1, transition: transitionBase },
};

export const scaleIn: Variants = {
  hidden: { opacity: 0, scale: 0.96 },
  visible: { opacity: 1, scale: 1, transition: transitionBase },
};

export const slideInLeft: Variants = {
  hidden: { opacity: 0, x: -20 },
  visible: { opacity: 1, x: 0, transition: transitionBase },
};

export const slideInRight: Variants = {
  hidden: { opacity: 0, x: 20 },
  visible: { opacity: 1, x: 0, transition: transitionBase },
};

/** Filhos motion devem ser diretos — não envolver com SimpleGrid entre pai e filhos. */
export const staggerContainer: Variants = {
  hidden: {},
  visible: {
    transition: { staggerChildren: 0.08, delayChildren: 0.05 },
  },
};

export const staggerItem: Variants = {
  hidden: { opacity: 1, y: 16 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.45, ease: easePremium },
  },
};

/** Props para reveal no scroll sem esconder conteúdo no SSR. */
export const revealInViewProps = (delay = 0, distance = 20) => ({
  initial: { opacity: 1, y: distance },
  whileInView: { opacity: 1, y: 0 },
  viewport: { once: true, margin: "-40px", amount: 0.15 as const },
  transition: { delay, duration: 0.45, ease: easePremium },
});

export const modalOverlay: Variants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1, transition: { duration: 0.2 } },
  exit: { opacity: 0, transition: { duration: 0.18 } },
};

export const modalContent: Variants = {
  hidden: { opacity: 0, scale: 0.98, y: 4 },
  visible: {
    opacity: 1,
    scale: 1,
    y: 0,
    transition: { duration: 0.16, ease: easePremium },
  },
  exit: {
    opacity: 0,
    scale: 0.98,
    y: 2,
    transition: { duration: 0.12, ease: easePremium },
  },
};

export const bannerSlide: Variants = {
  enter: { opacity: 0, y: 20, filter: "blur(4px)" },
  center: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: { duration: 0.5, ease: easePremium },
  },
  exit: {
    opacity: 0,
    y: -12,
    filter: "blur(2px)",
    transition: { duration: 0.35, ease: easePremium },
  },
};