www_projectmycelium_com/src/pages/cloud/animations/SovereignComputer.tsx

"use client";

import { motion, useReducedMotion } from "framer-motion";
import clsx from "clsx";

export function SovereignComputer({ className }: { className?: string }) {
  const prefersReducedMotion = useReducedMotion();

  return (
    <div
      className={clsx(
        "w-full h-24 flex items-center justify-center bg-[#0a0a0a]",
        className
      )}
      aria-hidden="true"
      role="img"
    >
      <svg viewBox="0 0 180 120" className="w-full h-full" fill="none">
        {/* Outer secure boundary (shield / isolation) */}
        <motion.rect
          x={40}
          y={20}
          width={100}
          height={80}
          rx={14}
          stroke="#4B5563"
          strokeWidth={2}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.6 }}
        />

        {/* Inner compute chip */}
        <motion.rect
          x={70}
          y={45}
          width={40}
          height={30}
          rx={4}
          fill="#00b8db"
          initial={{ scale: 0.8, opacity: 0 }}
          animate={{
            opacity: 1,
            scale:
              !prefersReducedMotion
                ? [1, 1.12, 1]
                : 1,
          }}
          transition={{
            duration: 1.6,
            repeat: prefersReducedMotion ? 0 : Infinity,
            repeatType: "mirror",
            ease: [0.22, 1, 0.36, 1],
          }}
        />

        {/* Compute lines out → show isolation of data paths */}
        {[
          [90, 45, 90, 20],
          [90, 75, 90, 100],
          [70, 60, 40, 60],
          [110, 60, 140, 60],
        ].map(([x1, y1, x2, y2], i) => (
          <motion.line
            key={i}
            x1={x1}
            y1={y1}
            x2={x2}
            y2={y2}
            stroke="#4B5563"
            strokeWidth={2}
            initial={{ pathLength: 0, opacity: 0 }}
            animate={{ pathLength: 1, opacity: 1 }}
            transition={{
              delay: 0.1 * i,
              duration: 0.6,
              ease: [0.22, 1, 0.36, 1],
            }}
          />
        ))}

        {/* Cyan data pulses traveling outward */}
        {[
          [90, 45, 90, 20],
          [90, 75, 90, 100],
          [70, 60, 40, 60],
          [110, 60, 140, 60],
        ].map(([x1, y1, x2, y2], i) => (
          <motion.circle
            key={`pulse-${i}`}
            cx={x1}
            cy={y1}
            r={3}
            fill="#00b8db"
            initial={{ opacity: 0 }}
            animate={{
              opacity: [0, 1, 0],
              cx: [x1, x2],
              cy: [y1, y2],
            }}
            transition={{
              delay: 0.15 * i,
              duration: 1.4,
              repeat: prefersReducedMotion ? 0 : Infinity,
              repeatType: "loop",
              ease: "linear",
            }}
          />
        ))}
      </svg>
    </div>
  );
}