import { AGDP_NODES } from "@/features/home/constants/process_contents";
import { AgdpOrbitNode } from "./AgdpOrbitNode";
import { AgdpRewardPathLabel } from "./AgdpRewardPathLabel";

type Props = { visible: boolean };

export function AgdpEngineDiagram({ visible }: Props) {
  return (
    <div
      className={`relative w-full max-w-[320px] md:max-w-[500px] aspect-square mx-auto mt-16 mb-24 md:mb-32 ${
        visible ? "animate-fade-in-scale animation-delay-300" : "opacity-0"
      }`}
    >
      <div className="absolute top-[20%] left-[20%] right-[20%] bottom-[20%] rounded-full border border-white/5 shadow-[0_0_40px_rgba(255,255,255,0.02)_inset]" />

      <svg className="absolute inset-0 w-full h-full animate-[spin_20s_linear_infinite]" viewBox="0 0 100 100" aria-hidden="true">
        <defs>
          <linearGradient id="agdp-ring-grad" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="var(--color-violet-500)" stopOpacity="0.1" />
            <stop offset="50%" stopColor="var(--color-lavender-300)" stopOpacity="0.5" />
            <stop offset="100%" stopColor="var(--color-violet-500)" stopOpacity="0.1" />
          </linearGradient>
        </defs>
        <circle
          cx="50"
          cy="50"
          r="30"
          fill="none"
          stroke="url(#agdp-ring-grad)"
          strokeWidth="0.5"
          strokeDasharray="2 2"
        />
      </svg>

      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20">
        <div className="w-40 h-40 md:w-56 md:h-56 rounded-full bg-navy-900/90 backdrop-blur-xl border border-white/5 flex flex-col items-center justify-center shadow-[0_0_60px_rgba(167,139,250,0.1)]">
          <span className="display-36 md:display-48 text-transparent bg-clip-text bg-gradient-to-r from-marketing-cream via-marketing-lilac to-marketing-ice mb-2 break-keep">
            AGDP
          </span>
          <h3 className="headline-20 md:headline-30 text-white text-center leading-tight break-keep">
            Infinite
            <br />
            Marketing
          </h3>
        </div>
      </div>

      {AGDP_NODES.map((node) => (
        <AgdpOrbitNode key={node.letter} node={node} />
      ))}

      <AgdpRewardPathLabel />
    </div>
  );
}