'use client'

import { motion } from 'framer-motion'
import Image from 'next/image'

export function ProgrammerGraphic() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.8 }}
      className="relative w-full max-w-md mx-auto aspect-[3/5] lg:aspect-square"
    >
      <div className="relative w-full h-full">
        <Image
          src="/programmierer-vector.svg"
          alt="Programmierung: Von 1976 bis heute – 50 Jahre Code"
          fill
          className="object-contain drop-shadow-lg dark:invert"
          priority
        />
      </div>
      
      {/* Subtle decorative elements */}
      <div className="absolute inset-0 pointer-events-none">
        {/* 1976 Badge */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.5, duration: 0.6 }}
          className="absolute top-4 left-4 font-mono text-xs text-accent bg-background/80 px-2 py-1 rounded border border-border/50"
        >
          1976
        </motion.div>
        
        {/* 2026 Badge */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.7, duration: 0.6 }}
          className="absolute bottom-4 right-4 font-mono text-xs text-accent bg-background/80 px-2 py-1 rounded border border-border/50"
        >
          2026
        </motion.div>
        
        {/* 50 Years Center Badge */}
        <motion.div
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ delay: 1, duration: 0.8 }}
          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 font-mono text-2xl font-bold text-accent/30"
        >
          50
        </motion.div>
      </div>
    </motion.div>
  )
}