Iso Deploy

"use client";

import { motion, useReducedMotion } from "motion/react";

/**
 * Isometric illustration — an iso cube "system" with a pulsing status light,
 * shipping small chips out along the iso-up axis. Themeable accent via `brand`;
 * animation stills under reduced-motion.
 */
export function IsoDeploy({
  brand = "#FF4701",
  className,
}: {
  brand?: string;
  className?: string;
}) {
  const reduce = useReducedMotion();

  return (
    <svg viewBox="0 0 200 210" className={className} style={{ ["--brand" as string]: brand }}>
      <IsoPlatform />

      <g>
        <path d="M100 96 L138 116 L100 136 L62 116 Z" fill="white" stroke="rgba(0,0,0,0.14)" strokeWidth="1" />
        <path d="M100 136 L138 116 L138 144 L100 164 Z" fill="rgba(0,0,0,0.06)" stroke="rgba(0,0,0,0.12)" strokeWidth="1" />
        <path d="M100 136 L62 116 L62 144 L100 164 Z" fill="rgba(0,0,0,0.03)" stroke="rgba(0,0,0,0.12)" strokeWidth="1" />
        <motion.circle
          cx="100"
          cy="116"
          r="2.6"
          fill="var(--brand)"
          animate={reduce ? undefined : { opacity: [0.4, 1, 0.4] }}
          transition={{ duration: 1.6, repeat: Infinity }}
        />
        <line x1="78" y1="128" x2="100" y2="140" stroke="rgba(0,0,0,0.18)" strokeWidth="0.8" />
        <line x1="100" y1="146" x2="122" y2="134" stroke="rgba(0,0,0,0.18)" strokeWidth="0.8" />
      </g>

      {[0, 1, 2].map((i) => (
        <motion.g
          key={i}
          initial={{ x: 0, y: 0, opacity: 0 }}
          animate={reduce ? undefined : { x: [0, 28, 56], y: [0, -14, -28], opacity: [0, 1, 0] }}
          transition={{ duration: 2.2, repeat: Infinity, delay: i * 0.6, ease: "easeOut" }}
        >
          <path d="M138 96 L148 101 L138 106 L128 101 Z" fill="var(--brand)" opacity="0.9" />
        </motion.g>
      ))}

      <path d="M138 96 L172 78" stroke="rgba(217,119,6,0.35)" strokeWidth="1" strokeDasharray="2 3" />
    </svg>
  );
}

/** Shared isometric floor tile — keeps the diorama on a consistent plane. */
function IsoPlatform() {
  return (
    <g>
      <path
        d="M100 138 L168 168 L100 198 L32 168 Z"
        fill="rgba(217,119,6,0.05)"
        stroke="rgba(217,119,6,0.18)"
        strokeWidth="0.8"
      />
      <path
        d="M100 138 L168 168 M100 138 L32 168 M100 198 L32 168 M100 198 L168 168"
        stroke="rgba(0,0,0,0.05)"
        strokeWidth="0.6"
      />
      {[0.25, 0.5, 0.75].map((t) => (
        <g key={t} stroke="rgba(0,0,0,0.05)" strokeWidth="0.5">
          <line x1={100 - 68 * t} y1={138 + 30 * t} x2={168 - 68 * t} y2={168 + 30 * t} />
          <line x1={100 + 68 * t} y1={138 + 30 * t} x2={32 + 68 * t} y2={168 + 30 * t} />
        </g>
      ))}
    </g>
  );
}