// Design System La Banquise - Système centralisé de styles
export const designSystem = {
  // 🎨 Gradients
  gradients: {
    primary: "bg-gradient-to-r from-banquise-blue to-banquise-blue-light",
    primaryBr: "bg-gradient-to-br from-banquise-blue to-banquise-blue-light",
    card: "bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5",
    cardHover: "hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8",
    discord: "bg-gradient-to-r from-[#5865F2] to-[#7289DA]", // Couleurs officielles Discord
    discordHover: "hover:from-[#4752C4] hover:to-[#5B6EAE]", // Couleurs Discord hover officielles
    hero: "bg-gradient-to-br from-banquise-blue to-banquise-blue-dark",
    section: "bg-gradient-to-b from-white/95 to-white"
  },

  // 🎯 Boutons optimisés
  buttons: {
    base: "inline-flex items-center justify-center font-bold border-0 rounded-2xl transition-all duration-300 active:scale-95",
    effects: "hover:shadow-xl hover:-translate-y-1 hover:scale-105",
    variants: {
      primary: "text-white",
      discord: "group relative overflow-hidden text-white font-semibold rounded-xl hover:shadow-[#5865F2]/25", // Ombre officielle Discord
      auth: "group relative overflow-hidden text-white font-semibold rounded-xl",
      secondary: "bg-white/10 backdrop-blur-sm text-white border border-white/20",
      outline: "bg-transparent border-2 border-banquise-blue text-banquise-blue hover:bg-banquise-blue hover:text-white"
    },
    sizes: {
      sm: "px-3 py-2 text-sm",
      md: "px-4 lg:px-6 py-2.5 lg:py-3 text-sm lg:text-base",
      lg: "px-6 lg:px-8 py-3 lg:py-4 text-base lg:text-lg"
    }
  },

  // 🃏 Cartes
  cards: {
    base: "backdrop-blur-lg rounded-2xl border transition-all duration-300",
    borders: {
      default: "border-banquise-blue-lightest/30",
      hover: "hover:border-banquise-blue-lightest/50",
      active: "border-banquise-blue/50"
    },
    effects: {
      hover: "hover:shadow-xl",
      lift: "hover:-translate-y-4 hover:shadow-2xl",
      interactive: "cursor-pointer hover:-translate-y-4 hover:shadow-2xl active:scale-95"
    },
    backgrounds: {
      glass: "bg-white/80 backdrop-blur-lg",
      gradient: "bg-gradient-to-br from-white/90 to-white/80",
      solid: "bg-white"
    }
  },

  // 📝 Typographie
  typography: {
    headings: {
      xl: "text-3xl sm:text-4xl md:text-5xl font-heading font-bold tracking-tight",
      lg: "text-2xl sm:text-3xl md:text-4xl font-heading font-bold tracking-tight",
      md: "text-xl sm:text-2xl md:text-3xl font-heading font-bold tracking-tight",
      sm: "text-lg sm:text-xl md:text-2xl font-heading font-semibold tracking-tight"
    },
    body: {
      xl: "text-lg sm:text-xl md:text-2xl leading-relaxed",
      lg: "text-base sm:text-lg md:text-xl leading-relaxed",
      md: "text-sm sm:text-base md:text-lg leading-relaxed",
      sm: "text-xs sm:text-sm md:text-base leading-relaxed"
    },
    colors: {
      primary: "text-banquise-gray",
      secondary: "text-banquise-blue-dark",
      muted: "text-banquise-gray/80",
      light: "text-banquise-blue-lightest",
      white: "text-white/90"
    },
    weights: {
      normal: "font-normal",
      medium: "font-medium",
      semibold: "font-semibold",
      bold: "font-bold"
    }
  },

  // 📐 Layout
  layout: {
    sections: {
      default: "py-12 sm:py-16 md:py-20",
      compact: "py-8 sm:py-12 md:py-16",
      spacious: "py-16 sm:py-20 md:py-24"
    },
    containers: {
      default: "w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8",
      narrow: "w-full max-w-4xl mx-auto px-4 sm:px-6 md:px-8",
      wide: "w-full max-w-7xl mx-auto px-4 sm:px-6 md:px-8"
    },
    dividers: {
      default: "w-20 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto rounded-full",
      small: "w-12 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto rounded-full",
      large: "w-32 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto rounded-full"
    },
    grids: {
      responsive: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8",
      auto: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6",
      services: "grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8"
    }
  },

  // 🎯 Icônes
  icons: {
    sizes: {
      xs: "w-4 h-4",
      sm: "w-6 h-6",
      md: "w-8 h-8",
      lg: "w-12 h-12",
      xl: "w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24"
    },
    containers: {
      card: "rounded-2xl flex items-center justify-center shadow-lg",
      small: "w-10 h-10 rounded-lg flex items-center justify-center text-white",
      service: "text-3xl sm:text-4xl lg:text-5xl"
    },
    effects: {
      hover: "transition-transform duration-300 hover:scale-110",
      spin: "animate-spin",
      bounce: "animate-bounce"
    }
  },

  // 🧭 Navigation
  navigation: {
    links: {
      desktop: "px-4 lg:px-6 py-2.5 lg:py-3 text-white/90 hover:text-white font-medium text-sm lg:text-base rounded-xl transition-all duration-300 hover:bg-white/10 hover:backdrop-blur-sm relative group",
      mobile: "group flex items-center p-4 text-white/90 hover:text-white no-underline rounded-2xl hover:bg-gradient-to-r hover:from-banquise-blue/20 hover:to-banquise-blue-light/20 transition-all duration-300 border border-transparent hover:border-banquise-blue-lightest/20"
    },
    effects: {
      underline: "after:absolute after:bottom-1 after:left-1/2 after:w-0 after:h-0.5 after:bg-banquise-blue-lightest after:transition-all after:duration-300 group-hover:after:w-3/4 group-hover:after:left-1/8",
      glow: "hover:drop-shadow-lg hover:drop-shadow-banquise-blue-lightest/50"
    }
  },

  // ⚡ Animations & Transitions
  animations: {
    transitions: {
      fast: "transition-all duration-200",
      default: "transition-all duration-300",
      slow: "transition-all duration-500"
    },
    transforms: {
      lift: "hover:-translate-y-1",
      liftLarge: "hover:-translate-y-4",
      scale: "hover:scale-105",
      scaleSmall: "hover:scale-102"
    },
    loading: {
      spin: "animate-spin",
      pulse: "animate-pulse",
      bounce: "animate-bounce"
    }
  },

  // 🌊 Effets spéciaux La Banquise
  effects: {
    ocean: {
      wave: "animate-pulse",
      depth: "backdrop-blur-xl",
      surface: "bg-gradient-to-b from-transparent to-banquise-blue/5"
    },
    ice: {
      crystal: "backdrop-blur-lg bg-white/10",
      frost: "backdrop-blur-sm bg-white/5",
      shine: "bg-gradient-to-br from-white/20 to-transparent"
    }
  }
} as const;

// 🎨 Utilitaires de combinaison
export const combineStyles = {
  // Bouton primaire complet
  primaryButton: `${designSystem.buttons.base} ${designSystem.buttons.effects} ${designSystem.gradients.primary} ${designSystem.buttons.variants.primary}`,
  
  // Carte interactive complète
  interactiveCard: `${designSystem.cards.base} ${designSystem.cards.borders.default} ${designSystem.cards.effects.interactive} ${designSystem.cards.backgrounds.glass}`,
  
  // Section standard
  standardSection: `${designSystem.layout.sections.default} ${designSystem.layout.containers.default}`,
  
  // Titre de section
  sectionTitle: `${designSystem.typography.headings.lg} ${designSystem.typography.colors.primary}`,
  
  // Lien de navigation desktop
  navLink: `${designSystem.navigation.links.desktop} ${designSystem.navigation.effects.underline}`,
  
  // Grid responsive services
  servicesGrid: designSystem.layout.grids.services
} as const;

// Type pour l'autocomplétion
export type DesignSystemKey = keyof typeof designSystem;
export type CombinedStyleKey = keyof typeof combineStyles;