import { Variants } from 'framer-motion';

// Smooth easing curves
export const easing = {
  smooth: [0.6, 0.01, 0.05, 0.95],
  snappy: [0.25, 0.46, 0.45, 0.94],
  bouncy: [0.68, -0.55, 0.265, 1.55],
  elegant: [0.43, 0.13, 0.23, 0.96],
};

// Hero section animations
export const heroVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.15,
      delayChildren: 0.3,
    },
  },
};

export const heroItemVariants: Variants = {
  hidden: { opacity: 0, y: 30 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.8,
      ease: easing.elegant,
    },
  },
};

// Fade in up animation
export const fadeInUp: Variants = {
  hidden: {
    opacity: 0,
    y: 60,
  },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.7,
      ease: easing.elegant,
    },
  },
};

// Scale in animation
export const scaleIn: Variants = {
  hidden: {
    opacity: 0,
    scale: 0.8,
  },
  visible: {
    opacity: 1,
    scale: 1,
    transition: {
      duration: 0.6,
      ease: easing.smooth,
    },
  },
};

// Slide in from left
export const slideInLeft: Variants = {
  hidden: {
    opacity: 0,
    x: -60,
  },
  visible: {
    opacity: 1,
    x: 0,
    transition: {
      duration: 0.7,
      ease: easing.elegant,
    },
  },
};

// Slide in from right
export const slideInRight: Variants = {
  hidden: {
    opacity: 0,
    x: 60,
  },
  visible: {
    opacity: 1,
    x: 0,
    transition: {
      duration: 0.7,
      ease: easing.elegant,
    },
  },
};

// Stagger container
export const staggerContainer: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.12,
      delayChildren: 0.1,
    },
  },
};

// Stagger item
export const staggerItem: Variants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.5,
      ease: easing.elegant,
    },
  },
};

// Button hover animation
export const buttonHover = {
  scale: 1.02,
  transition: {
    duration: 0.2,
    ease: easing.snappy,
  },
};

export const buttonTap = {
  scale: 0.98,
};

// Card hover animation
export const cardHover = {
  y: -8,
  transition: {
    duration: 0.3,
    ease: easing.smooth,
  },
};

// Glow effect
export const glowHover = {
  boxShadow: '0 0 30px rgba(51, 102, 255, 0.6)',
  transition: {
    duration: 0.3,
  },
};

// Navigation animation
export const navVariants: Variants = {
  hidden: {
    y: -100,
    opacity: 0,
  },
  visible: {
    y: 0,
    opacity: 1,
    transition: {
      duration: 0.6,
      ease: easing.elegant,
    },
  },
};

// Page transition
export const pageTransition = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 },
  exit: { opacity: 0, y: -20 },
  transition: { duration: 0.4, ease: easing.elegant },
};

// Parallax scroll effect
export const parallaxScroll = (scrollY: number, factor: number = 0.5) => ({
  y: scrollY * factor,
  transition: { type: 'tween', ease: 'linear', duration: 0 },
});

// Scroll reveal with intersection observer
export const scrollRevealVariants: Variants = {
  hidden: {
    opacity: 0,
    y: 50,
  },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.7,
      ease: easing.elegant,
    },
  },
};

// Magnetic button effect (advanced)
export const magneticEffect = (x: number, y: number, strength: number = 0.3) => ({
  x: x * strength,
  y: y * strength,
  transition: {
    type: 'spring',
    stiffness: 150,
    damping: 15,
    mass: 0.1,
  },
});
