'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: 2, ease: [0.16, 1, 0.3, 1] }}
      className="absolute top-0 right-0 w-[350px] md:w-[550px] h-[350px] md:h-[550px] z-0 pointer-events-none select-none"
      style={{
        maskImage: 'radial-gradient(ellipse at top right, black 10%, transparent 70%)',
        WebkitMaskImage: 'radial-gradient(ellipse at top right, black 10%, transparent 70%)',
      }}
    >
      <Image
        src="/assets/eu-flag-perspective.png"
        alt="European Union Background"
        fill
        className="object-cover object-top opacity-50 mix-blend-screen"
        priority
      />
    </motion.div>
  );
}