import { motion } from 'framer-motion';

export function ParticlesBg() {
  const particles = Array.from({ length: 28 }, (_, i) => ({
    id: i,
    x: `${(i * 37) % 100}%`,
    y: `${(i * 23) % 100}%`,
    delay: (i % 8) * 0.35,
    size: 1 + (i % 3),
  }));

  return (
    <div className="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden>
      {particles.map((p) => (
        <motion.span
          key={p.id}
          className="absolute rounded-full bg-cyan-400/30"
          style={{
            left: p.x,
            top: p.y,
            width: p.size,
            height: p.size,
          }}
          animate={{ opacity: [0.15, 0.55, 0.15], scale: [1, 1.8, 1] }}
          transition={{ duration: 4 + (p.id % 4), repeat: Infinity, delay: p.delay, ease: 'easeInOut' }}
        />
      ))}
    </div>
  );
}

export function GridBackground() {
  return (
    <div
      className="pointer-events-none absolute inset-0 bg-[length:48px_48px] bg-grid-fade opacity-[0.35] [mask-image:radial-gradient(ellipse_at_center,black,transparent_70%)]"
      aria-hidden
    />
  );
}

export function RfidHologram() {
  return (
    <motion.div
      className="relative mx-auto h-48 w-48 md:h-56 md:w-56"
      animate={{ rotateY: [0, 12, 0, -12, 0], rotateX: [0, 6, 0, -6, 0] }}
      transition={{ duration: 10, repeat: Infinity, ease: 'easeInOut' }}
      style={{ perspective: 800 }}
    >
      <div className="absolute inset-0 rounded-3xl border border-cyan-400/40 bg-gradient-to-br from-cyan-500/10 via-transparent to-sky-500/10 shadow-glow" />
      <div className="absolute inset-4 rounded-2xl border border-dashed border-cyan-300/30" />
      <motion.div
        className="absolute left-1/2 top-1/2 h-16 w-24 -translate-x-1/2 -translate-y-1/2 rounded-lg border border-cyan-400/60 bg-cyan-500/10"
        animate={{ boxShadow: ['0 0 20px rgba(34,211,238,0.3)', '0 0 45px rgba(34,211,238,0.55)', '0 0 20px rgba(34,211,238,0.3)'] }}
        transition={{ duration: 3, repeat: Infinity }}
      />
      <span className="absolute -bottom-8 left-1/2 w-max -translate-x-1/2 text-[10px] font-semibold uppercase tracking-[0.35em] text-cyan-300/80">
        RFID Core
      </span>
    </motion.div>
  );
}
