'use client'
 
 import { motion } from 'framer-motion'
 import {
   SiNextdotjs,
   SiTypescript,
   SiFramer,
   SiRadixui,
   SiTailwindcss,
 } from 'react-icons/si'
 import type { ReactNode } from 'react'
 
 type TechKey = 'next' | 'typescript' | 'framer' | 'radix' | 'tailwind'
 
 interface Tech {
   key: TechKey
   name: string
   version: string
 }
 
 const TECHS: Tech[] = [
   { key: 'next', name: 'NEXT.JS', version: 'v15.0' },
   { key: 'typescript', name: 'TYPESCRIPT', version: 'v5.4' },
   { key: 'framer', name: 'FRAMER MOTION', version: 'v11.0' },
   { key: 'radix', name: 'RADIX UI', version: 'v2.0' },
   { key: 'tailwind', name: 'TAILWIND CSS', version: 'v3.4' },
 ]
 
 const LOGOS: Record<TechKey, ReactNode> = {
   next: <SiNextdotjs className="w-full h-full" />,
   typescript: <SiTypescript className="w-full h-full" />,
   framer: <SiFramer className="w-full h-full" />,
   radix: <SiRadixui className="w-full h-full" />,
   tailwind: <SiTailwindcss className="w-full h-full" />,
 }
 
 export function CoreStack({ className }: { className?: string }) {
   return (
     <div className={`w-full flex flex-col items-center justify-center py-16 sm:py-24 ${className ?? ''}`}>
       <div className="mb-8 sm:mb-10 flex flex-col items-center">
         <div className="flex items-center gap-3 mb-2">
           <div className="h-[1px] w-8 bg-gradient-to-r from-transparent to-foreground/20" />
           <span className="text-[9px] tracking-[0.5em] text-muted-foreground font-black uppercase">
             Core Stack
           </span>
           <div className="h-[1px] w-8 bg-gradient-to-l from-transparent to-foreground/20" />
         </div>
         <h2 className="text-foreground text-2xl font-extralight tracking-tighter">
           Engineered <span className="text-muted-foreground font-serif italic">Solutions</span>
         </h2>
       </div>
 
       <div className="flex flex-wrap items-center justify-center gap-3 sm:gap-6 lg:gap-8" style={{ perspective: '1200px' }}>
         {TECHS.map((t) => (
           <TechItem key={t.key} tech={t} />
         ))}
       </div>
     </div>
   )
 }
 
 function TechItem({ tech }: { tech: Tech }) {
   return (
     <motion.div
       className="relative flex flex-col items-center"
       initial="initial"
       whileHover="hover"
     >
       <div className="absolute bottom-[98%] flex flex-col items-center pointer-events-none z-30">
         <motion.div
           className="flex flex-col items-center"
           style={{ willChange: 'transform, opacity' }}
           variants={{
             initial: { opacity: 0, y: 10, scale: 0.9 },
             hover: { opacity: 1, y: 0, scale: 1 },
           }}
           transition={{ type: 'spring', stiffness: 350, damping: 25 }}
         >
           <div className="relative px-4 py-1.5 rounded-full bg-background border border-border overflow-hidden shadow-[0_0_20px_rgba(0,0,0,0.08)] whitespace-nowrap flex items-center gap-2">
             <span className="text-[9px] font-bold tracking-[0.15em] text-foreground">
               {tech.name}
             </span>
             <span className="text-[7px] font-mono text-cyan-500/70">{tech.version}</span>
             <motion.div
               className="absolute inset-0 bg-gradient-to-r from-transparent via-cyan-500/10 to-transparent w-1/2 -skew-x-12"
               animate={{ x: ['-100%', '200%'] }}
               transition={{ repeat: Infinity, duration: 2, ease: 'linear' }}
             />
             <div className="absolute bottom-[-1px] left-1/2 -translate-x-1/2 w-2/3 h-[1.5px] bg-gradient-to-r from-transparent via-cyan-400 to-transparent shadow-[0_0_15px_rgba(34,211,238,0.8)]" />
           </div>
           <motion.div
             className="w-[1px] bg-gradient-to-b from-cyan-400 via-foreground/10 to-transparent"
             style={{ originY: 0 }}
             variants={{
               initial: { height: 0 },
               hover: { height: 35 },
             }}
             transition={{ duration: 0.3, ease: 'easeOut' }}
           />
         </motion.div>
       </div>
 
       <motion.div
         variants={{
           initial: { rotateX: 0, y: 0 },
           hover: {
             rotateX: 55,
             y: 10,
             transition: { type: 'spring', stiffness: 150, damping: 20 },
           },
         }}
         style={{
           transformStyle: 'preserve-3d',
           willChange: 'transform',
         }}
         className="group relative w-16 h-16 flex items-center justify-center cursor-pointer bg-transparent"
       >
         <div className="absolute inset-0 rounded-xl border border-border transition-all duration-500 group-hover:border-x-transparent group-hover:border-t-transparent group-hover:border-b-foreground/60 group-hover:rounded-none group-hover:scale-x-110" />
         <div className="absolute inset-[5px] rounded-lg border border-dotted border-foreground/[0.08] transition-opacity duration-300 group-hover:opacity-0" />
         <motion.div
           className="absolute inset-[12px] z-10 text-foreground/60 transition-all duration-300 group-hover:text-foreground flex items-center justify-center"
           style={{ willChange: 'transform' }}
           variants={{
             initial: { translateZ: 0, y: 0 },
             hover: {
               translateZ: 45,
               y: -5,
               transition: { type: 'spring', stiffness: 300, damping: 20 },
             },
           }}
         >
           <div className="w-full h-full">{LOGOS[tech.key]}</div>
         </motion.div>
         {([0, 90, 180, 270] as number[]).map((angle, i) => (
           <motion.div
             key={i}
             className="absolute w-1.5 h-1.5 border-t border-l border-white/0 group-hover:border-white/40 transition-all duration-500"
             style={{
               rotate: `${angle}deg`,
               top: '-1px',
               left: '-1px',
               transformOrigin: '32px 32px',
             }}
           />
         ))}
       </motion.div>
     </motion.div>
   )
 }
 
 export default CoreStack