/* ─────────────────────────────────────────────────────────────────────────────
   Central motion vocabulary for the entire app.
   Import variants + transitions from here — never hardcode them in components.
───────────────────────────────────────────────────────────────────────────── */

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

/* ── Easing curves ──────────────────────────────────────────────────────────── */
export const EASE = {
  out:     [0.22, 1, 0.36, 1]    as const,
  inOut:   [0.65, 0, 0.35, 1]    as const,
  snappy:  [0.25, 0.46, 0.45, 0.94] as const,
  spring:  { type: "spring", stiffness: 400, damping: 30 } as const,
  smooth:  { type: "spring", stiffness: 260, damping: 30 } as const,
  gentle:  { type: "spring", stiffness: 180, damping: 26 } as const,
  bouncy:  { type: "spring", stiffness: 340, damping: 20 } as const,
};

/* ── Shared transition presets ──────────────────────────────────────────────── */
export const T: Record<string, Transition> = {
  page:    { duration: 0.45, ease: EASE.out },
  reveal:  { duration: 0.55, ease: EASE.out },
  card:    { duration: 0.25, ease: EASE.snappy },
  modal:   { duration: 0.32, ease: EASE.out },
  drawer:  { duration: 0.36, ease: EASE.out },
  fast:    { duration: 0.18, ease: EASE.snappy },
  spring:  EASE.spring,
  smooth:  EASE.smooth,
  gentle:  EASE.gentle,
};

/* ── Page transition ────────────────────────────────────────────────────────── */
export const PAGE_VARIANTS: Variants = {
  initial: { opacity: 0, scale: 0.985, y: 14 },
  enter:   { opacity: 1, scale: 1,     y: 0,  transition: T.page },
  exit:    { opacity: 0, scale: 0.988, y: -8, transition: { duration: 0.25, ease: EASE.inOut } },
};

/* ── Reveal animations ──────────────────────────────────────────────────────── */
export const REVEAL_VARIANTS: Record<string, Variants> = {
  fadeUp: {
    hidden:  { opacity: 0, y: 40, filter: "blur(6px)",  scale: 0.98 },
    visible: { opacity: 1, y: 0,  filter: "blur(0px)",  scale: 1, transition: T.reveal },
  },
  fadeIn: {
    hidden:  { opacity: 0 },
    visible: { opacity: 1, transition: T.reveal },
  },
  scaleUp: {
    hidden:  { opacity: 0, scale: 0.94, y: 16 },
    visible: { opacity: 1, scale: 1,    y: 0,  transition: T.reveal },
  },
  slideLeft: {
    hidden:  { opacity: 0, x: -24 },
    visible: { opacity: 1, x: 0,   transition: T.reveal },
  },
  slideRight: {
    hidden:  { opacity: 0, x: 24 },
    visible: { opacity: 1, x: 0,   transition: T.reveal },
  },
};

/* ── Stagger container ──────────────────────────────────────────────────────── */
export const STAGGER_VARIANTS: Variants = {
  hidden:  {},
  visible: { transition: { staggerChildren: 0.07, delayChildren: 0.05 } },
};

/* ── Card hover ─────────────────────────────────────────────────────────────── */
export const CARD_VARIANTS: Variants = {
  rest:    { scale: 1, y: 0,   boxShadow: "0 2px 12px rgba(0,0,0,0.15)" },
  hover:   { scale: 1.02, y: -5, boxShadow: "0 16px 40px rgba(0,0,0,0.28)" },
  tap:     { scale: 0.985 },
};

/* ── Button ─────────────────────────────────────────────────────────────────── */
export const BUTTON_VARIANTS: Variants = {
  rest:    { scale: 1,    y: 0  },
  hover:   { scale: 1.025, y: -2 },
  tap:     { scale: 0.965 },
};

/* ── Modal ──────────────────────────────────────────────────────────────────── */
export const MODAL_OVERLAY_VARIANTS: Variants = {
  hidden:  { opacity: 0 },
  visible: { opacity: 1, transition: T.modal },
  exit:    { opacity: 0, transition: { duration: 0.22, ease: EASE.inOut } },
};

export const MODAL_CONTENT_VARIANTS: Variants = {
  hidden:  { opacity: 0, scale: 0.93, y: 20, filter: "blur(4px)"  },
  visible: { opacity: 1, scale: 1,    y: 0,  filter: "blur(0px)", transition: T.modal },
  exit:    { opacity: 0, scale: 0.95, y: 12, filter: "blur(2px)", transition: { duration: 0.2, ease: EASE.inOut } },
};

/* ── Bottom sheet ───────────────────────────────────────────────────────────── */
export const SHEET_VARIANTS: Variants = {
  hidden:  { y: "100%", opacity: 0 },
  visible: { y: 0,      opacity: 1, transition: T.drawer },
  exit:    { y: "100%", opacity: 0, transition: { duration: 0.26, ease: EASE.inOut } },
};

/* ── Drawer (left sidebar) ──────────────────────────────────────────────────── */
export const DRAWER_VARIANTS: Variants = {
  hidden:  { x: "-100%", opacity: 0.6 },
  visible: { x: 0,       opacity: 1,   transition: T.drawer },
  exit:    { x: "-100%", opacity: 0.6, transition: { duration: 0.28, ease: EASE.inOut } },
};

/* ── Image reveal ───────────────────────────────────────────────────────────── */
export const IMAGE_VARIANTS: Variants = {
  hidden:  { opacity: 0, scale: 1.06, filter: "blur(4px)"  },
  visible: { opacity: 1, scale: 1,    filter: "blur(0px)", transition: { duration: 0.65, ease: EASE.out } },
};

/* ── List item stagger child ────────────────────────────────────────────────── */
export const LIST_ITEM_VARIANTS: Variants = {
  hidden:  { opacity: 0, y: 18, scale: 0.97 },
  visible: { opacity: 1, y: 0,  scale: 1,   transition: T.reveal },
};