import type { Variants, Transition } from 'framer-motion'

// Shared easing
const ease = [0.16, 1, 0.3, 1] as const

// Scroll-triggered reveal: fade in + slide up
export const revealVariants: Variants = {
  hidden: {
    opacity: 0,
    y: 40,
  },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.6,
      ease,
    },
  },
}

// Stagger container for child elements
export const staggerContainer: Variants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.08,
    },
  },
}

// Stagger with wider gap (for larger elements)
export const staggerContainerWide: Variants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.1,
    },
  },
}

// Fade in only (no movement)
export const fadeVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { duration: 0.5, ease },
  },
}

// Scale + fade (for CTAs, buttons)
export const scaleVariants: Variants = {
  hidden: {
    opacity: 0,
    scale: 0.95,
  },
  visible: {
    opacity: 1,
    scale: 1,
    transition: { duration: 0.3, ease },
  },
}

// Slide from left
export const slideLeftVariants: Variants = {
  hidden: { opacity: 0, x: -40 },
  visible: {
    opacity: 1,
    x: 0,
    transition: { duration: 0.6, ease },
  },
}

// Slide from right
export const slideRightVariants: Variants = {
  hidden: { opacity: 0, x: 40 },
  visible: {
    opacity: 1,
    x: 0,
    transition: { duration: 0.6, ease },
  },
}

// Page transition
export const pageTransition: Transition = {
  duration: 0.4,
  ease,
}

export const pageVariants: Variants = {
  initial: { opacity: 0, y: 20 },
  animate: {
    opacity: 1,
    y: 0,
    transition: pageTransition,
  },
  exit: {
    opacity: 0,
    y: -20,
    transition: { duration: 0.3, ease },
  },
}

// Spring for interactive elements (select, toggle)
export const springTransition: Transition = {
  type: 'spring',
  stiffness: 400,
  damping: 25,
}

// Viewport settings for scroll-triggered animations
export const viewportOnce = {
  once: true,
  amount: 0.15 as const,
}
