'use client';

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

export function EUFundingBadge() {
  return (
    <motion.div 
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1.5, ease: [0.16, 1, 0.3, 1] }}
      className="absolute top-0 right-0 w-[220px] md:w-[320px] h-[220px] md:h-[320px] z-[40] pointer-events-none select-none overflow-hidden"
      style={{
        maskImage: 'linear-gradient(225deg, black 15%, transparent 65%)',
        WebkitMaskImage: 'linear-gradient(225deg, black 15%, transparent 65%)',
      }}
    >
      {/* Background Flag with Scaling to fill the corner */}
      <div className="absolute inset-0 w-full h-full scale-[1.3] origin-top-right opacity-90">
        <Image
          src="/assets/eu-flag-perspective.png"
          alt="European Union Background"
          fill
          className="object-cover object-center"
          priority
        />
      </div>
      
      {/* Text overlaid on the flag */}
      <div className="absolute top-0 right-0 p-4 md:p-6 flex flex-col items-end text-right z-10 drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)]">
        <span className="block text-[8px] md:text-[10px] font-bold text-white/90 tracking-wide leading-snug">
          Kofinanziert von der
        </span>
        <span className="block text-[10px] md:text-[12px] font-extrabold text-white tracking-wider leading-snug uppercase">
          Europäischen Union
        </span>
      </div>
    </motion.div>
  );
}
