'use client';

import { motion } from 'framer-motion';

export function EUFundingBadge() {
  return (
    <motion.div 
      initial={{ opacity: 0, x: 20 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ duration: 0.8, delay: 0.8, ease: [0.16, 1, 0.3, 1] }}
      className="fixed top-24 right-4 md:right-6 lg:right-8 z-40 pointer-events-none select-none"
    >
      <div className="bg-white p-2.5 rounded-sm shadow-[0_8px_30px_rgba(0,0,0,0.12)] border border-neutral-200/60 flex flex-col items-center w-[110px] sm:w-[130px]">
        {/* EU Flag */}
        <svg viewBox="0 0 810 540" xmlns="http://www.w3.org/2000/svg" className="w-full h-auto">
          <path d="M0 0h810v540H0z" fill="#003399"/>
          <g fill="#fc0" transform="translate(405 270)">
            <use href="#eu-star" y="-180"/>
            <use href="#eu-star" y="180"/>
            <use href="#eu-star" x="-180"/>
            <use href="#eu-star" x="180"/>
            <use href="#eu-star" x="-155.885" y="-90"/>
            <use href="#eu-star" x="155.885" y="90"/>
            <use href="#eu-star" x="-155.885" y="90"/>
            <use href="#eu-star" x="155.885" y="-90"/>
            <use href="#eu-star" x="-90" y="-155.885"/>
            <use href="#eu-star" x="90" y="155.885"/>
            <use href="#eu-star" x="-90" y="155.885"/>
            <use href="#eu-star" x="90" y="-155.885"/>
          </g>
          <defs>
            <path id="eu-star" d="m0-30 7.053 21.708H29.39L10.36 7.64l7.054 21.709L0 15.692l-17.414 13.657 7.054-21.71L-29.39-8.292h22.337z"/>
          </defs>
        </svg>
        {/* Text */}
        <div className="mt-2 text-center w-full">
          <span className="block text-[9.5px] sm:text-[11.5px] font-bold text-[#003399] leading-[1.25] tracking-tight font-sans">
            Kofinanziert von der<br />Europäischen Union
          </span>
        </div>
      </div>
    </motion.div>
  );
}